diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
new file mode 100644
index 00000000000..ced06132a9e
--- /dev/null
+++ b/.github/workflows/CI.yml
@@ -0,0 +1,33 @@
+# 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
+    # 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/.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/CONTRIBUTING.md b/CONTRIBUTING.md
index 18349950c0e..327ea5004e8 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -54,8 +54,9 @@ 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_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 +85,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).
 
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..e6132304d6f
--- /dev/null
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -0,0 +1,17 @@
+---
+# 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..fe9b7483a31
--- /dev/null
+++ b/_templates/playground/new/index.md.ejs.t
@@ -0,0 +1,60 @@
+---
+arbitrary: <% nameWithoutIon = name.replace('ion-', '') %>
+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,
+<% 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/javascript.md.ejs.t b/_templates/playground/new/javascript.md.ejs.t
new file mode 100644
index 00000000000..067c56a59c5
--- /dev/null
+++ b/_templates/playground/new/javascript.md.ejs.t
@@ -0,0 +1,14 @@
+---
+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..b1bf2cd21eb
--- /dev/null
+++ b/_templates/playground/new/vue.md.ejs.t
@@ -0,0 +1,28 @@
+---
+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/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/**/*
diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md
index 2e4f4afa24f..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 1fd76d76af8..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,25 +118,21 @@ export class LoginComponent {
 
 どちらのオプションも同様のナビゲーションメカニズムを提供し、異なるユースケースで利用することができます。
 
-:::note
-相対URLを使用したナビゲーションに関するメモ：現在、複数のナビゲーションスタックをサポートするために、相対URLはサポートされていません。
-:::
-
-### Navigating using LocationStrategy.historyGo
+### 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.
+Angular Router には [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) メソッドがあり、アプリケーションの履歴を進んだり戻ったりすることができます。例を見てみましょう。
 
-Say you have the following application history:
+次のようなアプリケーションの履歴があるとします：
 
-`/pageA` --> `/pageB` --> `/pageC`
+`/ページA` --> `/ページB` --> `/ページC`。
 
-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`.
+もし `/pageC` で `LocationStrategy.historyGo(-2)` を呼び出すと、 `/pageA` に戻る。その後、 `LocationStrategy.historyGo(2)` を呼び出すと、 `/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.
+`LocationStrategy.historyGo()` の主な特徴は、アプリケーションの履歴が線形であることを想定していることです。つまり、`LocationStrategy.historyGo()` は非線形のルーティングを使用するアプリケーションでは使用すべきではありません。詳しくは [リニアルーティング対非リニアルーティング](#linear-routing-versus-non-linear-routing) を参照してください。
 
 ## Lazy loading routes
 
-現在のルート設定では、すべてのComponentが、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。
+現在のルート設定では、すべての Component が、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。
 
 ```tsx
 
@@ -352,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 = [
@@ -384,7 +379,7 @@ const routes: Routes = [
 ];
 ```
 
-ここでは、 `tabs` パスを読み込んでいます。この例では、pathを `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabsのマークアップは、次のとおりです:
+ここでは、 `tabs` パスを読み込んでいます。この例では、path を `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabs のマークアップは、次のとおりです:
 
 ```html
 <ion-tabs>
@@ -397,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/pwa.md b/docs/angular/pwa.md
index 9f915668dfa..684c150c457 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/angular/slides.md b/docs/angular/slides.md
index e9ffe1b23f8..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`     |
 
@@ -109,6 +109,7 @@ swiper-slide {
   display: flex;
   position: relative;
 
+  flex-direction: column;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
@@ -134,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
@@ -152,9 +155,7 @@ export class HomePage {
 ```html
 <!-- home.page.html -->
 
-<swiper-container [modules]="swiperModules">
-  ...
-</swiper-container>
+<swiper-container [modules]="swiperModules"> ... </swiper-container>
 ```
 
 :::note
@@ -168,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>
@@ -187,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>.
@@ -303,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/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 60406db92d5..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 での除算という計算を拒否しました)。
 
 ### ページとコンポーネント
 
@@ -82,7 +82,7 @@ Pages は単なる Angular コンポーネントです。そのため、ペー
 
 ```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();
@@ -113,7 +111,7 @@ describe('TabsPage', () => {
 
 ## Service
 
-Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主にHTTP操作やデータ操作を実行するデータの service の2つの大まかなカテゴリーのいずれかに分類されます。
+Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主に HTTP 操作やデータ操作を実行するデータの service の 2 つの大まかなカテゴリーのいずれかに分類されます。
 
 ### 基本的な Service のテスト
 
@@ -182,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> のガイドを参照してください。
 
 このようなテストの基本的な設定は次のようになります:
 
@@ -291,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 の設定
@@ -302,11 +300,11 @@ describe('NamePipe', () => {
 
 エンドツーエンドのテストは、アプリケーションとの共通のユーザー対話を自動化し、アプリケーションが応答するのを待ち、対話の結果を判別するために DOM を検査します。これには、多くの DOM 操作と試験が必要です。これらをすべて手作業で行うと、テストは非常に脆くなり、見て理解することや保守が困難になります。
 
-ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用するAPIを提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。
+ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用する API を提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。
 
 ##### ベースページオブジェクト
 
-多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用されるCSSセレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。
+多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用される CSS セレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。
 
 すべてのページオブジェクトがサポートを必要とするいくつかのベースメソッドを実装する例を次に示します:
 
@@ -503,7 +501,7 @@ describe('Login', () => {
 
 ### 設定
 
-デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する1つの方法を示します。
+デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する 1 つの方法を示します。
 
 #### テスト環境
 
@@ -572,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/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md
index 0500def6158..0d839b8e2f5 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;
 }
 ```
 
@@ -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!
   });
 }
 ```
diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.md
index 588ebd4397e..cf9b948c221 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/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md
index 79759c48c53..f2fc61b1fd1 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 f07de10841e..16235a008a4 100644
--- a/docs/angular/your-first-app/5-adding-mobile.md
+++ b/docs/angular/your-first-app/5-adding-mobile.md
@@ -38,14 +38,14 @@ 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;
   }
   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;
@@ -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 = Date.now() + '.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:
@@ -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/docs/api/datetime.md b/docs/api/datetime.md
index 85877fd9ad3..22998f8f62a 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 />
 
-## テーマ
+## Styling
+
+### グローバルテーマ
 
 Ionicの強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。
 
 この方法の利点は、`ion-datetime`だけでなく、すべてのコンポーネントが自動的にこのテーマを利用できることです。
 
-<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 />
 
 ## タイムゾーン
 
@@ -336,7 +345,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 });
diff --git a/docs/api/input.md b/docs/api/input.md
index c28cb4dc359..50f6f52ed63 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
 
 ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
@@ -45,6 +52,23 @@ 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
 
@@ -94,7 +118,27 @@ 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/docs/api/item-sliding.md b/docs/api/item-sliding.md
index 2f6fd70b029..75d1412d181 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';
 
 ## 拡張可能なオプション
 
-オプションは、あるポイントを超えてスワイプすると、アイテムの幅いっぱいに広がるように拡張することができます。これは、 [item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができるようになります。
+オプションは、スワイプがあるポイントを超えると、親となる `ion-item` の幅いっぱいに展開されます。これは、[item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができます。
 
 import Expandable from '@site/static/usage/v7/item-sliding/expandable/index.md';
 
diff --git a/docs/api/menu.md b/docs/api/menu.md
index dd952566387..20902fa474d 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" />
 
 
-Menuコンポーネントは、現在のビューの横からスライドするナビゲーションパネルです。
-デフォルトでは左からスライドしますが、サイドはオーバーライドできます。
-Menuの表示はmodeによって異なりますが、表示するtypeはmenuのtypeによって変更することができます。
-menu要素は、root content要素と同じ深度である必要があります。
-コンテンツにつけるMenuの数に制限はありません。
-これらはテンプレートから、またはプログラムでMenuControllerを使用して制御できます。
+メニューコンポーネントは、現在のビューの横からスライドしてくるナビゲーションドロワーです。デフォルトでは、開始側を使用し、LTRの場合は左から、RTLの場合は右からスライドさせますが、サイドをオーバーライドすることができます。メニューの表示はモードによって異なりますが、表示タイプは利用可能なメニュータイプのいずれかに変更することができます。
+
+メニュー要素はルートコンテンツ要素の兄弟要素でなければなりません。コンテンツにはいくつでもメニューを付けることができる。これらのメニューはテンプレートから制御するか、`MenuController`を使用してプログラムで制御することができます。
 
 ## 基本的な使い方
 
-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
 
-[ion-menu-toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
+[menu toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
 
 import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
 
 <MenuToggle />
 
+
 ## Menu Types
 
 `type`プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。
@@ -47,7 +46,28 @@ 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/docs/api/modal.md b/docs/api/modal.md
index 987532187c3..3d826b76943 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -83,7 +83,7 @@ import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/f
 
 ### スワイプで閉じないようにする
 
-開発者は、ユーザーがスワイプしてモーダルを閉じるのを防ぎたい場合があります。これは `canDismiss` のコールバック関数を設定し、`role` が `gesture` でないことをチェックすることで実現できます。
+開発者は、ユーザがスワイプしてカードやシートのモーダルを閉じないようにしたい場合があります。これは `canDismiss` にコールバック関数を設定し、`role` が `gesture` でないかチェックすることで実現できます。
 
 import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md';
 
@@ -127,6 +127,12 @@ import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/bac
 
 <SheetBackgroundContentExample />
 
+#### 自動の高さのシート
+
+import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md';
+
+<SheetAutoHeightExample />
+
 #### ハンドルの動作
 
 シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。 `handleBehavior` プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 61e847bcf50..72d04ddb32b 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -19,7 +19,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Navは、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。
 
-RouterOutletとは異なり、Navは特定のルーターに関連付けられていません。つまり、Navコンポーネントをロードして他のコンポーネントをスタックに追加しても、ルーター全体のアプリケーションには影響しません。これは、独自のサブナビゲーションを必要とするが、アプリのURLに縛られないモーダルを持つことができるユースケースに適しています。
+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.
+:::
 
 ## NavLinkを利用する
 
diff --git a/docs/api/range.md b/docs/api/range.md
index 2464ca37fdd..19cb292d0fd 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -22,18 +22,38 @@ Rangeスライダは、スライダノブを動かして、ユーザーが値の
 
 デフォルトでは、Rangeスライダーの最小値は`0`、最大値は`100`です。これは `min` と `max` プロパティで設定することができます。
 
-## 基本的な使い方
+## Labels
 
-import Basic from '@site/static/usage/v7/range/basic/index.md';
+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:
 
-<Basic />
+- `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 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, 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';
+
+<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 +136,9 @@ Developers can perform this migration one range at a time. While developers can
 
 ### 最新の構文の使い方
 
-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/docs/api/router-link.md b/docs/api/router-link.md
index 051704b0d28..f3d9618ce42 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">コンテンツ</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
-
 router linkコンポーネントは、指定されたリンクに移動するために使用します。ブラウザのアンカータグと同様に、hrefで場所を、directionで遷移のアニメーションを指定することができます。
 
 :::note
  Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
 :::
 
-
-
+See the [Router](./router) documentation for more information.
 
 ## プロパティ
 <Props />
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index 40953824dad..6894c6757b5 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
 
-検索バーにDebounceを設定して、`ionChange`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。
+検索バーにDebounceを設定して、`ionInput`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。
 
 import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
 
diff --git a/docs/api/select.md b/docs/api/select.md
index 29a5fa9e4e1..dbccd8cdea7 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -24,7 +24,41 @@ selectは、子要素 `<ion-select-option>` とともに使用する必要があ
 
 `value` が `<ion-select>` にセットされている場合、オプションはその値に基づいて選択済みになります。
 
-## 単一選択
+## 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 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. 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, 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';
+
+<NoVisibleLabel />
+
+## Single Selection
 
 デフォルトでは、selectを使用すると、ユーザは1つのOptionだけを選択できます。Alertのインターフェースでは、Optionのリストがradio button形式で表示されます。action sheetインタフェースは、1つの値選択でのみ使用できます。selectコンポーネントの値は、選択したオプションの値の値を受け取ります。
 
@@ -48,11 +82,11 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde
 
 <PopoverExample />
 
-## 複数選択
+## Multiple Selection
 
-`multiple` 属性を追加して選択すると、複数のOptionを選択できます。複数のOptionを選択できる場合は、checkbox形式のオプションのリストがAlertオーバーレイで表示されます。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.
 
-Note: `action-sheet` と `popover` インターフェイスでは、複数選択は動作しません
+Note: the `action-sheet` interface will not work with multiple selection.
 
 import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
 
@@ -60,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
 
@@ -83,15 +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 />
-  
-
-## Label Placement
-
-Labelsは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
-
-import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
-
-<LabelPlacement />
 
 ## Justification
   
@@ -103,63 +128,81 @@ 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 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.
+
+### 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.
 
-- [アラートのカスタマイズ](alert.md#customization)
-- [アクションシートのカスタマイズ](action-sheet.md#customization)
-- [ポップオーバーのカスタマイズ](popover.md#customization)
+import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.md';
 
-ただし、Selectオプションでは、スタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡す機能があります。オプションのカスタマイズの使用例については、[Selectオプションのドキュメント](select-option.md)を参照してください。
+<IconFlipBehaviorExample />
 
 ## 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';
 
@@ -177,7 +220,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 {
@@ -186,42 +229,42 @@ 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
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index 7d32a2ec0ad..f9b0c64eec2 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -37,7 +37,15 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
 
 <Colors />
 
-## CSSカスタムプロパティ
+### 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/docs/api/tab-bar.md b/docs/api/tab-bar.md
index 62d6b90f0c7..4fbcf8375f2 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -28,7 +28,7 @@ TabBarは、[tab buttons](tab-button.md)のセットを含むUIコンポーネ
 
 ## 使い方
 
-<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 cb2c489accf..3f845ed55b3 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -27,7 +27,7 @@ tab buttonは、[tab bar](tab-bar.md)の内部に配置されるUIコンポー
 
 ## 使い方
 
-<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 5bbda670ff4..fbb5a07dca6 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 タブコンポーネントは、[tabs](tabs.md) の子コンポーネントです。各タブには、アプリまたは単一のビューのトップレベルのナビゲーション スタックを含めることができます。アプリには多くのタブがあり、それぞれが独立したナビゲーションを持つことができます。
 
 :::note
- Note: このコンポーネントは、バニラまたはステンシルJavaScriptプロジェクトでのみ使用する必要があります。Angular、React、Vue のアプリでは、タブコンポーネントを宣言するために `ion-tab` を使用する必要はありません。
+ Note: このコンポーネントは、Vanilla JavaScriptプロジェクトでのみ使用してください。Angular、React、Vueアプリでは、`ion-tab`を使ってタブコンポーネントを宣言する必要はありません。
 :::
 
 
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 27c74dc86b0..54d2823e6bc 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
 
 ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
 
-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では、テキストエリアの塗りつぶしスタイルが用意されています。アイテムの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
diff --git a/docs/api/toast.md b/docs/api/toast.md
index 18c6117e269..0e88bf4a819 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -134,19 +134,17 @@ interface ToastOptions {
 
 ### スクリーンリーダー
 
-`ion-toast` は、デフォルトで `aria-live="polite"` と `aria-atomic="true"` が設定されています。
+`ion-toast` は、内側の `.toast-content` 要素に `role="status"` と `aria-live="polite"` を設定しています。これにより、スクリーンリーダーはトーストのメッセージとヘッダーのみをアナウンスするようになります。ボタンとアイコンはアナウンスされません。
 
-`aria-live` を指定すると、トーストの内容が更新されたときにスクリーンリーダがアナウンスするようになります。しかし、この属性は `'polite'` に設定されているため、スクリーン・リーダーは通常、現在のタスクを中断することはありません。開発者は `htmlAttributes` プロパティを使用して `aria-live` を `'assertive'` に設定することで、この動作をカスタマイズすることができます。これにより、トーストが更新されると、スクリーン・リーダーはすぐにユーザーに通知し、それまでの更新を中断させる可能性があります。
+`aria-live`は、トーストの内容が更新されたときに、スクリーン・リーダーがその内容をアナウンスするようにします。しかし、属性が `'polite'` に設定されているため、スクリーン・リーダーは現在のタスクを中断してはいけません。
 
-また、`aria-atomic="true"`を設定すると、トースト全体を1つのユニットとしてアナウンスすることができます。これはトーストのコンテンツを動的に更新するときに便利で、スクリーン・リーダーが変更されたコンテンツのみをアナウンスすることを防ぎます。
+トーストは微妙な通知であることを意図しているので、`aria-live`は決して`"assertive"`に設定されるべきではありません。もし開発者が重要なメッセージでユーザーを中断させる必要がある場合は、[alert](./alert)を使用することをお勧めします。
 
 ### ヒント
 
 これは完全なリストではありませんが、トーストを使用する際に従うべきガイドラインをいくつか紹介します。
 
-* トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss" ボタンがあるのは良いですが、タイムアウト後にトーストが自動的に終了するようにします。通知のためにユーザーの操作が必要な場合は、代わりに [ion-alert](./alert) を使用することを検討してください。
-
-* 複数のトーストを連続して開くことは避けてください。もし `aria-live` が `'assertive'` に設定されている場合、スクリーンリーダーは新しいトーストをアナウンスするために現在のタスクの読み込みを中断し、前のトーストのコンテキストが失われる可能性があります。
+* トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss"ボタンがあるのは良いのですが、タイムアウト時間が経過すると自動的にトーストが消えるようにすべきです。通知のためにユーザーの操作が必要な場合は、代わりに[alert](./alert)を使用することを検討してください。
 
 * 長いメッセージのトーストの場合は、`duration`プロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。
 
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/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/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/contributing/coc.md b/docs/contributing/coc.md
index 5e9c1a94d20..b347ee6e9b0 100644
--- a/docs/contributing/coc.md
+++ b/docs/contributing/coc.md
@@ -8,4 +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/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 1c73465725e..dbceb51b028 100644
--- a/docs/core-concepts/fundamentals.md
+++ b/docs/core-concepts/fundamentals.md
@@ -11,37 +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プロパティ (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 プロパティ（変数）</a>が提供する柔軟性を活用できます。これにより、ウェブ標準に従いつつ、見栄えのするアプリを驚くほど簡単にデザインできます。私たちは、開発者がいくつかの素晴らしいデフォルトを持つことができるように色のセットを提供しますが、ブランド、企業、または希望のカラーパレットに一致するデザインを作成するためにそれらを上書きすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてカスタマイズ可能です。アプリのテーマ設定の詳細については、 [Theming](../theming/basics.md) を参照してください。
+
+## イベント
+
+多くの 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`というプレフィックスが付けられています。各コンポーネントのドキュメントページには、開発者がアプリケーションでリッスンできる利用可能なイベントのリストがあります。
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 ec8b0266c20..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
@@ -40,34 +40,38 @@ ionic cordova build ios --prod
 
 ここから、`.xcworkspace` ファイルを `./platforms/ios/` に開き、Xcode を起動します。
 
+:::tip
+`release`フラグを使えば、リリースビルドを自動的に生成させることもできます。
+:::
+
 ## 署名証明書の生成
 
 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」をクリックします。
-チームを選択する場所と、アプリの詳細情報、そして「Upload」ボタンがあるはずなので、それをクリックします。
+Xcode Organizer は、現在のアプリのビルドを含むリストを表示します。最後のビルドを選び、'Upload to App Store'をクリックします。
+チームを選択する場所があり、アプリの詳細情報と'Upload'ボタンをクリックします。
 
-アップロードに成功すると、アプリは [iTunes Connect](https://itunesconnect.apple.com) にリストされ、 "Activity" にリストされるはずです。
-ここから、TestFlightをベータテスト用に有効にしたり、アプリをAppleの承認用に送信したりすることができます。
+アップロードに成功すると、アプリは[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 1caee78f3bf..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のリンクです。
+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 8874bb90f0e..78c9cbb4879 100644
--- a/docs/developing/android.md
+++ b/docs/developing/android.md
@@ -11,53 +11,52 @@ 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のパス**です。
-
-   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,33 +71,33 @@ Android SDKには<a href="https://developer.android.com/studio/command-line/" ta
    ```
 
    :::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`.
    :::
 
-### 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** メニューから開くこともできます。
+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
@@ -108,14 +107,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>します。
+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
-残念ながら、Cordovaは最新バージョンの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
@@ -131,43 +130,57 @@ Cordovaがプログラムビルドをサポートするには、追加のセッ
 
 ## プロジェクトのセットアップ
 
-アプリをAndroidシミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。
+アプリを Android シミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。
+
+1. **Perform an Ionic build, if you haven't already.**
 
-1. **ネイティブプロジェクトが存在しない場合は、生成します。**
+   ```
+   $ ionic build
+   ```
 
-   Capacitorでは以下の実行をサポートしています:
+2. **Generate the native project, if it does not already exist.**
+
+   Capacitor では以下の実行をサポートしています:
 
    ```shell
    $ ionic capacitor add android
    ```
 
-   Cordovaでは以下のように実行します。
+   Cordova では以下のように実行します。
 
    ```shell
    $ ionic cordova prepare android
    ```
 
-2. **[Package ID](../reference/glossary.md#package-id) を設定します。**
+3. **Set the [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)を参照してください。
+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 アプリを開発してネイティブプロジェクトに同期します**
+
+重要な変更が行われるたびに、変更が Android シミュレータやデバイスに表示されるようにするには、Web アセットに Ionic アプリを組み込む必要があります。次に、Web アセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスは Ionic CLI コマンド 1 つで簡単になります。
+
+```shell
+$ ionic capacitor copy android
+```
 
-1. **Ionicアプリを開発してネイティブプロジェクトに同期します**
+2. **Run the app on a simulator or device.**
 
-  重要な変更が行われるたびに、変更がAndroidシミュレータやデバイスに表示されるようにするには、WebアセットにIonicアプリを組み込む必要があります。次に、Webアセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスはIonic CLIコマンド1つで簡単になります。
+   You can open the Android Studio Project using:
 
    ```shell
-   $ ionic capacitor copy android
+   $ ionic capacitor open android
    ```
 
-2. **Android StudioでRunボタンをクリックして、シュミレーターかデバイスを選択ください。**
+   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)
 
 ### ライブリロード
 
@@ -191,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
 アプリケーションがデバイスまたはシミュレータで実行されていることを確認してください。実行されていない場合は、リストに表示されません。
@@ -205,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/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 e9019a90855..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,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/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 00efcb1b71a..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,10 +65,11 @@ title: 開発者向けのヒント
   <em>Windowsでは利用できません</em>
 </small>
 
-npmのディレクトリの所有者を現在のユーザに変更します:
+npm のディレクトリの所有者を現在のユーザに変更します:
 
 ```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
 ```
 
@@ -76,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
@@ -111,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)で行います。
@@ -147,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..bbccf176835 100644
--- a/docs/intro/first-app.md
+++ b/docs/intro/first-app.md
@@ -7,16 +7,16 @@ 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 e19041a8e66..801626e379d 100644
--- a/docs/intro/next.md
+++ b/docs/intro/next.md
@@ -13,20 +13,24 @@ title: 次のステップ
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-## 最初のアプリを作る
+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>
   </DocsCard>
 </DocsCards>
+
+<DeveloperExperts />
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 3a03ad0fb58..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>
@@ -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/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 fbe0d72ef21..ecaccc5c3da 100644
--- a/docs/layout/structure.md
+++ b/docs/layout/structure.md
@@ -14,223 +14,50 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Ionic Frameworkは、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。
+Ionic Framework は、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。
 
-## HeaderとFooterのレイアウト
+## 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) で構成されています。アプリのほとんどのページは、一般的にこの 2 つを備えていますが、コンテンツを使用するためにヘッダーは必要ではありません。
 
-最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般にこの両方を持ちますが、contentを使用するためにheaderは必要ありません。
+import Header from '@site/static/usage/v7/header/basic/index.md';
 
-```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>
-```
+<Header />
 
 ### 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>
+import Footer from '@site/static/usage/v7/footer/basic/index.md';
 
-  <ion-footer>
-    <ion-toolbar>
-      <ion-title>Footer</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-</ion-app>
-```
+<Footer />
 
-### ライブでの実装例
+## タブレイアウト
 
-この設定のライブ例を、Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-header-footer) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-head-foot) で見ることができます。
+水平な [タブ](../api/tabs.md) からなるレイアウトを使用すると、ユーザーはコンテンツビューをすばやく切り替えることができます。各タブには、[router outlet](../api/router-outlet.md) や [nav](../api/nav.md) を使用して、静的コンテンツやナビゲーション・スタックを含めることができます。
 
-## タブレイアウト
+import Tabs from '@site/static/usage/v7/tabs/router/index.md';
 
-水平な[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) で実例を見ることができます。
+<Tabs />
 
 ## メニューレイアウト
 
 モバイルアプリの標準的なレイアウトには、ボタンをクリックするか、横からスワイプして開くことで サイドメニュー [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)で 実例を見ることができます。
+import Menu from '@site/static/usage/v7/menu/basic/index.md';
+
+<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) をご覧ください。
+デフォルトでは、画面が `768px` より大きいとき、または `md` ブレイクポイントに分割ペインが表示されますが、`when` プロパティを設定することで、異なるブレイクポイントを使用するようにカスタマイズすることができます。以下は、分割ペインが `xs` 画面以上、またはビューポートが `0px` より大きい場合に表示されるメニューを含んでいる例です。これにより、すべての画面サイズに対して分割ペインが表示されるようになります。
+
+ここで重要なのは、分割ペインで指定した `contentId` と一致する `id` を持つ要素が、常に表示されるメインコンテンツとなることです。これは、[nav](../api/nav.md)、[router outlet](../api/router-outlet.md) または [tabs](../api/tabs.md) など、どの要素でもかまいません。
+
+import SplitPane from '@site/static/usage/v7/split-pane/basic/index.md';
+
+<SplitPane />
diff --git a/docs/native-faq.md b/docs/native-faq.md
index 4cbeec67432..d9f04dce57b 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 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
 
@@ -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/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({
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.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 fb90c3e7568..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,5 +143,15 @@ 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` の状態は変化します。
+
+開発者は、前のページが定義された状態にしかアクセスしないことを保証するために、適切なチェックを含める必要があります。
+
+例えば、以下のコードは `testObject` が定義されていない場合、エラーになります： `{ state.testObject.childKey }` となります。
+
+その代わりに、開発者は `testObject` が定義されている場合にのみ `childKey` にアクセスする必要があります： `{ state.testObject?.childKey }` となります。
diff --git a/docs/react/navigation.md b/docs/react/navigation.md
index bf6874715fe..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
 
@@ -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')}
@@ -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`.
@@ -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>
 ```
@@ -420,15 +419,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 { 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';
@@ -436,39 +427,37 @@ 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>
+  <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;
@@ -476,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).
@@ -543,8 +536,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 +552,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 +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>
@@ -583,17 +576,74 @@ 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` はアニメーションを提供しないことを認識します。
+
+### IonRouterOutlet の `Switch`
+
+`IonRouterOutlet` は、どのルートをレンダリングするかを決定する仕事を引き継ぐので、React Router の `Switch` を `IonRouterOutlet` の内部で使用しても効果はない。スイッチは `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';
 
-ユーザーがセッションの詳細ページ（たとえば "/sessions/1" ）に移動すると、2番目のルートは "tabs" というURLパラメーターに "sessions" という値を追加します。 `IonRouterOutlet` は、両方のページが同じ "sessions" タブにあることを認識すると、新しいビューへのアニメーションページ遷移を提供します。 ユーザーが新しいタブ（この場合は "speakers" ）に移動すると、 `IonRouterOutlet` はアニメーションを提供しないことを認識します。
+const MyComponent: React.FC = () => {
+  const router = useIonRouter();
+  const goToPage = () => {
+    router.push('/my-page', 'root', 'replace');
+  };
 
-### 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`.
+```
 
-## 更に知りたい場合
+## 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 3e3fe7259eb..f5d7a1a7fc7 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.
@@ -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,61 +72,71 @@ 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 configuration
->>>>>>> 407f6697f8d56598ab081d99c5dbfd4bd1c3250c
+### 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 スクリプトを使用する必要があります。
 
-<<<<<<< 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 ホスティングは 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上で様々な確認を行っていきます:
+:::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?"** "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".
 
-**"Select a default Firebase project for this directory:"** FirebaseのWebサイト上で作成したプロジェクトを選択します。
+Create a new Firebase project or select an existing one.
+
+**"Select a default Firebase project for this directory:"** Firebase の Web サイト上で作成したプロジェクトを選択します。
 
 **"What do you want to use as your public directory?"** "dist" を選択ください。
 
 :::note
-次の2つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
+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)?"** "Yes" を選択します.
 
 **"File dist/index.html already exists. Overwrite?"** "No" を選択します。
 
-`firebase.json` という設定ファイルが生成されるので、アプリの設定にあわせて変更します。
+**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.
 
 最後に、キャッシング・ヘッダーが正しく設定されていることを確認する必要があります。これを行うには、 `headers` スニペットを `firebase.json` に追加します。完全な`firebase。json`は次のようになります:
 
diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md
index ca786265a2d..c884e42d54e 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.md
@@ -4,30 +4,30 @@ sidebar_label: クイックスタート
 ---
 
 <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>
 
-## 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/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/react/your-first-app.md b/docs/react/your-first-app.md
index 6a41f3df0bd..f0cba444efc 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';
diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.md
index 9b361758b68..79c23fc5e73 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,
@@ -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>
       ))}
diff --git a/docs/react/your-first-app/3-saving-photos.md b/docs/react/your-first-app/3-saving-photos.md
index e005724c4ad..529055138e6 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/reference/browser-support.md b/docs/reference/browser-support.md
index 1b11c8063b2..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,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/docs/reference/glossary.md b/docs/reference/glossary.md
index 9b10bc85e54..86e1e157261 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 コミュニティでよく使われるものは、次に示すこの{' '}
-    <a href="https://ionicframework.com/docs/v1/cli/">Ionic's CLI</a> というターミナルです。Ionic's CLI は、
+    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 c754cb8d3af..5247a56b163 100644
--- a/docs/reference/support.md
+++ b/docs/reference/support.md
@@ -12,23 +12,23 @@ title: サポートポリシー
 
 ## コミュニティメンテナンス
 
-Ionic Frameworkは当初から100%オープンソース(MIT)で、今後もオープンソースとして公開されます。開発者は、Ionicのコミュニティメンテナンス戦略を通して、Ionicが彼らのクロスプラットフォームアプリにとって正しい選択であることを保証することができます。Ionicチームは定期的に新しいリリースとバグ修正を提供しており、コミュニティからのプルリクエストを歓迎しています。
+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).
+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:
 
-| 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    |   **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           |         v16.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/reference/versioning.md b/docs/reference/versioning.md
index 7f046f84893..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の変更があった場合、**6週間ごと**に行う予定です。
+マイナーリリースは、新しい機能が追加されたり、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/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
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/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/docs/techniques/security.md b/docs/techniques/security.md
index 4528b69ec18..2bc7a648ac9 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
@@ -156,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).
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 e5aa23f873d..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,31 +103,34 @@ 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) を使用してスタイリングすることをお勧めします。
 
 ### ベンダープレフィックス擬似要素
 
-<a href="https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix" target="_blank" rel="noopener noreferrer">
-  Vendor prefixed
-</a> 擬似要素は、現時点ではサポートされていません。例えば、`::-webkit-scrollbar`擬似要素のようなものです。
+<p>
+  <a href="https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix" target="_blank" rel="noopener noreferrer">
+    Vendor prefixed
+  </a>
+  擬似要素は現時点ではサポートされていません。この例としては、 `::-webkit-scrollbar` 擬似要素があります： pseudo-elements:
+</p>
 
 ```css
 /* Does NOT work */
@@ -134,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 */
@@ -152,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 096a41a9f98..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
@@ -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() {
@@ -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/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';
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/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>.
 
diff --git a/docs/updating/6-0.md b/docs/updating/6-0.md
index 267b4ba5f33..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
@@ -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 {
-  ...
+  /* 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` は 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 {
-  ...
+  /* 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 */
 }
 ```
 
@@ -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/docs/updating/7-0.md b/docs/updating/7-0.md
index c79f71874ba..95858cea562 100644
--- a/docs/updating/7-0.md
+++ b/docs/updating/7-0.md
@@ -9,73 +9,75 @@ 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.
 :::
 
 ## はじめ方
 
 ### 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
+npm install @ionic/angular@7
 ```
 
-Ionic Angular Serverを使用している場合は、必ずそちらも更新してください。
+Ionic Angular Server と Ionic Angular Toolkit を使用している場合は、必ずそちらも更新してください。
 
 ```shell
-npm install @ionic/angular@next @ionic/angular-server@next
+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は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
+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@next @ionic/vue-router@next
+npm install @ionic/vue@7 @ionic/vue-router@7
 ```
 
 ### Core
 
-1. Ionic 7の最新バージョンにアップデートします。
+1. Ionic 7 の最新バージョンにアップデートします。
 
 ```shell
-npm install @ionic/core@next
+npm install @ionic/core@7
 ```
 
 ## あなたのコードのアップデート
 
 ### ブラウザサポート
 
-Ionicがサポートするブラウザーのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。
+Ionic がサポートするブラウザーのリストが変更されました。 [ブラウザサポートガイド](../reference/browser-support) を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。
 
 `browserslist` または `.browserslistrc` ファイルをお持ちの場合は、以下の内容で更新してください。
 
@@ -99,7 +101,7 @@ iOS >=14
 ### Datetime
 
 1. `value` プロパティに空文字列(`''`)を設定するコードを削除します
-2.  `value` プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetimeはタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。
+2. `value` プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetime はタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。
 
 ### Input
 
@@ -124,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 />
@@ -136,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 />
@@ -148,11 +150,6 @@ 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/main/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/docs/utilities/animations.md b/docs/utilities/animations.md
index 92c6eebc67a..1c7a43769c1 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
 
@@ -223,1055 +152,65 @@ 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
-
-````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">
+import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md';
 
-```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">
+<Keyframes />
 
-```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.
 
-### 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>
-    </>
-  )
-}
-```
+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.
 
-</TabItem>
-<TabItem value="vue">
+import Group from '@site/static/usage/v7/animations/group/index.md';
 
-```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" />
+<Group />
 
 ## 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.
+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
 
 Animations can be chained to run one after the other. The `play` method returns a Promise that resolves when the animation has completed.
 
-### Usage
+import Chain from '@site/static/usage/v7/animations/chain/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
-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" />
+<Chain />
 
 ## 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;
+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.
 
-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));
-}
+import Gesture from '@site/static/usage/v7/animations/gesture/index.md';
 
-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" />
+<Gesture />
 
 ## 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" />
+import PreferenceBased from '@site/static/usage/v7/animations/preference-based/index.md';
+
+<PreferenceBased />
 
 ## Overriding Ionic Component Animations
 
@@ -1279,236 +218,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/docs/utilities/gestures.md b/docs/utilities/gestures.md
index ab65cfb8f7b..a4c44d3b833 100644
--- a/docs/utilities/gestures.md
+++ b/docs/utilities/gestures.md
@@ -137,312 +137,19 @@ 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">
+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`.
 
-```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" />
+<Basic />
 
 ## 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/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 fd19d33cda9..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 6879a644dc9..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> = [
@@ -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> = [
@@ -394,47 +393,35 @@ const routes: Array<RouteRecordRaw> = [
 ```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>
 
 <script lang="ts">
-  import {
-    IonTabBar,
-    IonTabButton,
-    IonTabs,
-    IonContent,
-    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 {
     name: 'Tabs',
     components: {
-      IonContent,
       IonLabel,
       IonTabs,
       IonTabBar,
@@ -454,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` プロパティがあります。
 
 ### タブ内の子ルート
 
@@ -521,8 +508,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 +524,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 +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> = [
@@ -616,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 f5148e490a9..65578a7cf4f 100644
--- a/docs/vue/overview.md
+++ b/docs/vue/overview.md
@@ -14,25 +14,26 @@ 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) をご覧ください。
 
 ## コミュニティからの情報
 
 - [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
 
 ## インストール
 
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 a431da43752..a44ca48bf53 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.
@@ -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,39 +146,57 @@ 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上で様々な確認を行っていきます:
+:::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 files for Firebase Hosting and (optionally) set up GitHub Action deploys".
 
-**"Which Firebase CLI features do you want to set up for this folder?"**  "Hosting: Configure and deploy Firebase Hosting sites." を選択します。
+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" を選択ください。
 
 :::note
-次の2つの質問に答えることで、ルーティング、ハードリロード、ディープリンクがアプリ内で動作することが保証されます:
+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)?"** "Yes" を選択します.
 
-**"File dist/index.html already exists. Overwrite?"** "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.
 
 `firebase.json` という設定ファイルが生成されるので、アプリの設定にあわせて変更します。
 
diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index 65bf601b283..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,28 +38,35 @@ 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
+npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
 ```
 
-2. すべての `.ts` ファイルの拡張子を `.js` にします。blank Ionic Vueアプリでは、 `router/index.ts` と `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. `@vue/typescript/recommended` と `@typescript-eslint/no-explicit-any: ‘off’, ` を `.eslintrc.js` から削除します。
+3. In `index.html`, change the imported `<script>` file from `/src/main.ts` to `/src/main.js`.
 
-4. `router/index.js` から `Array<RouteRecordRaw>` を削除します。
+4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
 
-5. `shims-vue.d.ts`ファイルを削除します。
+5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `src/router/index.js`.
 
-6. Vueコンポーネントにある `script` タグから `lang="ts"` を削除します。blank Ionic Vueアプリの場合、 `App.vue` と `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. 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`.
 
-## Vueコンポーネントの確認
+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`.
+
+## Vue コンポーネントの確認
 
 アプリケーションのベースは `src` ディレクトリにあり、メインのエントリポイントは `main.ts` になります。エディタでプロジェクトを開き、`main.ts` を確認すると、次のように表示されます:
 
@@ -97,9 +104,9 @@ The fourth import gets our routing configuration. We will look at this more in d
 </script>
 ```
 
-scriptに書かれているimportのグループを分解してみていきましょう。
+script に書かれている import のグループを分解してみていきましょう。
 
-```tsx
+```html
 <script setup lang="ts">
   import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>
@@ -119,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';
@@ -153,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> = [
@@ -180,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` コンポーネントはこうなっています:
 
@@ -250,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`などのコンポーネントを保持するためのものです。
@@ -290,7 +297,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 +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>
@@ -327,14 +346,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 +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';
@@ -399,7 +433,7 @@ const router = createRouter({
 export default router;
 ```
 
-routeに `/new` を追加したので、該当するコンポーネントとなる `NewItem` を作成します。これは `views/NewItem.vue` に作成します。
+route に `/new` を追加したので、該当するコンポーネントとなる `NewItem` を作成します。これは `views/NewItem.vue` に作成します。
 
 新しく `NewItem.vue` ファイルを作成します。
 
@@ -427,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
 
@@ -465,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
 
@@ -486,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.
 
@@ -511,7 +545,7 @@ Then we pass the icon data into the `ion-icon` component via the `icon` property
 
 ### グローバルインポート
 
-もう1つのオプションは、特定のアイコンをグローバルにインポートすることです。アプリケーションを起動するたびにアイコンが強制的にロードされ、アプリケーションの初期チャンク・サイズが大きくなる可能性があるため、通常は推奨しません。
+もう 1 つのオプションは、特定のアイコンをグローバルにインポートすることです。アプリケーションを起動するたびにアイコンが強制的にロードされ、アプリケーションの初期チャンク・サイズが大きくなる可能性があるため、通常は推奨しません。
 
 とはいえ、特定のアイコンをグローバルにロードすることに意味があるユースケースがあるかもしれません:
 
@@ -546,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 コンポーネントを再インポートする必要があります。
 
 ローカルコンポーネント登録の仕組みを見てみましょう:
 
@@ -581,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 の量が不必要に増加します」とあります。
 
 グローバルコンポーネント登録の仕組みを見てみましょう:
 
@@ -614,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`ファイルを変更または作成します:
 
@@ -654,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
@@ -663,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>
@@ -700,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/docs/vue/slides.md b/docs/vue/slides.md
index 4f02bd9813c..36fda773742 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
@@ -307,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>
@@ -431,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 02e5e8ab98f..6e8658b964c 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 8de9fdfdcd4..a7cdff5bb48 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.
@@ -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 1c5be3c3957..b60da9d3d37 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/docusaurus.config.js b/docusaurus.config.js
index f82920f191a..9ead9fe948f 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -100,8 +100,8 @@ module.exports = {
         {
           type: 'cta',
           position: 'left',
-          text: 'Ionic採用事例をみよう',
-          href: `https://ionicframework.jp/case/`,
+          text: 'Ionic v7 アップグレードガイド',
+          href: `/updating/7-0`,
         },
         {
           type: 'docsVersionDropdown',
diff --git a/package-lock.json b/package-lock.json
index 0f65095ccc8..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": {
     "": {
@@ -43,30 +43,43 @@
       },
       "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",
         "deepl": "^1.0.13",
         "html-loader": "^3.1.0",
-        "prettier": "^2.5.0",
+        "hygen": "^6.2.11",
+        "prettier": "^2.8.8",
         "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",
@@ -74,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": {
@@ -155,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": {
@@ -211,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"
@@ -259,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"
@@ -280,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"
@@ -335,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"
@@ -363,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"
@@ -378,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"
@@ -521,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"
       },
@@ -698,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"
       },
@@ -709,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"
@@ -723,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"
@@ -738,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"
       },
@@ -1031,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"
@@ -1044,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",
@@ -1056,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"
@@ -1164,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"
@@ -1177,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"
@@ -1207,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"
@@ -1221,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"
@@ -1235,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"
@@ -1257,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"
@@ -1272,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"
@@ -1286,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"
@@ -1302,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"
@@ -1316,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"
@@ -1331,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"
@@ -1345,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.18.9",
-        "@babel/helper-function-name": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@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-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1361,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"
@@ -1375,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"
@@ -1389,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"
@@ -1404,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"
@@ -1420,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"
@@ -1437,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"
@@ -1452,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"
@@ -1467,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"
@@ -1481,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"
@@ -1496,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"
@@ -1510,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"
@@ -1524,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"
@@ -1538,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"
@@ -1552,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"
@@ -1570,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"
@@ -1584,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"
@@ -1599,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": {
@@ -1614,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"
@@ -1628,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"
@@ -1647,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"
@@ -1669,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"
@@ -1684,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"
@@ -1698,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"
@@ -1712,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"
@@ -1726,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"
@@ -1742,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"
@@ -1756,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"
@@ -1770,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",
@@ -1811,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"
@@ -1859,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"
       }
@@ -1882,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"
@@ -1901,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"
@@ -1922,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"
       },
@@ -1933,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": {
@@ -1945,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"
       },
@@ -1978,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": {
@@ -2021,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": {
@@ -2746,21 +2847,22 @@
       }
     },
     "node_modules/@ionic/prettier-config": {
-      "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.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.0.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"
@@ -2783,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",
@@ -2895,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"
       }
@@ -2951,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",
@@ -2989,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"
@@ -3023,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"
       },
@@ -3056,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"
       }
@@ -3141,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",
@@ -3408,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": {
@@ -3439,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": "*"
@@ -3482,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": {
@@ -3497,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": {
@@ -3515,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",
@@ -3577,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": "*",
@@ -3606,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": {
@@ -3641,23 +3742,33 @@
       }
     },
     "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/serve-index": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+    "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",
+      "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.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": "*"
       }
@@ -3671,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"
       }
     },
@@ -3857,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"
       }
@@ -3960,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"
       },
@@ -3999,6 +4110,15 @@
         "string-width": "^4.1.0"
       }
     },
+    "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-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -4054,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",
@@ -4085,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",
@@ -4147,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": {
@@ -4219,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"
@@ -4281,6 +4431,26 @@
       "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
       "integrity": "sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ=="
     },
+    "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",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -4302,6 +4472,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/body-parser": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@@ -4347,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",
@@ -4404,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",
@@ -4415,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"
@@ -4557,6 +4742,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",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -4669,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",
@@ -4680,6 +4889,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -4854,6 +5067,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/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -5012,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",
@@ -5216,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"
       },
@@ -5261,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",
@@ -5278,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",
@@ -5288,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",
@@ -5300,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",
@@ -5336,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": {
@@ -5407,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"
       },
@@ -5445,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",
@@ -5530,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"
@@ -5722,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",
@@ -5732,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"
       },
@@ -5788,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"
       }
@@ -5816,6 +6047,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",
       "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
@@ -5844,6 +6096,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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.1.1",
       "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
@@ -5975,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"
       },
@@ -5997,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"
       },
@@ -6109,10 +6373,25 @@
       "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.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.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",
@@ -6153,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"
@@ -6164,6 +6443,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": "2.2.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
@@ -6181,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",
@@ -6199,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",
@@ -6208,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"
@@ -6232,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",
@@ -6543,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",
@@ -6598,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",
@@ -6608,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": {
@@ -6647,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",
@@ -6663,6 +6960,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",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.4.0.tgz",
@@ -6741,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"
@@ -6898,6 +7225,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",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -6913,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",
@@ -6982,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": {
@@ -7196,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",
@@ -7563,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",
@@ -7669,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"
       },
@@ -7689,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",
@@ -7813,10 +8182,55 @@
         "node": ">=10.17.0"
       }
     },
-    "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==",
+    "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",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3"
       },
@@ -7835,6 +8249,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.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -7843,6 +8277,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",
@@ -7852,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",
@@ -7912,6 +8358,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",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -7958,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"
       }
@@ -8075,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"
       },
@@ -8181,6 +8636,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",
       "resolved": "https://registry.npmjs.org/is-invalid-path/-/is-invalid-path-0.1.0.tgz",
@@ -8388,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"
@@ -8410,6 +8870,18 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
+    "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",
       "resolved": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.2.tgz",
@@ -8492,6 +8964,24 @@
         "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/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -8520,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",
@@ -8656,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",
@@ -8739,6 +9238,22 @@
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
     },
+    "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",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -8802,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"
       }
@@ -8905,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"
@@ -9025,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",
@@ -9122,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"
       },
@@ -9162,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"
       },
@@ -9189,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",
@@ -9286,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"
@@ -9387,6 +9909,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",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
@@ -9469,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"
       }
@@ -9703,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",
@@ -9714,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"
       },
@@ -9967,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",
@@ -10205,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"
@@ -10217,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"
       },
@@ -10329,9 +10878,9 @@
       }
     },
     "node_modules/prettier": {
-      "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==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -10737,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",
@@ -10865,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"
       },
@@ -10961,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"
@@ -11233,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",
@@ -11258,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"
       }
@@ -11362,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"
       },
@@ -11398,6 +11934,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",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
@@ -11543,6 +12092,28 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "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",
@@ -11581,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",
@@ -11593,7 +12164,7 @@
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/sass-loader": {
@@ -11633,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",
@@ -11709,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"
       },
@@ -11734,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"
       }
@@ -11987,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"
       }
@@ -12238,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",
@@ -12561,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"
       },
@@ -12578,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"
@@ -12611,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",
@@ -12628,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"
       },
@@ -12812,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"
@@ -12830,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",
@@ -12857,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",
@@ -12892,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",
@@ -13143,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",
@@ -13154,6 +13789,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
@@ -13161,7 +13800,7 @@
         "picocolors": "^1.0.0"
       },
       "bin": {
-        "browserslist-lint": "cli.js"
+        "update-browserslist-db": "cli.js"
       },
       "peerDependencies": {
         "browserslist": ">= 4.21.0"
@@ -13250,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",
@@ -13463,11 +14102,19 @@
         "node": ">=10.0.0"
       }
     },
-    "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==",
-      "dependencies": {
+    "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.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dependencies": {
         "tslib": "^2.1.0"
       }
     },
@@ -13491,6 +14138,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",
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz",
@@ -13506,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",
@@ -13529,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"
       },
@@ -13552,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",
@@ -13575,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"
       },
@@ -13669,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"
@@ -13687,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",
@@ -13697,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",
@@ -13710,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",
@@ -13719,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"
@@ -13735,6 +14392,9 @@
         "webpack": "^4.37.0 || ^5.0.0"
       },
       "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        },
         "webpack-cli": {
           "optional": true
         }
@@ -13788,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"
@@ -13826,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"
@@ -13846,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"
       },
@@ -13862,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",
@@ -13896,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",
@@ -13960,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"
@@ -13990,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",
@@ -14112,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==",
@@ -14148,10213 +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": {
-      "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
-    },
-    "@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": {
-        "string-width": "^4.1.0"
-      }
-    },
-    "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=="
-    },
-    "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": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
-    },
-    "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-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"
-      }
-    },
-    "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"
-      }
-    },
-    "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"
-      }
-    },
-    "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=="
-    },
-    "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"
-      }
-    },
-    "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"
-          }
-        }
-      }
-    },
-    "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=="
-    },
-    "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=="
-    },
-    "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=="
-    },
-    "ignore": {
-      "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",
-      "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=="
-    },
-    "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-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-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=="
-    },
-    "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=="
-    },
-    "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=="
-    },
-    "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": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
-      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
-      "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"
-      }
-    },
-    "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"
-      }
-    },
-    "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
-    },
-    "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 5c59f6a3233..f9d6b0daf89 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,11 @@
     "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",
+    "playground:new": "hygen playground new",
     "prestart": "npm run generate-markdown",
+    "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md}\"",
     "start": "docusaurus start",
     "swizzle": "docusaurus swizzle --danger",
     "translate": "ts-node -P scripts/build-translate/tsconfig.json scripts/build-translate apply",
@@ -70,13 +73,15 @@
   },
   "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",
     "deepl": "^1.0.13",
     "html-loader": "^3.1.0",
-    "prettier": "^2.5.0",
+    "hygen": "^6.2.11",
+    "prettier": "^2.8.8",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.2"
-  }
+  },
+  "prettier": "@ionic/prettier-config"
 }
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index 5bb22bc4132..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 = 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));
@@ -226,33 +228,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/renovate.json b/renovate.json
new file mode 100644
index 00000000000..c3e1741a371
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base"],
+  "packageRules": [
+    {
+      "matchPackagePatterns": ["^@ionic/"],
+      "groupName": "ionic"
+    },
+    {
+      "matchPackagePatterns": ["^@angular/"],
+      "groupName": "angular"
+    },
+    {
+      "matchPackagePatterns": ["^@ionic/"],
+      "allowedVersions": "^6.0.0",
+      "matchFileNames": ["static/code/stackblitz/v6/**/package.json"]
+    }
+  ],
+  "dependencyDashboard": true,
+  "minimumReleaseAge": "3 days",
+  "rebaseWhen": "never",
+  "schedule": ["every weekday before 11am"],
+  "semanticCommits": "enabled",
+  "includePaths": ["static/code/stackblitz"]
+}
diff --git a/scripts/api-ja.js b/scripts/_api-ja.js
similarity index 97%
rename from scripts/api-ja.js
rename to 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/api.js b/scripts/_api.js
similarity index 98%
rename from scripts/api.js
rename to 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/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/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/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"],
diff --git a/scripts/data/translated-api.json b/scripts/data/translated-api.json
index 364b8184327..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": "アコーディオングループの値です。",
+          "docs": "アコーディオングループの値です。これは、どのアコーディオンを展開するかを制御します。これは、`multiple=\"true\"`のときだけ、文字列の配列でなければなりません。",
           "docsTags": [],
           "values": [
             {
@@ -162,7 +162,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "valueプロパティが変更されたときに発行されます。",
+          "docs": "クリックなどのユーザー操作により、valueプロパティが変化したときに発生します。プログラムによってvalueプロパティを設定した場合は、このイベントは発生しません。",
           "docsTags": []
         }
       ],
@@ -291,7 +291,7 @@
           "mutable": false,
           "attr": "toggle-icon-slot",
           "reflectToAttr": false,
-          "docs": "トグルアイコンを配置する `ion-item` の内側のslot。デフォルトは `'end'` です。",
+          "docs": "トグルアイコンを配置する `ion-item` の内側のスロット。デフォルトは `\"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": "`true`の場合、アクションシートは開かれます。`false`の場合、アクションシートは閉じます。プレゼンテーションの細かな制御が必要な場合はこれを使用し、そうでない場合は actionSheetController または `trigger` プロパティを使用します。注意: アクションシートが終了しても、`isOpen`は自動的に`false`に戻されません。あなたのコードでそれを行う必要があります。",
+          "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": "クリックするとアクションシートが開くトリガー要素に対応するID。",
+          "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": "アクションシートが解散した後に発行されます。ionActionSheetDidDismissの略記。",
+          "docsTags": []
+        },
+        {
+          "event": "didPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "アクションシートが提示された後に発行されます。ionActionSheetWillDismissの略語。",
+          "docsTags": []
+        },
         {
           "event": "ionActionSheetDidDismiss",
           "detail": "OverlayEventDetail<any>",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "アラートが解除された後に発行されます。",
+          "docs": "アクションシートが解散した後に発行されます。",
           "docsTags": []
         },
         {
@@ -670,7 +724,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "アラートが提示された後に発行されます。",
+          "docs": "アクションシートが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -679,7 +733,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "アラートが解除される前に発行されます。",
+          "docs": "アクションシートが解散する前に発行されます。",
           "docsTags": []
         },
         {
@@ -688,7 +742,25 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "アラートが提示される前に発行されます。",
+          "docs": "アクションシートが提示される前に発行されます。",
+          "docsTags": []
+        },
+        {
+          "event": "willDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "アクションシートが解散する前に発行されます。ionActionSheetWillDismissの略記。",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "アクションシートが提示される前に発行されます。ionActionSheetWillPresentの略記。",
           "docsTags": []
         }
       ],
@@ -990,6 +1062,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "is-open",
+          "reflectToAttr": false,
+          "docs": "`true`の場合、アラートは開く。もし `false` ならば、アラートは閉じます。alertControllerや`trigger`プロパティを使用してください。注意: アラートが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。",
+          "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": "アラートに表示されるメインメッセージ。`message`には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) このプロパティは、カスタムHTMLを文字列として受け付けます。デフォルトでは、コンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -1103,6 +1192,25 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "trigger",
+          "reflectToAttr": false,
+          "docs": "クリックされるとアラートが開くトリガー要素に対応するID。",
+          "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": "アラートが解除された後に発行されます。ionAlertDidDismissの略記。",
+          "docsTags": []
+        },
+        {
+          "event": "didPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "アラートが提示された後に発行されます。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": "アラートが解除される前に発行されます。ionAlertWillDismissの略記。",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "アラートが提示される前に発行されます。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": [
@@ -2474,7 +2618,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "折りたたみインジケータがクリックされたときに発します。",
+          "docs": "折りたたみインジケータがクリックされたときに発行されます。",
           "docsTags": []
         }
       ],
@@ -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": "ラベルとチェックボックスを1行にまとめる方法。`\"start\"`：ラベルとチェックボックスは、LTRでは左に、RTLでは右に表示されます。`\"end\"`：ラベルとチェックボックスは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとチェックボックスは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
+          "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": "チェックボックスに対して相対的にラベルを配置する場所。`\"start\"`：ラベルはLTRではチェックボックスの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではチェックボックスの右側に、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
+          "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": "`legacy`プロパティを`true`に設定すると、強制的にレガシーフォームコントロールのマークアップを使用することができます。Ionicは、チェックボックスが`aria-label`属性を使用しているか、デフォルトスロットにテキストがある場合にのみ、モダンなフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントは最新のフォームマークアップを使用するようオプトインされる予定です。",
+          "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": "クリックなどのユーザー操作によりcheckedプロパティが変更された場合に発生します。プログラムによってcheckedプロパティを設定した場合は、このイベントは発生しません。",
           "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": "チェックボックスと関連付けるラベルテキスト。\"labelPlacement\"プロパティを使用して、チェックボックスに対するラベルの配置を制御します。"
+        }
+      ],
       "parts": [
         {
           "name": "container",
@@ -4872,7 +5096,7 @@
           "mutable": true,
           "attr": "force-overscroll",
           "reflectToAttr": false,
-          "docs": "`true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。iOSのシステムバウンスを無効にしないことに注意してください。これはOSレベルの設定です。",
+          "docs": "`true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。なお、これはiOSのシステムバウンスを無効にするものではありません。これはOSレベルの設定です。",
           "docsTags": [],
           "values": [
             {
@@ -5618,7 +5842,7 @@
           "mutable": false,
           "attr": "locale",
           "reflectToAttr": false,
-          "docs": "`ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`'default'`値は、あなたのデバイスが設定するデフォルトのロケールを参照します。",
+          "docs": "ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`\"default\"`の値は、あなたのデバイスが設定するデフォルトのロケールを指します。",
           "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": "`true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。  ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます：`presentation`が `\"date\"`, `\"date-time\"`, または `\"time-date\"`.  ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます：`\"time\"`, `\"month\"`, `\"month-year\"`, または `\"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": "どの値を選択するか。`\"date\"`はカレンダーピッカーを表示し、月、日、年を選択します。`\"time\"`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PMを選択します。`\"date-time\"`は、日付ピッカーを最初に、時間ピッカーを次に表示します。\"time-date\"`は、最初に時間ピッカー、2番目に日付ピッカーを表示します。",
           "docsTags": [],
           "default": "'date-time'",
           "values": [
@@ -5962,7 +6186,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "datetimeの値を有効なISO 8601 datetime文字列として指定します。multiple=\"true\"`の場合は、文字列の配列とする必要がある。",
+          "docs": "datetimeの値を有効なISO 8601 datetime文字列として指定します。これは、`multiple=\"true\"`の場合のみ、文字列の配列です。",
           "docsTags": [],
           "values": [
             {
@@ -6038,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": []
         }
       ],
@@ -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": "ロード中に表示するオプションのテキスト。`loadingText`には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります。詳しくはこちら：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) このプロパティは、カスタムHTMLを文字列として受け付けます。デフォルトでは、コンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "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": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は `maxlength` プロパティも設定する必要があります。",
           "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": "キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。",
           "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": "Inputの下に配置され、エラーが検出されたときに表示されるテキストです。",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "fill",
+          "type": "\"outline\" | \"solid\" | undefined",
+          "mutable": false,
+          "attr": "fill",
+          "reflectToAttr": false,
+          "docs": "アイテムの塗りつぶし。もし `\"solid\"` ならば、アイテムは背景を持つようになります。もし `\"outline\"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。",
+          "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": "Inputの下に配置され、エラーが検出されなかった場合に表示されるテキストです。",
+          "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": "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": "入力に対してラベルを配置する位置。`\"start\"`：ラベルはLTRでは入力の左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRでは入力の右側、RTLでは左側に表示されます。\"floating\"`：`\"floating\"`：ラベルは、入力にフォーカスが当たっているときや、入力に値があるときは小さく表示され、入力の上に表示されます。それ以外の場合は、入力の上に表示されます。`\"スタック(stacked)\"`：入力がぼやけた状態や値がない場合でも、ラベルは小さく表示され、入力の上に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号（\"...\"）で切り捨てられます。",
+          "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": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性または`label`プロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。",
+          "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": "入力の形状を指定します。\"round\"の場合、境界線の半径が大きくなります。",
+          "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": "`ionChange` イベントは、ユーザーが要素の値を変更したときに `<ion-input>` 要素に対して発生します。 `ionInput` イベントとは異なり、`ionChange` イベントは必ずしも要素の値が変更されるたびに発生するわけではない。  ユーザーが要素と対話する方法に応じて、`ionChange` イベントは次のような異なるタイミングで発生します。 - ユーザーが明示的に変更をコミットしたとき (例えば、`<ion-input type=\"date\">` の日付ピッカーから日付を選択し、「Enter」キーを押すなど)。- 値が変更された後、要素がフォーカスを失ったとき：ユーザーの対話がタイピングである要素について。",
           "docsTags": []
         },
         {
@@ -8354,11 +8769,11 @@
         },
         {
           "event": "ionInput",
-          "detail": "InputEvent",
+          "detail": "InputInputEventDetail",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "キーボード入力が発生したときに発します。",
+          "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": []
         }
       ],
@@ -8369,11 +8784,46 @@
           "annotation": "prop",
           "docs": "Inputの背景"
         },
+        {
+          "name": "--border-color",
+          "annotation": "prop",
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のInput下のボーダーの色"
+        },
+        {
+          "name": "--border-radius",
+          "annotation": "prop",
+          "docs": "Inputの半径"
+        },
+        {
+          "name": "--border-style",
+          "annotation": "prop",
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーのスタイル"
+        },
+        {
+          "name": "--border-width",
+          "annotation": "prop",
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーの幅"
+        },
         {
           "name": "--color",
           "annotation": "prop",
           "docs": "Inputのテキストの色"
         },
+        {
+          "name": "--highlight-color-focused",
+          "annotation": "prop",
+          "docs": "フォーカスされたときの入力のハイライトの色"
+        },
+        {
+          "name": "--highlight-color-invalid",
+          "annotation": "prop",
+          "docs": "入力が無効な場合のハイライトの色"
+        },
+        {
+          "name": "--highlight-color-valid",
+          "annotation": "prop",
+          "docs": "有効時の入力のハイライトの色"
+        },
         {
           "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": "アイテムの塗りつぶし。もし `\"solid\"` ならば、アイテムは背景を持つようになります。もし `\"outline\"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。",
           "docsTags": [],
           "values": [
             {
@@ -9552,7 +10014,7 @@
       "events": [],
       "listeners": [
         {
-          "event": "ionChange",
+          "event": "ionInput",
           "capture": false,
           "passive": false
         },
@@ -9755,11 +10217,11 @@
         },
         {
           "name": "error",
-          "docs": "項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。"
+          "docs": "コンテンツはアイテムの下に配置され、エラーが検出されたときに表示されます。**DEPRECATED** 代わりに ion-input または ion-textarea の \"errorText\" プロパティを使用してください。"
         },
         {
           "name": "helper",
-          "docs": "項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。"
+          "docs": "コンテンツはアイテムの下に配置され、エラーが検出されない場合に表示されます。**DEPRECATED** 代わりに ion-input または ion-textarea の \"helperText\" プロパティを使用してください。"
         },
         {
           "name": "start",
@@ -10338,6 +10800,23 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "is-open",
+          "reflectToAttr": false,
+          "docs": "`true`の場合、ローディングインジケータは開きます。`false`の場合、ローディングインジケータは閉じます。より細かく表示を制御したい場合に使用します。そうでない場合は、loadingController または `trigger` プロパティを使用してください。注意: ローディングインジケータが終了しても、`isOpen`は自動的に `false`に戻されません。あなたのコードでそれを行う必要があります。",
+          "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": "ローディングインジケータに表示するテキストコンテンツを任意で指定します。  このプロパティは、文字列としてカスタムHTMLを受け入れます。コンテンツはデフォルトでプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -10504,6 +10983,25 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "trigger",
+          "reflectToAttr": false,
+          "docs": "クリックするとローディングインジケータが開くトリガー要素に対応するIDです。",
+          "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": "ローディングインジケータが解除された後に発行されます。ionLoadingDidDismissの略記。",
           "docsTags": []
         },
         {
-          "event": "ionLoadingDidPresent",
+          "event": "didPresent",
           "detail": "void",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "ローディングが提示された後に発行されます。",
+          "docs": "ローディングインジケータが提示された後に放出される。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": "ローディングインジケータが解散する前に発行されます。ionLoadingWillDismissの略記です。",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "ローディングインジケータが提示される前に発行されます。ionLoadingWillPresentの略記。",
+          "docsTags": []
         }
       ],
       "listeners": [],
@@ -11245,7 +11779,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "メニューが閉じられたときに発します。",
+          "docs": "メニューが閉じられたときに発行されます。",
           "docsTags": []
         },
         {
@@ -11263,7 +11797,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "メニューが閉じられようとするときに発します。",
+          "docs": "メニューが閉じられようとするときに発行されます。",
           "docsTags": []
         },
         {
@@ -11272,7 +11806,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "メニューが開かれようとするときに発します。",
+          "docs": "メニューが開かれようとするときに発行されます。",
           "docsTags": []
         }
       ],
@@ -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": "`true`の場合、ピッカーは開きます。`false`の場合、ピッカーは閉じます。ピッカーの表示をより細かく制御したい場合に使用します。それ以外の場合は pickerController や `trigger` プロパティを使用します。注意: ピッカーが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。",
+          "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": "クリックするとピッカーが開くトリガー要素に対応するID。",
+          "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": "ピッカーが解散した後に発行されます。ionPickerDidDismissの略記です。",
+          "docsTags": []
+        },
+        {
+          "event": "didPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "ピッカーが提示された後に発行されます。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": "ピッカーが解散する前に発行されます。ionPickerWillDismissの略記です。",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "ピッカーが提示される前に発行されます。ionPickerWillPresentの略記です。",
+          "docsTags": []
         }
       ],
       "listeners": [],
@@ -13106,7 +13687,7 @@
           "mutable": true,
           "attr": "alignment",
           "reflectToAttr": false,
-          "docs": "ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` modeでは `'center'` で、`md` modeでは `'start'` です。",
+          "docs": "ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` モードでは `\"center\"` で、`md` モードでは `\"start\"` です。",
           "docsTags": [],
           "values": [
             {
@@ -13390,7 +13971,7 @@
           "mutable": false,
           "attr": "reference",
           "reflectToAttr": false,
-          "docs": "ポップオーバーを何に対して相対的に配置するかを記述します。もし `'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": [
@@ -13429,7 +14010,7 @@
           "mutable": false,
           "attr": "side",
           "reflectToAttr": false,
-          "docs": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。start'` と `end'` は RTL を意識した値で、`left'` と `right'` はそうでない値です。",
+          "docs": "ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。`\"start\"` と `\"end\"` の値はRTLを意識しており、`\"left\"` と `\"right\"` の値はそうではない。",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -13467,7 +14048,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "ポップオーバーの幅を計算する方法を説明します。cover'` の場合、ポップオーバーの幅はトリガーの幅と一致します。auto'` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定されます。",
+          "docs": "ポップオーバーの幅を計算する方法を記述します。もし `\"cover\"` ならば、ポップオーバーの幅はトリガーの幅と一致します。auto\"` の場合、ポップオーバーの幅はポップオーバー内のコンテンツによって決定される。",
           "docsTags": [],
           "default": "'auto'",
           "values": [
@@ -13525,7 +14106,7 @@
           "mutable": false,
           "attr": "trigger-action",
           "reflectToAttr": false,
-          "docs": "どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。trigger`プロパティが `undefined` の場合は適用されません。click'` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。hover'` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニュー'`の場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
+          "docs": "どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。 `trigger`プロパティが `undefined` の場合は適用されません。`\"click\"` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。`\"hover\"` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニューの場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。",
           "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": "ラベルとラジオを1行にまとめる方法。`\"start\"` とします：ラベルとラジオは、LTRでは左側に、RTLでは右側に表示されます。`\"end\"`：ラベルとラジオは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとラジオは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
+          "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": "ラジオから相対的にラベルを配置する場所。`\"start\"`：ラベルはLTRではラジオの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではラジオの右、RTLでは左に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
+          "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": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性またはラベルテキストを含むデフォルトスロットのいずれかを使用している場合にのみ、モダンフォームマークアップを選択するようになっています。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようにオプトインされる予定です。",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",
@@ -14274,7 +14930,12 @@
           "docs": "内側のチェック付きラジオのボーダー半径"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "ラジオに関連付けるラベルテキストです。\"labelPlacement\"プロパティを使用して、ラジオに対するラベルの相対的な配置を制御します。"
+        }
+      ],
       "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": "レンジの値が変化するたびに `ionInput` イベントをトリガーするまでの待ち時間（ミリ秒単位）。",
           "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": "範囲に対してラベルを配置する場所。`\"start\"`：ラベルはLTRでは範囲の左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRでは範囲の右側、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作をします。長いテキストは省略記号(\"...\")で切り捨てられます。",
+          "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": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性または`label`プロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。",
+          "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"
@@ -14653,7 +15365,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "レンジの焦点が合わなくなったときに発します。",
+          "docs": "レンジの焦点が合わなくなったときに発行されます。",
           "docsTags": []
         },
         {
@@ -14662,7 +15374,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "valueプロパティが変更されたときに発行されます。",
+          "docs": "`ionChange`イベントは、`<ion-range>`要素に対して、ユーザーがその要素の値を変更したときに発生します： - ドラッグした後にノブを離したとき - キーボードの矢印でノブを動かしたとき プログラムで値を変更したときは、`ionChange`イベントは発生しません。",
           "docsTags": []
         },
         {
@@ -14671,7 +15383,16 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "レンジのフォーカスが合ったときに発します。",
+          "docs": "レンジのフォーカスが合ったときに発行されます。",
+          "docsTags": []
+        },
+        {
+          "event": "ionInput",
+          "detail": "RangeChangeEventDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "`ionInput`イベントは、`<ion-range>`要素に対して、値が変更されたときに発生するイベントです。`ionChange`とは異なり、`ionInput`はユーザがノブをドラッグしている間、継続して発生します。",
           "docsTags": []
         },
         {
@@ -14756,6 +15477,10 @@
           "name": "end",
           "docs": "コンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。"
         },
+        {
+          "name": "label",
+          "docs": "範囲に関連付けるラベルテキスト。`\"labelPlacement`\"プロパティを使用して、ラベルが範囲に対してどの位置に配置されるかを制御します。"
+        },
         {
           "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": "プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたはHTMLのいずれかを受け取ることができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` になります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) デフォルトでは、コンテンツはプレーンテキストとして解析されます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "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": "リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたはHTMLのいずれかを指定することができます。通常HTML用に予約されている文字を表示するには、エスケープする必要があります。例えば、`<Ionic>`は `&lt;Ionic&gt;` となります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) デフォルトでは、コンテンツはプレーンテキストとして解析されます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -15092,7 +15817,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発します。",
+          "docs": "ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発行されます。",
           "docsTags": []
         },
         {
@@ -15110,7 +15835,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "ユーザーが引き下げを開始するときに発します。",
+          "docs": "ユーザーが引き下げを開始するときに発行されます。",
           "docsTags": []
         }
       ],
@@ -15879,7 +16604,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "ルートが変更されたときに発します。",
+          "docs": "ルートが変更されたときに発行されます。",
           "docsTags": []
         },
         {
@@ -16323,19 +17048,21 @@
         },
         {
           "name": "debounce",
-          "type": "number",
+          "type": "number | undefined",
           "mutable": false,
           "attr": "debounce",
           "reflectToAttr": false,
-          "docs": "キーを押すたびに `ionChange` イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは `ngModel` や `v-model` などのフォームバインディングにも影響します。",
+          "docs": "キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。",
           "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": "`ionChange` イベントは、`<ion-searchbar>` 要素に対して、ユーザがその要素の値を変更したときに発生します。ionInput` イベントとは異なり、要素の値が変更されるたびに `ionChange` イベントが発生する必要はない。`ionChange`イベントは、ユーザーによって値がコミットされたときに発生します。これは、要素のフォーカスが外れたときや、\"Enter \"キーが押されたときに発生します。また、クリアボタンやキャンセルボタンをクリックしたときにも `ionChange` イベントが発生することがあります。",
           "docsTags": []
         },
         {
@@ -16711,11 +17438,11 @@
         },
         {
           "event": "ionInput",
-          "detail": "KeyboardEvent",
+          "detail": "SearchbarInputEventDetail",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "キーボード入力が発生したときに発します。",
+          "docs": "ion-searchbar`要素の `value` が変更されたときに発行されます。",
           "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": "アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです：`\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, と `\"dark\"` です．色についての詳細は [theming](/docs/theming/basics) を参照してください。  このプロパティは、modern select構文を使用する場合にのみ利用可能です。",
+          "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": "アイテムの塗りつぶし。もし `\"solid\"` ならば、アイテムは背景を持つようになります。もし `\"outline\"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。",
+          "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": "ラベルとセレクトを1行にまとめる方法。`labelPlacement`が `\"floating\"` または `\"stacked\"` に設定されている場合、ラベルとセレクトが異なる行にあるときは `justify` は適用されません。`\"start\"`：ラベルとセレクトはLTRでは左側に、RTLでは右側に表示されます。`\"end\"`：ラベルとセレクトはLTRでは右に、RTLでは左に表示されます。\"space-between\"`：ラベルとセレクトは行の反対側の端に表示され、2つの要素の間にはスペースがあります。",
+          "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": "セレクトに関連する可視ラベル。",
+          "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": "セレクトに対してラベルを配置する位置。`\"start\"`：ラベルはLTRではセレクトの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではセレクトの右側に、RTLでは左側に表示されます。\"floating\"`：ラベルは、セレクトがフォーカスされているか、セレクトに値がある場合、小さく表示され、セレクトの上に表示されます。それ以外の場合は、セレクトの上に表示されます。\"stacked\"`：ラベルは、セレクトがぼやけた状態や値がない状態でも、小さく表示され、セレクトの上に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号（\"...\"）で切り捨てられます。`\"floating\"`や \"stacked\"`を使用する場合は、selectに `value` か `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": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性または`label`プロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",
@@ -17611,6 +18515,26 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "shape",
+          "type": "\"round\" | undefined",
+          "mutable": false,
+          "attr": "shape",
+          "reflectToAttr": false,
+          "docs": "セレクトの形状を指定します。`round`の場合、境界線の半径が大きくなります。",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "round",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "value",
           "type": "any",
@@ -17662,7 +18586,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "選択がキャンセルされたときに発します。",
+          "docs": "選択がキャンセルされたときに発行されます。",
           "docsTags": []
         },
         {
@@ -17689,12 +18613,52 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "セレクトにフォーカスが当たったときに発します。",
+          "docs": "セレクトにフォーカスが当たったときに発行されます。",
           "docsTags": []
         }
       ],
       "listeners": [],
       "styles": [
+        {
+          "name": "--background",
+          "annotation": "prop",
+          "docs": "セレクトの背景"
+        },
+        {
+          "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": "MDモード時のリップルエフェクトの色です。"
         }
       ],
       "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": "タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは`\"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": "true`の場合、編集時にフォーカスが当たった後、値がクリアされる。",
           "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": "`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は `maxlength` プロパティも設定する必要があります。",
           "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": "キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。",
+          "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": "テキストエリアの下に配置され、エラーが検出されたときに表示されるテキストです。",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "fill",
+          "type": "\"outline\" | \"solid\" | undefined",
+          "mutable": false,
+          "attr": "fill",
+          "reflectToAttr": false,
+          "docs": "アイテムの塗りつぶし。もし `\"solid\"` ならば、アイテムは背景を持つようになります。もし `\"outline\"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。",
+          "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": "textareaの下に配置され、エラーが検出されなかった場合に表示されるテキストです。",
+          "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": "テキストエリアに関連する可視ラベル。",
+          "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": "テキストエリアと相対的にラベルを配置する場所。\"start\"`：ラベルはLTRではテキストエリアの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではテキストエリアの右側に、RTLでは左側に表示されます。\"floating\"`：ラベルは、テキストエリアにフォーカスが当たっているか、値がある場合、小さく表示され、テキストエリアの上に表示されます。それ以外の場合はtextareaの上に表示されます。`\"stacked\"`：テキストエリアがぼやけた状態や値がない場合でも、ラベルは小さく表示され、テキストエリアの上に表示されます。固定\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号（\"...\"）で切り捨てられます。",
+          "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": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性またはラベルテキストを含むデフォルトスロットのいずれかを使用している場合にのみ、モダンフォームマークアップを選択するようになっています。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようにオプトインされる予定です。",
+          "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": "この属性は、ユーザが入力できる最大文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -19673,7 +20815,7 @@
           "mutable": false,
           "attr": "minlength",
           "reflectToAttr": false,
-          "docs": "type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。",
+          "docs": "この属性は、ユーザーが入力できる最小の文字数を指定します。",
           "docsTags": [],
           "values": [
             {
@@ -19796,6 +20938,26 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "shape",
+          "type": "\"round\" | undefined",
+          "mutable": false,
+          "attr": "shape",
+          "reflectToAttr": false,
+          "docs": "テキストエリアの形状を指定します。round \"の場合、ボーダーの半径が大きくなります。",
+          "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": "`ionChange` イベントは `<ion-textarea>` 要素に対して、ユーザがその要素の値を変更したときに発生します。 `ionInput` イベントとは異なり、`ionChange` イベントは要素の値が変更されるたびに発生する必要はない。  値が変更された後、要素のフォーカスが外れると `ionChange` イベントが発生します。",
           "docsTags": []
         },
         {
@@ -19919,11 +21081,11 @@
         },
         {
           "event": "ionInput",
-          "detail": "InputEvent",
+          "detail": "TextareaInputEventDetail",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "キーボード入力が発生したときに発します。",
+          "docs": "`ionInput` イベントは、`<ion-textarea>` 要素の `value` が変更されたときに発生します。 `clearOnEdit` が有効な場合、ユーザがキーダウンイベントを実行してテキストエリアをクリアしたときに `ionInput` イベントが発生します。",
           "docsTags": []
         }
       ],
@@ -19934,16 +21096,46 @@
           "annotation": "prop",
           "docs": "textareaの背景"
         },
+        {
+          "name": "--border-color",
+          "annotation": "prop",
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの色"
+        },
         {
           "name": "--border-radius",
           "annotation": "prop",
           "docs": "テキストエリアの境界半径"
         },
+        {
+          "name": "--border-style",
+          "annotation": "prop",
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンター使用時のテキストエリア下のボーダーのスタイル"
+        },
+        {
+          "name": "--border-width",
+          "annotation": "prop",
+          "docs": "ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの幅"
+        },
         {
           "name": "--color",
           "annotation": "prop",
           "docs": "本文の色"
         },
+        {
+          "name": "--highlight-color-focused",
+          "annotation": "prop",
+          "docs": "フォーカスされたときのテキストエリアのハイライトの色"
+        },
+        {
+          "name": "--highlight-color-invalid",
+          "annotation": "prop",
+          "docs": "無効時のテキストエリア上のハイライトの色"
+        },
+        {
+          "name": "--highlight-color-valid",
+          "annotation": "prop",
+          "docs": "有効時のテキストエリアのハイライトの色"
+        },
         {
           "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": "もし `true` ならば、トーストは表示されます。もし `false` ならば、トーストは閉じます。プレゼンテーションの細かい制御が必要な場合はこれを使用し、そうでない場合は toastController または `trigger` プロパティを使用してください。注意: トーストが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。",
+          "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": "トーストに表示するメッセージ。このプロパティは、文字列としてカスタムHTMLを受け入れます。デフォルトではコンテンツはプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。",
           "docsTags": [],
           "values": [
             {
@@ -20505,6 +21714,25 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "string | undefined",
+          "mutable": false,
+          "attr": "trigger",
+          "reflectToAttr": false,
+          "docs": "クリックされたときにトーストを開かせるトリガー要素に対応するID。",
+          "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": "トーストが終了した後に発行されます。ionToastDidDismissの略記。",
+          "docsTags": []
+        },
+        {
+          "event": "didPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "トーストがはじまった後に発行されます。ionToastWillDismissの略語。",
+          "docsTags": []
+        },
         {
           "event": "ionToastDidDismiss",
           "detail": "OverlayEventDetail<any>",
@@ -20578,7 +21824,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "トーストが提示された後に発します。",
+          "docs": "トーストが提示された後に発行されます。",
           "docsTags": []
         },
         {
@@ -20587,7 +21833,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "乾杯が解散する前に発します。",
+          "docs": "乾杯が解散する前に発行されます。",
           "docsTags": []
         },
         {
@@ -20598,6 +21844,24 @@
           "composed": true,
           "docs": "トーストが提示される前に発行されます。",
           "docsTags": []
+        },
+        {
+          "event": "willDismiss",
+          "detail": "OverlayEventDetail<any>",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "トーストが終了する前に発行されます。ionToastWillDismissの略語です。",
+          "docsTags": []
+        },
+        {
+          "event": "willPresent",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "トーストが表示される前に発行されます。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": "ラベルとトグルを1行にまとめる方法。`\"start\"`：ラベルとトグルは、LTRでは左に、RTLでは右に表示されます。`\"end\"`：ラベルとトグルは、LTRでは右に、RTLでは左に表示されます。`\"space-between\"`：ラベルとトグルは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。",
+          "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": "Inputに対してラベルを配置する場所。\"start\"`とする：ラベルはLTRではトグルの左側に、RTLでは右側に表示されます。`\"end\"`：ラベルはLTRではトグルの右側に、RTLでは左側に表示されます。`\"fixed\"`：ラベルの幅が固定される以外は、`\"start\"`と同じ動作になります。長いテキストは省略記号(\"...\")で切り捨てられます。",
+          "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": "`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性またはラベルテキストを含むデフォルトスロットのいずれかを使用している場合にのみ、モダンフォームマークアップを選択するようになっています。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようにオプトインされる予定です。",
+          "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": "ユーザがトグルのオン/オフを切り替えたときに発行されます。プログラムによって `checked` プロパティの値が変更された場合は発生しません。",
           "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": "トグルトラックの背景"
+        },
+        {
+          "name": "--track-background-checked",
+          "annotation": "prop",
+          "docs": "チェックしたときのトグルトラックの背景"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "トグルに関連付けるラベルテキストです。`\"labelPlacement`\"プロパティを使用して、トグルに対してラベルを配置する位置を制御します。"
         }
       ],
-      "slots": [],
       "parts": [
         {
           "name": "handle",
diff --git a/scripts/data/translated-cache.json b/scripts/data/translated-cache.json
index 1705648895c..15cfa6cb189 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/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 cb4f06ec09c..dc2e6d6e740 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
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);
 }
diff --git a/scripts/release-notes.js b/scripts/release-notes.js
index 8680e864a07..e7358189f83 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,22 +14,20 @@ 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',
-      }),
-      {
-        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();
 
@@ -44,20 +42,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 +61,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 +94,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/sidebars.js b/sidebars.js
index 0237fd05ac3..e8469248ebc 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -10,12 +10,7 @@ module.exports = {
       type: 'category',
       label: 'アップグレードガイド',
       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: 'メディア',
       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: 'はじめ方',
       collapsed: false,
-      items: [
-        'native',
-        'native-setup',
-        'native-faq',
-      ],
+      items: ['native', 'native-setup', 'native-faq'],
     },
     {
       type: 'category',
diff --git a/src/components/global/DocDemo/index.js b/src/components/global/DocDemo/index.js
index d43d6ed2f8a..61740542956 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>
@@ -78,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/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.
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 209a0369971..0681230b851 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -85,16 +85,20 @@ 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[];
+  /**
+   * 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;
   };
 }
 
@@ -166,7 +170,7 @@ export default function Playground({
 
     // Otherwise, default to the first target passed.
     return Object.keys(code)[0];
-  }
+  };
 
   /**
    * Developers can set a predefined size
@@ -331,15 +335,13 @@ 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`)
             .outerText,
         }))
         .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+      editorOptions.dependencies = (code[usageTarget] as UsageTargetOptions).dependencies;
     }
 
     switch (usageTarget) {
@@ -415,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"
@@ -450,7 +452,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.
@@ -458,14 +459,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">
@@ -581,22 +582,30 @@ 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>
@@ -604,6 +613,7 @@ export default function Playground({
                     ]
                   : [
                       <iframe
+                        key="ios-iframe"
                         height={frameSize}
                         className={!isIOS ? 'frame-hidden' : ''}
                         ref={(ref) => handleFrameRef(ref, 'ios')}
@@ -611,6 +621,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')}
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 0d86913bc7b..f379a2d472c 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,15 @@ export interface EditorOptions {
 
   files?: {
     [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
@@ -31,35 +38,57 @@ export interface EditorOptions {
    */
   mode?: string;
 
-  angularModuleOptions?: {
-    imports: string[];
-    declarations?: string[];
-  };
-
   version?: number;
-
 }
 
 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 [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/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,
+  };
+
+  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 = {
       ...dependencies,
-      ...JSON.parse(package_json).dependencies
-    }
+      ...JSON.parse(package_json).dependencies,
+      ...options?.dependencies,
+    };
   } catch (e) {
     console.error('Failed to parse package.json contents', e);
   }
@@ -68,49 +97,65 @@ 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
-    },
-    dependencies
-  })
-}
+    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([
-    '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)
-
-  if (options.angularModuleOptions) {
-    if (options.angularModuleOptions.imports) {
-      app_module_ts = `${options.angularModuleOptions.imports.join('\n')}\n${app_module_ts}`;
-    }
-    if (options.angularModuleOptions.declarations) {
-      app_module_ts = app_module_ts.replace('/* CUSTOM_DECLARATIONS */', options.angularModuleOptions.declarations.map(d => `\n  ${d}`).join(','));
-    }
-  }
+  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
+  );
 
-  app_module_ts = app_module_ts.replace('{{ MODE }}', options?.mode);
+  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,
+    ...options?.dependencies,
+  };
+
+  const package_json = defaultFiles[11];
+
+  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,
+      ...options?.dependencies,
+    };
   } catch (e) {
     console.error('Failed to parse package.json contents', e);
   }
@@ -119,77 +164,112 @@ 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
-    },
-    dependencies
+    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([
-    '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);
-
-  app_tsx = app_tsx.replace('{{ MODE }}', options?.mode);
+  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 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],
+    'src/index.tsx': defaultFiles[0],
+    [appTsx]: defaultFiles[1],
+    'src/main.tsx': code,
+    'src/theme/variables.css': defaultFiles[2],
+    'tsconfig.json': defaultFiles[3],
+    'package.json': JSON.stringify(package_json, null, 2),
+    'package-lock.json': defaultFiles[5],
+    ...options?.files,
+    ...options?.dependencies,
+    '.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([
-    '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);
-
-  main_ts = main_ts.replace('{{ MODE }}', options?.mode);
+  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 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],
+    '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': JSON.stringify(package_json, null, 2),
+    '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,24 +281,8 @@ 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,
   });
-}
+};
 
 export { openAngularEditor, openHtmlEditor, openReactEditor, openVueEditor };
diff --git a/src/components/global/PlaygroundTabs/index.tsx b/src/components/global/PlaygroundTabs/index.tsx
index da7b45b84e8..69efd4fbe7b 100644
--- a/src/components/global/PlaygroundTabs/index.tsx
+++ b/src/components/global/PlaygroundTabs/index.tsx
@@ -108,18 +108,18 @@ 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.
    * 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/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/components/page/intro/next/DeveloperExperts/index.module.scss b/src/components/page/intro/next/DeveloperExperts/index.module.scss
new file mode 100644
index 00000000000..dc6ad0a608d
--- /dev/null
+++ b/src/components/page/intro/next/DeveloperExperts/index.module.scss
@@ -0,0 +1,51 @@
+: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-bg-dev-experts);
+
+  padding: 2.5rem;
+
+  border-radius: 16px;
+
+  margin-block-start: 1.35rem;
+
+  header {
+    max-width: 29rem;
+  }
+
+  &Title {
+    margin-block-end: 0.5rem;
+
+    color: var(--token-heading-color-dark);
+  }
+
+  &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..0d9311c7875
--- /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://ionicstart.com" target="_blank" rel="noopener noreferrer">
+          Ionic Start →
+        </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/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/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/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/ColorAccordion/index.tsx b/src/components/page/theming/ColorAccordion/index.tsx
index bdd98a43e0c..26575e37117 100755
--- a/src/components/page/theming/ColorAccordion/index.tsx
+++ b/src/components/page/theming/ColorAccordion/index.tsx
@@ -38,13 +38,14 @@ export default function ColorAccordion({ ...props }) {
 
         return (
           <li
+            key={color}
             className={clsx({
               [styles.colorMenuItem]: true,
               [styles.colorMenuItemActive]: color === activeColor,
             })}
             style={
               {
-                'background-color': `var(--ion-color-${color})`,
+                backgroundColor: `var(--ion-color-${color})`,
                 color: `var(--ion-color-${color}-contrast)`,
               } as any
             }
@@ -58,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"
@@ -84,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
                 }
@@ -98,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
                 }
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);
diff --git a/src/components/page/theming/LayeredColorsSelect/index.tsx b/src/components/page/theming/LayeredColorsSelect/index.tsx
index acbe66f5278..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>
-              <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>
   );
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;
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);
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/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..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": {},
@@ -286,7 +306,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 +466,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 +483,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 +650,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": [
         {
@@ -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/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..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": {},
@@ -412,21 +416,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 +531,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 +641,78 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "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": [
+        {
+          "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 +924,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",
@@ -913,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": []
     }
   ],
@@ -933,7 +1128,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value has changed.",
+      "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": []
     },
     {
@@ -947,11 +1142,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "InputEvent",
+      "detail": "InputInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "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": []
     }
   ],
@@ -962,11 +1157,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. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start."
+    },
+    {
+      "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",
@@ -1008,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/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..6ad20a7202c 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,70 @@
       "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\"",
+      "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 +301,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 +435,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 +447,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 +538,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..acb6dfc2bda 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
     },
     {
@@ -535,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",
@@ -726,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": []
     }
   ],
@@ -755,7 +774,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 +797,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-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 a23912dfdd2..ca1bb642a35 100644
--- a/src/translate/.detection/api/segment.json
+++ b/src/translate/.detection/api/segment.json
@@ -157,7 +157,7 @@
     },
     {
       "name": "value",
-      "type": "null | string | undefined",
+      "type": "number | string | undefined",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -165,7 +165,7 @@
       "docsTags": [],
       "values": [
         {
-          "type": "null"
+          "type": "number"
         },
         {
           "type": "string"
diff --git a/src/translate/.detection/api/select.json b/src/translate/.detection/api/select.json
index b66a7127111..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": {},
@@ -40,6 +52,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 +149,49 @@
       "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",
+      "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 +235,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.\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": [
+        {
+          "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 +449,52 @@
       "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": "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",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
-      "docs": "the value of the select.",
+      "docs": "The value of the select.",
       "docsTags": [],
       "values": [
         {
@@ -322,6 +572,46 @@
   ],
   "listeners": [],
   "styles": [
+    {
+      "name": "--background",
+      "annotation": "prop",
+      "docs": "Background of the select"
+    },
+    {
+      "name": "--border-color",
+      "annotation": "prop",
+      "docs": "Color of the select border"
+    },
+    {
+      "name": "--border-radius",
+      "annotation": "prop",
+      "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",
+      "annotation": "prop",
+      "docs": "Style of the select border"
+    },
+    {
+      "name": "--border-width",
+      "annotation": "prop",
+      "docs": "Width of the select border"
+    },
+    {
+      "name": "--highlight-color-focused",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the select when focused"
+    },
+    {
+      "name": "--highlight-color-invalid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the select when invalid"
+    },
+    {
+      "name": "--highlight-color-valid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the select when valid"
+    },
     {
       "name": "--padding-bottom",
       "annotation": "prop",
@@ -351,14 +641,32 @@
       "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": [
+    {
+      "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."
     }
   ],
-  "slots": [],
   "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."
@@ -373,14 +681,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/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 0c2dfe33e55..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": {},
@@ -65,10 +69,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 +157,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 +272,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 +382,85 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "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": [
+        {
+          "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 +479,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 +602,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 +731,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the input value has changed.",
+      "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": []
     },
     {
@@ -550,11 +745,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "InputEvent",
+      "detail": "TextareaInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "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": []
     }
   ],
@@ -565,16 +760,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",
@@ -616,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/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/.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/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..d2aebb869cd
--- /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.
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..d4bc34cffba
--- /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.
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 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.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 6710e65953b..a9b7bd7d2af 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).
\ 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/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..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": {},
@@ -286,7 +306,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 +466,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 +483,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 +650,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": [
         {
@@ -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/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..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": {},
@@ -412,21 +416,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 +531,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 +641,78 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "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": [
+        {
+          "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 +924,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",
@@ -913,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": []
     }
   ],
@@ -933,7 +1128,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the value has changed.",
+      "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": []
     },
     {
@@ -947,11 +1142,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "InputEvent",
+      "detail": "InputInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "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": []
     }
   ],
@@ -962,11 +1157,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. A large radius may display unevenly when using fill=\"outline\"; if needed, use shape=\"round\" instead or increase --padding-start."
+    },
+    {
+      "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",
@@ -1008,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/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..6ad20a7202c 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,70 @@
       "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\"",
+      "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 +301,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 +435,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 +447,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 +538,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..acb6dfc2bda 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
     },
     {
@@ -535,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",
@@ -726,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": []
     }
   ],
@@ -755,7 +774,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 +797,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-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 a23912dfdd2..ca1bb642a35 100644
--- a/src/translate/api/segment.json
+++ b/src/translate/api/segment.json
@@ -157,7 +157,7 @@
     },
     {
       "name": "value",
-      "type": "null | string | undefined",
+      "type": "number | string | undefined",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
@@ -165,7 +165,7 @@
       "docsTags": [],
       "values": [
         {
-          "type": "null"
+          "type": "number"
         },
         {
           "type": "string"
diff --git a/src/translate/api/select.json b/src/translate/api/select.json
index b66a7127111..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": {},
@@ -40,6 +52,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 +149,49 @@
       "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",
+      "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 +235,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.\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": [
+        {
+          "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 +449,52 @@
       "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": "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",
       "mutable": true,
       "attr": "value",
       "reflectToAttr": false,
-      "docs": "the value of the select.",
+      "docs": "The value of the select.",
       "docsTags": [],
       "values": [
         {
@@ -322,6 +572,46 @@
   ],
   "listeners": [],
   "styles": [
+    {
+      "name": "--background",
+      "annotation": "prop",
+      "docs": "Background of the select"
+    },
+    {
+      "name": "--border-color",
+      "annotation": "prop",
+      "docs": "Color of the select border"
+    },
+    {
+      "name": "--border-radius",
+      "annotation": "prop",
+      "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",
+      "annotation": "prop",
+      "docs": "Style of the select border"
+    },
+    {
+      "name": "--border-width",
+      "annotation": "prop",
+      "docs": "Width of the select border"
+    },
+    {
+      "name": "--highlight-color-focused",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the select when focused"
+    },
+    {
+      "name": "--highlight-color-invalid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the select when invalid"
+    },
+    {
+      "name": "--highlight-color-valid",
+      "annotation": "prop",
+      "docs": "The color of the highlight on the select when valid"
+    },
     {
       "name": "--padding-bottom",
       "annotation": "prop",
@@ -351,14 +641,32 @@
       "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": [
+    {
+      "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."
     }
   ],
-  "slots": [],
   "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."
@@ -373,14 +681,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/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 0c2dfe33e55..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": {},
@@ -65,10 +69,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 +157,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 +272,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 +382,85 @@
       "optional": true,
       "required": false
     },
+    {
+      "name": "label",
+      "type": "string | undefined",
+      "mutable": false,
+      "attr": "label",
+      "reflectToAttr": false,
+      "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": [
+        {
+          "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 +479,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 +602,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 +731,7 @@
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when the input value has changed.",
+      "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": []
     },
     {
@@ -550,11 +745,11 @@
     },
     {
       "event": "ionInput",
-      "detail": "InputEvent",
+      "detail": "TextareaInputEventDetail",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
-      "docs": "Emitted when a keyboard input occurred.",
+      "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": []
     }
   ],
@@ -565,16 +760,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",
@@ -616,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/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",
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/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..d2aebb869cd
--- /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.
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..d4bc34cffba
--- /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.
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 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.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 6710e65953b..a9b7bd7d2af 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).
\ 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/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/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/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/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/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.ts b/static/code/stackblitz/v7/html/index.ts
index 952785602e6..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 { 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,9 @@ 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;
+(window as any).createAnimation = createAnimation;
+(window as any).createGesture = createGesture;
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/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json
index ba6c7a69c04..0cc3025348c 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"
       },
@@ -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",
@@ -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",
@@ -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",
@@ -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/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');
diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json
index 28186aee5ff..2b083fd8dea 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.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/vue": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0.tgz",
-      "integrity": "sha512-bikmbUm59EIciZS/Xdm3dhcoeg3PpoiFHl5YsgaydgiZccV7Hu9y7n5zT1ydIPYnJryb2gRaNQ4N8O4JvDll8w==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.10.tgz",
+      "integrity": "sha512-3e3bHGBhhS85byghSbp3U1JP24lHrNilzN4WkBgc9aBeQvwczDNTO69qpiF69fJKDAvU1OrJaAbyomrskE9F9g==",
       "dependencies": {
-        "@ionic/core": "7.0.0",
+        "@ionic/core": "7.0.10",
         "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.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.0"
+        "@ionic/vue": "7.0.10"
       }
     },
     "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"
       },
@@ -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",
@@ -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",
@@ -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.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/vue": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.0.tgz",
-      "integrity": "sha512-bikmbUm59EIciZS/Xdm3dhcoeg3PpoiFHl5YsgaydgiZccV7Hu9y7n5zT1ydIPYnJryb2gRaNQ4N8O4JvDll8w==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.10.tgz",
+      "integrity": "sha512-3e3bHGBhhS85byghSbp3U1JP24lHrNilzN4WkBgc9aBeQvwczDNTO69qpiF69fJKDAvU1OrJaAbyomrskE9F9g==",
       "requires": {
-        "@ionic/core": "7.0.0",
+        "@ionic/core": "7.0.10",
         "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.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.0"
+        "@ionic/vue": "7.0.10"
       }
     },
     "@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=="
     },
     "@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",
@@ -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",
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index b8f118f3bcd..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.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"
   },
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/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/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/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/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/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/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/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..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">
@@ -39,7 +38,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>
@@ -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/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/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/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/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/animations/basic/angular/example_component_html.md b/static/usage/v7/animations/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..1bd8875b1b3
--- /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 (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/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..3c98a4e039f
--- /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 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)
+    .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..9134a2d9f24
--- /dev/null
+++ b/static/usage/v7/animations/basic/react.md
@@ -0,0 +1,45 @@
+```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 onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton 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..afd6c68891b
--- /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 @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)
+          .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>
+```
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>
+```
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..8f8b5a83f58
--- /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 (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/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..4fd3dc227d3
--- /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 onclick="play()">Play</ion-button>
+<ion-button onclick="pause()">Pause</ion-button>
+<ion-button 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..d00350793f3
--- /dev/null
+++ b/static/usage/v7/animations/chain/react.md
@@ -0,0 +1,89 @@
+```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 onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton 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..48166a15be2
--- /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 @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 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>
+```
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>
+```
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..8f8b5a83f58
--- /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 (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/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..3630f6520df
--- /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 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()
+    .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..dc445826e82
--- /dev/null
+++ b/static/usage/v7/animations/group/react.md
@@ -0,0 +1,75 @@
+```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 onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton 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..144eb7b8259
--- /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 @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 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>
+```
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>
+```
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>
+```
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>
+```
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/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>
 
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/styling/global-theming/angular/example_component_html.md b/static/usage/v7/datetime/styling/global-theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0a38b1bc5b6
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime color="rose"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/styling/global-theming/angular/global_css.md b/static/usage/v7/datetime/styling/global-theming/angular/global_css.md
new file mode 100644
index 00000000000..4ec3d3ecdf9
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-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/styling/global-theming/demo.html b/static/usage/v7/datetime/styling/global-theming/demo.html
new file mode 100644
index 00000000000..7ea2d621df3
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-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/styling/global-theming/index.md b/static/usage/v7/datetime/styling/global-theming/index.md
new file mode 100644
index 00000000000..f8824304f07
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-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/styling/global-theming/demo.html"
+/>
diff --git a/static/usage/v7/datetime/styling/global-theming/javascript.md b/static/usage/v7/datetime/styling/global-theming/javascript.md
new file mode 100644
index 00000000000..3da768ccbb4
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-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/styling/global-theming/react/main_css.md b/static/usage/v7/datetime/styling/global-theming/react/main_css.md
new file mode 100644
index 00000000000..dccf6c7d370
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-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/styling/global-theming/react/main_tsx.md b/static/usage/v7/datetime/styling/global-theming/react/main_tsx.md
new file mode 100644
index 00000000000..37e658cdcd1
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-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/styling/global-theming/vue.md b/static/usage/v7/datetime/styling/global-theming/vue.md
new file mode 100644
index 00000000000..32e682cfbc9
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-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/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>
+```
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/index.md b/static/usage/v7/datetime/theming/index.md
index f45d3c0e7c6..3ed5817346f 100644
--- a/static/usage/v7/datetime/theming/index.md
+++ b/static/usage/v7/datetime/theming/index.md
@@ -1,3 +1,5 @@
+# TODO FW-4608
+
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
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/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>
+```
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>
+```
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/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/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/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/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/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';
 
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/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..5161508076b
--- /dev/null
+++ b/static/usage/v7/input/label-slot/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react 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..144a7e80e97
--- /dev/null
+++ b/static/usage/v7/input/label-slot/react.md
@@ -0,0 +1,19 @@
+```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/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..1edb7f8c662
--- /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(3).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..7c98089f4b1
--- /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(3).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..174aabc1e30
--- /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': '^1.0.0',
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+      },
+      dependencies: {
+        '@maskito/react': '^1.0.0',
+        '@maskito/core': '^1.0.0',
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example_vue,
+      },
+      dependencies: {
+        '@maskito/vue': '^1.0.0',
+        '@maskito/core': '^1.0.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': '^1.0.0',
+        '@maskito/core': '^1.0.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..de58d9ded47
--- /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(3).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..2b4d76902dc
--- /dev/null
+++ b/static/usage/v7/input/mask/react.md
@@ -0,0 +1,59 @@
+```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/),
+        ' ',
+        ...Array(3).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) {
+              const input = await cardRef.getInputElement();
+              cardMask(input);
+            }
+          }}
+          label="Card number"
+          placeholder="0000 0000 0000 0000"
+        ></IonInput>
+      </IonItem>
+      <IonItem>
+        <IonInput
+          ref={async (phoneInput) => {
+            if (phoneInput) {
+              const input = await phoneInput.getInputElement();
+              phoneMask(input);
+            }
+          }}
+          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..14b96d0caee
--- /dev/null
+++ b/static/usage/v7/input/mask/vue.md
@@ -0,0 +1,51 @@
+```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/),
+      ' ',
+      ...Array(3).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>
+```
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/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..715c46e475f
--- /dev/null
+++ b/static/usage/v7/input/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/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>
+```
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/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..b4021dbc714 100644
--- a/static/usage/v7/item/inputs/demo.html
+++ b/static/usage/v7/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@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-label>Default Input</ion-label>
-          <ion-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-label position="fixed">Fixed Input</ion-label>
-          <ion-input 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-label position="stacked">Stacked Input</ion-label>
-          <ion-input 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-label position="floating">Floating Input</ion-label>
-          <ion-input 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-label position="floating">Floating Input: Outline (MD only)</ion-label>
-          <ion-input 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-label position="floating">Floating Input: Solid (MD only)</ion-label>
-          <ion-input 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-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-toggle> Toggle </ion-toggle>
+          </ion-item>
 
-        <ion-item>
-          <ion-label>Toggle</ion-label>
-          <ion-toggle slot="end"></ion-toggle>
-        </ion-item>
+          <ion-item>
+            <ion-checkbox> Checkbox </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-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/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({
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/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 eb342ccc056..7c124f4adb2 100644
--- a/static/usage/v7/list/inset/demo.html
+++ b/static/usage/v7/list/inset/demo.html
@@ -1,51 +1,45 @@
 <!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;
+      }
+    </style>
+  </head>
 
-  <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
+  <body>
+    <ion-app>
+      <ion-content color="light">
+        <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/inset/index.md b/static/usage/v7/list/inset/index.md
index 90a7e7c6a64..db7339d24eb 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>
 ```
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/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>
+```
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/angular/modal-example_component_html.md b/static/usage/v7/modal/controller/angular/modal-example_component_html.md
index 34387a14d75..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
@@ -6,14 +6,13 @@
     </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>
 <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 e73c910fc17..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">
@@ -39,40 +38,38 @@
           </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>
       <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>
       `;
 
-      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/controller/javascript.md b/static/usage/v7/modal/controller/javascript.md
index dc4786be8cf..ca5bb55011c 100644
--- a/static/usage/v7/modal/controller/javascript.md
+++ b/static/usage/v7/modal/controller/javascript.md
@@ -20,14 +20,13 @@
           </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>
       <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 8af5d61f855..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';
@@ -32,14 +31,15 @@ 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>
       <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 fb25c458a6e..7df58303b59 100644
--- a/static/usage/v7/modal/controller/vue/modal_vue.md
+++ b/static/usage/v7/modal/controller/vue/modal_vue.md
@@ -7,14 +7,13 @@
       </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>
   <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');
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/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..cae6c505043
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/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>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..fc82a43da02
--- /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..88d0e5c0594
--- /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;
+}
+```
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..532f3e095c7
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md
@@ -0,0 +1,30 @@
+```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..64eef0dd0cb
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/vue.md
@@ -0,0 +1,46 @@
+```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>
+```
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/basic/index.md b/static/usage/v7/range/basic/index.md
index 59922df7eda..49aed4c5b42 100644
--- a/static/usage/v7/range/basic/index.md
+++ b/static/usage/v7/range/basic/index.md
@@ -1,3 +1,5 @@
+# TODO FW-4608
+
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
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/label-slot/angular.md b/static/usage/v7/range/label-slot/angular.md
new file mode 100644
index 00000000000..a1942046521
--- /dev/null
+++ b/static/usage/v7/range/label-slot/angular.md
@@ -0,0 +1,5 @@
+```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..1a39163e66f
--- /dev/null
+++ b/static/usage/v7/range/label-slot/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@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/label-slot/index.md b/static/usage/v7/range/label-slot/index.md
new file mode 100644
index 00000000000..f885a98ce72
--- /dev/null
+++ b/static/usage/v7/range/label-slot/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react 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/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..a1942046521
--- /dev/null
+++ b/static/usage/v7/range/label-slot/javascript.md
@@ -0,0 +1,5 @@
+```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..b67e731d684
--- /dev/null
+++ b/static/usage/v7/range/label-slot/vue.md
@@ -0,0 +1,16 @@
+```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 cfb8134a91f..7357f88d861 100644
--- a/static/usage/v7/range/labels/demo.html
+++ b/static/usage/v7/range/labels/demo.html
@@ -1,45 +1,37 @@
 <!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" label="Label at the Start"></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" label="Label at the End"></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" label="Fixed Width Label"></ion-range>
+          </div>
         </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
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 30df6a33349..ef5563f178e 100644
--- a/static/usage/v7/range/labels/react.md
+++ b/static/usage/v7/range/labels/react.md
@@ -4,22 +4,16 @@ 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>
+    </>
   );
 }
 export default Example;
diff --git a/static/usage/v7/range/labels/vue.md b/static/usage/v7/range/labels/vue.md
index 70d90e834d5..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 eb44f072a3f..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,11 +231,26 @@ 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>
 ```
 </TabItem>
 </Tabs>
-````
\ No newline at end of file
+````
diff --git a/static/usage/v7/range/no-visible-label/angular.md b/static/usage/v7/range/no-visible-label/angular.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v7/range/no-visible-label/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-range aria-label="Volume"></ion-range>
+```
diff --git a/static/usage/v7/range/no-visible-label/demo.html b/static/usage/v7/range/no-visible-label/demo.html
new file mode 100644
index 00000000000..55216a9dd4b
--- /dev/null
+++ b/static/usage/v7/range/no-visible-label/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/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/no-visible-label/javascript.md b/static/usage/v7/range/no-visible-label/javascript.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v7/range/no-visible-label/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-range aria-label="Volume"></ion-range>
+```
diff --git a/static/usage/v7/range/no-visible-label/react.md b/static/usage/v7/range/no-visible-label/react.md
new file mode 100644
index 00000000000..ed85af943b5
--- /dev/null
+++ b/static/usage/v7/range/no-visible-label/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/no-visible-label/vue.md b/static/usage/v7/range/no-visible-label/vue.md
new file mode 100644
index 00000000000..421bea060e4
--- /dev/null
+++ b/static/usage/v7/range/no-visible-label/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>
+```
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_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..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];
 
-  handleChange(event) {
+  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 9fce8ff5f3a..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('ionChange', handleChange);
+    searchbar.addEventListener('ionInput', handleInput);
 
-  function handleChange(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>
-
-</html>
\ No newline at end of file
+      list.innerHTML = items;
+    }
+  </script>
+</html>
diff --git a/static/usage/v7/searchbar/debounce/javascript.md b/static/usage/v7/searchbar/debounce/javascript.md
index 6a74446f699..9d7e54ef92d 100644
--- a/static/usage/v7/searchbar/debounce/javascript.md
+++ b/static/usage/v7/searchbar/debounce/javascript.md
@@ -6,15 +6,26 @@
   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);
 
-  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);
+    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..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 handleChange = (ev: Event) => {
-    let query = "";
+  const handleInput = (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));
-  }
+    setResults(data.filter((d) => d.toLowerCase().indexOf(query) > -1));
+  };
 
   return (
     <>
-      <IonSearchbar debounce={1000} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+      <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 2d85d6ed2d2..836f226ceb7 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">
@@ -16,15 +16,26 @@
   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 };
     },
     methods: {
-      handleChange(event) {
+      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/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>
+```
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/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..a903897a65b
--- /dev/null
+++ b/static/usage/v7/select/label-slot/react.md
@@ -0,0 +1,22 @@
+```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..8c8a8dd8be5
--- /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/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/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..038d7d32130
--- /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>
+```
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/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>
+```
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/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>
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/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
 />
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/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..a9f9136612b
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react 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..4c58fdf2a7b
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/react.md
@@ -0,0 +1,19 @@
+```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/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/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..411fc52d502
--- /dev/null
+++ b/static/usage/v7/textarea/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/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>
+```
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/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-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-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..7e2c7205d1c 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.
@@ -1026,17 +1033,13 @@ export class ItemExample {
         <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-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">
@@ -1048,7 +1051,6 @@ export class ItemExample {
             </ion-text>
           </ion-label>
         </ion-item>
-        ,
         <ion-item lines="full">
           <ion-label>Item with Full Lines</ion-label>
         </ion-item>
@@ -1686,183 +1688,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..4cef9b394d1 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.
@@ -762,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;
@@ -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..002dad4e8bf 100644
--- a/versioned_docs/version-v5/api/tab-bar.md
+++ b/versioned_docs/version-v5/api/tab-bar.md
@@ -5,13 +5,20 @@ 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).
 
 ## 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">
 
@@ -89,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
@@ -167,46 +136,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..83100e90adb 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).
@@ -13,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">
 
@@ -133,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
@@ -249,105 +196,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..9f54b12145a 100644
--- a/versioned_docs/version-v5/api/tab.md
+++ b/versioned_docs/version-v5/api/tab.md
@@ -5,39 +5,41 @@ 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.
 
-> 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.
 
 ## 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 />
diff --git a/versioned_docs/version-v5/contributing/coc.md b/versioned_docs/version-v5/contributing/coc.md
index 5e9c1a94d20..b347ee6e9b0 100644
--- a/versioned_docs/version-v5/contributing/coc.md
+++ b/versioned_docs/version-v5/contributing/coc.md
@@ -8,4 +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/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.
 
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-v5/developing/android.md b/versioned_docs/version-v5/developing/android.md
index 63d7eef663a..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`.
 
 :::
@@ -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-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-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/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-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..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,15 +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/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..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,15 +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/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..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,15 +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/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..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,15 +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/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..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,15 +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>
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/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-v5/reference/glossary.md b/versioned_docs/version-v5/reference/glossary.md
index feddf8fdea1..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/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://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>
@@ -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 bc7d50c7224..165d7fc0b11 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).
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-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-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.md
index e0ac1a0dc61..8cd1eb02b71 100644
--- a/versioned_docs/version-v5/vue/quickstart.md
+++ b/versioned_docs/version-v5/vue/quickstart.md
@@ -41,15 +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 `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`. 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 `router/index.js`.
+4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
 
-5. Delete the `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 `App.vue` and `views/Home.vue`.
+6. Delete the `src/shims-vue.d.ts` file if it exists. This is only needed when using the Vue CLI.
+
+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/angular/navigation.md b/versioned_docs/version-v6/angular/navigation.md
index 0c249d9d055..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.
@@ -191,8 +187,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 +213,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 +428,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 +444,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 1092d293082..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`     |
 
@@ -107,6 +107,7 @@ swiper-slide {
   display: flex;
   position: relative;
 
+  flex-direction: column;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
@@ -132,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
@@ -150,9 +153,7 @@ export class HomePage {
 ```html
 <!-- home.page.html -->
 
-<swiper-container [modules]="swiperModules">
-  ...
-</swiper-container>
+<swiper-container [modules]="swiperModules"> ... </swiper-container>
 ```
 
 :::note
@@ -166,7 +167,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>
@@ -185,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>.
@@ -301,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/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();
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/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/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 72ef3429132..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
@@ -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;
@@ -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 = Date.now() + '.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:
@@ -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”
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 330f38561c4..e16ec9c0ae9 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
 
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 />
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/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.
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/contributing/coc.md b/versioned_docs/version-v6/contributing/coc.md
index 5e9c1a94d20..b347ee6e9b0 100644
--- a/versioned_docs/version-v6/contributing/coc.md
+++ b/versioned_docs/version-v6/contributing/coc.md
@@ -8,4 +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/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
 
diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.md
index d27d9ae62f2..1d33eb4a3d6 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
@@ -112,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/config.md b/versioned_docs/version-v6/developing/config.md
index 06496621023..29716fc052d 100644
--- a/versioned_docs/version-v6/developing/config.md
+++ b/versioned_docs/version-v6/developing/config.md
@@ -16,16 +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.
 
@@ -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,49 +97,49 @@ 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
 
-### 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.                                        |
-| `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 オプション
+
+以下は 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.                                                                                                                                                                                                                          |
+| `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/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
 ```
 
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 />
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 b99cab36a3a..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
@@ -48,6 +48,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';
 
@@ -59,6 +60,7 @@ setupConfig({
 ```
 
 **After**
+
 ```tsx title="App.tsx"
 import { setupIonicReact } from '@ionic/react';
 
@@ -78,36 +80,38 @@ See the [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
@@ -142,6 +146,7 @@ module.exports = {
 8. すべてのオーバーレイイベントリスナーの名前を変更し、新しいフォーマットを使用するようにします。
 
 **Before**
+
 ```html
 <ion-modal
   :is-open="modalOpenRef"
@@ -155,6 +160,7 @@ module.exports = {
 ```
 
 **After**
+
 ```html
 <ion-modal
   :is-open="modalOpenRef"
@@ -174,38 +180,36 @@ 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>
   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 @@ module.exports = {
 10. タブ内の追加ルートは、子ルートではなく兄弟ルートとして書き直す必要があります。
 
 **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
@@ -302,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) を参照してください。
 
@@ -314,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
 
@@ -325,24 +331,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) {
-  ...
+  ...;
 }
 ```
 
@@ -350,34 +358,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) {
-  ...
+  ...;
 }
 ```
 
@@ -395,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:
 
@@ -407,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` フィールドに含まれています。
 
@@ -435,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": {
@@ -455,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/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..a8554943706 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`.
@@ -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>
 ```
@@ -420,15 +419,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 +472,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 +534,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 +550,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/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).
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>
 
diff --git a/versioned_docs/version-v6/react/slides.md b/versioned_docs/version-v6/react/slides.md
index b6cb227f408..98127c26dd7 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
@@ -562,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/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/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/glossary.md b/versioned_docs/version-v6/reference/glossary.md
index a728df32d95..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/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://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/reference/migration.md b/versioned_docs/version-v6/reference/migration.md
index 537e9d99860..7582f6b0c33 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.
-:::
-
-既存のアプリケーションをIonic 3から4に移行するときは、次の一般的なプロセスをお勧めします。
-
-1. `blank` スターターを使用して新しいプロジェクトを作成します ([アプリ開発をはじめる](../developing/starting.md)を参照)
-1. AngularのServiceを `src/providers` から `src/app/services`にコピーする
-   - サービスの`@Injectable()` デコレーターに`{ providedIn: 'root' }`を含まなければなりません。詳しくは、Angularの[プロバイダー](https://angular.jp/guide/providers)をご覧ください。
-1. ディレクトリ構成が変化することを念頭に置いて（`src/components`が`src/app/components`になるなど）、rootに置かれている他のアイテム（Pipe、Componentなど）をコピーします。
-1. グローバルに適用しているSassのスタイルシートを `src/app/app.scss` から `src/global.scss` に移動します。
-1. 次の点に注意しながら、ページごと、または機能ごとにアプリケーションの残りをコピーします。
-   - Shadow DOMはデフォルトで有効になっています。
-   - PageとComponentのSassは、Page/Component名でくくられなくなり、Angularの`@Component`デコレーターのオプションである[`styleUrls`](https://angular.jp/api/core/Component#styleUrls)を利用します。
-   - RxJSはv5からv6にアップデートされました([RxJSの変更点](#rxjs-changes)を参照)
-   - 一部のライフサイクルはAngularのものに置き換える必要があります([ライフサイクルイベント](#lifecycle-events)を参照)
-   - マークアップの変更が必要になる場合があります (移行ツールを利用することができます。[マークアップの変更](#markup-changes)をご覧ください)
-
-多くの場合、Ionic CLIを使用して新しいオブジェクトを生成してからコードをコピーするとうまくいきます。例：`ionic g service weather` は`Weather`というServiceとテストを生成します。その後、必要に応じて少し修正を加えて、コードを古いプロジェクトからコピーします。これは、適切な構造に従っていることを確認するのに役立ちます。また、ユニットテストも生成します。
-
-## パッケージ名の変更
-
-Ionic 4のパッケージ名は`@ionic/angular`です。Ionic 3をアンインストールし、新しいパッケージ名を利用してIonic 4をインストールします。
-
-```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の変更
-
-v3からv4で、RxJSはバージョン6に更新されました。これは、オペレーターとコアのRxJSの関数のインポートパスのほとんどが変更になります。詳細は<a href="https://github.com/ReactiveX/rxjs/blob/6.x/docs_app/content/guide/v6/migration.md" target="_blank">RxJS Migration Guide</a>をご覧ください。
-
-## ライフサイクルイベント
-
-v4では、[Angular](https://angular.jp/guide/lifecycle-hooks)が提供する一般的なイベントを利用できるようになりました。しかし、場合によっては、遷移してComponentのアニメーションが終了してから発生するイベントを使うことをお勧めします。v3から、`ionViewWillEnter`, `ionViewDidEnter`, `ionViewWillLeave`, `ionViewDidLeave`が移植されました。これらのイベントを利用してして、Ionicの独自のアニメーションシステムとアクションを調整します。
-
-ルート変更中にコンポーネントのアニメーション化が完了したときに発生するイベントにアクセスすることをお勧めします。この場合には、ionViewWillEnter、ionViewDidEnter、ionViewWillLeave、およびionViewDidLeaveV3から移植されてきました。これらのイベントを使用して、Ionicのアニメーションシステムと調整します。
-
-詳細については、[router-outlet docs](../api/router-outlet.md)のドキュメントをチェックしてください。
-
-## オーバーレイコンポーネント
-
-Ionicの以前のバージョンでは、Loading、Toast、Alertなどのオーバーレイコンポーネントは同期的に生成されていました。Ionic v4では、これらのコンポーネントはすべて非同期に作成されています。この結果、APIはPromiseベースになりました。
-
-```tsx
-// v3
-showAlert() {
-  const alert = this.alertCtrl.create({
-    message: "Hello There",
-    subHeader: "I'm a subheader"
-  });
-
-  alert.present();
-}
-```
-
-v4ではPromiseが使われています。
-
-```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();
-}
-```
-
-## ナビゲーション
-
-v4では、ナビゲーションが最も多くの変更がありました。`NavController`はオリジナルのものを使わずに、公式のAngular Routerと統合しました。これは、アプリケーション間で一貫したルーティング体験を提供するだけでなく、はるかに信頼性が高くなります。Angularチームのdocsサイトには、ルーターの詳細を網羅した<a href="http://angular.jp/guide/router" target="_blank">excellent guide</a>があります。
-
-ユーザーが慣れ親しんでいるプラットフォーム固有のアニメーションを提供するために、`ion-router-outlet`をAngularアプリ用に作成しました。これはAngularの場合と同様に`router-outlet`機能しますが、スタックベースのナビゲーション（tabs）とアニメーションを提供します。
-
-v4プロジェクトでのナビゲーション機能の詳細な説明は、[Angular navigation guide](../angular/navigation.md) をご覧ください。
-
-## Lazy Loading
-
-ナビゲーションを変更したため、v4ではLazy Loadingの仕組みも変更となりました。
-
-v3では、一般的にLazy Loadingの設定は次の通りでした。
-
-```tsx
-// home.page.ts
-@IonicPage({
-  segment: 'home'
-})
-@Component({ ... })
-export class HomePage {}
-
-// home.module.ts
-@NgModule({
-  declarations: [HomePage],
-  imports: [IonicPageModule.forChild(HomePage)]
-})
-export class HomePageModule {}
-```
-
-しかしながらv4では、Angular routerのやり方である`loadChildren`を使います。
-
-```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 {}
-```
-
-v4プロジェクトでのLazy Loadingの詳細な説明は、[Angular navigation guide](../angular/navigation.md#lazy-loading-routes)を調べてください。
-
-## マークアップの変更
-
-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>.
-
-これらのマークアップの変更を支援するために、TSLintベースの<a href="https://github.com/ionic-team/v4-migration-tslint" target="_blank">移行ツール</a>をリリースしました。これは、問題を検出し、それらのいくつかを自動的に修正することもできます。
-
-## 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).
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/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">
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.
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() {
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/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
 
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index 3a0aebc88a9..75571575ac7 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -48,15 +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 `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`. 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 `router/index.js`.
+4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`.
 
-5. Delete the `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 `App.vue` and `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. 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
 
@@ -100,7 +104,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>
 ```
 
@@ -287,7 +291,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>
 ```
 
@@ -324,7 +340,22 @@ 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 +553,7 @@ addIcons({
   heart: heart,
 });
 ```
+
 **HomePage.vue**
 
 ```html
diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.md
index 7f63df400be..726959e964e 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
@@ -305,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>
@@ -565,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).
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];