diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md
index f8e95318870..ee9e55d22fd 100644
--- a/docs/developing/keyboard.md
+++ b/docs/developing/keyboard.md
@@ -27,7 +27,7 @@ For a list of accepted values, see the
diff --git a/docs/developing/managing-focus.md b/docs/developing/managing-focus.md
index 01b112ea68c..3adcb726bbd 100644
--- a/docs/developing/managing-focus.md
+++ b/docs/developing/managing-focus.md
@@ -35,7 +35,7 @@ There are platform restrictions you should be aware of when using the `setFocus`
The example below demonstrates how to use the `setFocus` API to request focus on an input when the user clicks a button.
-import Basic from '@site/static/usage/v7/input/set-focus/index.md';
+import Basic from '@site/static/usage/v8/input/set-focus/index.md';
diff --git a/docs/layout/dynamic-font-scaling.md b/docs/layout/dynamic-font-scaling.md
index bfce2ea3485..93f539be062 100644
--- a/docs/layout/dynamic-font-scaling.md
+++ b/docs/layout/dynamic-font-scaling.md
@@ -14,7 +14,7 @@ If you are testing on Chrome for Android, make sure ["Accessibility Page Zoom"](
Follow the [Changing the Font Size on a Device](#changing-the-font-size-on-a-device) guide to set your preferred font size, and watch the text in the demo below grow or shrink according to your preferences.
-import DynamicFontScaling from '@site/static/usage/v7/layout/dynamic-font-scaling/index.md';
+import DynamicFontScaling from '@site/static/usage/v8/layout/dynamic-font-scaling/index.md';
diff --git a/docs/layout/structure.md b/docs/layout/structure.md
index 700e77372fa..4922630f8eb 100644
--- a/docs/layout/structure.md
+++ b/docs/layout/structure.md
@@ -22,7 +22,7 @@ Ionic Framework provides several different layouts that can be used to structure
The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.
-import Header from '@site/static/usage/v7/header/basic/index.md';
+import Header from '@site/static/usage/v8/header/basic/index.md';
@@ -30,7 +30,7 @@ import Header from '@site/static/usage/v7/header/basic/index.md';
While a toolbar in a header appears above the content, a footer appears below the content. A header and a footer can also be used together on the same page.
-import Footer from '@site/static/usage/v7/footer/basic/index.md';
+import Footer from '@site/static/usage/v8/footer/basic/index.md';
@@ -38,7 +38,7 @@ import Footer from '@site/static/usage/v7/footer/basic/index.md';
A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
-import Tabs from '@site/static/usage/v7/tabs/router/index.md';
+import Tabs from '@site/static/usage/v8/tabs/router/index.md';
@@ -46,7 +46,7 @@ import Tabs from '@site/static/usage/v7/tabs/router/index.md';
A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
-import Menu from '@site/static/usage/v7/menu/basic/index.md';
+import Menu from '@site/static/usage/v8/menu/basic/index.md';
@@ -58,6 +58,6 @@ By default, the split pane view will show when the screen is larger than `768px`
It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md).
-import SplitPane from '@site/static/usage/v7/split-pane/basic/index.md';
+import SplitPane from '@site/static/usage/v8/split-pane/basic/index.md';
diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
index e4c36d9ecb8..7ad43dee986 100644
--- a/docs/theming/dark-mode.md
+++ b/docs/theming/dark-mode.md
@@ -73,7 +73,7 @@ The demo below prioritizes the site's theme over the system settings. If your sy
Not sure how to change the system settings? Here's [how to enable dark mode on Windows 11](https://support.microsoft.com/en-us/windows/change-colors-in-windows-d26ef4d6-819a-581c-1581-493cfcc005fe) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976).
:::
-import AutomaticDarkMode from '@site/static/usage/v7/theming/automatic-dark-mode/index.md';
+import AutomaticDarkMode from '@site/static/usage/v8/theming/automatic-dark-mode/index.md';
@@ -81,7 +81,7 @@ import AutomaticDarkMode from '@site/static/usage/v7/theming/automatic-dark-mode
In addition to adding the `dark` class to the `` when the media query changes, the class can be added by the app, such as when a user changes a toggle, to switch between the light and dark themes:
-import ManualDarkMode from '@site/static/usage/v7/theming/manual-dark-mode/index.md';
+import ManualDarkMode from '@site/static/usage/v8/theming/manual-dark-mode/index.md';
diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 27558786ff7..9c9515d00b3 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -162,7 +162,7 @@ In the example below, an animation that changes the opacity on the `ion-card` el
By default, all Ionic Animations are paused until the `play` method is called.
-import Basic from '@site/static/usage/v7/animations/basic/index.md';
+import Basic from '@site/static/usage/v8/animations/basic/index.md';
@@ -172,7 +172,7 @@ 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.
-import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md';
+import Keyframes from '@site/static/usage/v8/animations/keyframes/index.md';
@@ -186,7 +186,7 @@ Multiple elements can be animated at the same time and controlled via a single p
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.
-import Group from '@site/static/usage/v7/animations/group/index.md';
+import Group from '@site/static/usage/v8/animations/group/index.md';
@@ -198,7 +198,7 @@ This example sets an inline filter which inverts the background color of the car
See [Methods](#methods) for a complete list of hooks.
-import BeforeAndAfterHooks from '@site/static/usage/v7/animations/before-and-after-hooks/index.md';
+import BeforeAndAfterHooks from '@site/static/usage/v8/animations/before-and-after-hooks/index.md';
@@ -206,7 +206,7 @@ import BeforeAndAfterHooks from '@site/static/usage/v7/animations/before-and-aft
Animations can be chained to run one after the other. The `play` method returns a Promise that resolves when the animation has completed.
-import Chain from '@site/static/usage/v7/animations/chain/index.md';
+import Chain from '@site/static/usage/v8/animations/chain/index.md';
@@ -216,7 +216,7 @@ Ionic Animations gives developers the ability to create powerful gesture-based a
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.
-import Gesture from '@site/static/usage/v7/animations/gesture/index.md';
+import Gesture from '@site/static/usage/v8/animations/gesture/index.md';
@@ -228,7 +228,7 @@ This method works in all supported browsers when creating animations for the fir
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).
-import PreferenceBased from '@site/static/usage/v7/animations/preference-based/index.md';
+import PreferenceBased from '@site/static/usage/v8/animations/preference-based/index.md';
@@ -238,7 +238,7 @@ Certain Ionic components allow developers to provide custom animations. All anim
### Modals
-import ModalOverride from '@site/static/usage/v7/animations/modal-override/index.md';
+import ModalOverride from '@site/static/usage/v8/animations/modal-override/index.md';
diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md
index 875876b3b56..60d16272454 100644
--- a/docs/utilities/gestures.md
+++ b/docs/utilities/gestures.md
@@ -162,7 +162,7 @@ const gesture = createGesture({
## Basic Gestures
-import Basic from '@site/static/usage/v7/gestures/basic/index.md';
+import Basic from '@site/static/usage/v8/gestures/basic/index.md';
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`.
@@ -170,7 +170,7 @@ In this example, our app listens for gestures on the `ion-content` element. When
## Double Click Gesture
-import DoubleClick from '@site/static/usage/v7/gestures/double-click/index.md';
+import DoubleClick from '@site/static/usage/v8/gestures/double-click/index.md';
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.