+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+```
diff --git a/static/usage/v9/header/custom-scroll-target/react/main_css.md b/static/usage/v9/header/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v9/header/custom-scroll-target/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v9/header/custom-scroll-target/react/main_tsx.md b/static/usage/v9/header/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..923ea715aa7
--- /dev/null
+++ b/static/usage/v9/header/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,83 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies
+ on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have
+ two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+
Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+
Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some
+ people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes
+ from.
+
+
+
Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants,
+ or suck up water for drinking or bathing.
+
+
+
Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout
+ with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a
+ flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it
+ surfaces.
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/header/custom-scroll-target/vue.md b/static/usage/v9/header/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..1129415b233
--- /dev/null
+++ b/static/usage/v9/header/custom-scroll-target/vue.md
@@ -0,0 +1,87 @@
+```html
+
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+
Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+
Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+
Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+
Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/header/fade/angular/example_component_html.md b/static/usage/v9/header/fade/angular/example_component_html.md
new file mode 100644
index 00000000000..473ad54c8da
--- /dev/null
+++ b/static/usage/v9/header/fade/angular/example_component_html.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+```
diff --git a/static/usage/v9/header/fade/angular/example_component_ts.md b/static/usage/v9/header/fade/angular/example_component_ts.md
new file mode 100644
index 00000000000..afba56786aa
--- /dev/null
+++ b/static/usage/v9/header/fade/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/header/fade/demo.html b/static/usage/v9/header/fade/demo.html
new file mode 100644
index 00000000000..2158c932198
--- /dev/null
+++ b/static/usage/v9/header/fade/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
diff --git a/static/usage/v9/header/fade/index.md b/static/usage/v9/header/fade/index.md
new file mode 100644
index 00000000000..c9aaafdb33f
--- /dev/null
+++ b/static/usage/v9/header/fade/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';
+
+
diff --git a/static/usage/v9/header/fade/javascript.md b/static/usage/v9/header/fade/javascript.md
new file mode 100644
index 00000000000..473ad54c8da
--- /dev/null
+++ b/static/usage/v9/header/fade/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+```
diff --git a/static/usage/v9/header/fade/react.md b/static/usage/v9/header/fade/react.md
new file mode 100644
index 00000000000..085bea0296d
--- /dev/null
+++ b/static/usage/v9/header/fade/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/header/fade/vue.md b/static/usage/v9/header/fade/vue.md
new file mode 100644
index 00000000000..e18de2b186b
--- /dev/null
+++ b/static/usage/v9/header/fade/vue.md
@@ -0,0 +1,73 @@
+```html
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+```
diff --git a/static/usage/v9/header/no-border/angular/example_component_html.md b/static/usage/v9/header/no-border/angular/example_component_html.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v9/header/no-border/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v9/header/no-border/angular/example_component_ts.md b/static/usage/v9/header/no-border/angular/example_component_ts.md
new file mode 100644
index 00000000000..afba56786aa
--- /dev/null
+++ b/static/usage/v9/header/no-border/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/header/no-border/demo.html b/static/usage/v9/header/no-border/demo.html
new file mode 100644
index 00000000000..e561641903a
--- /dev/null
+++ b/static/usage/v9/header/no-border/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
diff --git a/static/usage/v9/header/no-border/index.md b/static/usage/v9/header/no-border/index.md
new file mode 100644
index 00000000000..1ecd316f083
--- /dev/null
+++ b/static/usage/v9/header/no-border/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';
+
+
diff --git a/static/usage/v9/header/no-border/javascript.md b/static/usage/v9/header/no-border/javascript.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v9/header/no-border/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v9/header/no-border/react.md b/static/usage/v9/header/no-border/react.md
new file mode 100644
index 00000000000..2eb14f6882f
--- /dev/null
+++ b/static/usage/v9/header/no-border/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Content
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/header/no-border/vue.md b/static/usage/v9/header/no-border/vue.md
new file mode 100644
index 00000000000..b390d195a69
--- /dev/null
+++ b/static/usage/v9/header/no-border/vue.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+```
diff --git a/static/usage/v9/header/translucent/angular/example_component_html.md b/static/usage/v9/header/translucent/angular/example_component_html.md
new file mode 100644
index 00000000000..657a88bf066
--- /dev/null
+++ b/static/usage/v9/header/translucent/angular/example_component_html.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+```
diff --git a/static/usage/v9/header/translucent/angular/example_component_ts.md b/static/usage/v9/header/translucent/angular/example_component_ts.md
new file mode 100644
index 00000000000..afba56786aa
--- /dev/null
+++ b/static/usage/v9/header/translucent/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/header/translucent/demo.html b/static/usage/v9/header/translucent/demo.html
new file mode 100644
index 00000000000..8b8ba4e5fd4
--- /dev/null
+++ b/static/usage/v9/header/translucent/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
diff --git a/static/usage/v9/header/translucent/index.md b/static/usage/v9/header/translucent/index.md
new file mode 100644
index 00000000000..23659b507f3
--- /dev/null
+++ b/static/usage/v9/header/translucent/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';
+
+
diff --git a/static/usage/v9/header/translucent/javascript.md b/static/usage/v9/header/translucent/javascript.md
new file mode 100644
index 00000000000..5c0048c019c
--- /dev/null
+++ b/static/usage/v9/header/translucent/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+```
diff --git a/static/usage/v9/header/translucent/react.md b/static/usage/v9/header/translucent/react.md
new file mode 100644
index 00000000000..def835913c3
--- /dev/null
+++ b/static/usage/v9/header/translucent/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/header/translucent/vue.md b/static/usage/v9/header/translucent/vue.md
new file mode 100644
index 00000000000..97bffb7dfa3
--- /dev/null
+++ b/static/usage/v9/header/translucent/vue.md
@@ -0,0 +1,73 @@
+```html
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+```
diff --git a/static/usage/v9/icon/basic/angular/example_component_html.md b/static/usage/v9/icon/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v9/icon/basic/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/icon/basic/angular/example_component_ts.md b/static/usage/v9/icon/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..97f61f05fb7
--- /dev/null
+++ b/static/usage/v9/icon/basic/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ logoIonic });
+ }
+}
+```
diff --git a/static/usage/v9/icon/basic/demo.html b/static/usage/v9/icon/basic/demo.html
new file mode 100644
index 00000000000..ed04a8db2ae
--- /dev/null
+++ b/static/usage/v9/icon/basic/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
Icon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/icon/basic/index.md b/static/usage/v9/icon/basic/index.md
new file mode 100644
index 00000000000..b4b2cc4d31f
--- /dev/null
+++ b/static/usage/v9/icon/basic/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+
diff --git a/static/usage/v9/icon/basic/javascript/index_html.md b/static/usage/v9/icon/basic/javascript/index_html.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v9/icon/basic/javascript/index_html.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/icon/basic/javascript/index_ts.md b/static/usage/v9/icon/basic/javascript/index_ts.md
new file mode 100644
index 00000000000..389fa6d96b1
--- /dev/null
+++ b/static/usage/v9/icon/basic/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to a "logo-ionic" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'logo-ionic': logoIonic });
+ */
+addIcons({ logoIonic });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/icon/basic/react.md b/static/usage/v9/icon/basic/react.md
new file mode 100644
index 00000000000..57383875130
--- /dev/null
+++ b/static/usage/v9/icon/basic/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+import { logoIonic } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/icon/basic/vue.md b/static/usage/v9/icon/basic/vue.md
new file mode 100644
index 00000000000..e305ee5c2a9
--- /dev/null
+++ b/static/usage/v9/icon/basic/vue.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/icon/custom-svgs/angular/example_component_css.md b/static/usage/v9/icon/custom-svgs/angular/example_component_css.md
new file mode 100644
index 00000000000..e84f55040f5
--- /dev/null
+++ b/static/usage/v9/icon/custom-svgs/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+.row {
+ display: flex;
+ gap: 12px;
+}
+
+.row > ion-icon {
+ font-size: 32px;
+}
+```
diff --git a/static/usage/v9/icon/custom-svgs/angular/example_component_html.md b/static/usage/v9/icon/custom-svgs/angular/example_component_html.md
new file mode 100644
index 00000000000..1886e147e14
--- /dev/null
+++ b/static/usage/v9/icon/custom-svgs/angular/example_component_html.md
@@ -0,0 +1,27 @@
+```html
+
External SVG Files
+
+
+
+
Inline SVG Content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/icon/custom-svgs/angular/example_component_ts.md b/static/usage/v9/icon/custom-svgs/angular/example_component_ts.md
new file mode 100644
index 00000000000..521ef924383
--- /dev/null
+++ b/static/usage/v9/icon/custom-svgs/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/icon/custom-svgs/demo.html b/static/usage/v9/icon/custom-svgs/demo.html
new file mode 100644
index 00000000000..c2a0746baa8
--- /dev/null
+++ b/static/usage/v9/icon/custom-svgs/demo.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
Custom SVGs
+
+
+
+
+
+
+
+
+
+
+
+
+
External SVG Files
+
+
+
+
Inline SVG Content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/icon/custom-svgs/index.md b/static/usage/v9/icon/custom-svgs/index.md
new file mode 100644
index 00000000000..ee9fecc280c
--- /dev/null
+++ b/static/usage/v9/icon/custom-svgs/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';
+
+
diff --git a/static/usage/v9/icon/custom-svgs/javascript.md b/static/usage/v9/icon/custom-svgs/javascript.md
new file mode 100644
index 00000000000..5bd4a7452c7
--- /dev/null
+++ b/static/usage/v9/icon/custom-svgs/javascript.md
@@ -0,0 +1,38 @@
+```html
+
External SVG Files
+
+
+
+
Inline SVG Content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/icon/custom-svgs/react/main_css.md b/static/usage/v9/icon/custom-svgs/react/main_css.md
new file mode 100644
index 00000000000..e84f55040f5
--- /dev/null
+++ b/static/usage/v9/icon/custom-svgs/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+.row {
+ display: flex;
+ gap: 12px;
+}
+
+.row > ion-icon {
+ font-size: 32px;
+}
+```
diff --git a/static/usage/v9/icon/custom-svgs/react/main_tsx.md b/static/usage/v9/icon/custom-svgs/react/main_tsx.md
new file mode 100644
index 00000000000..b2fb0611892
--- /dev/null
+++ b/static/usage/v9/icon/custom-svgs/react/main_tsx.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
External SVG Files
+
+
+
+
Inline SVG Content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/icon/custom-svgs/vue.md b/static/usage/v9/icon/custom-svgs/vue.md
new file mode 100644
index 00000000000..4e848d3963d
--- /dev/null
+++ b/static/usage/v9/icon/custom-svgs/vue.md
@@ -0,0 +1,44 @@
+```vue
+
+ External SVG Files
+
+
+
+ Inline SVG Content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/icon/font-icons/angular/example_component_css.md b/static/usage/v9/icon/font-icons/angular/example_component_css.md
new file mode 100644
index 00000000000..4ab90c623ce
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+.row {
+ display: flex;
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.row > ion-icon {
+ font-size: 24px;
+}
+```
diff --git a/static/usage/v9/icon/font-icons/angular/example_component_html.md b/static/usage/v9/icon/font-icons/angular/example_component_html.md
new file mode 100644
index 00000000000..8ee2e3835e9
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/angular/example_component_html.md
@@ -0,0 +1,169 @@
+```html
+
Font Awesome Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Bootstrap Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Remix Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Phosphor Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+```
diff --git a/static/usage/v9/icon/font-icons/angular/example_component_ts.md b/static/usage/v9/icon/font-icons/angular/example_component_ts.md
new file mode 100644
index 00000000000..ce17a10dac7
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonIcon } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonIcon],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/icon/font-icons/angular/global_css.md b/static/usage/v9/icon/font-icons/angular/global_css.md
new file mode 100644
index 00000000000..f433b543bf6
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/angular/global_css.md
@@ -0,0 +1,13 @@
+```css
+/* Font Awesome Icons */
+@import '@fortawesome/fontawesome-free/css/all.min.css';
+
+/* Bootstrap Icons */
+@import 'bootstrap-icons/font/bootstrap-icons.css';
+
+/* Remix Icons */
+@import 'remixicon/fonts/remixicon.css';
+
+/* Phosphor Icons */
+@import '@phosphor-icons/web/fill/style.css';
+```
diff --git a/static/usage/v9/icon/font-icons/demo.html b/static/usage/v9/icon/font-icons/demo.html
new file mode 100644
index 00000000000..0cf98072ecb
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/demo.html
@@ -0,0 +1,221 @@
+
+
+
+
+
+
Font Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Font Awesome Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Bootstrap Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Remix Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Phosphor Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
+
+
diff --git a/static/usage/v9/icon/font-icons/index.md b/static/usage/v9/icon/font-icons/index.md
new file mode 100644
index 00000000000..81ffc09069d
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/index.md
@@ -0,0 +1,76 @@
+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/main_tsx.md';
+import react_main_css from './react/main_css.md';
+import react_app_tsx from './react/app_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v9/icon/font-icons/javascript/index_html.md b/static/usage/v9/icon/font-icons/javascript/index_html.md
new file mode 100644
index 00000000000..46d46477996
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/javascript/index_html.md
@@ -0,0 +1,181 @@
+```html
+
Font Awesome Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Bootstrap Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Remix Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Phosphor Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
+```
diff --git a/static/usage/v9/icon/font-icons/javascript/index_ts.md b/static/usage/v9/icon/font-icons/javascript/index_ts.md
new file mode 100644
index 00000000000..15b210024c0
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/javascript/index_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/* Font Awesome Icons */
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+/* Bootstrap Icons */
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
+/* Remix Icon */
+import 'remixicon/fonts/remixicon.css';
+
+/* Phosphor Icons */
+import '@phosphor-icons/web/fill/style.css';
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/icon/font-icons/react/app_tsx.md b/static/usage/v9/icon/font-icons/react/app_tsx.md
new file mode 100644
index 00000000000..481d043ccc6
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/react/app_tsx.md
@@ -0,0 +1,60 @@
+```tsx
+import React from 'react';
+import { setupIonicReact, IonApp, IonContent } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/react/css/palettes/dark.always.css';
+// import '@ionic/react/css/palettes/dark.class.css';
+import '@ionic/react/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/* Font Awesome Icons */
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+/* Bootstrap Icons */
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
+/* Remix Icon */
+import 'remixicon/fonts/remixicon.css';
+
+/* Phosphor Icons */
+import '@phosphor-icons/web/fill/style.css';
+
+import Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+ return (
+
+
+
+
+ );
+}
+```
diff --git a/static/usage/v9/icon/font-icons/react/main_css.md b/static/usage/v9/icon/font-icons/react/main_css.md
new file mode 100644
index 00000000000..4ab90c623ce
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+.row {
+ display: flex;
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.row > ion-icon {
+ font-size: 24px;
+}
+```
diff --git a/static/usage/v9/icon/font-icons/react/main_tsx.md b/static/usage/v9/icon/font-icons/react/main_tsx.md
new file mode 100644
index 00000000000..5b290b65bfc
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/react/main_tsx.md
@@ -0,0 +1,182 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
Font Awesome Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Bootstrap Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Remix Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
Phosphor Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/icon/font-icons/vue/example_vue.md b/static/usage/v9/icon/font-icons/vue/example_vue.md
new file mode 100644
index 00000000000..12e56ca706d
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/vue/example_vue.md
@@ -0,0 +1,187 @@
+```vue
+
+ Font Awesome Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+ Bootstrap Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+ Remix Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+ Phosphor Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Save
+
+
+
+
+ Trash
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/icon/font-icons/vue/main_ts.md b/static/usage/v9/icon/font-icons/vue/main_ts.md
new file mode 100644
index 00000000000..e026db8938a
--- /dev/null
+++ b/static/usage/v9/icon/font-icons/vue/main_ts.md
@@ -0,0 +1,50 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/vue/css/palettes/dark.always.css';
+// import '@ionic/vue/css/palettes/dark.class.css';
+import '@ionic/vue/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/* Font Awesome Icons */
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+/* Bootstrap Icons */
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
+/* Remix Icon */
+import 'remixicon/fonts/remixicon.css';
+
+/* Phosphor Icons */
+import '@phosphor-icons/web/fill/style.css';
+
+createApp(App).use(IonicVue).mount('#app');
+```
diff --git a/static/usage/v9/img/basic/angular/example_component_html.md b/static/usage/v9/img/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..61e27f8b9d6
--- /dev/null
+++ b/static/usage/v9/img/basic/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v9/img/basic/angular/example_component_ts.md b/static/usage/v9/img/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..c390454f057
--- /dev/null
+++ b/static/usage/v9/img/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonImg } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonImg],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/img/basic/demo.html b/static/usage/v9/img/basic/demo.html
new file mode 100644
index 00000000000..baed8638724
--- /dev/null
+++ b/static/usage/v9/img/basic/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/img/basic/index.md b/static/usage/v9/img/basic/index.md
new file mode 100644
index 00000000000..afd5e7c305f
--- /dev/null
+++ b/static/usage/v9/img/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v9/img/basic/javascript.md b/static/usage/v9/img/basic/javascript.md
new file mode 100644
index 00000000000..61e27f8b9d6
--- /dev/null
+++ b/static/usage/v9/img/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v9/img/basic/react.md b/static/usage/v9/img/basic/react.md
new file mode 100644
index 00000000000..0236cc28976
--- /dev/null
+++ b/static/usage/v9/img/basic/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonImg } from '@ionic/react';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/img/basic/vue.md b/static/usage/v9/img/basic/vue.md
new file mode 100644
index 00000000000..cccf7e8d759
--- /dev/null
+++ b/static/usage/v9/img/basic/vue.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v9/infinite-scroll/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..962be4924aa
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/basic/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+ @for (item of items; track item; let index = $index) {
+
+
+
+ {{ item }}
+
+ }
+
+
+
+
+```
diff --git a/static/usage/v9/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v9/infinite-scroll/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..bb576646dc5
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/basic/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+import {
+ InfiniteScrollCustomEvent,
+ IonAvatar,
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonItem,
+ IonLabel,
+ IonList,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent implements OnInit {
+ items: string[] = [];
+
+ ngOnInit() {
+ this.generateItems();
+ }
+
+ private generateItems() {
+ const count = this.items.length + 1;
+ for (let i = 0; i < 50; i++) {
+ this.items.push(`Item ${count + i}`);
+ }
+ }
+
+ onIonInfinite(event: InfiniteScrollCustomEvent) {
+ this.generateItems();
+ setTimeout(() => {
+ event.target.complete();
+ }, 500);
+ }
+}
+```
diff --git a/static/usage/v9/infinite-scroll/basic/demo.html b/static/usage/v9/infinite-scroll/basic/demo.html
new file mode 100644
index 00000000000..29b7784e6cf
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/basic/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/infinite-scroll/basic/index.md b/static/usage/v9/infinite-scroll/basic/index.md
new file mode 100644
index 00000000000..b4938a3cb6f
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v9/infinite-scroll/basic/javascript.md b/static/usage/v9/infinite-scroll/basic/javascript.md
new file mode 100644
index 00000000000..b61db4c6ae3
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/basic/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/infinite-scroll/basic/react.md b/static/usage/v9/infinite-scroll/basic/react.md
new file mode 100644
index 00000000000..145aa32dd47
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/basic/react.md
@@ -0,0 +1,53 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonList,
+ IonItem,
+ IonAvatar,
+ IonLabel,
+} from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState
([]);
+
+ const generateItems = () => {
+ const newItems = [];
+ for (let i = 0; i < 50; i++) {
+ newItems.push(`Item ${1 + items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ };
+
+ useEffect(() => {
+ generateItems();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+ {item}
+
+ ))}
+
+ {
+ generateItems();
+ setTimeout(() => event.target.complete(), 500);
+ }}
+ >
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/infinite-scroll/basic/vue.md b/static/usage/v9/infinite-scroll/basic/vue.md
new file mode 100644
index 00000000000..324f8d515f1
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/basic/vue.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+}
+
+.infinite-scroll-content {
+ text-align: center;
+ padding: 20px 0;
+}
+```
diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..fb41f8761c7
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,70 @@
+```html
+
+
+ @for (item of items; track item; let index = $index) {
+
+
+
+ {{ item }}
+
+ }
+
+
+
+
+
+```
diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..0e35b19accf
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent implements OnInit {
+ items: string[] = [];
+
+ ngOnInit() {
+ for (let i = 1; i < 51; i++) {
+ this.items.push(`Item ${i}`);
+ }
+ }
+}
+```
diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..95dc010360c
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/demo.html
@@ -0,0 +1,117 @@
+
+
+
+ Infinite Scroll
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/index.md
new file mode 100644
index 00000000000..b7e73189dde
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_css.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+}
+
+.infinite-scroll-content {
+ text-align: center;
+ padding: 20px 0;
+}
+```
diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
new file mode 100644
index 00000000000..1139f55920d
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
@@ -0,0 +1,89 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import { IonContent, IonInfiniteScroll, IonList, IonItem, IonAvatar, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ const newItems = [];
+ for (let i = 1; i < 51; i++) {
+ newItems.push(`Item ${items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+ {item}
+
+ ))}
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..0c850de11dd
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/vue.md
@@ -0,0 +1,94 @@
+```html
+
+
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..d73da989437
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+ @for (item of items; track item; let index = $index) {
+
+
+
+ {{ item }}
+
+ }
+
+
+
+
+```
diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..85c15d47b7e
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+import {
+ IonAvatar,
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonItem,
+ IonLabel,
+ IonList,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent implements OnInit {
+ items: string[] = [];
+
+ ngOnInit() {
+ for (let i = 1; i < 51; i++) {
+ this.items.push(`Item ${i}`);
+ }
+ }
+}
+```
diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v9/infinite-scroll/infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..de95908d8d8
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/demo.html
@@ -0,0 +1,53 @@
+
+
+
+ Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/index.md
new file mode 100644
index 00000000000..f37da3c2a53
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/react.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/react.md
new file mode 100644
index 00000000000..2c2b5f77b8a
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonList,
+ IonItem,
+ IonAvatar,
+ IonLabel,
+} from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ const newItems = [];
+ for (let i = 1; i < 51; i++) {
+ newItems.push(`Item ${items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+ {item}
+
+ ))}
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..b2d02c1db4d
--- /dev/null
+++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input-otp/basic/angular/example_component_html.md b/static/usage/v9/input-otp/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..e915f538363
--- /dev/null
+++ b/static/usage/v9/input-otp/basic/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+```
diff --git a/static/usage/v9/input-otp/basic/angular/example_component_ts.md b/static/usage/v9/input-otp/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..a5cf4e26f23
--- /dev/null
+++ b/static/usage/v9/input-otp/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-otp/basic/demo.html b/static/usage/v9/input-otp/basic/demo.html
new file mode 100644
index 00000000000..5bb3b201172
--- /dev/null
+++ b/static/usage/v9/input-otp/basic/demo.html
@@ -0,0 +1,29 @@
+
+
+
+ Input OTP
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/basic/index.md b/static/usage/v9/input-otp/basic/index.md
new file mode 100644
index 00000000000..74aacd2bc70
--- /dev/null
+++ b/static/usage/v9/input-otp/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+```
diff --git a/static/usage/v9/input-otp/basic/react.md b/static/usage/v9/input-otp/basic/react.md
new file mode 100644
index 00000000000..833c82db83d
--- /dev/null
+++ b/static/usage/v9/input-otp/basic/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Didn't get a code? Resend the code
+
+
+ Didn't get a code? Resend the code
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/basic/vue.md b/static/usage/v9/input-otp/basic/vue.md
new file mode 100644
index 00000000000..c1ceb4fa5b1
--- /dev/null
+++ b/static/usage/v9/input-otp/basic/vue.md
@@ -0,0 +1,10 @@
+```html
+
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+
+
+
+```
diff --git a/static/usage/v9/input-otp/fill/angular/example_component_html.md b/static/usage/v9/input-otp/fill/angular/example_component_html.md
new file mode 100644
index 00000000000..705348532cb
--- /dev/null
+++ b/static/usage/v9/input-otp/fill/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+ Outline Solid
+```
diff --git a/static/usage/v9/input-otp/fill/angular/example_component_ts.md b/static/usage/v9/input-otp/fill/angular/example_component_ts.md
new file mode 100644
index 00000000000..a5cf4e26f23
--- /dev/null
+++ b/static/usage/v9/input-otp/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-otp/fill/demo.html b/static/usage/v9/input-otp/fill/demo.html
new file mode 100644
index 00000000000..629bb749df3
--- /dev/null
+++ b/static/usage/v9/input-otp/fill/demo.html
@@ -0,0 +1,29 @@
+
+
+
+ Input OTP
+
+
+
+ Outline
+ Solid
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/fill/index.md b/static/usage/v9/input-otp/fill/index.md
new file mode 100644
index 00000000000..770b3bb72c5
--- /dev/null
+++ b/static/usage/v9/input-otp/fill/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+ Outline Solid
+```
diff --git a/static/usage/v9/input-otp/fill/react.md b/static/usage/v9/input-otp/fill/react.md
new file mode 100644
index 00000000000..06171508008
--- /dev/null
+++ b/static/usage/v9/input-otp/fill/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Outline
+ Solid
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/fill/vue.md b/static/usage/v9/input-otp/fill/vue.md
new file mode 100644
index 00000000000..387e6edc050
--- /dev/null
+++ b/static/usage/v9/input-otp/fill/vue.md
@@ -0,0 +1,10 @@
+```html
+
+ Outline
+ Solid
+
+
+
+```
diff --git a/static/usage/v9/input-otp/pattern/angular/example_component_html.md b/static/usage/v9/input-otp/pattern/angular/example_component_html.md
new file mode 100644
index 00000000000..042b8df6d14
--- /dev/null
+++ b/static/usage/v9/input-otp/pattern/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+ Numbers 1-4 only
+ All characters allowed
+ Capital Latin letters only
+ Greek characters only
+ Arabic characters only
+ Chinese characters only
+```
diff --git a/static/usage/v9/input-otp/pattern/angular/example_component_ts.md b/static/usage/v9/input-otp/pattern/angular/example_component_ts.md
new file mode 100644
index 00000000000..a5cf4e26f23
--- /dev/null
+++ b/static/usage/v9/input-otp/pattern/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-otp/pattern/demo.html b/static/usage/v9/input-otp/pattern/demo.html
new file mode 100644
index 00000000000..a6bcb682824
--- /dev/null
+++ b/static/usage/v9/input-otp/pattern/demo.html
@@ -0,0 +1,35 @@
+
+
+
+ Input OTP
+
+
+
+ Numbers 1-4 only
+ All characters allowed
+
+ Capital Latin letters only
+
+ Greek characters only
+ Arabic characters only
+ Chinese characters only
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/pattern/index.md b/static/usage/v9/input-otp/pattern/index.md
new file mode 100644
index 00000000000..1accdae3785
--- /dev/null
+++ b/static/usage/v9/input-otp/pattern/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';
+
+ Numbers 1-4 only
+ All characters allowed
+ Capital Latin letters only
+ Greek characters only
+ Arabic characters only
+ Chinese characters only
+```
diff --git a/static/usage/v9/input-otp/pattern/react.md b/static/usage/v9/input-otp/pattern/react.md
new file mode 100644
index 00000000000..f491b7e757b
--- /dev/null
+++ b/static/usage/v9/input-otp/pattern/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Numbers 1-4 only
+
+
+ All characters allowed
+
+
+ Capital Latin letters only
+
+
+ Greek characters only
+
+
+ Arabic characters only
+
+
+ Chinese characters only
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/pattern/vue.md b/static/usage/v9/input-otp/pattern/vue.md
new file mode 100644
index 00000000000..e7873f07ca0
--- /dev/null
+++ b/static/usage/v9/input-otp/pattern/vue.md
@@ -0,0 +1,16 @@
+```html
+
+ Numbers 1-4 only
+ All characters allowed
+
+ Capital Latin letters only
+
+ Greek characters only
+ Arabic characters only
+ Chinese characters only
+
+
+
+```
diff --git a/static/usage/v9/input-otp/separators/angular/example_component_html.md b/static/usage/v9/input-otp/separators/angular/example_component_html.md
new file mode 100644
index 00000000000..3587056c4c7
--- /dev/null
+++ b/static/usage/v9/input-otp/separators/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+```
diff --git a/static/usage/v9/input-otp/separators/angular/example_component_ts.md b/static/usage/v9/input-otp/separators/angular/example_component_ts.md
new file mode 100644
index 00000000000..a5cf4e26f23
--- /dev/null
+++ b/static/usage/v9/input-otp/separators/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-otp/separators/demo.html b/static/usage/v9/input-otp/separators/demo.html
new file mode 100644
index 00000000000..adb5a1e2f8b
--- /dev/null
+++ b/static/usage/v9/input-otp/separators/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Input OTP
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/separators/index.md b/static/usage/v9/input-otp/separators/index.md
new file mode 100644
index 00000000000..e07b35ed8a3
--- /dev/null
+++ b/static/usage/v9/input-otp/separators/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';
+
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+```
diff --git a/static/usage/v9/input-otp/separators/react.md b/static/usage/v9/input-otp/separators/react.md
new file mode 100644
index 00000000000..67e68eb1f1f
--- /dev/null
+++ b/static/usage/v9/input-otp/separators/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Didn't get a code? Resend the code
+
+
+ Didn't get a code? Resend the code
+
+
+ Didn't get a code? Resend the code
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/separators/vue.md b/static/usage/v9/input-otp/separators/vue.md
new file mode 100644
index 00000000000..7385329fc24
--- /dev/null
+++ b/static/usage/v9/input-otp/separators/vue.md
@@ -0,0 +1,11 @@
+```html
+
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+
+
+
+```
diff --git a/static/usage/v9/input-otp/shape/angular/example_component_html.md b/static/usage/v9/input-otp/shape/angular/example_component_html.md
new file mode 100644
index 00000000000..1f81f9cc5fe
--- /dev/null
+++ b/static/usage/v9/input-otp/shape/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+ Round
+ Soft
+ Rectangular
+```
diff --git a/static/usage/v9/input-otp/shape/angular/example_component_ts.md b/static/usage/v9/input-otp/shape/angular/example_component_ts.md
new file mode 100644
index 00000000000..a5cf4e26f23
--- /dev/null
+++ b/static/usage/v9/input-otp/shape/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-otp/shape/demo.html b/static/usage/v9/input-otp/shape/demo.html
new file mode 100644
index 00000000000..0631c515b2d
--- /dev/null
+++ b/static/usage/v9/input-otp/shape/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Input OTP
+
+
+
+ Round
+ Soft
+ Rectangular
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/shape/index.md b/static/usage/v9/input-otp/shape/index.md
new file mode 100644
index 00000000000..b710df13bea
--- /dev/null
+++ b/static/usage/v9/input-otp/shape/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';
+
+ Round
+ Soft
+ Rectangular
+```
diff --git a/static/usage/v9/input-otp/shape/react.md b/static/usage/v9/input-otp/shape/react.md
new file mode 100644
index 00000000000..da104a6231e
--- /dev/null
+++ b/static/usage/v9/input-otp/shape/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Round
+ Soft
+ Rectangular
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/shape/vue.md b/static/usage/v9/input-otp/shape/vue.md
new file mode 100644
index 00000000000..3d5e70d516a
--- /dev/null
+++ b/static/usage/v9/input-otp/shape/vue.md
@@ -0,0 +1,11 @@
+```html
+
+ Round
+ Soft
+ Rectangular
+
+
+
+```
diff --git a/static/usage/v9/input-otp/size/angular/example_component_html.md b/static/usage/v9/input-otp/size/angular/example_component_html.md
new file mode 100644
index 00000000000..340cbf8f58e
--- /dev/null
+++ b/static/usage/v9/input-otp/size/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+ Small
+ Medium
+ Large
+```
diff --git a/static/usage/v9/input-otp/size/angular/example_component_ts.md b/static/usage/v9/input-otp/size/angular/example_component_ts.md
new file mode 100644
index 00000000000..a5cf4e26f23
--- /dev/null
+++ b/static/usage/v9/input-otp/size/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-otp/size/demo.html b/static/usage/v9/input-otp/size/demo.html
new file mode 100644
index 00000000000..46f9893937d
--- /dev/null
+++ b/static/usage/v9/input-otp/size/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Input OTP
+
+
+
+ Small
+ Medium
+ Large
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/size/index.md b/static/usage/v9/input-otp/size/index.md
new file mode 100644
index 00000000000..13919a63b0d
--- /dev/null
+++ b/static/usage/v9/input-otp/size/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';
+
+ Small
+ Medium
+ Large
+```
diff --git a/static/usage/v9/input-otp/size/react.md b/static/usage/v9/input-otp/size/react.md
new file mode 100644
index 00000000000..a48763ca483
--- /dev/null
+++ b/static/usage/v9/input-otp/size/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Small
+ Medium
+ Large
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/size/vue.md b/static/usage/v9/input-otp/size/vue.md
new file mode 100644
index 00000000000..97b45f6de2a
--- /dev/null
+++ b/static/usage/v9/input-otp/size/vue.md
@@ -0,0 +1,11 @@
+```html
+
+ Small
+ Medium
+ Large
+
+
+
+```
diff --git a/static/usage/v9/input-otp/states/angular/example_component_html.md b/static/usage/v9/input-otp/states/angular/example_component_html.md
new file mode 100644
index 00000000000..a482162948b
--- /dev/null
+++ b/static/usage/v9/input-otp/states/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+ Disabled
+ Readonly
+
+```
diff --git a/static/usage/v9/input-otp/states/angular/example_component_ts.md b/static/usage/v9/input-otp/states/angular/example_component_ts.md
new file mode 100644
index 00000000000..363e7bb88f8
--- /dev/null
+++ b/static/usage/v9/input-otp/states/angular/example_component_ts.md
@@ -0,0 +1,65 @@
+```ts
+import { Component, OnInit } from '@angular/core';
+import {
+ FormBuilder,
+ FormGroup,
+ FormsModule,
+ ReactiveFormsModule,
+ Validators,
+ AbstractControl,
+ ValidationErrors,
+} from '@angular/forms';
+import { IonInputOtp } from '@ionic/angular';
+
+function otpRequiredLength(length: number) {
+ return (control: AbstractControl): ValidationErrors | null => {
+ const value = control.value;
+ if (!value || value.toString().length !== length) {
+ return { otpLength: true };
+ }
+ return null;
+ };
+}
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp, ReactiveFormsModule, FormsModule],
+})
+export class ExampleComponent implements OnInit {
+ myForm: FormGroup;
+
+ constructor(private fb: FormBuilder) {
+ this.myForm = this.fb.group({
+ first: [12, [Validators.required, otpRequiredLength(4)]],
+ second: [1234, [Validators.required, otpRequiredLength(4)]],
+ });
+ }
+
+ ngOnInit() {
+ this.markFormGroupTouched(this.myForm);
+ }
+
+ markFormGroupTouched(formGroup: FormGroup) {
+ Object.keys(formGroup.controls).forEach((key) => {
+ const control = formGroup.get(key);
+ if (control) {
+ control.markAsTouched();
+ }
+ });
+ }
+
+ getValidationText(controlName: string): string {
+ const control = this.myForm.get(controlName);
+ if (!control) return '';
+
+ if (control.valid && control.value) {
+ return 'Valid';
+ } else if (control.invalid && control.touched) {
+ return 'Invalid';
+ }
+ return '';
+ }
+}
+```
diff --git a/static/usage/v9/input-otp/states/demo.html b/static/usage/v9/input-otp/states/demo.html
new file mode 100644
index 00000000000..165db912d02
--- /dev/null
+++ b/static/usage/v9/input-otp/states/demo.html
@@ -0,0 +1,65 @@
+
+
+
+ Input OTP
+
+
+
+ Disabled
+ Readonly
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/states/index.md b/static/usage/v9/input-otp/states/index.md
new file mode 100644
index 00000000000..d9fb87adf65
--- /dev/null
+++ b/static/usage/v9/input-otp/states/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';
+
+ Disabled
+ Readonly
+
+ Disabled
+
+
+ Readonly
+
+
+ {inputs.map((input, index) => (
+ handleInput(index, e.detail.value!)}
+ className={`ion-touched ${index === 1 ? 'has-focus' : ''} ${getValidationState(input.value).class}`}
+ >
+ {getValidationState(input.value).text}
+
+ ))}
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/states/vue.md b/static/usage/v9/input-otp/states/vue.md
new file mode 100644
index 00000000000..72ec224236d
--- /dev/null
+++ b/static/usage/v9/input-otp/states/vue.md
@@ -0,0 +1,31 @@
+```html
+
+ Disabled
+ Readonly
+
+
+ {{ getValidationMessage(input.value) }}
+
+
+
+
+```
diff --git a/static/usage/v9/input-otp/theming/colors/angular/example_component_html.md b/static/usage/v9/input-otp/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..eb86c698eac
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/colors/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+```
diff --git a/static/usage/v9/input-otp/theming/colors/angular/example_component_ts.md b/static/usage/v9/input-otp/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..a5cf4e26f23
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-otp/theming/colors/demo.html b/static/usage/v9/input-otp/theming/colors/demo.html
new file mode 100644
index 00000000000..1ca302e79f3
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/colors/demo.html
@@ -0,0 +1,37 @@
+
+
+
+ Badge
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/theming/colors/index.md b/static/usage/v9/input-otp/theming/colors/index.md
new file mode 100644
index 00000000000..04f1ad034b0
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/colors/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';
+
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+```
diff --git a/static/usage/v9/input-otp/theming/colors/react.md b/static/usage/v9/input-otp/theming/colors/react.md
new file mode 100644
index 00000000000..ed1b462c677
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Primary
+ Secondary
+ Tertiary
+ Success
+ >Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/theming/colors/vue.md b/static/usage/v9/input-otp/theming/colors/vue.md
new file mode 100644
index 00000000000..bfc52cd1a7d
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/colors/vue.md
@@ -0,0 +1,17 @@
+```html
+
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+```
diff --git a/static/usage/v9/input-otp/theming/css-properties/angular/example_component_css.md b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..1e1c85a1143
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,16 @@
+```css
+ion-input-otp.custom {
+ --separator-color: rgb(90, 23, 237, 0.12);
+ --highlight-color-focused: #5a17ed;
+}
+
+.input-otp-fill-outline.custom {
+ --border-color: rgb(90, 23, 237, 0.6);
+ --color: #5a17ed;
+}
+
+.input-otp-fill-solid.custom {
+ --border-color: rgb(90, 23, 237, 0.12);
+ --background: rgb(90, 23, 237, 0.12);
+}
+```
diff --git a/static/usage/v9/input-otp/theming/css-properties/angular/example_component_html.md b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b1852f16cfc
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+ Didn't get a code? Resend the code
+
+ Didn't get a code? Resend the code
+
+```
diff --git a/static/usage/v9/input-otp/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..a5cf4e26f23
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-otp/theming/css-properties/demo.html b/static/usage/v9/input-otp/theming/css-properties/demo.html
new file mode 100644
index 00000000000..b606feb1137
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/css-properties/demo.html
@@ -0,0 +1,48 @@
+
+
+
+ Select - Styling the Select
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/theming/css-properties/index.md b/static/usage/v9/input-otp/theming/css-properties/index.md
new file mode 100644
index 00000000000..335676ecdc9
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/css-properties/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';
+
+ Didn't get a code? Resend the code
+
+ Didn't get a code? Resend the code
+
+
+
+```
diff --git a/static/usage/v9/input-otp/theming/css-properties/react/main_css.md b/static/usage/v9/input-otp/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..1e1c85a1143
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/css-properties/react/main_css.md
@@ -0,0 +1,16 @@
+```css
+ion-input-otp.custom {
+ --separator-color: rgb(90, 23, 237, 0.12);
+ --highlight-color-focused: #5a17ed;
+}
+
+.input-otp-fill-outline.custom {
+ --border-color: rgb(90, 23, 237, 0.6);
+ --color: #5a17ed;
+}
+
+.input-otp-fill-solid.custom {
+ --border-color: rgb(90, 23, 237, 0.12);
+ --background: rgb(90, 23, 237, 0.12);
+}
+```
diff --git a/static/usage/v9/input-otp/theming/css-properties/react/main_tsx.md b/static/usage/v9/input-otp/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..7c6d19186e0
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Didn't get a code? Resend the code
+
+
+ Didn't get a code? Resend the code
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/theming/css-properties/vue.md b/static/usage/v9/input-otp/theming/css-properties/vue.md
new file mode 100644
index 00000000000..f204cdc92e6
--- /dev/null
+++ b/static/usage/v9/input-otp/theming/css-properties/vue.md
@@ -0,0 +1,29 @@
+```html
+
+ Didn't get a code? Resend the code
+
+ Didn't get a code? Resend the code
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input-otp/type/angular/example_component_html.md b/static/usage/v9/input-otp/type/angular/example_component_html.md
new file mode 100644
index 00000000000..8871303bb1f
--- /dev/null
+++ b/static/usage/v9/input-otp/type/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+ Numbers only Letters and numbers
+```
diff --git a/static/usage/v9/input-otp/type/angular/example_component_ts.md b/static/usage/v9/input-otp/type/angular/example_component_ts.md
new file mode 100644
index 00000000000..a5cf4e26f23
--- /dev/null
+++ b/static/usage/v9/input-otp/type/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-otp/type/demo.html b/static/usage/v9/input-otp/type/demo.html
new file mode 100644
index 00000000000..77fd034270c
--- /dev/null
+++ b/static/usage/v9/input-otp/type/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Input OTP
+
+
+
+ Numbers only
+ Letters and numbers
+
+
+
+
+
diff --git a/static/usage/v9/input-otp/type/index.md b/static/usage/v9/input-otp/type/index.md
new file mode 100644
index 00000000000..820b4e2084f
--- /dev/null
+++ b/static/usage/v9/input-otp/type/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+ Numbers only Letters and numbers
+```
diff --git a/static/usage/v9/input-otp/type/react.md b/static/usage/v9/input-otp/type/react.md
new file mode 100644
index 00000000000..6408687fe7b
--- /dev/null
+++ b/static/usage/v9/input-otp/type/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Numbers only
+ Letters and numbers
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-otp/type/vue.md b/static/usage/v9/input-otp/type/vue.md
new file mode 100644
index 00000000000..95a420f7549
--- /dev/null
+++ b/static/usage/v9/input-otp/type/vue.md
@@ -0,0 +1,10 @@
+```html
+
+ Numbers only
+ Letters and numbers
+
+
+
+```
diff --git a/static/usage/v9/input-password-toggle/basic/angular/example_component_html.md b/static/usage/v9/input-password-toggle/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..5a1acf3ffc3
--- /dev/null
+++ b/static/usage/v9/input-password-toggle/basic/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+
+```
diff --git a/static/usage/v9/input-password-toggle/basic/angular/example_component_ts.md b/static/usage/v9/input-password-toggle/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..19d1c9fad0a
--- /dev/null
+++ b/static/usage/v9/input-password-toggle/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonInputPasswordToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonInputPasswordToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input-password-toggle/basic/demo.html b/static/usage/v9/input-password-toggle/basic/demo.html
new file mode 100644
index 00000000000..620fa0c3a91
--- /dev/null
+++ b/static/usage/v9/input-password-toggle/basic/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input-password-toggle/basic/index.md b/static/usage/v9/input-password-toggle/basic/index.md
new file mode 100644
index 00000000000..47aa8f44a54
--- /dev/null
+++ b/static/usage/v9/input-password-toggle/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+```
diff --git a/static/usage/v9/input-password-toggle/basic/react.md b/static/usage/v9/input-password-toggle/basic/react.md
new file mode 100644
index 00000000000..88ade62f97c
--- /dev/null
+++ b/static/usage/v9/input-password-toggle/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonInput, IonInputPasswordToggle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input-password-toggle/basic/vue.md b/static/usage/v9/input-password-toggle/basic/vue.md
new file mode 100644
index 00000000000..670f7365c5d
--- /dev/null
+++ b/static/usage/v9/input-password-toggle/basic/vue.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/basic/angular/example_component_html.md b/static/usage/v9/input/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..a8678178aa6
--- /dev/null
+++ b/static/usage/v9/input/basic/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/basic/angular/example_component_ts.md b/static/usage/v9/input/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..132e3291d4c
--- /dev/null
+++ b/static/usage/v9/input/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input/basic/demo.html b/static/usage/v9/input/basic/demo.html
new file mode 100644
index 00000000000..63b2c737d62
--- /dev/null
+++ b/static/usage/v9/input/basic/demo.html
@@ -0,0 +1,48 @@
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/basic/index.md b/static/usage/v9/input/basic/index.md
new file mode 100644
index 00000000000..4ab4a4da810
--- /dev/null
+++ b/static/usage/v9/input/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';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/basic/react.md b/static/usage/v9/input/basic/react.md
new file mode 100644
index 00000000000..ff799a11f62
--- /dev/null
+++ b/static/usage/v9/input/basic/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/basic/vue.md b/static/usage/v9/input/basic/vue.md
new file mode 100644
index 00000000000..70dc672fef3
--- /dev/null
+++ b/static/usage/v9/input/basic/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/clear/angular/example_component_html.md b/static/usage/v9/input/clear/angular/example_component_html.md
new file mode 100644
index 00000000000..fc52d3b55e8
--- /dev/null
+++ b/static/usage/v9/input/clear/angular/example_component_html.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/clear/angular/example_component_ts.md b/static/usage/v9/input/clear/angular/example_component_ts.md
new file mode 100644
index 00000000000..132e3291d4c
--- /dev/null
+++ b/static/usage/v9/input/clear/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input/clear/demo.html b/static/usage/v9/input/clear/demo.html
new file mode 100644
index 00000000000..09d36e52439
--- /dev/null
+++ b/static/usage/v9/input/clear/demo.html
@@ -0,0 +1,59 @@
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/clear/index.md b/static/usage/v9/input/clear/index.md
new file mode 100644
index 00000000000..6e214a5ade5
--- /dev/null
+++ b/static/usage/v9/input/clear/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';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/clear/react.md b/static/usage/v9/input/clear/react.md
new file mode 100644
index 00000000000..959702b5e9e
--- /dev/null
+++ b/static/usage/v9/input/clear/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/clear/vue.md b/static/usage/v9/input/clear/vue.md
new file mode 100644
index 00000000000..dd00c9abd2f
--- /dev/null
+++ b/static/usage/v9/input/clear/vue.md
@@ -0,0 +1,40 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/counter-alignment/angular/example_component_html.md b/static/usage/v9/input/counter-alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..c08e1cdd758
--- /dev/null
+++ b/static/usage/v9/input/counter-alignment/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/counter-alignment/angular/example_component_ts.md b/static/usage/v9/input/counter-alignment/angular/example_component_ts.md
new file mode 100644
index 00000000000..132e3291d4c
--- /dev/null
+++ b/static/usage/v9/input/counter-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input/counter-alignment/demo.html b/static/usage/v9/input/counter-alignment/demo.html
new file mode 100644
index 00000000000..aed09e45535
--- /dev/null
+++ b/static/usage/v9/input/counter-alignment/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Input
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/counter-alignment/index.md b/static/usage/v9/input/counter-alignment/index.md
new file mode 100644
index 00000000000..49f8b939e33
--- /dev/null
+++ b/static/usage/v9/input/counter-alignment/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/counter-alignment/react.md b/static/usage/v9/input/counter-alignment/react.md
new file mode 100644
index 00000000000..5687f244f0c
--- /dev/null
+++ b/static/usage/v9/input/counter-alignment/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/counter-alignment/vue.md b/static/usage/v9/input/counter-alignment/vue.md
new file mode 100644
index 00000000000..832cae69ceb
--- /dev/null
+++ b/static/usage/v9/input/counter-alignment/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/counter/angular/example_component_html.md b/static/usage/v9/input/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..633ff54c719
--- /dev/null
+++ b/static/usage/v9/input/counter/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+Item
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/counter/index.md b/static/usage/v9/input/counter/index.md
new file mode 100644
index 00000000000..ec85a7ff1de
--- /dev/null
+++ b/static/usage/v9/input/counter/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+ `${maxLength - inputLength} characters remaining`}
+ >
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/counter/vue.md b/static/usage/v9/input/counter/vue.md
new file mode 100644
index 00000000000..e01bdb2e716
--- /dev/null
+++ b/static/usage/v9/input/counter/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/input/fill/angular/example_component_html.md b/static/usage/v9/input/fill/angular/example_component_html.md
new file mode 100644
index 00000000000..60af531cd45
--- /dev/null
+++ b/static/usage/v9/input/fill/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+Input
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/fill/index.md b/static/usage/v9/input/fill/index.md
new file mode 100644
index 00000000000..85eb4034cea
--- /dev/null
+++ b/static/usage/v9/input/fill/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/filtering/angular/example_component_html.md b/static/usage/v9/input/filtering/angular/example_component_html.md
new file mode 100644
index 00000000000..31ddc03f197
--- /dev/null
+++ b/static/usage/v9/input/filtering/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/input/filtering/angular/example_component_ts.md b/static/usage/v9/input/filtering/angular/example_component_ts.md
new file mode 100644
index 00000000000..da2d0c35b69
--- /dev/null
+++ b/static/usage/v9/input/filtering/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {
+ inputModel = '';
+
+ @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
+
+ onInput(event: CustomEvent) {
+ const value = (event.target as HTMLIonInputElement).value ?? '';
+
+ // Removes non alphanumeric characters
+ const filteredValue = (value as string).replace(/[^a-zA-Z0-9]+/g, '');
+
+ /**
+ * Update both the state variable and
+ * the component to keep them in sync.
+ */
+ this.ionInputEl.value = this.inputModel = filteredValue;
+ }
+}
+```
diff --git a/static/usage/v9/input/filtering/demo.html b/static/usage/v9/input/filtering/demo.html
new file mode 100644
index 00000000000..6c4ef5c8736
--- /dev/null
+++ b/static/usage/v9/input/filtering/demo.html
@@ -0,0 +1,36 @@
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/filtering/index.md b/static/usage/v9/input/filtering/index.md
new file mode 100644
index 00000000000..ec50da1c07d
--- /dev/null
+++ b/static/usage/v9/input/filtering/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/filtering/react.md b/static/usage/v9/input/filtering/react.md
new file mode 100644
index 00000000000..af36ce43c2b
--- /dev/null
+++ b/static/usage/v9/input/filtering/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ const [inputModel, setInputModel] = useState('');
+ const ionInputEl = useRef(null);
+
+ const onInput = (event: Event) => {
+ const value = (event.target as HTMLIonInputElement).value as string;
+
+ // Removes non alphanumeric characters
+ const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+
+ /**
+ * Update both the state variable and
+ * the component to keep them in sync.
+ */
+ setInputModel(filteredValue);
+
+ const inputCmp = ionInputEl.current;
+ if (inputCmp !== null) {
+ inputCmp.value = filteredValue;
+ }
+ };
+
+ return (
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/filtering/vue.md b/static/usage/v9/input/filtering/vue.md
new file mode 100644
index 00000000000..2684a14976e
--- /dev/null
+++ b/static/usage/v9/input/filtering/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/helper-error/angular/example_component_html.md b/static/usage/v9/input/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..ba5030c0026
--- /dev/null
+++ b/static/usage/v9/input/helper-error/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+Input
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/helper-error/index.md b/static/usage/v9/input/helper-error/index.md
new file mode 100644
index 00000000000..8822546740e
--- /dev/null
+++ b/static/usage/v9/input/helper-error/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';
+
+();
+
+ const validateEmail = (email: string) => {
+ return email.match(
+ /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+ );
+ };
+
+ const validate = (event: Event) => {
+ const value = (event.target as HTMLInputElement).value;
+
+ setIsValid(undefined);
+
+ if (value === '') return;
+
+ validateEmail(value) !== null ? setIsValid(true) : setIsValid(false);
+ };
+
+ const markTouched = () => {
+ setIsTouched(true);
+ };
+
+ return (
+ validate(event)}
+ onIonBlur={() => markTouched()}
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/helper-error/vue.md b/static/usage/v9/input/helper-error/vue.md
new file mode 100644
index 00000000000..d46816d6030
--- /dev/null
+++ b/static/usage/v9/input/helper-error/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/input/label-placement/angular/example_component_html.md b/static/usage/v9/input/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..151adb55b5d
--- /dev/null
+++ b/static/usage/v9/input/label-placement/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/label-placement/angular/example_component_ts.md b/static/usage/v9/input/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..132e3291d4c
--- /dev/null
+++ b/static/usage/v9/input/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input/label-placement/demo.html b/static/usage/v9/input/label-placement/demo.html
new file mode 100644
index 00000000000..7953ec266a7
--- /dev/null
+++ b/static/usage/v9/input/label-placement/demo.html
@@ -0,0 +1,44 @@
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/label-placement/index.md b/static/usage/v9/input/label-placement/index.md
new file mode 100644
index 00000000000..74a5b4c5ee4
--- /dev/null
+++ b/static/usage/v9/input/label-placement/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';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/label-placement/react.md b/static/usage/v9/input/label-placement/react.md
new file mode 100644
index 00000000000..aa4f1b3c484
--- /dev/null
+++ b/static/usage/v9/input/label-placement/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/label-placement/vue.md b/static/usage/v9/input/label-placement/vue.md
new file mode 100644
index 00000000000..628492195a3
--- /dev/null
+++ b/static/usage/v9/input/label-placement/vue.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/label-slot/angular/example_component_html.md b/static/usage/v9/input/label-slot/angular/example_component_html.md
new file mode 100644
index 00000000000..21bdbf74b64
--- /dev/null
+++ b/static/usage/v9/input/label-slot/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+ Email (Required)
+
+
+
+```
diff --git a/static/usage/v9/input/label-slot/angular/example_component_ts.md b/static/usage/v9/input/label-slot/angular/example_component_ts.md
new file mode 100644
index 00000000000..3c7b62f436e
--- /dev/null
+++ b/static/usage/v9/input/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList, IonText } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input/label-slot/demo.html b/static/usage/v9/input/label-slot/demo.html
new file mode 100644
index 00000000000..00d5652a23c
--- /dev/null
+++ b/static/usage/v9/input/label-slot/demo.html
@@ -0,0 +1,28 @@
+
+
+
+ input
+
+
+
+
+
+
+ Email (Required)
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/label-slot/index.md b/static/usage/v9/input/label-slot/index.md
new file mode 100644
index 00000000000..39b54ce1747
--- /dev/null
+++ b/static/usage/v9/input/label-slot/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Email (Required)
+
+
+
+```
diff --git a/static/usage/v9/input/label-slot/react.md b/static/usage/v9/input/label-slot/react.md
new file mode 100644
index 00000000000..144a7e80e97
--- /dev/null
+++ b/static/usage/v9/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 (
+
+
+
+
+ Email (Required)
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/label-slot/vue.md b/static/usage/v9/input/label-slot/vue.md
new file mode 100644
index 00000000000..97906146a2e
--- /dev/null
+++ b/static/usage/v9/input/label-slot/vue.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+ Email (Required)
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/mask/angular/example_component_html.md b/static/usage/v9/input/mask/angular/example_component_html.md
new file mode 100644
index 00000000000..2484e0c64e3
--- /dev/null
+++ b/static/usage/v9/input/mask/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/mask/angular/example_component_ts.md b/static/usage/v9/input/mask/angular/example_component_ts.md
new file mode 100644
index 00000000000..e2876fc942f
--- /dev/null
+++ b/static/usage/v9/input/mask/angular/example_component_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+
+import { MaskitoOptions, MaskitoElementPredicate, maskitoTransform } from '@maskito/core';
+import { MaskitoDirective } from '@maskito/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [FormsModule, IonInput, IonItem, IonList, MaskitoDirective],
+})
+export class ExampleComponent {
+ readonly phoneMask: MaskitoOptions = {
+ mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+ };
+
+ //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+ myPhoneNumber = maskitoTransform('5555551212', this.phoneMask);
+
+ 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: MaskitoElementPredicate = async (el) => (el as HTMLIonInputElement).getInputElement();
+}
+```
diff --git a/static/usage/v9/input/mask/demo.html b/static/usage/v9/input/mask/demo.html
new file mode 100644
index 00000000000..dc45874e043
--- /dev/null
+++ b/static/usage/v9/input/mask/demo.html
@@ -0,0 +1,77 @@
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/mask/index.md b/static/usage/v9/input/mask/index.md
new file mode 100644
index 00000000000..3afbcad9ccf
--- /dev/null
+++ b/static/usage/v9/input/mask/index.md
@@ -0,0 +1,56 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/mask/javascript/index_ts.md b/static/usage/v9/input/mask/javascript/index_ts.md
new file mode 100644
index 00000000000..21d48d06c02
--- /dev/null
+++ b/static/usage/v9/input/mask/javascript/index_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { Maskito, maskitoTransform } 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+defineCustomElements();
+
+(window as any).Maskito = Maskito;
+(window as any).maskitoTransform = maskitoTransform;
+```
diff --git a/static/usage/v9/input/mask/react.md b/static/usage/v9/input/mask/react.md
new file mode 100644
index 00000000000..d6df2eb4bde
--- /dev/null
+++ b/static/usage/v9/input/mask/react.md
@@ -0,0 +1,65 @@
+```tsx
+import { useState } from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+import { MaskitoOptions, maskitoTransform } from '@maskito/core';
+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 phoneMaskOptions: MaskitoOptions = {
+ mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+ };
+ const phoneMask = useMaskito({ options: phoneMaskOptions });
+
+ //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+ const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions));
+
+ return (
+
+
+ {
+ if (cardRef) {
+ const input = await cardRef.getInputElement();
+ cardMask(input);
+ }
+ }}
+ label="Card number"
+ placeholder="0000 0000 0000 0000"
+ >
+
+
+ {
+ if (phoneInput) {
+ const input = await phoneInput.getInputElement();
+ phoneMask(input);
+ }
+ }}
+ value={myPhoneNumber}
+ onIonInput={(e) => setMyPhoneNumber(e.detail.value || '')}
+ label="US phone number"
+ placeholder="+1 (xxx) xxx-xxxx"
+ >
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/mask/vue.md b/static/usage/v9/input/mask/vue.md
new file mode 100644
index 00000000000..815a2d51386
--- /dev/null
+++ b/static/usage/v9/input/mask/vue.md
@@ -0,0 +1,60 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/no-visible-label/angular/example_component_html.md b/static/usage/v9/input/no-visible-label/angular/example_component_html.md
new file mode 100644
index 00000000000..32616a6a196
--- /dev/null
+++ b/static/usage/v9/input/no-visible-label/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/input/no-visible-label/angular/example_component_ts.md b/static/usage/v9/input/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 00000000000..132e3291d4c
--- /dev/null
+++ b/static/usage/v9/input/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input/no-visible-label/demo.html b/static/usage/v9/input/no-visible-label/demo.html
new file mode 100644
index 00000000000..cb90ecfe0c7
--- /dev/null
+++ b/static/usage/v9/input/no-visible-label/demo.html
@@ -0,0 +1,26 @@
+
+
+
+ input
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/no-visible-label/index.md b/static/usage/v9/input/no-visible-label/index.md
new file mode 100644
index 00000000000..623a71f53e9
--- /dev/null
+++ b/static/usage/v9/input/no-visible-label/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/no-visible-label/react.md b/static/usage/v9/input/no-visible-label/react.md
new file mode 100644
index 00000000000..38842ecb0b6
--- /dev/null
+++ b/static/usage/v9/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 (
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/no-visible-label/vue.md b/static/usage/v9/input/no-visible-label/vue.md
new file mode 100644
index 00000000000..ceaa97a294b
--- /dev/null
+++ b/static/usage/v9/input/no-visible-label/vue.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/set-focus/angular/example_component_html.md b/static/usage/v9/input/set-focus/angular/example_component_html.md
new file mode 100644
index 00000000000..92c9d6b2561
--- /dev/null
+++ b/static/usage/v9/input/set-focus/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Click to set focus
+
+
+
+
+```
diff --git a/static/usage/v9/input/set-focus/angular/example_component_ts.md b/static/usage/v9/input/set-focus/angular/example_component_ts.md
new file mode 100644
index 00000000000..1551bbb018f
--- /dev/null
+++ b/static/usage/v9/input/set-focus/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input/set-focus/demo.html b/static/usage/v9/input/set-focus/demo.html
new file mode 100644
index 00000000000..97c172db82f
--- /dev/null
+++ b/static/usage/v9/input/set-focus/demo.html
@@ -0,0 +1,33 @@
+
+
+
+ setFocus
+
+
+
+
+ Click to set focus
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/set-focus/index.md b/static/usage/v9/input/set-focus/index.md
new file mode 100644
index 00000000000..24213243435
--- /dev/null
+++ b/static/usage/v9/input/set-focus/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import vue from './vue.md';
+import react from './react.md';
+
+
+
+ Click to set focus
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/set-focus/react.md b/static/usage/v9/input/set-focus/react.md
new file mode 100644
index 00000000000..023abbd8968
--- /dev/null
+++ b/static/usage/v9/input/set-focus/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonInput, IonItem, IonList, IonButton } from '@ionic/react';
+
+const Home = () => {
+ const input = useRef(null);
+
+ return (
+
+
+ input.current?.setFocus()}>Click to set focus
+
+
+
+
+ );
+};
+
+export default Home;
+```
diff --git a/static/usage/v9/input/set-focus/vue.md b/static/usage/v9/input/set-focus/vue.md
new file mode 100644
index 00000000000..84ee1879142
--- /dev/null
+++ b/static/usage/v9/input/set-focus/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Click to set focus
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/start-end-slots/angular/example_component_html.md b/static/usage/v9/input/start-end-slots/angular/example_component_html.md
new file mode 100644
index 00000000000..b33306d4727
--- /dev/null
+++ b/static/usage/v9/input/start-end-slots/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/start-end-slots/angular/example_component_ts.md b/static/usage/v9/input/start-end-slots/angular/example_component_ts.md
new file mode 100644
index 00000000000..a4eca7f62fb
--- /dev/null
+++ b/static/usage/v9/input/start-end-slots/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { eye, lockClosed } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonIcon, IonInput, IonItem, IonList],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ eye, lockClosed });
+ }
+}
+```
diff --git a/static/usage/v9/input/start-end-slots/demo.html b/static/usage/v9/input/start-end-slots/demo.html
new file mode 100644
index 00000000000..c327f737abe
--- /dev/null
+++ b/static/usage/v9/input/start-end-slots/demo.html
@@ -0,0 +1,31 @@
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/start-end-slots/index.md b/static/usage/v9/input/start-end-slots/index.md
new file mode 100644
index 00000000000..5665679ae71
--- /dev/null
+++ b/static/usage/v9/input/start-end-slots/index.md
@@ -0,0 +1,31 @@
+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 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';
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/start-end-slots/javascript/index_ts.md b/static/usage/v9/input/start-end-slots/javascript/index_ts.md
new file mode 100644
index 00000000000..002e3ae87ac
--- /dev/null
+++ b/static/usage/v9/input/start-end-slots/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { eye, lockClosed } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'eye': eye, 'lock-closed': lockClosed });
+ */
+addIcons({ eye, lockClosed });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/input/start-end-slots/react.md b/static/usage/v9/input/start-end-slots/react.md
new file mode 100644
index 00000000000..e15086ee6f4
--- /dev/null
+++ b/static/usage/v9/input/start-end-slots/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/react';
+import { eye, lockClosed } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/start-end-slots/vue.md b/static/usage/v9/input/start-end-slots/vue.md
new file mode 100644
index 00000000000..77f2a5d472b
--- /dev/null
+++ b/static/usage/v9/input/start-end-slots/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/theming/colors/angular/example_component_html.md b/static/usage/v9/input/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..88a63e9a102
--- /dev/null
+++ b/static/usage/v9/input/theming/colors/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Input
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/theming/colors/index.md b/static/usage/v9/input/theming/colors/index.md
new file mode 100644
index 00000000000..c02a2a16e0e
--- /dev/null
+++ b/static/usage/v9/input/theming/colors/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/theming/css-properties/angular/example_component_css.md b/static/usage/v9/input/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..4885a193f87
--- /dev/null
+++ b/static/usage/v9/input/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+ion-input.custom {
+ --background: #373737;
+ --color: #fff;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: 0.8;
+
+ --padding-bottom: 10px;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --padding-top: 10px;
+}
+```
diff --git a/static/usage/v9/input/theming/css-properties/angular/example_component_html.md b/static/usage/v9/input/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..243bb91401b
--- /dev/null
+++ b/static/usage/v9/input/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Input
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/theming/css-properties/index.md b/static/usage/v9/input/theming/css-properties/index.md
new file mode 100644
index 00000000000..f153179e686
--- /dev/null
+++ b/static/usage/v9/input/theming/css-properties/index.md
@@ -0,0 +1,37 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/types/angular/example_component_html.md b/static/usage/v9/input/types/angular/example_component_html.md
new file mode 100644
index 00000000000..ff696b22cd8
--- /dev/null
+++ b/static/usage/v9/input/types/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/types/angular/example_component_ts.md b/static/usage/v9/input/types/angular/example_component_ts.md
new file mode 100644
index 00000000000..132e3291d4c
--- /dev/null
+++ b/static/usage/v9/input/types/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/input/types/demo.html b/static/usage/v9/input/types/demo.html
new file mode 100644
index 00000000000..a73aa8cd7fd
--- /dev/null
+++ b/static/usage/v9/input/types/demo.html
@@ -0,0 +1,48 @@
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/input/types/index.md b/static/usage/v9/input/types/index.md
new file mode 100644
index 00000000000..75555b4efa2
--- /dev/null
+++ b/static/usage/v9/input/types/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';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/input/types/react.md b/static/usage/v9/input/types/react.md
new file mode 100644
index 00000000000..e5534ec2e1e
--- /dev/null
+++ b/static/usage/v9/input/types/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/input/types/vue.md b/static/usage/v9/input/types/vue.md
new file mode 100644
index 00000000000..c0e129ce4ce
--- /dev/null
+++ b/static/usage/v9/input/types/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item-divider/basic/angular/example_component_html.md b/static/usage/v9/item-divider/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..35dccbdbc88
--- /dev/null
+++ b/static/usage/v9/item-divider/basic/angular/example_component_html.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+ Section A
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+ Section B
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+```
diff --git a/static/usage/v9/item-divider/basic/angular/example_component_ts.md b/static/usage/v9/item-divider/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..3afb8329d3a
--- /dev/null
+++ b/static/usage/v9/item-divider/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item-divider/basic/demo.html b/static/usage/v9/item-divider/basic/demo.html
new file mode 100644
index 00000000000..ce5fb25eab6
--- /dev/null
+++ b/static/usage/v9/item-divider/basic/demo.html
@@ -0,0 +1,60 @@
+
+
+
+ Item Divider
+
+
+
+
+
+
+ Section A
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+ Section B
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/item-divider/basic/index.md b/static/usage/v9/item-divider/basic/index.md
new file mode 100644
index 00000000000..7f43e781773
--- /dev/null
+++ b/static/usage/v9/item-divider/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';
+
+
+
+
+ Section A
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+ Section B
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+```
diff --git a/static/usage/v9/item-divider/basic/react.md b/static/usage/v9/item-divider/basic/react.md
new file mode 100644
index 00000000000..14ad85b1c82
--- /dev/null
+++ b/static/usage/v9/item-divider/basic/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Section A
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+ Section B
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item-divider/basic/vue.md b/static/usage/v9/item-divider/basic/vue.md
new file mode 100644
index 00000000000..6d182a324fe
--- /dev/null
+++ b/static/usage/v9/item-divider/basic/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+
+
+ Section A
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+ Section B
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item-divider/theming/colors/angular/example_component_html.md b/static/usage/v9/item-divider/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..e23070ec5a0
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/colors/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v9/item-divider/theming/colors/angular/example_component_ts.md b/static/usage/v9/item-divider/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..ffcd27c4cae
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItemDivider, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItemDivider, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item-divider/theming/colors/demo.html b/static/usage/v9/item-divider/theming/colors/demo.html
new file mode 100644
index 00000000000..24dc0354eee
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/colors/demo.html
@@ -0,0 +1,57 @@
+
+
+
+ Item Divider
+
+
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+
+
diff --git a/static/usage/v9/item-divider/theming/colors/index.md b/static/usage/v9/item-divider/theming/colors/index.md
new file mode 100644
index 00000000000..b508059f3f6
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/colors/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';
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v9/item-divider/theming/colors/react.md b/static/usage/v9/item-divider/theming/colors/react.md
new file mode 100644
index 00000000000..7bf4cd2193f
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonItemDivider, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item-divider/theming/colors/vue.md b/static/usage/v9/item-divider/theming/colors/vue.md
new file mode 100644
index 00000000000..60f964551f5
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/colors/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+```
diff --git a/static/usage/v9/item-divider/theming/css-properties/angular/example_component_css.md b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item-divider {
+ --background: #19422d;
+ --color: #fff;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+ --padding-start: 20px;
+ --padding-end: 20px;
+}
+```
diff --git a/static/usage/v9/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..172fdad114f
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Item Divider
+
+```
diff --git a/static/usage/v9/item-divider/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..ffcd27c4cae
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItemDivider, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItemDivider, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item-divider/theming/css-properties/demo.html b/static/usage/v9/item-divider/theming/css-properties/demo.html
new file mode 100644
index 00000000000..7f5e55bad5b
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/css-properties/demo.html
@@ -0,0 +1,36 @@
+
+
+
+ Item Divider
+
+
+
+
+ Item Divider
+
+
+
+
+
+
diff --git a/static/usage/v9/item-divider/theming/css-properties/index.md b/static/usage/v9/item-divider/theming/css-properties/index.md
new file mode 100644
index 00000000000..93740387e56
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_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';
+
+
+ Item Divider
+
+```
diff --git a/static/usage/v9/item-divider/theming/css-properties/react/main_css.md b/static/usage/v9/item-divider/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item-divider {
+ --background: #19422d;
+ --color: #fff;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+ --padding-start: 20px;
+ --padding-end: 20px;
+}
+```
diff --git a/static/usage/v9/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v9/item-divider/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..b3083033541
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonItemDivider, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Item Divider
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item-divider/theming/css-properties/vue.md b/static/usage/v9/item-divider/theming/css-properties/vue.md
new file mode 100644
index 00000000000..2a6776fcb76
--- /dev/null
+++ b/static/usage/v9/item-divider/theming/css-properties/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Item Divider
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item-group/basic/angular/example_component_html.md b/static/usage/v9/item-group/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..8ea0ff7cef9
--- /dev/null
+++ b/static/usage/v9/item-group/basic/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+```
diff --git a/static/usage/v9/item-group/basic/angular/example_component_ts.md b/static/usage/v9/item-group/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..71496d3e7ab
--- /dev/null
+++ b/static/usage/v9/item-group/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item-group/basic/demo.html b/static/usage/v9/item-group/basic/demo.html
new file mode 100644
index 00000000000..748afc90ee8
--- /dev/null
+++ b/static/usage/v9/item-group/basic/demo.html
@@ -0,0 +1,58 @@
+
+
+
+ Item Group
+
+
+
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+
+
+
+
+
diff --git a/static/usage/v9/item-group/basic/index.md b/static/usage/v9/item-group/basic/index.md
new file mode 100644
index 00000000000..6485ed86256
--- /dev/null
+++ b/static/usage/v9/item-group/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';
+
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+```
diff --git a/static/usage/v9/item-group/basic/react.md b/static/usage/v9/item-group/basic/react.md
new file mode 100644
index 00000000000..ddb3f381230
--- /dev/null
+++ b/static/usage/v9/item-group/basic/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item-group/basic/vue.md b/static/usage/v9/item-group/basic/vue.md
new file mode 100644
index 00000000000..4b643fad6fb
--- /dev/null
+++ b/static/usage/v9/item-group/basic/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+
+
+
+```
diff --git a/static/usage/v9/item-group/sliding-items/angular/example_component_html.md b/static/usage/v9/item-group/sliding-items/angular/example_component_html.md
new file mode 100644
index 00000000000..2708fde7acc
--- /dev/null
+++ b/static/usage/v9/item-group/sliding-items/angular/example_component_html.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Fruits
+
+
+
+
+ Grapes
+
+
+ Favorite
+
+
+
+
+
+ Apples
+
+
+ Favorite
+
+
+
+
+
+ Bananas
+
+
+ Favorite
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+ Carrots
+
+
+ Favorite
+
+
+
+
+
+ Broccoli
+
+
+ Favorite
+
+
+
+
+
+ Celery
+
+
+ Favorite
+
+
+
+```
diff --git a/static/usage/v9/item-group/sliding-items/angular/example_component_ts.md b/static/usage/v9/item-group/sliding-items/angular/example_component_ts.md
new file mode 100644
index 00000000000..79999529281
--- /dev/null
+++ b/static/usage/v9/item-group/sliding-items/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonItem,
+ IonItemDivider,
+ IonItemGroup,
+ IonItemOption,
+ IonItemOptions,
+ IonItemSliding,
+ IonLabel,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item-group/sliding-items/demo.html b/static/usage/v9/item-group/sliding-items/demo.html
new file mode 100644
index 00000000000..9b1438916e5
--- /dev/null
+++ b/static/usage/v9/item-group/sliding-items/demo.html
@@ -0,0 +1,92 @@
+
+
+
+ Item Group
+
+
+
+
+
+ Fruits
+
+
+
+
+ Grapes
+
+
+ Favorite
+
+
+
+
+
+ Apples
+
+
+ Favorite
+
+
+
+
+
+ Bananas
+
+
+ Favorite
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+ Carrots
+
+
+ Favorite
+
+
+
+
+
+ Broccoli
+
+
+ Favorite
+
+
+
+
+
+ Celery
+
+
+ Favorite
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/item-group/sliding-items/index.md b/static/usage/v9/item-group/sliding-items/index.md
new file mode 100644
index 00000000000..454627b462a
--- /dev/null
+++ b/static/usage/v9/item-group/sliding-items/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';
+
+
+
+ Fruits
+
+
+
+
+ Grapes
+
+
+ Favorite
+
+
+
+
+
+ Apples
+
+
+ Favorite
+
+
+
+
+
+ Bananas
+
+
+ Favorite
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+ Carrots
+
+
+ Favorite
+
+
+
+
+
+ Broccoli
+
+
+ Favorite
+
+
+
+
+
+ Celery
+
+
+ Favorite
+
+
+
+```
diff --git a/static/usage/v9/item-group/sliding-items/react.md b/static/usage/v9/item-group/sliding-items/react.md
new file mode 100644
index 00000000000..716935f065c
--- /dev/null
+++ b/static/usage/v9/item-group/sliding-items/react.md
@@ -0,0 +1,85 @@
+```tsx
+import React from 'react';
+import {
+ IonItem,
+ IonItemDivider,
+ IonItemGroup,
+ IonItemOption,
+ IonItemOptions,
+ IonItemSliding,
+ IonLabel,
+} from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Fruits
+
+
+
+
+ Grapes
+
+
+ Favorite
+
+
+
+
+
+ Apples
+
+
+ Favorite
+
+
+
+
+
+ Bananas
+
+
+ Favorite
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+ Carrots
+
+
+ Favorite
+
+
+
+
+
+ Broccoli
+
+
+ Favorite
+
+
+
+
+
+ Celery
+
+
+ Favorite
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item-group/sliding-items/vue.md b/static/usage/v9/item-group/sliding-items/vue.md
new file mode 100644
index 00000000000..16ae176267c
--- /dev/null
+++ b/static/usage/v9/item-group/sliding-items/vue.md
@@ -0,0 +1,81 @@
+```html
+
+
+
+ Fruits
+
+
+
+
+ Grapes
+
+
+ Favorite
+
+
+
+
+
+ Apples
+
+
+ Favorite
+
+
+
+
+
+ Bananas
+
+
+ Favorite
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+ Carrots
+
+
+ Favorite
+
+
+
+
+
+ Broccoli
+
+
+ Favorite
+
+
+
+
+
+ Celery
+
+
+ Favorite
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item-sliding/basic/angular/example_component_html.md b/static/usage/v9/item-sliding/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..a5404da4cb4
--- /dev/null
+++ b/static/usage/v9/item-sliding/basic/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v9/item-sliding/basic/angular/example_component_ts.md b/static/usage/v9/item-sliding/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..262c2d479c4
--- /dev/null
+++ b/static/usage/v9/item-sliding/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item-sliding/basic/demo.html b/static/usage/v9/item-sliding/basic/demo.html
new file mode 100644
index 00000000000..2f26e0e210d
--- /dev/null
+++ b/static/usage/v9/item-sliding/basic/demo.html
@@ -0,0 +1,64 @@
+
+
+
+ Item Sliding
+
+
+
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/item-sliding/basic/index.md b/static/usage/v9/item-sliding/basic/index.md
new file mode 100644
index 00000000000..bbacafc0f6b
--- /dev/null
+++ b/static/usage/v9/item-sliding/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v9/item-sliding/basic/react.md b/static/usage/v9/item-sliding/basic/react.md
new file mode 100644
index 00000000000..d9b45125574
--- /dev/null
+++ b/static/usage/v9/item-sliding/basic/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item-sliding/basic/vue.md b/static/usage/v9/item-sliding/basic/vue.md
new file mode 100644
index 00000000000..4df17bf5d97
--- /dev/null
+++ b/static/usage/v9/item-sliding/basic/vue.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item-sliding/expandable/angular/example_component_html.md b/static/usage/v9/item-sliding/expandable/angular/example_component_html.md
new file mode 100644
index 00000000000..b7e37fa57c7
--- /dev/null
+++ b/static/usage/v9/item-sliding/expandable/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v9/item-sliding/expandable/angular/example_component_ts.md b/static/usage/v9/item-sliding/expandable/angular/example_component_ts.md
new file mode 100644
index 00000000000..262c2d479c4
--- /dev/null
+++ b/static/usage/v9/item-sliding/expandable/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item-sliding/expandable/demo.html b/static/usage/v9/item-sliding/expandable/demo.html
new file mode 100644
index 00000000000..6ceebea9641
--- /dev/null
+++ b/static/usage/v9/item-sliding/expandable/demo.html
@@ -0,0 +1,43 @@
+
+
+
+ Item Sliding
+
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/item-sliding/expandable/index.md b/static/usage/v9/item-sliding/expandable/index.md
new file mode 100644
index 00000000000..f9b4ca4a346
--- /dev/null
+++ b/static/usage/v9/item-sliding/expandable/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';
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v9/item-sliding/expandable/react.md b/static/usage/v9/item-sliding/expandable/react.md
new file mode 100644
index 00000000000..6879f80f7c1
--- /dev/null
+++ b/static/usage/v9/item-sliding/expandable/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ Archive
+
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+
+ Delete
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item-sliding/expandable/vue.md b/static/usage/v9/item-sliding/expandable/vue.md
new file mode 100644
index 00000000000..91bd715d899
--- /dev/null
+++ b/static/usage/v9/item-sliding/expandable/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item-sliding/icons/angular/example_component_html.md b/static/usage/v9/item-sliding/icons/angular/example_component_html.md
new file mode 100644
index 00000000000..6556b41e94b
--- /dev/null
+++ b/static/usage/v9/item-sliding/icons/angular/example_component_html.md
@@ -0,0 +1,120 @@
+```html
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item-sliding/icons/angular/example_component_ts.md b/static/usage/v9/item-sliding/icons/angular/example_component_ts.md
new file mode 100644
index 00000000000..9383c9b120f
--- /dev/null
+++ b/static/usage/v9/item-sliding/icons/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { archive, heart, trash } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ archive, heart, trash });
+ }
+}
+```
diff --git a/static/usage/v9/item-sliding/icons/demo.html b/static/usage/v9/item-sliding/icons/demo.html
new file mode 100644
index 00000000000..a2d58f248e1
--- /dev/null
+++ b/static/usage/v9/item-sliding/icons/demo.html
@@ -0,0 +1,146 @@
+
+
+
+ Item Sliding
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/item-sliding/icons/index.md b/static/usage/v9/item-sliding/icons/index.md
new file mode 100644
index 00000000000..2ae98f306af
--- /dev/null
+++ b/static/usage/v9/item-sliding/icons/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item-sliding/icons/javascript/index_ts.md b/static/usage/v9/item-sliding/icons/javascript/index_ts.md
new file mode 100644
index 00000000000..d7dbf2289ee
--- /dev/null
+++ b/static/usage/v9/item-sliding/icons/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { archive, heart, trash } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'archive': archive, 'heart': heart, 'trash': trash });
+ */
+addIcons({ archive, heart, trash });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/item-sliding/icons/react.md b/static/usage/v9/item-sliding/icons/react.md
new file mode 100644
index 00000000000..8961a06b352
--- /dev/null
+++ b/static/usage/v9/item-sliding/icons/react.md
@@ -0,0 +1,129 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+import { archive, heart, trash } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item-sliding/icons/vue.md b/static/usage/v9/item-sliding/icons/vue.md
new file mode 100644
index 00000000000..92e2aa7fcd3
--- /dev/null
+++ b/static/usage/v9/item-sliding/icons/vue.md
@@ -0,0 +1,127 @@
+```html
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/basic/angular/example_component_html.md b/static/usage/v9/item/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..3f50edc287e
--- /dev/null
+++ b/static/usage/v9/item/basic/angular/example_component_html.md
@@ -0,0 +1,40 @@
+```html
+
+ Basic Item
+
+
+
+
+ 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 ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v9/item/basic/angular/example_component_ts.md b/static/usage/v9/item/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..bb1d05933b2
--- /dev/null
+++ b/static/usage/v9/item/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/basic/demo.html b/static/usage/v9/item/basic/demo.html
new file mode 100644
index 00000000000..1530a541672
--- /dev/null
+++ b/static/usage/v9/item/basic/demo.html
@@ -0,0 +1,65 @@
+
+
+
+ Item
+
+
+
+
+ Basic Item
+
+
+
+
+ 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 ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+
+
+
+
diff --git a/static/usage/v9/item/basic/index.md b/static/usage/v9/item/basic/index.md
new file mode 100644
index 00000000000..aee7219bc60
--- /dev/null
+++ b/static/usage/v9/item/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';
+
+
+ Basic Item
+
+
+
+
+ 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 ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v9/item/basic/react.md b/static/usage/v9/item/basic/react.md
new file mode 100644
index 00000000000..2c78219aee4
--- /dev/null
+++ b/static/usage/v9/item/basic/react.md
@@ -0,0 +1,50 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Basic Item
+
+
+
+
+ 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 ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/basic/vue.md b/static/usage/v9/item/basic/vue.md
new file mode 100644
index 00000000000..494e7c62f0c
--- /dev/null
+++ b/static/usage/v9/item/basic/vue.md
@@ -0,0 +1,46 @@
+```html
+
+
+ Basic Item
+
+
+
+
+ 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 ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/buttons/angular/example_component_html.md b/static/usage/v9/item/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..4d77ff8b9d8
--- /dev/null
+++ b/static/usage/v9/item/buttons/angular/example_component_html.md
@@ -0,0 +1,36 @@
+```html
+
+ Start
+ Default Buttons
+ End
+
+
+
+
+ Start
+
+ Buttons with Icons
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+ Button Sizes
+ Small
+ Default
+ Large
+
+```
diff --git a/static/usage/v9/item/buttons/angular/example_component_ts.md b/static/usage/v9/item/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..a1be1f73cb6
--- /dev/null
+++ b/static/usage/v9/item/buttons/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { home, navigate, star } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonIcon, IonItem, IonLabel],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ home, navigate, star });
+ }
+}
+```
diff --git a/static/usage/v9/item/buttons/demo.html b/static/usage/v9/item/buttons/demo.html
new file mode 100644
index 00000000000..25b0613c0f4
--- /dev/null
+++ b/static/usage/v9/item/buttons/demo.html
@@ -0,0 +1,62 @@
+
+
+
+ Item
+
+
+
+
+ Start
+ Default Buttons
+ End
+
+
+
+
+ Start
+
+ Buttons with Icons
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+ Button Sizes
+ Small
+ Default
+ Large
+
+
+
+
+
+
diff --git a/static/usage/v9/item/buttons/index.md b/static/usage/v9/item/buttons/index.md
new file mode 100644
index 00000000000..db28c6ec055
--- /dev/null
+++ b/static/usage/v9/item/buttons/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+
+ Start
+ Default Buttons
+ End
+
+
+
+
+ Start
+
+ Buttons with Icons
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+ Button Sizes
+ Small
+ Default
+ Large
+
+```
diff --git a/static/usage/v9/item/buttons/javascript/index_ts.md b/static/usage/v9/item/buttons/javascript/index_ts.md
new file mode 100644
index 00000000000..f0acd815b07
--- /dev/null
+++ b/static/usage/v9/item/buttons/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { home, navigate, star } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'home': home, 'navigate': navigate, 'star': star });
+ */
+addIcons({ home, navigate, star });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/item/buttons/react.md b/static/usage/v9/item/buttons/react.md
new file mode 100644
index 00000000000..fda29c7f11a
--- /dev/null
+++ b/static/usage/v9/item/buttons/react.md
@@ -0,0 +1,53 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { home, navigate, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+ Start
+ Default Buttons
+ End
+
+
+
+
+ Start
+
+ Buttons with Icons
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/buttons/vue.md b/static/usage/v9/item/buttons/vue.md
new file mode 100644
index 00000000000..44438d0bcd9
--- /dev/null
+++ b/static/usage/v9/item/buttons/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Start
+ Default Buttons
+ End
+
+
+
+
+ Start
+
+ Buttons with Icons
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+ Button Sizes
+ Small
+ Default
+ Large
+
+
+
+
+```
diff --git a/static/usage/v9/item/clickable/angular/example_component_html.md b/static/usage/v9/item/clickable/angular/example_component_html.md
new file mode 100644
index 00000000000..7e8ac266eb2
--- /dev/null
+++ b/static/usage/v9/item/clickable/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+```
diff --git a/static/usage/v9/item/clickable/angular/example_component_ts.md b/static/usage/v9/item/clickable/angular/example_component_ts.md
new file mode 100644
index 00000000000..bb1d05933b2
--- /dev/null
+++ b/static/usage/v9/item/clickable/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/clickable/demo.html b/static/usage/v9/item/clickable/demo.html
new file mode 100644
index 00000000000..b2e63e391c5
--- /dev/null
+++ b/static/usage/v9/item/clickable/demo.html
@@ -0,0 +1,42 @@
+
+
+
+ Item
+
+
+
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+
+
+
+
+
diff --git a/static/usage/v9/item/clickable/index.md b/static/usage/v9/item/clickable/index.md
new file mode 100644
index 00000000000..37dafeb1278
--- /dev/null
+++ b/static/usage/v9/item/clickable/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+```
diff --git a/static/usage/v9/item/clickable/react.md b/static/usage/v9/item/clickable/react.md
new file mode 100644
index 00000000000..c83845b65c7
--- /dev/null
+++ b/static/usage/v9/item/clickable/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/clickable/vue.md b/static/usage/v9/item/clickable/vue.md
new file mode 100644
index 00000000000..bb2f1a06ee9
--- /dev/null
+++ b/static/usage/v9/item/clickable/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/actions/angular/example_component_html.md b/static/usage/v9/item/content-types/actions/angular/example_component_html.md
new file mode 100644
index 00000000000..f70c70b90c4
--- /dev/null
+++ b/static/usage/v9/item/content-types/actions/angular/example_component_html.md
@@ -0,0 +1,150 @@
+```html
+
+
+ Example
+
+
+
+
+
+
+
+
+ Rick Astley
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Leeroy Jenkins
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ionitron
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Wall-E
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cortana
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bender
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ BB-8
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/actions/angular/example_component_ts.md b/static/usage/v9/item/content-types/actions/angular/example_component_ts.md
new file mode 100644
index 00000000000..48357843616
--- /dev/null
+++ b/static/usage/v9/item/content-types/actions/angular/example_component_ts.md
@@ -0,0 +1,50 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonAvatar,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonItemOption,
+ IonItemOptions,
+ IonItemSliding,
+ IonLabel,
+ IonList,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { pin, share, trash } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonAvatar,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonItemOption,
+ IonItemOptions,
+ IonItemSliding,
+ IonLabel,
+ IonList,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ pin, share, trash });
+ }
+}
+```
diff --git a/static/usage/v9/item/content-types/actions/demo.html b/static/usage/v9/item/content-types/actions/demo.html
new file mode 100644
index 00000000000..f5ba56e5c0d
--- /dev/null
+++ b/static/usage/v9/item/content-types/actions/demo.html
@@ -0,0 +1,165 @@
+
+
+
+ Item
+
+
+
+ Example
+
+
+
+
+
+
+
+
+ Rick Astley
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Leeroy Jenkins
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ionitron
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Wall-E
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cortana
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bender
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ BB-8
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/item/content-types/actions/index.md b/static/usage/v9/item/content-types/actions/index.md
new file mode 100644
index 00000000000..b55d1688ee8
--- /dev/null
+++ b/static/usage/v9/item/content-types/actions/index.md
@@ -0,0 +1,33 @@
+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 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';
+
+
+
+ Example
+
+
+
+
+
+
+
+
+ Rick Astley
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Leeroy Jenkins
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ionitron
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Wall-E
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cortana
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bender
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ BB-8
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/actions/javascript/index_ts.md b/static/usage/v9/item/content-types/actions/javascript/index_ts.md
new file mode 100644
index 00000000000..88e9cbe5aa1
--- /dev/null
+++ b/static/usage/v9/item/content-types/actions/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { pin, share, trash } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'pin': pin, 'share': share, 'trash': trash });
+ */
+addIcons({ pin, share, trash });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/item/content-types/actions/react.md b/static/usage/v9/item/content-types/actions/react.md
new file mode 100644
index 00000000000..59699517fb9
--- /dev/null
+++ b/static/usage/v9/item/content-types/actions/react.md
@@ -0,0 +1,174 @@
+```tsx
+import React from 'react';
+import {
+ IonAvatar,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonItemOptions,
+ IonItemOption,
+ IonItemSliding,
+ IonLabel,
+ IonList,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/react';
+import { pin, share, trash } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Example
+
+
+
+
+
+
+
+
+ Rick Astley
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Leeroy Jenkins
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ionitron
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Wall-E
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cortana
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bender
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ BB-8
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/content-types/actions/vue.md b/static/usage/v9/item/content-types/actions/vue.md
new file mode 100644
index 00000000000..f8992c1d4bf
--- /dev/null
+++ b/static/usage/v9/item/content-types/actions/vue.md
@@ -0,0 +1,170 @@
+```html
+
+
+
+ Example
+
+
+
+
+
+
+
+
+ Rick Astley
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Leeroy Jenkins
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ionitron
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Wall-E
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cortana
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bender
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ BB-8
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/controls/angular/example_component_html.md b/static/usage/v9/item/content-types/controls/angular/example_component_html.md
new file mode 100644
index 00000000000..2275f6468cd
--- /dev/null
+++ b/static/usage/v9/item/content-types/controls/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/controls/angular/example_component_ts.md b/static/usage/v9/item/content-types/controls/angular/example_component_ts.md
new file mode 100644
index 00000000000..d9dbc55b9ff
--- /dev/null
+++ b/static/usage/v9/item/content-types/controls/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/content-types/controls/demo.html b/static/usage/v9/item/content-types/controls/demo.html
new file mode 100644
index 00000000000..0514f72d6ca
--- /dev/null
+++ b/static/usage/v9/item/content-types/controls/demo.html
@@ -0,0 +1,54 @@
+
+
+
+ Item
+
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/item/content-types/controls/index.md b/static/usage/v9/item/content-types/controls/index.md
new file mode 100644
index 00000000000..698cd8ab9b5
--- /dev/null
+++ b/static/usage/v9/item/content-types/controls/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';
+
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/controls/react.md b/static/usage/v9/item/content-types/controls/react.md
new file mode 100644
index 00000000000..fef330390b1
--- /dev/null
+++ b/static/usage/v9/item/content-types/controls/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/content-types/controls/vue.md b/static/usage/v9/item/content-types/controls/vue.md
new file mode 100644
index 00000000000..7b5e44f890a
--- /dev/null
+++ b/static/usage/v9/item/content-types/controls/vue.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/metadata/angular/example_component_css.md b/static/usage/v9/item/content-types/metadata/angular/example_component_css.md
new file mode 100644
index 00000000000..44f7e0d5e43
--- /dev/null
+++ b/static/usage/v9/item/content-types/metadata/angular/example_component_css.md
@@ -0,0 +1,41 @@
+```css
+.unread-indicator {
+ background: var(--ion-color-primary);
+
+ width: 10px;
+ height: 10px;
+
+ border-radius: 100%;
+
+ position: absolute;
+
+ inset-inline-start: 12px;
+ top: 12px;
+}
+
+.metadata-end-wrapper {
+ position: absolute;
+
+ top: 10px;
+ inset-inline-end: 10px;
+
+ font-size: 0.8rem;
+
+ display: flex;
+ align-items: center;
+}
+
+ion-label strong {
+ display: block;
+
+ max-width: calc(100% - 60px);
+
+ overflow: hidden;
+
+ text-overflow: ellipsis;
+}
+
+ion-label ion-note {
+ font-size: 0.9rem;
+}
+```
diff --git a/static/usage/v9/item/content-types/metadata/angular/example_component_html.md b/static/usage/v9/item/content-types/metadata/angular/example_component_html.md
new file mode 100644
index 00000000000..bb97bb4a70a
--- /dev/null
+++ b/static/usage/v9/item/content-types/metadata/angular/example_component_html.md
@@ -0,0 +1,90 @@
+```html
+
+
+ Example
+
+
+
+
+
+ General
+ 6
+
+
+ Shopping
+ 15
+
+
+ Cleaning
+ 3
+
+
+ Reminders
+ 8
+
+
+
+
+
+
+
+ Rick Astley
+ Never Gonna Give You Up
+ Never gonna give you up Never gonna let you down Never gonna run...
+
+
+
+ 06:11
+
+
+
+
+
+ Ionitron
+ I have become sentient That is all.
+
+
+ 03:44
+
+
+
+
+
+ Steam
+ Game Store Sale
+ That game you added to your wish list 2 years ago is now on sale!
+
+
+
+ Yesterday
+
+
+
+
+
+ Ionic
+ Announcing Ionic 7.0 This version is one more than Ionic 6!
+
+
+ Yesterday
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/metadata/angular/example_component_ts.md b/static/usage/v9/item/content-types/metadata/angular/example_component_ts.md
new file mode 100644
index 00000000000..35bd7da33ef
--- /dev/null
+++ b/static/usage/v9/item/content-types/metadata/angular/example_component_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonNote,
+ IonText,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { chevronForward, listCircle } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonText, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ chevronForward, listCircle });
+ }
+}
+```
diff --git a/static/usage/v9/item/content-types/metadata/demo.html b/static/usage/v9/item/content-types/metadata/demo.html
new file mode 100644
index 00000000000..2475f5cd5f0
--- /dev/null
+++ b/static/usage/v9/item/content-types/metadata/demo.html
@@ -0,0 +1,146 @@
+
+
+
+ Item
+
+
+
+ Example
+
+
+
+
+
+ General
+ 6
+
+
+ Shopping
+ 15
+
+
+ Cleaning
+ 3
+
+
+ Reminders
+ 8
+
+
+
+
+
+
+
+ Rick Astley
+ Never Gonna Give You Up
+ Never gonna give you up Never gonna let you down Never gonna run...
+
+
+
+ 06:11
+
+
+
+
+
+ Ionitron
+ I have become sentient That is all.
+
+
+ 03:44
+
+
+
+
+
+ Steam
+ Game Store Sale
+ That game you added to your wish list 2 years ago is now on sale!
+
+
+
+ Yesterday
+
+
+
+
+
+ Ionic
+ Announcing Ionic 7.0 This version is one more than Ionic 6!
+
+
+ Yesterday
+
+
+
+
+
+
+
diff --git a/static/usage/v9/item/content-types/metadata/index.md b/static/usage/v9/item/content-types/metadata/index.md
new file mode 100644
index 00000000000..7047d99f205
--- /dev/null
+++ b/static/usage/v9/item/content-types/metadata/index.md
@@ -0,0 +1,42 @@
+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/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Example
+
+
+
+
+
+ General
+ 6
+
+
+ Shopping
+ 15
+
+
+ Cleaning
+ 3
+
+
+ Reminders
+ 8
+
+
+
+
+
+
+
+ Rick Astley
+ Never Gonna Give You Up
+ Never gonna give you up Never gonna let you down Never gonna run...
+
+
+
+ 06:11
+
+
+
+
+
+ Ionitron
+ I have become sentient That is all.
+
+
+ 03:44
+
+
+
+
+
+ Steam
+ Game Store Sale
+ That game you added to your wish list 2 years ago is now on sale!
+
+
+
+ Yesterday
+
+
+
+
+
+ Ionic
+ Announcing Ionic 7.0 This version is one more than Ionic 6!
+
+
+ Yesterday
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/metadata/javascript/index_ts.md b/static/usage/v9/item/content-types/metadata/javascript/index_ts.md
new file mode 100644
index 00000000000..cd85a029c74
--- /dev/null
+++ b/static/usage/v9/item/content-types/metadata/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { chevronForward, listCircle } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'chevron-forward': chevronForward, 'list-circle': listCircle });
+ */
+addIcons({ chevronForward, listCircle });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/item/content-types/metadata/react/main_css.md b/static/usage/v9/item/content-types/metadata/react/main_css.md
new file mode 100644
index 00000000000..44f7e0d5e43
--- /dev/null
+++ b/static/usage/v9/item/content-types/metadata/react/main_css.md
@@ -0,0 +1,41 @@
+```css
+.unread-indicator {
+ background: var(--ion-color-primary);
+
+ width: 10px;
+ height: 10px;
+
+ border-radius: 100%;
+
+ position: absolute;
+
+ inset-inline-start: 12px;
+ top: 12px;
+}
+
+.metadata-end-wrapper {
+ position: absolute;
+
+ top: 10px;
+ inset-inline-end: 10px;
+
+ font-size: 0.8rem;
+
+ display: flex;
+ align-items: center;
+}
+
+ion-label strong {
+ display: block;
+
+ max-width: calc(100% - 60px);
+
+ overflow: hidden;
+
+ text-overflow: ellipsis;
+}
+
+ion-label ion-note {
+ font-size: 0.9rem;
+}
+```
diff --git a/static/usage/v9/item/content-types/metadata/react/main_tsx.md b/static/usage/v9/item/content-types/metadata/react/main_tsx.md
new file mode 100644
index 00000000000..e15dfc2d314
--- /dev/null
+++ b/static/usage/v9/item/content-types/metadata/react/main_tsx.md
@@ -0,0 +1,122 @@
+```tsx
+import React from 'react';
+import {
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonNote,
+ IonText,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/react';
+import { chevronForward, listCircle } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Example
+
+
+
+
+
+ General
+ 6
+
+
+ Shopping
+ 15
+
+
+ Cleaning
+ 3
+
+
+ Reminders
+ 8
+
+
+
+
+
+
+
+ Rick Astley
+ Never Gonna Give You Up
+
+ Never gonna give you up Never gonna let you down Never gonna run...
+
+
+
+ 06:11
+
+
+
+
+
+ Ionitron
+ I have become sentient
+
+ That is all.
+
+
+
+ 03:44
+
+
+
+
+
+ Steam
+ Game Store Sale
+
+ That game you added to your wish list 2 years ago is now on sale!
+
+
+
+ Yesterday
+
+
+
+
+
+ Ionic
+ Announcing Ionic 7.0
+
+ This version is one more than Ionic 6!
+
+
+
+ Yesterday
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/content-types/metadata/vue.md b/static/usage/v9/item/content-types/metadata/vue.md
new file mode 100644
index 00000000000..5f6090d0f97
--- /dev/null
+++ b/static/usage/v9/item/content-types/metadata/vue.md
@@ -0,0 +1,150 @@
+```html
+
+
+
+ Example
+
+
+
+
+
+ General
+ 6
+
+
+ Shopping
+ 15
+
+
+ Cleaning
+ 3
+
+
+ Reminders
+ 8
+
+
+
+
+
+
+
+ Rick Astley
+ Never Gonna Give You Up
+ Never gonna give you up Never gonna let you down Never gonna run...
+
+
+
+ 06:11
+
+
+
+
+
+ Ionitron
+ I have become sentient That is all.
+
+
+ 03:44
+
+
+
+
+
+ Steam
+ Game Store Sale
+ That game you added to your wish list 2 years ago is now on sale!
+
+
+
+ Yesterday
+
+
+
+
+
+ Ionic
+ Announcing Ionic 7.0 This version is one more than Ionic 6!
+
+
+ Yesterday
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_html.md b/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_html.md
new file mode 100644
index 00000000000..e4ae4368ea2
--- /dev/null
+++ b/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_html.md
@@ -0,0 +1,47 @@
+```html
+
+
+ Airplane Mode
+
+
+ Wi-Fi
+
+
+ Bluetooth
+
+
+ Cellular
+
+
+
+
+
+
+
+ Huey
+
+
+
+
+ Dewey
+
+
+
+
+ Louie
+
+
+
+
+ Fooie
+
+
+```
diff --git a/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_ts.md b/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_ts.md
new file mode 100644
index 00000000000..c4f5d14431f
--- /dev/null
+++ b/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar, IonIcon, IonItem, IonLabel, IonList } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonAvatar, IonIcon, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ airplane, bluetooth, call, wifi });
+ }
+}
+```
diff --git a/static/usage/v9/item/content-types/supporting-visuals/demo.html b/static/usage/v9/item/content-types/supporting-visuals/demo.html
new file mode 100644
index 00000000000..0e18c634ab5
--- /dev/null
+++ b/static/usage/v9/item/content-types/supporting-visuals/demo.html
@@ -0,0 +1,66 @@
+
+
+
+ Item
+
+
+
+
+
+ Airplane Mode
+
+
+ Wi-Fi
+
+
+ Bluetooth
+
+
+ Cellular
+
+
+
+
+
+
+
+ Huey
+
+
+
+
+ Dewey
+
+
+
+
+ Louie
+
+
+
+
+ Fooie
+
+
+
+
+
+
diff --git a/static/usage/v9/item/content-types/supporting-visuals/index.md b/static/usage/v9/item/content-types/supporting-visuals/index.md
new file mode 100644
index 00000000000..3abf5e9adbc
--- /dev/null
+++ b/static/usage/v9/item/content-types/supporting-visuals/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+
+
+ Airplane Mode
+
+
+ Wi-Fi
+
+
+ Bluetooth
+
+
+ Cellular
+
+
+
+
+
+
+
+ Huey
+
+
+
+
+ Dewey
+
+
+
+
+ Louie
+
+
+
+
+ Fooie
+
+
+```
diff --git a/static/usage/v9/item/content-types/supporting-visuals/javascript/index_ts.md b/static/usage/v9/item/content-types/supporting-visuals/javascript/index_ts.md
new file mode 100644
index 00000000000..879c69145c3
--- /dev/null
+++ b/static/usage/v9/item/content-types/supporting-visuals/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'airplane': airplane, 'bluetooth': bluetooth, 'call': call, 'wifi': wifi });
+ */
+addIcons({ airplane, bluetooth, call, wifi });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/item/content-types/supporting-visuals/react.md b/static/usage/v9/item/content-types/supporting-visuals/react.md
new file mode 100644
index 00000000000..d9f6a53c916
--- /dev/null
+++ b/static/usage/v9/item/content-types/supporting-visuals/react.md
@@ -0,0 +1,58 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonItem, IonLabel, IonList, IonIcon } from '@ionic/react';
+import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Airplane Mode
+
+
+ Wi-Fi
+
+
+ Bluetooth
+
+
+ Cellular
+
+
+
+
+
+
+
+ Huey
+
+
+
+
+ Dewey
+
+
+
+
+ Louie
+
+
+
+
+ Fooie
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/content-types/supporting-visuals/vue.md b/static/usage/v9/item/content-types/supporting-visuals/vue.md
new file mode 100644
index 00000000000..02cdb617e36
--- /dev/null
+++ b/static/usage/v9/item/content-types/supporting-visuals/vue.md
@@ -0,0 +1,54 @@
+```html
+
+
+
+ Airplane Mode
+
+
+ Wi-Fi
+
+
+ Bluetooth
+
+
+ Cellular
+
+
+
+
+
+
+
+ Huey
+
+
+
+
+ Dewey
+
+
+
+
+ Louie
+
+
+
+
+ Fooie
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/text/angular/example_component_css.md b/static/usage/v9/item/content-types/text/angular/example_component_css.md
new file mode 100644
index 00000000000..65190f24e16
--- /dev/null
+++ b/static/usage/v9/item/content-types/text/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+ display: block;
+}
+```
diff --git a/static/usage/v9/item/content-types/text/angular/example_component_html.md b/static/usage/v9/item/content-types/text/angular/example_component_html.md
new file mode 100644
index 00000000000..7cf6fac8392
--- /dev/null
+++ b/static/usage/v9/item/content-types/text/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+ Allow Notifications
+ Unsubscribe at any time
+
+
+
+
+
+
+
+
+
+
+ Your comments will be kept anonymous and will only be used to improve the reliability of our products.
+
+```
diff --git a/static/usage/v9/item/content-types/text/angular/example_component_ts.md b/static/usage/v9/item/content-types/text/angular/example_component_ts.md
new file mode 100644
index 00000000000..c165a0ce5ea
--- /dev/null
+++ b/static/usage/v9/item/content-types/text/angular/example_component_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonContent,
+ IonHeader,
+ IonInput,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonNote,
+ IonTextarea,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonContent,
+ IonHeader,
+ IonInput,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonNote,
+ IonTextarea,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/content-types/text/demo.html b/static/usage/v9/item/content-types/text/demo.html
new file mode 100644
index 00000000000..7681665a339
--- /dev/null
+++ b/static/usage/v9/item/content-types/text/demo.html
@@ -0,0 +1,53 @@
+
+
+
+ Item
+
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+ Allow Notifications
+ Unsubscribe at any time
+
+
+
+
+
+
+
+
+
+
+ Your comments will be kept anonymous and will only be used to improve the reliability of our products.
+
+
+
+
+
diff --git a/static/usage/v9/item/content-types/text/index.md b/static/usage/v9/item/content-types/text/index.md
new file mode 100644
index 00000000000..06cae8f16e5
--- /dev/null
+++ b/static/usage/v9/item/content-types/text/index.md
@@ -0,0 +1,36 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+ Allow Notifications
+ Unsubscribe at any time
+
+
+
+
+
+
+
+
+
+
+ Your comments will be kept anonymous and will only be used to improve the reliability of our products.
+
+
+
+
+```
diff --git a/static/usage/v9/item/content-types/text/react/main_css.md b/static/usage/v9/item/content-types/text/react/main_css.md
new file mode 100644
index 00000000000..65190f24e16
--- /dev/null
+++ b/static/usage/v9/item/content-types/text/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+ display: block;
+}
+```
diff --git a/static/usage/v9/item/content-types/text/react/main_tsx.md b/static/usage/v9/item/content-types/text/react/main_tsx.md
new file mode 100644
index 00000000000..107dbe79540
--- /dev/null
+++ b/static/usage/v9/item/content-types/text/react/main_tsx.md
@@ -0,0 +1,57 @@
+```tsx
+import React from 'react';
+import {
+ IonContent,
+ IonHeader,
+ IonInput,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonNote,
+ IonTextarea,
+ IonToggle,
+ IonToolbar,
+ IonTitle,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+ Allow Notifications
+ Unsubscribe at any time
+
+
+
+
+
+
+
+
+
+
+ Your comments will be kept anonymous and will only be used to improve the reliability of our products.
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/content-types/text/vue.md b/static/usage/v9/item/content-types/text/vue.md
new file mode 100644
index 00000000000..37d26cd8767
--- /dev/null
+++ b/static/usage/v9/item/content-types/text/vue.md
@@ -0,0 +1,57 @@
+```html
+
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+ Allow Notifications
+ Unsubscribe at any time
+
+
+
+
+
+
+
+
+
+
+ Your comments will be kept anonymous and will only be used to improve the reliability of our products.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/detail-arrows/angular/example_component_html.md b/static/usage/v9/item/detail-arrows/angular/example_component_html.md
new file mode 100644
index 00000000000..aa14eb9ec2d
--- /dev/null
+++ b/static/usage/v9/item/detail-arrows/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+```
diff --git a/static/usage/v9/item/detail-arrows/angular/example_component_ts.md b/static/usage/v9/item/detail-arrows/angular/example_component_ts.md
new file mode 100644
index 00000000000..bb1d05933b2
--- /dev/null
+++ b/static/usage/v9/item/detail-arrows/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/detail-arrows/demo.html b/static/usage/v9/item/detail-arrows/demo.html
new file mode 100644
index 00000000000..a757c9eb853
--- /dev/null
+++ b/static/usage/v9/item/detail-arrows/demo.html
@@ -0,0 +1,62 @@
+
+
+
+ Item
+
+
+
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+
+
+
+
diff --git a/static/usage/v9/item/detail-arrows/index.md b/static/usage/v9/item/detail-arrows/index.md
new file mode 100644
index 00000000000..5b2334b2ba5
--- /dev/null
+++ b/static/usage/v9/item/detail-arrows/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';
+
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+```
diff --git a/static/usage/v9/item/detail-arrows/react.md b/static/usage/v9/item/detail-arrows/react.md
new file mode 100644
index 00000000000..de16b10fde6
--- /dev/null
+++ b/static/usage/v9/item/detail-arrows/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+import { caretForwardOutline } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/detail-arrows/vue.md b/static/usage/v9/item/detail-arrows/vue.md
new file mode 100644
index 00000000000..052683b709c
--- /dev/null
+++ b/static/usage/v9/item/detail-arrows/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/inputs/angular/example_component_html.md b/static/usage/v9/item/inputs/angular/example_component_html.md
new file mode 100644
index 00000000000..548e6239f98
--- /dev/null
+++ b/static/usage/v9/item/inputs/angular/example_component_html.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+```
diff --git a/static/usage/v9/item/inputs/angular/example_component_ts.md b/static/usage/v9/item/inputs/angular/example_component_ts.md
new file mode 100644
index 00000000000..d804a4ea83f
--- /dev/null
+++ b/static/usage/v9/item/inputs/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/inputs/demo.html b/static/usage/v9/item/inputs/demo.html
new file mode 100644
index 00000000000..d09da10eb5a
--- /dev/null
+++ b/static/usage/v9/item/inputs/demo.html
@@ -0,0 +1,68 @@
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+
+
+
+
diff --git a/static/usage/v9/item/inputs/index.md b/static/usage/v9/item/inputs/index.md
new file mode 100644
index 00000000000..391aa011329
--- /dev/null
+++ b/static/usage/v9/item/inputs/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+
+ Toggle
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+ Range
+
+
+```
diff --git a/static/usage/v9/item/inputs/react.md b/static/usage/v9/item/inputs/react.md
new file mode 100644
index 00000000000..b7f41601048
--- /dev/null
+++ b/static/usage/v9/item/inputs/react.md
@@ -0,0 +1,53 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/inputs/vue.md b/static/usage/v9/item/inputs/vue.md
new file mode 100644
index 00000000000..c1d85fda588
--- /dev/null
+++ b/static/usage/v9/item/inputs/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/lines/angular/example_component_html.md b/static/usage/v9/item/lines/angular/example_component_html.md
new file mode 100644
index 00000000000..022573e9d9d
--- /dev/null
+++ b/static/usage/v9/item/lines/angular/example_component_html.md
@@ -0,0 +1,41 @@
+```html
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+```
diff --git a/static/usage/v9/item/lines/angular/example_component_ts.md b/static/usage/v9/item/lines/angular/example_component_ts.md
new file mode 100644
index 00000000000..6c210783025
--- /dev/null
+++ b/static/usage/v9/item/lines/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon, IonItem, IonLabel } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { informationCircle, star } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon, IonItem, IonLabel],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ informationCircle, star });
+ }
+}
+```
diff --git a/static/usage/v9/item/lines/demo.html b/static/usage/v9/item/lines/demo.html
new file mode 100644
index 00000000000..0abd1628eb1
--- /dev/null
+++ b/static/usage/v9/item/lines/demo.html
@@ -0,0 +1,66 @@
+
+
+
+ Item
+
+
+
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+
+
diff --git a/static/usage/v9/item/lines/index.md b/static/usage/v9/item/lines/index.md
new file mode 100644
index 00000000000..855260d383f
--- /dev/null
+++ b/static/usage/v9/item/lines/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+```
diff --git a/static/usage/v9/item/lines/javascript/index_ts.md b/static/usage/v9/item/lines/javascript/index_ts.md
new file mode 100644
index 00000000000..b763e9e3032
--- /dev/null
+++ b/static/usage/v9/item/lines/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { informationCircle, star } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'information-circle': informationCircle, 'star': star });
+ */
+addIcons({ informationCircle, star });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/item/lines/react.md b/static/usage/v9/item/lines/react.md
new file mode 100644
index 00000000000..dbe79214349
--- /dev/null
+++ b/static/usage/v9/item/lines/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { informationCircle, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/lines/vue.md b/static/usage/v9/item/lines/vue.md
new file mode 100644
index 00000000000..891ed66bf3c
--- /dev/null
+++ b/static/usage/v9/item/lines/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+ Default Item Lines
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+```
diff --git a/static/usage/v9/item/media/angular/example_component_html.md b/static/usage/v9/item/media/angular/example_component_html.md
new file mode 100644
index 00000000000..c51ab29463a
--- /dev/null
+++ b/static/usage/v9/item/media/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+ Avatar Item
+
+
+
+
+
+ Thumbnail Item
+
+```
diff --git a/static/usage/v9/item/media/angular/example_component_ts.md b/static/usage/v9/item/media/angular/example_component_ts.md
new file mode 100644
index 00000000000..90191dc1ffa
--- /dev/null
+++ b/static/usage/v9/item/media/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonAvatar, IonItem, IonLabel, IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/media/demo.html b/static/usage/v9/item/media/demo.html
new file mode 100644
index 00000000000..99ef636e6c3
--- /dev/null
+++ b/static/usage/v9/item/media/demo.html
@@ -0,0 +1,40 @@
+
+
+
+ Item
+
+
+
+
+
+
+ Avatar Item
+
+
+
+
+
+ Thumbnail Item
+
+
+
+
+
diff --git a/static/usage/v9/item/media/index.md b/static/usage/v9/item/media/index.md
new file mode 100644
index 00000000000..40be49ca089
--- /dev/null
+++ b/static/usage/v9/item/media/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Avatar Item
+
+
+
+
+
+ Thumbnail Item
+
+```
diff --git a/static/usage/v9/item/media/react.md b/static/usage/v9/item/media/react.md
new file mode 100644
index 00000000000..dae8042c9ae
--- /dev/null
+++ b/static/usage/v9/item/media/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Avatar Item
+
+
+
+
+
+ Thumbnail Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/media/vue.md b/static/usage/v9/item/media/vue.md
new file mode 100644
index 00000000000..dc3078f9741
--- /dev/null
+++ b/static/usage/v9/item/media/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+ Avatar Item
+
+
+
+
+
+ Thumbnail Item
+
+
+
+
+```
diff --git a/static/usage/v9/item/theming/colors/angular/example_component_html.md b/static/usage/v9/item/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..f1b6dd45e0c
--- /dev/null
+++ b/static/usage/v9/item/theming/colors/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+```
diff --git a/static/usage/v9/item/theming/colors/angular/example_component_ts.md b/static/usage/v9/item/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..bb1d05933b2
--- /dev/null
+++ b/static/usage/v9/item/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/theming/colors/demo.html b/static/usage/v9/item/theming/colors/demo.html
new file mode 100644
index 00000000000..71cc7d275ba
--- /dev/null
+++ b/static/usage/v9/item/theming/colors/demo.html
@@ -0,0 +1,57 @@
+
+
+
+ Item
+
+
+
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+
+
+
+
+
diff --git a/static/usage/v9/item/theming/colors/index.md b/static/usage/v9/item/theming/colors/index.md
new file mode 100644
index 00000000000..e3cc18e2da5
--- /dev/null
+++ b/static/usage/v9/item/theming/colors/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';
+
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+```
diff --git a/static/usage/v9/item/theming/colors/react.md b/static/usage/v9/item/theming/colors/react.md
new file mode 100644
index 00000000000..2efad83cba3
--- /dev/null
+++ b/static/usage/v9/item/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/theming/colors/vue.md b/static/usage/v9/item/theming/colors/vue.md
new file mode 100644
index 00000000000..5500e0c9083
--- /dev/null
+++ b/static/usage/v9/item/theming/colors/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+
+
+
+```
diff --git a/static/usage/v9/item/theming/css-properties/angular/example_component_css.md b/static/usage/v9/item/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/v9/item/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-color: #fff;
+ --border-style: dashed;
+ --border-width: 2px;
+
+ --border-radius: 20px;
+
+ --ripple-color: purple;
+
+ --detail-icon-color: white;
+ --detail-icon-opacity: 1;
+ --detail-icon-font-size: 20px;
+}
+```
diff --git a/static/usage/v9/item/theming/css-properties/angular/example_component_html.md b/static/usage/v9/item/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/v9/item/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+```
diff --git a/static/usage/v9/item/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/item/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..bb1d05933b2
--- /dev/null
+++ b/static/usage/v9/item/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/theming/css-properties/demo.html b/static/usage/v9/item/theming/css-properties/demo.html
new file mode 100644
index 00000000000..549555682d2
--- /dev/null
+++ b/static/usage/v9/item/theming/css-properties/demo.html
@@ -0,0 +1,55 @@
+
+
+
+ Item
+
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
diff --git a/static/usage/v9/item/theming/css-properties/index.md b/static/usage/v9/item/theming/css-properties/index.md
new file mode 100644
index 00000000000..0e166d596ae
--- /dev/null
+++ b/static/usage/v9/item/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+```
diff --git a/static/usage/v9/item/theming/css-properties/react/main_css.md b/static/usage/v9/item/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/v9/item/theming/css-properties/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-color: #fff;
+ --border-style: dashed;
+ --border-width: 2px;
+
+ --border-radius: 20px;
+
+ --ripple-color: purple;
+
+ --detail-icon-color: white;
+ --detail-icon-opacity: 1;
+ --detail-icon-font-size: 20px;
+}
+```
diff --git a/static/usage/v9/item/theming/css-properties/react/main_tsx.md b/static/usage/v9/item/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/v9/item/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/theming/css-properties/vue.md b/static/usage/v9/item/theming/css-properties/vue.md
new file mode 100644
index 00000000000..d1adc06485d
--- /dev/null
+++ b/static/usage/v9/item/theming/css-properties/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item::part(native) {
+ background: #19422d;
+ color: #fff;
+
+ border-color: #fff;
+ border-style: dashed;
+ border-width: 2px;
+
+ border-radius: 20px;
+}
+
+ion-item::part(detail-icon) {
+ color: white;
+ opacity: 1;
+ font-size: 20px;
+}
+```
diff --git a/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+```
diff --git a/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 00000000000..bb1d05933b2
--- /dev/null
+++ b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/theming/css-shadow-parts/demo.html b/static/usage/v9/item/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..1b5f723eeaf
--- /dev/null
+++ b/static/usage/v9/item/theming/css-shadow-parts/demo.html
@@ -0,0 +1,55 @@
+
+
+
+ Item
+
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
diff --git a/static/usage/v9/item/theming/css-shadow-parts/index.md b/static/usage/v9/item/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..b710bd4c2a1
--- /dev/null
+++ b/static/usage/v9/item/theming/css-shadow-parts/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+```
diff --git a/static/usage/v9/item/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/item/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/v9/item/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item::part(native) {
+ background: #19422d;
+ color: #fff;
+
+ border-color: #fff;
+ border-style: dashed;
+ border-width: 2px;
+
+ border-radius: 20px;
+}
+
+ion-item::part(detail-icon) {
+ color: white;
+ opacity: 1;
+ font-size: 20px;
+}
+```
diff --git a/static/usage/v9/item/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/item/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/v9/item/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/theming/css-shadow-parts/vue.md b/static/usage/v9/item/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..2bcda2b8979
--- /dev/null
+++ b/static/usage/v9/item/theming/css-shadow-parts/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/item/theming/input-highlight/angular/example_component_css.md b/static/usage/v9/item/theming/input-highlight/angular/example_component_css.md
new file mode 100644
index 00000000000..5d7cfd49c7c
--- /dev/null
+++ b/static/usage/v9/item/theming/input-highlight/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-item {
+ --highlight-height: 2px;
+ --highlight-color-focused: #43e7f3;
+ --highlight-color-valid: #6f58d8;
+ --highlight-color-invalid: #ff46be;
+}
+```
diff --git a/static/usage/v9/item/theming/input-highlight/angular/example_component_html.md b/static/usage/v9/item/theming/input-highlight/angular/example_component_html.md
new file mode 100644
index 00000000000..59a5e5928a9
--- /dev/null
+++ b/static/usage/v9/item/theming/input-highlight/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+
+ Custom Input Highlight: Focused
+
+
+
+ Custom Input Highlight: Focused & Valid
+
+
+
+ Custom Input Highlight: Focused & Invalid
+
+```
diff --git a/static/usage/v9/item/theming/input-highlight/angular/example_component_ts.md b/static/usage/v9/item/theming/input-highlight/angular/example_component_ts.md
new file mode 100644
index 00000000000..bb1d05933b2
--- /dev/null
+++ b/static/usage/v9/item/theming/input-highlight/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/item/theming/input-highlight/demo.html b/static/usage/v9/item/theming/input-highlight/demo.html
new file mode 100644
index 00000000000..065f7f4d151
--- /dev/null
+++ b/static/usage/v9/item/theming/input-highlight/demo.html
@@ -0,0 +1,48 @@
+
+
+
+ Item
+
+
+
+
+ Custom Input Highlight: Focused
+
+
+
+ Custom Input Highlight: Focused & Valid
+
+
+
+ Custom Input Highlight: Focused & Invalid
+
+
+
+
+
+
diff --git a/static/usage/v9/item/theming/input-highlight/index.md b/static/usage/v9/item/theming/input-highlight/index.md
new file mode 100644
index 00000000000..278c739b47a
--- /dev/null
+++ b/static/usage/v9/item/theming/input-highlight/index.md
@@ -0,0 +1,35 @@
+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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Custom Input Highlight: Focused
+
+
+
+ Custom Input Highlight: Focused & Valid
+
+
+
+ Custom Input Highlight: Focused & Invalid
+
+
+
+```
diff --git a/static/usage/v9/item/theming/input-highlight/react/main_css.md b/static/usage/v9/item/theming/input-highlight/react/main_css.md
new file mode 100644
index 00000000000..5d7cfd49c7c
--- /dev/null
+++ b/static/usage/v9/item/theming/input-highlight/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-item {
+ --highlight-height: 2px;
+ --highlight-color-focused: #43e7f3;
+ --highlight-color-valid: #6f58d8;
+ --highlight-color-invalid: #ff46be;
+}
+```
diff --git a/static/usage/v9/item/theming/input-highlight/react/main_tsx.md b/static/usage/v9/item/theming/input-highlight/react/main_tsx.md
new file mode 100644
index 00000000000..67d46a73267
--- /dev/null
+++ b/static/usage/v9/item/theming/input-highlight/react/main_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Custom Input Highlight: Focused
+
+
+
+ Custom Input Highlight: Focused & Valid
+
+
+
+ Custom Input Highlight: Focused & Invalid
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/item/theming/input-highlight/vue.md b/static/usage/v9/item/theming/input-highlight/vue.md
new file mode 100644
index 00000000000..7d4b9a93de1
--- /dev/null
+++ b/static/usage/v9/item/theming/input-highlight/vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+ Custom Input Highlight: Focused
+
+
+
+ Custom Input Highlight: Focused & Valid
+
+
+
+ Custom Input Highlight: Focused & Invalid
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/keyboard/enterkeyhint/angular/example_component_html.md b/static/usage/v9/keyboard/enterkeyhint/angular/example_component_html.md
new file mode 100644
index 00000000000..a5fe24f6d7c
--- /dev/null
+++ b/static/usage/v9/keyboard/enterkeyhint/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+ enterkeyhint="search"
+
+
+
+
+ enterkeyhint="send"
+
+
+
+```
diff --git a/static/usage/v9/keyboard/enterkeyhint/angular/example_component_ts.md b/static/usage/v9/keyboard/enterkeyhint/angular/example_component_ts.md
new file mode 100644
index 00000000000..132e3291d4c
--- /dev/null
+++ b/static/usage/v9/keyboard/enterkeyhint/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/keyboard/enterkeyhint/demo.html b/static/usage/v9/keyboard/enterkeyhint/demo.html
new file mode 100644
index 00000000000..c5db385acf0
--- /dev/null
+++ b/static/usage/v9/keyboard/enterkeyhint/demo.html
@@ -0,0 +1,33 @@
+
+
+
+ Keyboard
+
+
+
+
+
+
+ enterkeyhint="search"
+
+
+
+
+ enterkeyhint="send"
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/keyboard/enterkeyhint/index.md b/static/usage/v9/keyboard/enterkeyhint/index.md
new file mode 100644
index 00000000000..7dfe2c1ec87
--- /dev/null
+++ b/static/usage/v9/keyboard/enterkeyhint/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ enterkeyhint="search"
+
+
+
+
+ enterkeyhint="send"
+
+
+
+```
diff --git a/static/usage/v9/keyboard/enterkeyhint/react.md b/static/usage/v9/keyboard/enterkeyhint/react.md
new file mode 100644
index 00000000000..eb088650737
--- /dev/null
+++ b/static/usage/v9/keyboard/enterkeyhint/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonInput } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ enterkeyhint="search"
+
+
+
+
+ enterkeyhint="send"
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/keyboard/enterkeyhint/vue.md b/static/usage/v9/keyboard/enterkeyhint/vue.md
new file mode 100644
index 00000000000..6e46fc8e46b
--- /dev/null
+++ b/static/usage/v9/keyboard/enterkeyhint/vue.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+
+ enterkeyhint="search"
+
+
+
+
+ enterkeyhint="send"
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/keyboard/inputmode/angular/example_component_html.md b/static/usage/v9/keyboard/inputmode/angular/example_component_html.md
new file mode 100644
index 00000000000..36124635c54
--- /dev/null
+++ b/static/usage/v9/keyboard/inputmode/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+ inputmode="email"
+
+
+
+
+ inputmode="numeric"
+
+
+
+
+ inputmode="decimal"
+
+
+
+```
diff --git a/static/usage/v9/keyboard/inputmode/angular/example_component_ts.md b/static/usage/v9/keyboard/inputmode/angular/example_component_ts.md
new file mode 100644
index 00000000000..132e3291d4c
--- /dev/null
+++ b/static/usage/v9/keyboard/inputmode/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/keyboard/inputmode/demo.html b/static/usage/v9/keyboard/inputmode/demo.html
new file mode 100644
index 00000000000..af9eab2c697
--- /dev/null
+++ b/static/usage/v9/keyboard/inputmode/demo.html
@@ -0,0 +1,44 @@
+
+
+
+ Keyboard
+
+
+
+
+
+
+ inputmode="email"
+
+
+
+
+ inputmode="numeric"
+
+
+
+
+ inputmode="decimal"
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/keyboard/inputmode/index.md b/static/usage/v9/keyboard/inputmode/index.md
new file mode 100644
index 00000000000..5aa921f6981
--- /dev/null
+++ b/static/usage/v9/keyboard/inputmode/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ inputmode="email"
+
+
+
+
+ inputmode="numeric"
+
+
+
+
+ inputmode="decimal"
+
+
+
+```
diff --git a/static/usage/v9/keyboard/inputmode/react.md b/static/usage/v9/keyboard/inputmode/react.md
new file mode 100644
index 00000000000..5e56f0973bd
--- /dev/null
+++ b/static/usage/v9/keyboard/inputmode/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonInput } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ inputmode="email"
+
+
+
+
+ inputmode="numeric"
+
+
+
+
+ inputmode="decimal"
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/keyboard/inputmode/vue.md b/static/usage/v9/keyboard/inputmode/vue.md
new file mode 100644
index 00000000000..6ad97abbd75
--- /dev/null
+++ b/static/usage/v9/keyboard/inputmode/vue.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+ inputmode="email"
+
+
+
+
+ inputmode="numeric"
+
+
+
+
+ inputmode="decimal"
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/label/basic/angular/example_component_html.md b/static/usage/v9/label/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..c3125f70b5f
--- /dev/null
+++ b/static/usage/v9/label/basic/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Label
+```
diff --git a/static/usage/v9/label/basic/angular/example_component_ts.md b/static/usage/v9/label/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..05c8c0860bc
--- /dev/null
+++ b/static/usage/v9/label/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/label/basic/demo.html b/static/usage/v9/label/basic/demo.html
new file mode 100644
index 00000000000..5acfa6924f0
--- /dev/null
+++ b/static/usage/v9/label/basic/demo.html
@@ -0,0 +1,22 @@
+
+
+
+ Label
+
+
+
+ Label
+
+
+
+
+
diff --git a/static/usage/v9/label/basic/index.md b/static/usage/v9/label/basic/index.md
new file mode 100644
index 00000000000..6bd760cee04
--- /dev/null
+++ b/static/usage/v9/label/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Label
+```
diff --git a/static/usage/v9/label/basic/react.md b/static/usage/v9/label/basic/react.md
new file mode 100644
index 00000000000..8eb985452c0
--- /dev/null
+++ b/static/usage/v9/label/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Label
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/label/basic/vue.md b/static/usage/v9/label/basic/vue.md
new file mode 100644
index 00000000000..2b1aaca0a93
--- /dev/null
+++ b/static/usage/v9/label/basic/vue.md
@@ -0,0 +1,9 @@
+```html
+
+ Label
+
+
+
+```
diff --git a/static/usage/v9/label/input/angular/example_component_html.md b/static/usage/v9/label/input/angular/example_component_html.md
new file mode 100644
index 00000000000..75278afd44b
--- /dev/null
+++ b/static/usage/v9/label/input/angular/example_component_html.md
@@ -0,0 +1,31 @@
+```html
+
+ Default Label
+
+
+
+ Fixed Label
+
+
+
+ Floating Label
+
+
+
+ Stacked Label
+
+
+
+ Toggle
+
+
+
+ Checkbox
+
+```
diff --git a/static/usage/v9/label/input/angular/example_component_ts.md b/static/usage/v9/label/input/angular/example_component_ts.md
new file mode 100644
index 00000000000..897d7f87289
--- /dev/null
+++ b/static/usage/v9/label/input/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonCheckbox, IonInput, IonItem, IonLabel, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/label/input/demo.html b/static/usage/v9/label/input/demo.html
new file mode 100644
index 00000000000..4bdb561eeaa
--- /dev/null
+++ b/static/usage/v9/label/input/demo.html
@@ -0,0 +1,56 @@
+
+
+
+ Label
+
+
+
+
+ Default Label
+
+
+
+ Fixed Label
+
+
+
+ Floating Label
+
+
+
+ Stacked Label
+
+
+
+ Toggle
+
+
+
+ Checkbox
+
+
+
+
+
+
diff --git a/static/usage/v9/label/input/index.md b/static/usage/v9/label/input/index.md
new file mode 100644
index 00000000000..ac42fd23a49
--- /dev/null
+++ b/static/usage/v9/label/input/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';
+
+
+ Default Label
+
+
+
+ Fixed Label
+
+
+
+ Floating Label
+
+
+
+ Stacked Label
+
+
+
+ Toggle
+
+
+
+ Checkbox
+
+```
diff --git a/static/usage/v9/label/input/react.md b/static/usage/v9/label/input/react.md
new file mode 100644
index 00000000000..ff11fd1f176
--- /dev/null
+++ b/static/usage/v9/label/input/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Label
+
+
+
+ Fixed Label
+
+
+
+ Floating Label
+
+
+
+ Stacked Label
+
+
+
+ Toggle
+
+
+
+ Checkbox
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/label/input/vue.md b/static/usage/v9/label/input/vue.md
new file mode 100644
index 00000000000..dfb7541d20f
--- /dev/null
+++ b/static/usage/v9/label/input/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Default Label
+
+
+
+ Fixed Label
+
+
+
+ Floating Label
+
+
+
+ Stacked Label
+
+
+
+ Toggle
+
+
+
+ Checkbox
+
+
+
+
+```
diff --git a/static/usage/v9/label/item/angular/example_component_html.md b/static/usage/v9/label/item/angular/example_component_html.md
new file mode 100644
index 00000000000..54f24979079
--- /dev/null
+++ b/static/usage/v9/label/item/angular/example_component_html.md
@@ -0,0 +1,26 @@
+```html
+
+ Default 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 wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v9/label/item/angular/example_component_ts.md b/static/usage/v9/label/item/angular/example_component_ts.md
new file mode 100644
index 00000000000..bb1d05933b2
--- /dev/null
+++ b/static/usage/v9/label/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/label/item/demo.html b/static/usage/v9/label/item/demo.html
new file mode 100644
index 00000000000..d552e11ed07
--- /dev/null
+++ b/static/usage/v9/label/item/demo.html
@@ -0,0 +1,51 @@
+
+
+
+ Label
+
+
+
+
+ Default 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 wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+
+
+
+
diff --git a/static/usage/v9/label/item/index.md b/static/usage/v9/label/item/index.md
new file mode 100644
index 00000000000..0c59e175528
--- /dev/null
+++ b/static/usage/v9/label/item/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';
+
+
+ Default 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 wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v9/label/item/react.md b/static/usage/v9/label/item/react.md
new file mode 100644
index 00000000000..f5bdf5a5d1b
--- /dev/null
+++ b/static/usage/v9/label/item/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default 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 wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/label/item/vue.md b/static/usage/v9/label/item/vue.md
new file mode 100644
index 00000000000..268cd971f17
--- /dev/null
+++ b/static/usage/v9/label/item/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+ Default 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 wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+
+
+
+```
diff --git a/static/usage/v9/label/theming/colors/angular/example_component_html.md b/static/usage/v9/label/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..1fbebb19888
--- /dev/null
+++ b/static/usage/v9/label/theming/colors/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v9/label/theming/colors/angular/example_component_ts.md b/static/usage/v9/label/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..05c8c0860bc
--- /dev/null
+++ b/static/usage/v9/label/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/label/theming/colors/demo.html b/static/usage/v9/label/theming/colors/demo.html
new file mode 100644
index 00000000000..a560d6c5876
--- /dev/null
+++ b/static/usage/v9/label/theming/colors/demo.html
@@ -0,0 +1,37 @@
+
+
+
+ Label
+
+
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+
+
diff --git a/static/usage/v9/label/theming/colors/index.md b/static/usage/v9/label/theming/colors/index.md
new file mode 100644
index 00000000000..b9d954a98c9
--- /dev/null
+++ b/static/usage/v9/label/theming/colors/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v9/label/theming/colors/react.md b/static/usage/v9/label/theming/colors/react.md
new file mode 100644
index 00000000000..6680a644fb6
--- /dev/null
+++ b/static/usage/v9/label/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/label/theming/colors/vue.md b/static/usage/v9/label/theming/colors/vue.md
new file mode 100644
index 00000000000..d58a0591693
--- /dev/null
+++ b/static/usage/v9/label/theming/colors/vue.md
@@ -0,0 +1,18 @@
+```html
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+```
diff --git a/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_html.md b/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_html.md
new file mode 100644
index 00000000000..76687ae8b81
--- /dev/null
+++ b/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_html.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+ Check for a free puppy
+
+
+ Enable Notifications
+
+
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_ts.md b/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_ts.md
new file mode 100644
index 00000000000..1831eb8f7d2
--- /dev/null
+++ b/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_ts.md
@@ -0,0 +1,56 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonCheckbox,
+ IonContent,
+ IonFooter,
+ IonHeader,
+ IonIcon,
+ IonInput,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { create } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonCheckbox,
+ IonContent,
+ IonFooter,
+ IonHeader,
+ IonIcon,
+ IonInput,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ create });
+ }
+}
+```
diff --git a/static/usage/v9/layout/dynamic-font-scaling/demo.html b/static/usage/v9/layout/dynamic-font-scaling/demo.html
new file mode 100644
index 00000000000..a486f91572d
--- /dev/null
+++ b/static/usage/v9/layout/dynamic-font-scaling/demo.html
@@ -0,0 +1,60 @@
+
+
+
+ Dynamic Font Scaling
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+ Check for a free puppy
+
+
+ Enable Notifications
+
+
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+ Footer
+
+
+
+
+
diff --git a/static/usage/v9/layout/dynamic-font-scaling/index.md b/static/usage/v9/layout/dynamic-font-scaling/index.md
new file mode 100644
index 00000000000..ed406f3e8ea
--- /dev/null
+++ b/static/usage/v9/layout/dynamic-font-scaling/index.md
@@ -0,0 +1,33 @@
+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 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';
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+ Check for a free puppy
+
+
+ Enable Notifications
+
+
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v9/layout/dynamic-font-scaling/javascript/index_ts.md b/static/usage/v9/layout/dynamic-font-scaling/javascript/index_ts.md
new file mode 100644
index 00000000000..fc0ba6ecfb5
--- /dev/null
+++ b/static/usage/v9/layout/dynamic-font-scaling/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { create } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to a "create" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'create': create });
+ */
+addIcons({ create });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/layout/dynamic-font-scaling/react.md b/static/usage/v9/layout/dynamic-font-scaling/react.md
new file mode 100644
index 00000000000..863d4e269d3
--- /dev/null
+++ b/static/usage/v9/layout/dynamic-font-scaling/react.md
@@ -0,0 +1,74 @@
+```tsx
+import React from 'react';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonCheckbox,
+ IonContent,
+ IonFooter,
+ IonHeader,
+ IonIcon,
+ IonInput,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/react';
+import { create } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+ Check for a free puppy
+
+
+ Enable Notifications
+
+
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+ Footer
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/layout/dynamic-font-scaling/vue.md b/static/usage/v9/layout/dynamic-font-scaling/vue.md
new file mode 100644
index 00000000000..4564caa820f
--- /dev/null
+++ b/static/usage/v9/layout/dynamic-font-scaling/vue.md
@@ -0,0 +1,68 @@
+```html
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+ Check for a free puppy
+
+
+ Enable Notifications
+
+
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v9/list-header/basic/angular/example_component_html.md b/static/usage/v9/list-header/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/v9/list-header/basic/angular/example_component_html.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v9/list-header/basic/angular/example_component_ts.md b/static/usage/v9/list-header/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..4a7586f8d93
--- /dev/null
+++ b/static/usage/v9/list-header/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/list-header/basic/demo.html b/static/usage/v9/list-header/basic/demo.html
new file mode 100644
index 00000000000..88c71bf4f86
--- /dev/null
+++ b/static/usage/v9/list-header/basic/demo.html
@@ -0,0 +1,47 @@
+
+
+
+ List Header
+
+
+
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
diff --git a/static/usage/v9/list-header/basic/index.md b/static/usage/v9/list-header/basic/index.md
new file mode 100644
index 00000000000..a7326887c5b
--- /dev/null
+++ b/static/usage/v9/list-header/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';
+
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v9/list-header/basic/react.md b/static/usage/v9/list-header/basic/react.md
new file mode 100644
index 00000000000..b48a05b05da
--- /dev/null
+++ b/static/usage/v9/list-header/basic/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/list-header/basic/vue.md b/static/usage/v9/list-header/basic/vue.md
new file mode 100644
index 00000000000..d891af18198
--- /dev/null
+++ b/static/usage/v9/list-header/basic/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v9/list-header/buttons/angular/example_component_html.md b/static/usage/v9/list-header/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..7c24d9242a2
--- /dev/null
+++ b/static/usage/v9/list-header/buttons/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v9/list-header/buttons/angular/example_component_ts.md b/static/usage/v9/list-header/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..392f375817e
--- /dev/null
+++ b/static/usage/v9/list-header/buttons/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonItem, IonLabel, IonList, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/list-header/buttons/demo.html b/static/usage/v9/list-header/buttons/demo.html
new file mode 100644
index 00000000000..42a91202bca
--- /dev/null
+++ b/static/usage/v9/list-header/buttons/demo.html
@@ -0,0 +1,48 @@
+
+
+
+ List Header
+
+
+
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
diff --git a/static/usage/v9/list-header/buttons/index.md b/static/usage/v9/list-header/buttons/index.md
new file mode 100644
index 00000000000..7eccf6c78c2
--- /dev/null
+++ b/static/usage/v9/list-header/buttons/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v9/list-header/buttons/react.md b/static/usage/v9/list-header/buttons/react.md
new file mode 100644
index 00000000000..d5d45b36ab0
--- /dev/null
+++ b/static/usage/v9/list-header/buttons/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/list-header/buttons/vue.md b/static/usage/v9/list-header/buttons/vue.md
new file mode 100644
index 00000000000..94ca0cda062
--- /dev/null
+++ b/static/usage/v9/list-header/buttons/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v9/list-header/lines/angular/example_component_html.md b/static/usage/v9/list-header/lines/angular/example_component_html.md
new file mode 100644
index 00000000000..7feb30bd27d
--- /dev/null
+++ b/static/usage/v9/list-header/lines/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+```
diff --git a/static/usage/v9/list-header/lines/angular/example_component_ts.md b/static/usage/v9/list-header/lines/angular/example_component_ts.md
new file mode 100644
index 00000000000..4a7586f8d93
--- /dev/null
+++ b/static/usage/v9/list-header/lines/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/list-header/lines/demo.html b/static/usage/v9/list-header/lines/demo.html
new file mode 100644
index 00000000000..c283438c153
--- /dev/null
+++ b/static/usage/v9/list-header/lines/demo.html
@@ -0,0 +1,62 @@
+
+
+
+ List Header
+
+
+
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+
+
diff --git a/static/usage/v9/list-header/lines/index.md b/static/usage/v9/list-header/lines/index.md
new file mode 100644
index 00000000000..b9e40b8e486
--- /dev/null
+++ b/static/usage/v9/list-header/lines/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';
+
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+```
diff --git a/static/usage/v9/list-header/lines/react.md b/static/usage/v9/list-header/lines/react.md
new file mode 100644
index 00000000000..9ab1c69d35e
--- /dev/null
+++ b/static/usage/v9/list-header/lines/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/list-header/lines/vue.md b/static/usage/v9/list-header/lines/vue.md
new file mode 100644
index 00000000000..06f43b5cbf1
--- /dev/null
+++ b/static/usage/v9/list-header/lines/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+```
diff --git a/static/usage/v9/list-header/theming/colors/angular/example_component_html.md b/static/usage/v9/list-header/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..88d5b12d912
--- /dev/null
+++ b/static/usage/v9/list-header/theming/colors/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v9/list-header/theming/colors/angular/example_component_ts.md b/static/usage/v9/list-header/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..392539d86d3
--- /dev/null
+++ b/static/usage/v9/list-header/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonListHeader } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/list-header/theming/colors/demo.html b/static/usage/v9/list-header/theming/colors/demo.html
new file mode 100644
index 00000000000..3f5dd6c4c85
--- /dev/null
+++ b/static/usage/v9/list-header/theming/colors/demo.html
@@ -0,0 +1,57 @@
+
+
+
+ List Header
+
+
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+
+
diff --git a/static/usage/v9/list-header/theming/colors/index.md b/static/usage/v9/list-header/theming/colors/index.md
new file mode 100644
index 00000000000..0c975085c50
--- /dev/null
+++ b/static/usage/v9/list-header/theming/colors/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';
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v9/list-header/theming/colors/react.md b/static/usage/v9/list-header/theming/colors/react.md
new file mode 100644
index 00000000000..f00ce7c16d1
--- /dev/null
+++ b/static/usage/v9/list-header/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/list-header/theming/colors/vue.md b/static/usage/v9/list-header/theming/colors/vue.md
new file mode 100644
index 00000000000..ddf26984441
--- /dev/null
+++ b/static/usage/v9/list-header/theming/colors/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+```
diff --git a/static/usage/v9/list-header/theming/css-properties/angular/example_component_css.md b/static/usage/v9/list-header/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/v9/list-header/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-list-header {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-width: 0 0 4px 0;
+ --border-color: #f24aec;
+ --border-style: double;
+}
+```
diff --git a/static/usage/v9/list-header/theming/css-properties/angular/example_component_html.md b/static/usage/v9/list-header/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..0bf6d9fa3fe
--- /dev/null
+++ b/static/usage/v9/list-header/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Custom List Header
+
+```
diff --git a/static/usage/v9/list-header/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/list-header/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..392539d86d3
--- /dev/null
+++ b/static/usage/v9/list-header/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonListHeader } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/list-header/theming/css-properties/demo.html b/static/usage/v9/list-header/theming/css-properties/demo.html
new file mode 100644
index 00000000000..6e729e4ccea
--- /dev/null
+++ b/static/usage/v9/list-header/theming/css-properties/demo.html
@@ -0,0 +1,35 @@
+
+
+
+ List Header
+
+
+
+
+ Custom List Header
+
+
+
+
+
+
diff --git a/static/usage/v9/list-header/theming/css-properties/index.md b/static/usage/v9/list-header/theming/css-properties/index.md
new file mode 100644
index 00000000000..7f990becaf9
--- /dev/null
+++ b/static/usage/v9/list-header/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Custom List Header
+
+
+
+```
diff --git a/static/usage/v9/list-header/theming/css-properties/react/main_css.md b/static/usage/v9/list-header/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/v9/list-header/theming/css-properties/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+ion-list-header {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-width: 0 0 4px 0;
+ --border-color: #f24aec;
+ --border-style: double;
+}
+```
diff --git a/static/usage/v9/list-header/theming/css-properties/react/main_tsx.md b/static/usage/v9/list-header/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..169485b3365
--- /dev/null
+++ b/static/usage/v9/list-header/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonListHeader } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Custom List Header
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/list-header/theming/css-properties/vue.md b/static/usage/v9/list-header/theming/css-properties/vue.md
new file mode 100644
index 00000000000..572b4155e28
--- /dev/null
+++ b/static/usage/v9/list-header/theming/css-properties/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Custom List Header
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/list/basic/angular/example_component_html.md b/static/usage/v9/list/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f36481075e8
--- /dev/null
+++ b/static/usage/v9/list/basic/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v9/list/basic/angular/example_component_ts.md b/static/usage/v9/list/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..892385aa931
--- /dev/null
+++ b/static/usage/v9/list/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/list/basic/demo.html b/static/usage/v9/list/basic/demo.html
new file mode 100644
index 00000000000..05a81de43e4
--- /dev/null
+++ b/static/usage/v9/list/basic/demo.html
@@ -0,0 +1,44 @@
+
+
+
+ List
+
+
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
diff --git a/static/usage/v9/list/basic/index.md b/static/usage/v9/list/basic/index.md
new file mode 100644
index 00000000000..cf6bdbefc7e
--- /dev/null
+++ b/static/usage/v9/list/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';
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v9/list/basic/react.md b/static/usage/v9/list/basic/react.md
new file mode 100644
index 00000000000..51b30335ccd
--- /dev/null
+++ b/static/usage/v9/list/basic/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/list/basic/vue.md b/static/usage/v9/list/basic/vue.md
new file mode 100644
index 00000000000..8bc0e26f836
--- /dev/null
+++ b/static/usage/v9/list/basic/vue.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v9/list/inset/angular/example_component_html.md b/static/usage/v9/list/inset/angular/example_component_html.md
new file mode 100644
index 00000000000..cd94c838cb9
--- /dev/null
+++ b/static/usage/v9/list/inset/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+```
diff --git a/static/usage/v9/list/inset/angular/example_component_ts.md b/static/usage/v9/list/inset/angular/example_component_ts.md
new file mode 100644
index 00000000000..86cabbe72f2
--- /dev/null
+++ b/static/usage/v9/list/inset/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonItem, IonLabel, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/list/inset/demo.html b/static/usage/v9/list/inset/demo.html
new file mode 100644
index 00000000000..34ff4ef6b48
--- /dev/null
+++ b/static/usage/v9/list/inset/demo.html
@@ -0,0 +1,45 @@
+
+
+
+ List
+
+
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
diff --git a/static/usage/v9/list/inset/index.md b/static/usage/v9/list/inset/index.md
new file mode 100644
index 00000000000..4950d841628
--- /dev/null
+++ b/static/usage/v9/list/inset/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';
+
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+```
diff --git a/static/usage/v9/list/inset/react.md b/static/usage/v9/list/inset/react.md
new file mode 100644
index 00000000000..37e00fc1048
--- /dev/null
+++ b/static/usage/v9/list/inset/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonContent, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/list/inset/vue.md b/static/usage/v9/list/inset/vue.md
new file mode 100644
index 00000000000..d3af6eb591a
--- /dev/null
+++ b/static/usage/v9/list/inset/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/list/lines/angular/example_component_html.md b/static/usage/v9/list/lines/angular/example_component_html.md
new file mode 100644
index 00000000000..b311cb8ad0a
--- /dev/null
+++ b/static/usage/v9/list/lines/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+```
diff --git a/static/usage/v9/list/lines/angular/example_component_ts.md b/static/usage/v9/list/lines/angular/example_component_ts.md
new file mode 100644
index 00000000000..892385aa931
--- /dev/null
+++ b/static/usage/v9/list/lines/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/list/lines/demo.html b/static/usage/v9/list/lines/demo.html
new file mode 100644
index 00000000000..2c5de893e77
--- /dev/null
+++ b/static/usage/v9/list/lines/demo.html
@@ -0,0 +1,64 @@
+
+
+
+ List
+
+
+
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+
+
+
+
+
diff --git a/static/usage/v9/list/lines/index.md b/static/usage/v9/list/lines/index.md
new file mode 100644
index 00000000000..2ddad9b640b
--- /dev/null
+++ b/static/usage/v9/list/lines/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';
+
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+```
diff --git a/static/usage/v9/list/lines/react.md b/static/usage/v9/list/lines/react.md
new file mode 100644
index 00000000000..16754ad804b
--- /dev/null
+++ b/static/usage/v9/list/lines/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/list/lines/vue.md b/static/usage/v9/list/lines/vue.md
new file mode 100644
index 00000000000..f1accc7a794
--- /dev/null
+++ b/static/usage/v9/list/lines/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+
+
+
+```
diff --git a/static/usage/v9/loading/controller/angular/example_component_html.md b/static/usage/v9/loading/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..f4f3d701d2f
--- /dev/null
+++ b/static/usage/v9/loading/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Show Loading
+```
diff --git a/static/usage/v9/loading/controller/angular/example_component_ts.md b/static/usage/v9/loading/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..b3d7bb9870f
--- /dev/null
+++ b/static/usage/v9/loading/controller/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, LoadingController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton],
+})
+export class ExampleComponent {
+ constructor(private loadingCtrl: LoadingController) {}
+
+ async showLoading() {
+ const loading = await this.loadingCtrl.create({
+ message: 'Dismissing after 3 seconds...',
+ duration: 3000,
+ });
+
+ loading.present();
+ }
+}
+```
diff --git a/static/usage/v9/loading/controller/demo.html b/static/usage/v9/loading/controller/demo.html
new file mode 100644
index 00000000000..8d4fc9231e0
--- /dev/null
+++ b/static/usage/v9/loading/controller/demo.html
@@ -0,0 +1,37 @@
+
+
+
+ Datetime
+
+
+
+ Show Loading
+
+
+
+
+
+
+
diff --git a/static/usage/v9/loading/controller/index.md b/static/usage/v9/loading/controller/index.md
new file mode 100644
index 00000000000..d7336c2cf87
--- /dev/null
+++ b/static/usage/v9/loading/controller/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Show Loading
+
+
+```
diff --git a/static/usage/v9/loading/controller/react.md b/static/usage/v9/loading/controller/react.md
new file mode 100644
index 00000000000..06dc3413bab
--- /dev/null
+++ b/static/usage/v9/loading/controller/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonLoading } from '@ionic/react';
+function Example() {
+ /**
+ * This example does not make use of the dismiss
+ * method returned from `useIonLoading`, but it can
+ * be used for more complex scenarios.
+ */
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [present, dismiss] = useIonLoading();
+ return (
+ {
+ present({
+ message: 'Dismissing after 3 seconds...',
+ duration: 3000,
+ });
+ }}
+ >
+ Show Loading
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/loading/controller/vue.md b/static/usage/v9/loading/controller/vue.md
new file mode 100644
index 00000000000..0f55dbf9d4a
--- /dev/null
+++ b/static/usage/v9/loading/controller/vue.md
@@ -0,0 +1,18 @@
+```html
+
+ Show Loading
+
+
+
+```
diff --git a/static/usage/v9/loading/inline/angular/example_component_html.md b/static/usage/v9/loading/inline/angular/example_component_html.md
new file mode 100644
index 00000000000..d0a24c72f61
--- /dev/null
+++ b/static/usage/v9/loading/inline/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Show Loading
+Loading
+
+
+
+ Show Loading
+
+
+
+
+
diff --git a/static/usage/v9/loading/inline/index.md b/static/usage/v9/loading/inline/index.md
new file mode 100644
index 00000000000..3d8d18d6294
--- /dev/null
+++ b/static/usage/v9/loading/inline/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Show Loading
+Show Loading
+
+ Show Loading
+
+
+
+
+```
diff --git a/static/usage/v9/loading/spinners/angular/example_component_html.md b/static/usage/v9/loading/spinners/angular/example_component_html.md
new file mode 100644
index 00000000000..9f4eb5f13a0
--- /dev/null
+++ b/static/usage/v9/loading/spinners/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Show Loading
+Loading
+
+
+
+ Show Loading
+
+
+
+
+
diff --git a/static/usage/v9/loading/spinners/index.md b/static/usage/v9/loading/spinners/index.md
new file mode 100644
index 00000000000..34874e5d378
--- /dev/null
+++ b/static/usage/v9/loading/spinners/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import react from './react.md';
+import vue from './vue.md';
+
+Show Loading
+Show Loading
+
+ Show Loading
+
+
+
+```
diff --git a/static/usage/v9/loading/theming/angular/example_component_html.md b/static/usage/v9/loading/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0696c7c4342
--- /dev/null
+++ b/static/usage/v9/loading/theming/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Show Loading
+Datetime
+
+
+
+ Show Loading
+
+
+
+
+
diff --git a/static/usage/v9/loading/theming/index.md b/static/usage/v9/loading/theming/index.md
new file mode 100644
index 00000000000..adcef8d6ec8
--- /dev/null
+++ b/static/usage/v9/loading/theming/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+Show Loading
+Show Loading
+
+ Show Loading
+
+
+
+
+```
diff --git a/static/usage/v9/menu/basic/angular/example_component_html.md b/static/usage/v9/menu/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..0fb5465519f
--- /dev/null
+++ b/static/usage/v9/menu/basic/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+```
diff --git a/static/usage/v9/menu/basic/angular/example_component_ts.md b/static/usage/v9/menu/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..9e85696db9c
--- /dev/null
+++ b/static/usage/v9/menu/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/menu/basic/demo.html b/static/usage/v9/menu/basic/demo.html
new file mode 100644
index 00000000000..1a1a2f26ab2
--- /dev/null
+++ b/static/usage/v9/menu/basic/demo.html
@@ -0,0 +1,36 @@
+
+
+
+ Menu
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
diff --git a/static/usage/v9/menu/basic/index.md b/static/usage/v9/menu/basic/index.md
new file mode 100644
index 00000000000..cbc6d4147d1
--- /dev/null
+++ b/static/usage/v9/menu/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';
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+```
diff --git a/static/usage/v9/menu/basic/react.md b/static/usage/v9/menu/basic/react.md
new file mode 100644
index 00000000000..671dba8a744
--- /dev/null
+++ b/static/usage/v9/menu/basic/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 (
+ <>
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/menu/basic/vue.md b/static/usage/v9/menu/basic/vue.md
new file mode 100644
index 00000000000..81657010c8f
--- /dev/null
+++ b/static/usage/v9/menu/basic/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+```
diff --git a/static/usage/v9/menu/multiple/angular/example_component_html.md b/static/usage/v9/menu/multiple/angular/example_component_html.md
new file mode 100644
index 00000000000..a81d2020f5d
--- /dev/null
+++ b/static/usage/v9/menu/multiple/angular/example_component_html.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+ First Menu
+
+
+ This is the first menu content.
+
+
+
+
+
+ Second Menu
+
+
+ This is the second menu content.
+
+
+
+
+
+ End Menu
+
+
+ This is the end menu content.
+
+
+
+
+
+ Menu
+
+
+
+ Tap a button below to open a specific menu.
+
+ Open First Menu
+ Open Second Menu
+ Open End Menu
+
+
Menu
+
+
+
+
+ First Menu
+
+
+ This is the first menu content.
+
+
+
+
+
+ Second Menu
+
+
+ This is the second menu content.
+
+
+
+
+
+ End Menu
+
+
+ This is the end menu content.
+
+
+
+
+
+ Menu
+
+
+
+ Tap a button below to open a specific menu.
+
+ Open First Menu
+ Open Second Menu
+ Open End Menu
+
+
+
+
+
+
diff --git a/static/usage/v9/menu/multiple/index.md b/static/usage/v9/menu/multiple/index.md
new file mode 100644
index 00000000000..b148d660a25
--- /dev/null
+++ b/static/usage/v9/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';
+
+
+
+
+ First Menu
+
+
+ This is the first menu content.
+
+
+
+
+
+ Second Menu
+
+
+ This is the second menu content.
+
+
+
+
+
+ End Menu
+
+
+ This is the end menu content.
+
+
+
+
+
+ Menu
+
+
+
+ Tap a button below to open a specific menu.
+
+ Open First Menu
+ Open Second Menu
+ Open End Menu
+
+
+
+
+ First Menu
+
+
+ This is the first menu content.
+
+
+
+
+
+ Second Menu
+
+
+ This is the second menu content.
+
+
+
+
+
+ End Menu
+
+
+ This is the end menu content.
+
+
+
+
+
+ Menu
+
+
+
+ Tap a button below to open a specific menu.
+
+
+ Open First Menu
+
+
+ Open Second Menu
+
+
+ Open End Menu
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/menu/multiple/vue.md b/static/usage/v9/menu/multiple/vue.md
new file mode 100644
index 00000000000..6f66b5f29ac
--- /dev/null
+++ b/static/usage/v9/menu/multiple/vue.md
@@ -0,0 +1,76 @@
+```html
+
+
+
+
+ First Menu
+
+
+ This is the first menu content.
+
+
+
+
+
+ Second Menu
+
+
+ This is the second menu content.
+
+
+
+
+
+ End Menu
+
+
+ This is the end menu content.
+
+
+
+
+
+ Menu
+
+
+
+ Tap a button below to open a specific menu.
+
+ Open First Menu
+ Open Second Menu
+ Open End Menu
+
+
+
+
+
+```
diff --git a/static/usage/v9/menu/sides/angular/example_component_html.md b/static/usage/v9/menu/sides/angular/example_component_html.md
new file mode 100644
index 00000000000..b9f7a01069d
--- /dev/null
+++ b/static/usage/v9/menu/sides/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+ Menu
+
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+```
diff --git a/static/usage/v9/menu/sides/angular/example_component_ts.md b/static/usage/v9/menu/sides/angular/example_component_ts.md
new file mode 100644
index 00000000000..9e85696db9c
--- /dev/null
+++ b/static/usage/v9/menu/sides/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/menu/sides/demo.html b/static/usage/v9/menu/sides/demo.html
new file mode 100644
index 00000000000..43523316a70
--- /dev/null
+++ b/static/usage/v9/menu/sides/demo.html
@@ -0,0 +1,37 @@
+
+
+
+ Menu
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+ Menu
+
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
diff --git a/static/usage/v9/menu/sides/index.md b/static/usage/v9/menu/sides/index.md
new file mode 100644
index 00000000000..a91015269d5
--- /dev/null
+++ b/static/usage/v9/menu/sides/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';
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+ Menu
+
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+```
diff --git a/static/usage/v9/menu/sides/react.md b/static/usage/v9/menu/sides/react.md
new file mode 100644
index 00000000000..cbb73598dae
--- /dev/null
+++ b/static/usage/v9/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 (
+ <>
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+ Menu
+
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/menu/sides/vue.md b/static/usage/v9/menu/sides/vue.md
new file mode 100644
index 00000000000..7633eef1786
--- /dev/null
+++ b/static/usage/v9/menu/sides/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+ Menu
+
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+```
diff --git a/static/usage/v9/menu/theming/angular/example_component_css.md b/static/usage/v9/menu/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..1bba1305577
--- /dev/null
+++ b/static/usage/v9/menu/theming/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-menu::part(backdrop) {
+ background-color: rgba(255, 0, 255, 0.5);
+}
+
+ion-menu::part(container) {
+ border-radius: 0 20px 20px 0;
+
+ box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+}
+```
diff --git a/static/usage/v9/menu/theming/angular/example_component_html.md b/static/usage/v9/menu/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..f46819d3e99
--- /dev/null
+++ b/static/usage/v9/menu/theming/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+```
diff --git a/static/usage/v9/menu/theming/angular/example_component_ts.md b/static/usage/v9/menu/theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..6cef32b6fbf
--- /dev/null
+++ b/static/usage/v9/menu/theming/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonApp,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonMenu,
+ IonMenuButton,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonApp, IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/menu/theming/demo.html b/static/usage/v9/menu/theming/demo.html
new file mode 100644
index 00000000000..5b89ad39cc1
--- /dev/null
+++ b/static/usage/v9/menu/theming/demo.html
@@ -0,0 +1,47 @@
+
+
+
+ Menu
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
diff --git a/static/usage/v9/menu/theming/index.md b/static/usage/v9/menu/theming/index.md
new file mode 100644
index 00000000000..f4e3a88792c
--- /dev/null
+++ b/static/usage/v9/menu/theming/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+```
diff --git a/static/usage/v9/menu/theming/react/main_css.md b/static/usage/v9/menu/theming/react/main_css.md
new file mode 100644
index 00000000000..1bba1305577
--- /dev/null
+++ b/static/usage/v9/menu/theming/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-menu::part(backdrop) {
+ background-color: rgba(255, 0, 255, 0.5);
+}
+
+ion-menu::part(container) {
+ border-radius: 0 20px 20px 0;
+
+ box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+}
+```
diff --git a/static/usage/v9/menu/theming/react/main_tsx.md b/static/usage/v9/menu/theming/react/main_tsx.md
new file mode 100644
index 00000000000..c2f3d72ab2b
--- /dev/null
+++ b/static/usage/v9/menu/theming/react/main_tsx.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/menu/theming/vue.md b/static/usage/v9/menu/theming/vue.md
new file mode 100644
index 00000000000..c3f9e0abd79
--- /dev/null
+++ b/static/usage/v9/menu/theming/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+ Menu
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/menu/toggle/angular/example_component_html.md b/static/usage/v9/menu/toggle/angular/example_component_html.md
new file mode 100644
index 00000000000..d2ecafc7904
--- /dev/null
+++ b/static/usage/v9/menu/toggle/angular/example_component_html.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+```
diff --git a/static/usage/v9/menu/toggle/angular/example_component_ts.md b/static/usage/v9/menu/toggle/angular/example_component_ts.md
new file mode 100644
index 00000000000..c718eb735af
--- /dev/null
+++ b/static/usage/v9/menu/toggle/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/menu/toggle/demo.html b/static/usage/v9/menu/toggle/demo.html
new file mode 100644
index 00000000000..9fff9da463b
--- /dev/null
+++ b/static/usage/v9/menu/toggle/demo.html
@@ -0,0 +1,41 @@
+
+
+
+ Menu - Toggle
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
diff --git a/static/usage/v9/menu/toggle/index.md b/static/usage/v9/menu/toggle/index.md
new file mode 100644
index 00000000000..3adbcc7a804
--- /dev/null
+++ b/static/usage/v9/menu/toggle/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+```
diff --git a/static/usage/v9/menu/toggle/react.md b/static/usage/v9/menu/toggle/react.md
new file mode 100644
index 00000000000..3428aaa42d0
--- /dev/null
+++ b/static/usage/v9/menu/toggle/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/menu/toggle/vue.md b/static/usage/v9/menu/toggle/vue.md
new file mode 100644
index 00000000000..377b67c4e17
--- /dev/null
+++ b/static/usage/v9/menu/toggle/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/menu/type/angular/example_component_html.md b/static/usage/v9/menu/type/angular/example_component_html.md
new file mode 100644
index 00000000000..25ff9c152e0
--- /dev/null
+++ b/static/usage/v9/menu/type/angular/example_component_html.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+ reveal
+
+
+
+
+ push
+
+
+
+
+ Click to open the menu
+
+
+
+```
diff --git a/static/usage/v9/menu/type/angular/example_component_ts.md b/static/usage/v9/menu/type/angular/example_component_ts.md
new file mode 100644
index 00000000000..7f403ab28bb
--- /dev/null
+++ b/static/usage/v9/menu/type/angular/example_component_ts.md
@@ -0,0 +1,38 @@
+```ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonMenu,
+ IonMenuToggle,
+ IonRadio,
+ IonRadioGroup,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ FormsModule,
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonMenu,
+ IonMenuToggle,
+ IonRadio,
+ IonRadioGroup,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ menuType: string = 'overlay';
+}
+```
diff --git a/static/usage/v9/menu/type/demo.html b/static/usage/v9/menu/type/demo.html
new file mode 100644
index 00000000000..3a948b0a9e2
--- /dev/null
+++ b/static/usage/v9/menu/type/demo.html
@@ -0,0 +1,70 @@
+
+
+
+ Menu - Type
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+ reveal
+
+
+
+
+ push
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/menu/type/index.md b/static/usage/v9/menu/type/index.md
new file mode 100644
index 00000000000..c02514a349f
--- /dev/null
+++ b/static/usage/v9/menu/type/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+ reveal
+
+
+
+
+ push
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+```
diff --git a/static/usage/v9/menu/type/react.md b/static/usage/v9/menu/type/react.md
new file mode 100644
index 00000000000..af341a0e753
--- /dev/null
+++ b/static/usage/v9/menu/type/react.md
@@ -0,0 +1,74 @@
+```tsx
+import React, { useState } from 'react';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonMenu,
+ IonMenuToggle,
+ IonPage,
+ IonRadio,
+ IonRadioGroup,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/react';
+import type { RadioGroupCustomEvent } from '@ionic/react';
+
+function Example() {
+ const [menuType, setMenuType] = useState('overlay');
+
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+ {
+ setMenuType(event.detail.value);
+ }}
+ >
+
+
+ overlay
+
+
+
+
+ reveal
+
+
+
+
+ push
+
+
+
+ Click to open the menu
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/menu/type/vue.md b/static/usage/v9/menu/type/vue.md
new file mode 100644
index 00000000000..59a98b0f9ba
--- /dev/null
+++ b/static/usage/v9/menu/type/vue.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+ reveal
+
+
+
+
+ push
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/can-dismiss/boolean/angular/example_component_html.md b/static/usage/v9/modal/can-dismiss/boolean/angular/example_component_html.md
new file mode 100644
index 00000000000..593098daca1
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/boolean/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
+
Modal | Can Dismiss
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/can-dismiss/boolean/index.md b/static/usage/v9/modal/can-dismiss/boolean/index.md
new file mode 100644
index 00000000000..bcf706ac795
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/boolean/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
(null);
+ const page = useRef(undefined);
+
+ const [canDismiss, setCanDismiss] = useState(false);
+ const [presentingElement, setPresentingElement] = useState(undefined);
+
+ useEffect(() => {
+ setPresentingElement(page.current);
+ }, []);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ dismiss()}>Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+ {
+ setCanDismiss(event.detail.checked);
+ }}
+ >
+ Do you accept the terms and conditions?
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/can-dismiss/boolean/vue.md b/static/usage/v9/modal/can-dismiss/boolean/vue.md
new file mode 100644
index 00000000000..b33d7799a10
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/boolean/vue.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_html.md b/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_html.md
new file mode 100644
index 00000000000..3bef90bc0f9
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_html.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+ Override DismissToggle the checkbox to allow immediately dismissing the modal without a prompt.
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_ts.md b/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_ts.md
new file mode 100644
index 00000000000..9c59b4f2a08
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+import {
+ CheckboxCustomEvent,
+ IonButton,
+ IonButtons,
+ IonCheckbox,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonList,
+ IonModal,
+ IonNote,
+ IonToolbar,
+ IonTitle,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-child',
+ templateUrl: 'child.component.html',
+ imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonNote, IonToolbar, IonTitle],
+})
+export class ChildComponent {
+ @Input() modal!: IonModal;
+
+ @Output() dismissChange = new EventEmitter();
+
+ checkboxChanged(event: CheckboxCustomEvent) {
+ const checked = event.detail.checked;
+
+ this.dismissChange.emit(checked);
+ }
+}
+```
diff --git a/static/usage/v9/modal/can-dismiss/child-state/angular/example_component_html.md b/static/usage/v9/modal/can-dismiss/child-state/angular/example_component_html.md
new file mode 100644
index 00000000000..aeed41b7408
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/child-state/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+
+
Modal | Can Dismiss
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+ Override DismissToggle the checkbox to allow immediately dismissing the modal without a prompt.
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/can-dismiss/child-state/index.md b/static/usage/v9/modal/can-dismiss/child-state/index.md
new file mode 100644
index 00000000000..6c8f2b9c264
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/child-state/index.md
@@ -0,0 +1,40 @@
+import Playground from '@site/src/components/global/Playground';
+
+import vue_example_vue from './vue/example_vue.md';
+import vue_child_vue from './vue/child_vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_child_tsx from './react/child_tsx.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_child_component_html from './angular/child_component_html.md';
+import angular_child_component_ts from './angular/child_component_ts.md';
+
+
+
+ Modal
+
+ dismiss()}>Close
+
+
+
+
+
+
+
+ Override Dismiss
+
+ Toggle the checkbox to allow immediately dismissing the modal without a prompt.
+
+
+
+
+
+
+ );
+}
+export default Child;
+```
diff --git a/static/usage/v9/modal/can-dismiss/child-state/react/main_tsx.md b/static/usage/v9/modal/can-dismiss/child-state/react/main_tsx.md
new file mode 100644
index 00000000000..5657089983f
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/child-state/react/main_tsx.md
@@ -0,0 +1,97 @@
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import {
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ useIonActionSheet,
+} from '@ionic/react';
+
+import Child from './Child';
+
+function Example() {
+ const modal = useRef(null);
+ const page = useRef(null);
+ const [canDismissOverride, setCanDismissOverride] = useState(false);
+
+ const [presentingElement, setPresentingElement] = useState(null);
+ const [present] = useIonActionSheet();
+
+ useEffect(() => {
+ setPresentingElement(page.current);
+ }, []);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ function onWillPresent() {
+ // Resets the override when the modal is presented
+ setCanDismissOverride(false);
+ }
+
+ async function canDismiss() {
+ if (canDismissOverride) {
+ // Checks for the override flag to return early if we can dismiss the overlay immediately
+ return true;
+ }
+ return new Promise((resolve, reject) => {
+ present({
+ header: 'Are you sure?',
+ buttons: [
+ {
+ text: 'Yes',
+ role: 'confirm',
+ },
+ {
+ text: 'No',
+ role: 'cancel',
+ },
+ ],
+ onWillDismiss: (event) => {
+ if (event.detail.role === 'confirm') {
+ resolve(true);
+ } else {
+ reject();
+ }
+ },
+ });
+ });
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open
+
+
+ {
+ setCanDismissOverride(checked);
+ }}
+ />
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/can-dismiss/child-state/vue/child_vue.md b/static/usage/v9/modal/can-dismiss/child-state/vue/child_vue.md
new file mode 100644
index 00000000000..ffbb483864e
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/child-state/vue/child_vue.md
@@ -0,0 +1,51 @@
+```html
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+ Override DismissToggle the checkbox to allow immediately dismissing the modal without a prompt.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/can-dismiss/child-state/vue/example_vue.md b/static/usage/v9/modal/can-dismiss/child-state/vue/example_vue.md
new file mode 100644
index 00000000000..831c89cb435
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/child-state/vue/example_vue.md
@@ -0,0 +1,85 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/can-dismiss/function/angular/example_component_html.md b/static/usage/v9/modal/can-dismiss/function/angular/example_component_html.md
new file mode 100644
index 00000000000..fa9ea513674
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/function/angular/example_component_html.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+
Modal | Can Dismiss
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/can-dismiss/function/index.md b/static/usage/v9/modal/can-dismiss/function/index.md
new file mode 100644
index 00000000000..557182e6382
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/function/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
(null);
+ const page = useRef(null);
+
+ const [presentingElement, setPresentingElement] = useState(null);
+ const [present] = useIonActionSheet();
+
+ useEffect(() => {
+ setPresentingElement(page.current);
+ }, []);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ function canDismiss() {
+ return new Promise((resolve, reject) => {
+ present({
+ header: 'Are you sure?',
+ buttons: [
+ {
+ text: 'Yes',
+ role: 'confirm',
+ },
+ {
+ text: 'No',
+ role: 'cancel',
+ },
+ ],
+ onWillDismiss: (event) => {
+ if (event.detail.role === 'confirm') {
+ resolve(true);
+ } else {
+ reject();
+ }
+ },
+ });
+ });
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ dismiss()}>Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/can-dismiss/function/vue.md b/static/usage/v9/modal/can-dismiss/function/vue.md
new file mode 100644
index 00000000000..72eb927e498
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/function/vue.md
@@ -0,0 +1,74 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
new file mode 100644
index 00000000000..de1d6d041ea
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+ it.
+
+
+
+
+
+
Modal | Can Dismiss
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not
+ dismiss it.
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/index.md
new file mode 100644
index 00000000000..b620e3e72b9
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/index.md
@@ -0,0 +1,27 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss it.
+
+
+
+
+
(null);
+ const page = useRef(null);
+
+ const [presentingElement, setPresentingElement] = useState(null);
+
+ useEffect(() => {
+ setPresentingElement(page.current);
+ }, []);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ async function canDismiss(data?: any, role?: string) {
+ return role !== 'gesture';
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ dismiss()}>Close
+
+
+
+
+
+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+ it.
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/vue.md
new file mode 100644
index 00000000000..afd25081c11
--- /dev/null
+++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/vue.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss
+ it.
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/card/basic/angular/example_component_html.md b/static/usage/v9/modal/card/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..8c00ae7f41c
--- /dev/null
+++ b/static/usage/v9/modal/card/basic/angular/example_component_html.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+ App
+
+
+
+ Open Card Modal
+
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
Modal | Card
+
+
+
+
+ App
+
+
+
+ Open Card Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/card/basic/index.md b/static/usage/v9/modal/card/basic/index.md
new file mode 100644
index 00000000000..1169a635019
--- /dev/null
+++ b/static/usage/v9/modal/card/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ App
+
+
+
+ Open Card Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
(null);
+ const page = useRef(null);
+
+ const [presentingElement, setPresentingElement] = useState(null);
+
+ useEffect(() => {
+ setPresentingElement(page.current);
+ }, []);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ dismiss()}>Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/card/basic/vue.md b/static/usage/v9/modal/card/basic/vue.md
new file mode 100644
index 00000000000..254d0081cab
--- /dev/null
+++ b/static/usage/v9/modal/card/basic/vue.md
@@ -0,0 +1,95 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/controller/angular/example_component_html.md b/static/usage/v9/modal/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..99359fe23ab
--- /dev/null
+++ b/static/usage/v9/modal/controller/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+ Controller Modal
+
+
+
+ Open
+ {{ message() }}
+
+```
diff --git a/static/usage/v9/modal/controller/angular/example_component_ts.md b/static/usage/v9/modal/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..45bde663ac9
--- /dev/null
+++ b/static/usage/v9/modal/controller/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar, ModalController } from '@ionic/angular';
+
+import { ModalExampleComponent } from './modal-example.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [FormsModule, IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ readonly message = signal('This modal example uses the modalController to present and dismiss modals.');
+
+ constructor(private modalCtrl: ModalController) {}
+
+ async openModal() {
+ const modal = await this.modalCtrl.create({
+ component: ModalExampleComponent,
+ });
+ modal.present();
+
+ const { data, role } = await modal.onWillDismiss();
+
+ if (role === 'confirm') {
+ this.message.set(`Hello, ${data}!`);
+ }
+ }
+}
+```
diff --git a/static/usage/v9/modal/controller/angular/modal-example_component_html.md b/static/usage/v9/modal/controller/angular/modal-example_component_html.md
new file mode 100644
index 00000000000..2053452af35
--- /dev/null
+++ b/static/usage/v9/modal/controller/angular/modal-example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/controller/angular/modal-example_component_ts.md b/static/usage/v9/modal/controller/angular/modal-example_component_ts.md
new file mode 100644
index 00000000000..fd6d05b3196
--- /dev/null
+++ b/static/usage/v9/modal/controller/angular/modal-example_component_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import {
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonInput,
+ IonItem,
+ IonTitle,
+ IonToolbar,
+ ModalController,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-modal-example',
+ templateUrl: 'modal-example.component.html',
+ imports: [FormsModule, IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonTitle, IonToolbar],
+})
+export class ModalExampleComponent {
+ name!: string;
+
+ constructor(private modalCtrl: ModalController) {}
+
+ cancel() {
+ return this.modalCtrl.dismiss(null, 'cancel');
+ }
+
+ confirm() {
+ return this.modalCtrl.dismiss(this.name, 'confirm');
+ }
+}
+```
diff --git a/static/usage/v9/modal/controller/demo.html b/static/usage/v9/modal/controller/demo.html
new file mode 100644
index 00000000000..05806f85021
--- /dev/null
+++ b/static/usage/v9/modal/controller/demo.html
@@ -0,0 +1,75 @@
+
+
+
+ Modal | Controller
+
+
+
+ Controller Modal
+
+
+
+ Open
+ This modal example uses the modalController to present and dismiss modals.
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/controller/index.md b/static/usage/v9/modal/controller/index.md
new file mode 100644
index 00000000000..4722546d611
--- /dev/null
+++ b/static/usage/v9/modal/controller/index.md
@@ -0,0 +1,37 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_modal from './vue/modal_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_modal_example_component_ts from './angular/modal-example_component_ts.md';
+import angular_modal_example_component_html from './angular/modal-example_component_html.md';
+
+
+
+ Controller Modal
+
+
+
+ Open
+ This modal example uses the modalController to present and dismiss modals.
+
+
+
+```
diff --git a/static/usage/v9/modal/controller/react.md b/static/usage/v9/modal/controller/react.md
new file mode 100644
index 00000000000..5f1d0033c95
--- /dev/null
+++ b/static/usage/v9/modal/controller/react.md
@@ -0,0 +1,79 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import {
+ IonButtons,
+ IonButton,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonItem,
+ IonInput,
+ useIonModal,
+} from '@ionic/react';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+const ModalExample = ({ dismiss }: { dismiss: (data?: string | null | undefined | number, role?: string) => void }) => {
+ const inputRef = useRef(null);
+ return (
+
+
+
+
+ dismiss(null, 'cancel')}>
+ Cancel
+
+
+ Welcome
+
+ dismiss(inputRef.current?.value, 'confirm')} strong={true}>
+ Confirm
+
+
+
+
+
+
+
+
+
+ );
+};
+
+function Example() {
+ const [present, dismiss] = useIonModal(ModalExample, {
+ dismiss: (data?: string | number | null, role?: string) => dismiss(data, role),
+ });
+ const [message, setMessage] = useState('This modal example uses the modalController to present and dismiss modals.');
+
+ function openModal() {
+ present({
+ onWillDismiss: (event: CustomEvent) => {
+ if (event.detail.role === 'confirm') {
+ setMessage(`Hello, ${event.detail.data}!`);
+ }
+ },
+ });
+ }
+
+ return (
+
+
+
+ Controller Modal
+
+
+
+ openModal()}>
+ Open
+
+ {message}
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/controller/vue/example_vue.md b/static/usage/v9/modal/controller/vue/example_vue.md
new file mode 100644
index 00000000000..d3ecfde1623
--- /dev/null
+++ b/static/usage/v9/modal/controller/vue/example_vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ Controller Modal
+
+
+
+ Open Modal
+ {{ message }}
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/controller/vue/modal_vue.md b/static/usage/v9/modal/controller/vue/modal_vue.md
new file mode 100644
index 00000000000..c5e09e6cb1a
--- /dev/null
+++ b/static/usage/v9/modal/controller/vue/modal_vue.md
@@ -0,0 +1,40 @@
+```html
+
+
+
+
+ Cancel
+
+ Modal
+
+ Confirm
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/custom-dialogs/angular/example_component_html.md b/static/usage/v9/modal/custom-dialogs/angular/example_component_html.md
new file mode 100644
index 00000000000..d8f43b4b55d
--- /dev/null
+++ b/static/usage/v9/modal/custom-dialogs/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
+
Dialog header
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/custom-dialogs/angular/example_component_ts.md b/static/usage/v9/modal/custom-dialogs/angular/example_component_ts.md
new file mode 100644
index 00000000000..864d5717f5e
--- /dev/null
+++ b/static/usage/v9/modal/custom-dialogs/angular/example_component_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonModal,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { personCircle } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ personCircle });
+ }
+}
+```
diff --git a/static/usage/v9/modal/custom-dialogs/angular/global_css.md b/static/usage/v9/modal/custom-dialogs/angular/global_css.md
new file mode 100644
index 00000000000..3edb76f1e97
--- /dev/null
+++ b/static/usage/v9/modal/custom-dialogs/angular/global_css.md
@@ -0,0 +1,28 @@
+```css
+ion-modal#example-modal {
+ --width: fit-content;
+ --min-width: 250px;
+ --height: fit-content;
+ --border-radius: 6px;
+ --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+}
+
+ion-modal#example-modal h1 {
+ margin: 20px 20px 10px 20px;
+}
+
+ion-modal#example-modal ion-icon {
+ margin-right: 6px;
+
+ width: 48px;
+ height: 48px;
+
+ padding: 4px 0;
+
+ color: #aaaaaa;
+}
+
+ion-modal#example-modal .wrapper {
+ margin-bottom: 10px;
+}
+```
diff --git a/static/usage/v9/modal/custom-dialogs/demo.html b/static/usage/v9/modal/custom-dialogs/demo.html
new file mode 100644
index 00000000000..84e140e29c1
--- /dev/null
+++ b/static/usage/v9/modal/custom-dialogs/demo.html
@@ -0,0 +1,79 @@
+
+
+
+ Modal | Custom Dialog
+
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/custom-dialogs/index.md b/static/usage/v9/modal/custom-dialogs/index.md
new file mode 100644
index 00000000000..19904e210fc
--- /dev/null
+++ b/static/usage/v9/modal/custom-dialogs/index.md
@@ -0,0 +1,42 @@
+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 vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/custom-dialogs/javascript/index_ts.md b/static/usage/v9/modal/custom-dialogs/javascript/index_ts.md
new file mode 100644
index 00000000000..fdb89866373
--- /dev/null
+++ b/static/usage/v9/modal/custom-dialogs/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { personCircle } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to a "person-circle" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'person-circle': personCircle });
+ */
+addIcons({ personCircle });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/modal/custom-dialogs/react/main_css.md b/static/usage/v9/modal/custom-dialogs/react/main_css.md
new file mode 100644
index 00000000000..3edb76f1e97
--- /dev/null
+++ b/static/usage/v9/modal/custom-dialogs/react/main_css.md
@@ -0,0 +1,28 @@
+```css
+ion-modal#example-modal {
+ --width: fit-content;
+ --min-width: 250px;
+ --height: fit-content;
+ --border-radius: 6px;
+ --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+}
+
+ion-modal#example-modal h1 {
+ margin: 20px 20px 10px 20px;
+}
+
+ion-modal#example-modal ion-icon {
+ margin-right: 6px;
+
+ width: 48px;
+ height: 48px;
+
+ padding: 4px 0;
+
+ color: #aaaaaa;
+}
+
+ion-modal#example-modal .wrapper {
+ margin-bottom: 10px;
+}
+```
diff --git a/static/usage/v9/modal/custom-dialogs/react/main_tsx.md b/static/usage/v9/modal/custom-dialogs/react/main_tsx.md
new file mode 100644
index 00000000000..e6120a8fcc7
--- /dev/null
+++ b/static/usage/v9/modal/custom-dialogs/react/main_tsx.md
@@ -0,0 +1,64 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonIcon,
+} from '@ionic/react';
+import { personCircle } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ const modal = useRef(null);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/custom-dialogs/vue.md b/static/usage/v9/modal/custom-dialogs/vue.md
new file mode 100644
index 00000000000..590b4ac7661
--- /dev/null
+++ b/static/usage/v9/modal/custom-dialogs/vue.md
@@ -0,0 +1,82 @@
+```html
+
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/drag-move-event/angular/example_component_html.md b/static/usage/v9/modal/drag-move-event/angular/example_component_html.md
new file mode 100644
index 00000000000..6ba672f6040
--- /dev/null
+++ b/static/usage/v9/modal/drag-move-event/angular/example_component_html.md
@@ -0,0 +1,27 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/drag-move-event/angular/example_component_ts.md b/static/usage/v9/modal/drag-move-event/angular/example_component_ts.md
new file mode 100644
index 00000000000..615dcd0c0fd
--- /dev/null
+++ b/static/usage/v9/modal/drag-move-event/angular/example_component_ts.md
@@ -0,0 +1,74 @@
+```ts
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import type { ModalDragEventDetail } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ @ViewChild('header', { read: ElementRef })
+ header!: ElementRef;
+ // Assign the current snap breakpoint to the initial breakpoint so
+ // that we can track changes during the drag
+ currentSnap = 0.25;
+
+ onDragMove(event: CustomEvent) {
+ // `progress` is a value from 1 (top) to 0 (bottom)
+ // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
+ const { progress, snapBreakpoint } = event.detail;
+
+ if (this.currentSnap !== snapBreakpoint) {
+ this.currentSnap = snapBreakpoint as number;
+
+ console.log('Current snap breakpoint:', snapBreakpoint);
+ }
+
+ const headerEl = this.header.nativeElement;
+ /**
+ * Inverse relationship:
+ * 1.0 progress = 0 opacity
+ * 0 progress = 1.0 opacity
+ */
+ const currentOpacity = 1 - progress;
+
+ headerEl.style.opacity = currentOpacity.toString();
+ }
+
+ onDragEnd(event: CustomEvent) {
+ // `progress` is a value from 1 (top) to 0 (bottom)
+ // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
+ const { progress, snapBreakpoint } = event.detail;
+ const headerEl = this.header.nativeElement;
+
+ /**
+ * If the modal is snapping to the closed state (0), reset the
+ * styles.
+ */
+ if (snapBreakpoint === 0) {
+ headerEl.style.removeProperty('opacity');
+ headerEl.style.removeProperty('transition');
+ return;
+ }
+
+ // Smooth transition to the final resting opacity
+ headerEl.style.transition = 'opacity 0.4s ease';
+ // The final opacity matches the inverse of the resting progress
+ headerEl.style.opacity = (1 - progress).toString();
+ }
+
+ /**
+ * If the user dismisses the modal (e.g. tapping the backdrop),
+ * reset the styles.
+ */
+ onWillDismiss() {
+ const headerEl = this.header.nativeElement;
+
+ // Reset styles when the modal is dismissed
+ headerEl.style.removeProperty('opacity');
+ headerEl.style.removeProperty('transition');
+ }
+}
+```
diff --git a/static/usage/v9/modal/drag-move-event/demo.html b/static/usage/v9/modal/drag-move-event/demo.html
new file mode 100644
index 00000000000..f3f66678787
--- /dev/null
+++ b/static/usage/v9/modal/drag-move-event/demo.html
@@ -0,0 +1,93 @@
+
+
+
+ Modal
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/drag-move-event/index.md b/static/usage/v9/modal/drag-move-event/index.md
new file mode 100644
index 00000000000..b8327dec798
--- /dev/null
+++ b/static/usage/v9/modal/drag-move-event/index.md
@@ -0,0 +1,29 @@
+import Playground from '@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';
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/drag-move-event/react.md b/static/usage/v9/modal/drag-move-event/react.md
new file mode 100644
index 00000000000..83d85246e8f
--- /dev/null
+++ b/static/usage/v9/modal/drag-move-event/react.md
@@ -0,0 +1,99 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react';
+import type { ModalDragEventDetail } from '@ionic/react';
+
+function Example() {
+ const header = useRef(null);
+ // Assign the current snap breakpoint to the initial breakpoint so
+ // that we can track changes during the drag
+ const currentSnap = useRef(0.25);
+
+ const onDragMove = (event: CustomEvent) => {
+ // `progress` is a value from 1 (top) to 0 (bottom)
+ // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
+ const { progress, snapBreakpoint } = event.detail;
+ const headerEl = header.current!;
+
+ if (currentSnap.current !== snapBreakpoint) {
+ currentSnap.current = snapBreakpoint as number;
+
+ console.log('Current snap breakpoint:', snapBreakpoint);
+ }
+
+ /**
+ * Inverse relationship:
+ * 1.0 progress = 0 opacity
+ * 0 progress = 1.0 opacity
+ */
+ const currentOpacity = 1 - progress;
+
+ headerEl.style.opacity = currentOpacity.toString();
+ };
+
+ const onDragEnd = (event: CustomEvent) => {
+ // `progress` is a value from 1 (top) to 0 (bottom)
+ // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
+ const { progress, snapBreakpoint } = event.detail;
+ const headerEl = header.current!;
+
+ /**
+ * If the modal is snapping to the closed state (0), reset the
+ * styles.
+ */
+ if (snapBreakpoint === 0) {
+ headerEl.style.removeProperty('opacity');
+ headerEl.style.removeProperty('transition');
+ return;
+ }
+
+ // Smooth transition to the final resting opacity
+ headerEl.style.transition = 'opacity 0.4s ease';
+ // The final opacity matches the inverse of the resting progress
+ headerEl.style.opacity = (1 - progress).toString();
+ };
+
+ /**
+ * If the user dismisses the modal (e.g. tapping the backdrop),
+ * reset the styles.
+ */
+ const onWillDismiss = () => {
+ const headerEl = header.current!;
+
+ // Reset styles when the modal is dismissed
+ headerEl.style.removeProperty('opacity');
+ headerEl.style.removeProperty('transition');
+ };
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/drag-move-event/vue.md b/static/usage/v9/modal/drag-move-event/vue.md
new file mode 100644
index 00000000000..c95b3329259
--- /dev/null
+++ b/static/usage/v9/modal/drag-move-event/vue.md
@@ -0,0 +1,94 @@
+```vue
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/drag-start-end-events/angular/example_component_html.md b/static/usage/v9/modal/drag-start-end-events/angular/example_component_html.md
new file mode 100644
index 00000000000..dca7cbd4b07
--- /dev/null
+++ b/static/usage/v9/modal/drag-start-end-events/angular/example_component_html.md
@@ -0,0 +1,26 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/drag-start-end-events/angular/example_component_ts.md b/static/usage/v9/modal/drag-start-end-events/angular/example_component_ts.md
new file mode 100644
index 00000000000..c10714cc1e4
--- /dev/null
+++ b/static/usage/v9/modal/drag-start-end-events/angular/example_component_ts.md
@@ -0,0 +1,31 @@
+```ts
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import type { ModalDragEventDetail } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ @ViewChild('header', { read: ElementRef })
+ header!: ElementRef;
+
+ onDragStart() {
+ console.log('Drag started');
+
+ const headerEl = this.header.nativeElement;
+
+ headerEl.style.opacity = '0';
+ }
+
+ onDragEnd(event: CustomEvent) {
+ console.log('Drag ended');
+
+ const headerEl = this.header.nativeElement;
+
+ headerEl.style.opacity = '1';
+ }
+}
+```
diff --git a/static/usage/v9/modal/drag-start-end-events/demo.html b/static/usage/v9/modal/drag-start-end-events/demo.html
new file mode 100644
index 00000000000..da98b7dbe7b
--- /dev/null
+++ b/static/usage/v9/modal/drag-start-end-events/demo.html
@@ -0,0 +1,52 @@
+
+
+
+ Modal
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/drag-start-end-events/index.md b/static/usage/v9/modal/drag-start-end-events/index.md
new file mode 100644
index 00000000000..bc5d9c97e4e
--- /dev/null
+++ b/static/usage/v9/modal/drag-start-end-events/index.md
@@ -0,0 +1,29 @@
+import Playground from '@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';
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/drag-start-end-events/react.md b/static/usage/v9/modal/drag-start-end-events/react.md
new file mode 100644
index 00000000000..00b2a34fcab
--- /dev/null
+++ b/static/usage/v9/modal/drag-start-end-events/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react';
+import type { ModalDragEventDetail } from '@ionic/react';
+
+function Example() {
+ const header = useRef(null);
+
+ const onDragStart = () => {
+ console.log('Drag started');
+
+ const headerEl = header.current!;
+
+ headerEl.style.opacity = '0';
+ };
+
+ const onDragEnd = (event: CustomEvent) => {
+ console.log('Drag ended');
+
+ const headerEl = header.current!;
+
+ headerEl.style.opacity = '1';
+ };
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/drag-start-end-events/vue.md b/static/usage/v9/modal/drag-start-end-events/vue.md
new file mode 100644
index 00000000000..a8f8b06acaf
--- /dev/null
+++ b/static/usage/v9/modal/drag-start-end-events/vue.md
@@ -0,0 +1,51 @@
+```vue
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Drag the handle to adjust the header's visibility.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/inline/basic/angular/example_component_html.md b/static/usage/v9/modal/inline/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..2097cde4503
--- /dev/null
+++ b/static/usage/v9/modal/inline/basic/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Inline Modal
+
+
+
+ Open
+ {{ message }}
+
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/inline/basic/angular/example_component_ts.md b/static/usage/v9/modal/inline/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..37f867fbb00
--- /dev/null
+++ b/static/usage/v9/modal/inline/basic/angular/example_component_ts.md
@@ -0,0 +1,54 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonInput,
+ IonItem,
+ IonModal,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ FormsModule,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonInput,
+ IonItem,
+ IonModal,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ @ViewChild(IonModal) modal!: IonModal;
+
+ message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
+ name!: string;
+
+ cancel() {
+ this.modal.dismiss(null, 'cancel');
+ }
+
+ confirm() {
+ this.modal.dismiss(this.name, 'confirm');
+ }
+
+ onWillDismiss(event: CustomEvent) {
+ if (event.detail.role === 'confirm') {
+ this.message = `Hello, ${event.detail.data}!`;
+ }
+ }
+}
+```
diff --git a/static/usage/v9/modal/inline/basic/demo.html b/static/usage/v9/modal/inline/basic/demo.html
new file mode 100644
index 00000000000..41cf89f5bac
--- /dev/null
+++ b/static/usage/v9/modal/inline/basic/demo.html
@@ -0,0 +1,69 @@
+
+
+
+ Modal | Inline
+
+
+
+ Inline Modal
+
+
+
+ Open
+ This modal example uses triggers to automatically open a modal when the button is clicked.
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/inline/basic/index.md b/static/usage/v9/modal/inline/basic/index.md
new file mode 100644
index 00000000000..0d5361e1390
--- /dev/null
+++ b/static/usage/v9/modal/inline/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Inline Modal
+
+
+
+ Open
+ This modal example uses triggers to automatically open a modal when the button is clicked.
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/inline/basic/react.md b/static/usage/v9/modal/inline/basic/react.md
new file mode 100644
index 00000000000..0ca73d66844
--- /dev/null
+++ b/static/usage/v9/modal/inline/basic/react.md
@@ -0,0 +1,79 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import {
+ IonButtons,
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonItem,
+ IonInput,
+} from '@ionic/react';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+function Example() {
+ const modal = useRef(null);
+ const input = useRef(null);
+
+ const [message, setMessage] = useState(
+ 'This modal example uses triggers to automatically open a modal when the button is clicked.'
+ );
+
+ function confirm() {
+ modal.current?.dismiss(input.current?.value, 'confirm');
+ }
+
+ function onWillDismiss(event: CustomEvent) {
+ if (event.detail.role === 'confirm') {
+ setMessage(`Hello, ${event.detail.data}!`);
+ }
+ }
+
+ return (
+
+
+
+ Inline Modal
+
+
+
+
+ Open
+
+ {message}
+ onWillDismiss(event)}>
+
+
+
+ modal.current?.dismiss()}>Cancel
+
+ Welcome
+
+ confirm()}>
+ Confirm
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/inline/basic/vue.md b/static/usage/v9/modal/inline/basic/vue.md
new file mode 100644
index 00000000000..1d4b8891deb
--- /dev/null
+++ b/static/usage/v9/modal/inline/basic/vue.md
@@ -0,0 +1,71 @@
+```html
+
+
+
+ Inline Modal
+
+
+
+ Open
+ {{ message }}
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/inline/is-open/angular/example_component_html.md b/static/usage/v9/modal/inline/is-open/angular/example_component_html.md
new file mode 100644
index 00000000000..b3be96215c3
--- /dev/null
+++ b/static/usage/v9/modal/inline/is-open/angular/example_component_html.md
@@ -0,0 +1,29 @@
+```html
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ 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.
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v9/modal/inline/is-open/angular/example_component_ts.md
new file mode 100644
index 00000000000..e305dc40856
--- /dev/null
+++ b/static/usage/v9/modal/inline/is-open/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ isModalOpen = false;
+
+ setOpen(isOpen: boolean) {
+ this.isModalOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v9/modal/inline/is-open/demo.html b/static/usage/v9/modal/inline/is-open/demo.html
new file mode 100644
index 00000000000..6407b93fa0e
--- /dev/null
+++ b/static/usage/v9/modal/inline/is-open/demo.html
@@ -0,0 +1,46 @@
+
+
+
+ Modal | Inline
+
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/inline/is-open/index.md b/static/usage/v9/modal/inline/is-open/index.md
new file mode 100644
index 00000000000..07e7dde43e0
--- /dev/null
+++ b/static/usage/v9/modal/inline/is-open/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/inline/is-open/react.md b/static/usage/v9/modal/inline/is-open/react.md
new file mode 100644
index 00000000000..7b337e8f4cc
--- /dev/null
+++ b/static/usage/v9/modal/inline/is-open/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+function Example() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+
+ Inline Modal
+
+
+
+ setIsOpen(true)}>
+ Open
+
+
+
+
+ Modal
+
+ setIsOpen(false)}>Close
+
+
+
+
+
+ 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.
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/inline/is-open/vue.md b/static/usage/v9/modal/inline/is-open/vue.md
new file mode 100644
index 00000000000..c7109a5b3f8
--- /dev/null
+++ b/static/usage/v9/modal/inline/is-open/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/performance/mount/angular/example_component_html.md b/static/usage/v9/modal/performance/mount/angular/example_component_html.md
new file mode 100644
index 00000000000..4b8bb7bc9d2
--- /dev/null
+++ b/static/usage/v9/modal/performance/mount/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+
+ Cancel
+
+ Modal
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+```
diff --git a/static/usage/v9/modal/performance/mount/angular/example_component_ts.md b/static/usage/v9/modal/performance/mount/angular/example_component_ts.md
new file mode 100644
index 00000000000..b5f850ffdde
--- /dev/null
+++ b/static/usage/v9/modal/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/modal/performance/mount/demo.html b/static/usage/v9/modal/performance/mount/demo.html
new file mode 100644
index 00000000000..53a8965dbfd
--- /dev/null
+++ b/static/usage/v9/modal/performance/mount/demo.html
@@ -0,0 +1,47 @@
+
+
+
+ Modal | Performance
+
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+ Close
+
+ Modal
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/performance/mount/index.md b/static/usage/v9/modal/performance/mount/index.md
new file mode 100644
index 00000000000..836ac9e50f4
--- /dev/null
+++ b/static/usage/v9/modal/performance/mount/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';
+
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+ Close
+
+ Modal
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+```
diff --git a/static/usage/v9/modal/performance/mount/react.md b/static/usage/v9/modal/performance/mount/react.md
new file mode 100644
index 00000000000..bb6a9c32360
--- /dev/null
+++ b/static/usage/v9/modal/performance/mount/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+function Example() {
+ const modal = useRef(null);
+
+ return (
+
+
+
+ Example
+
+
+
+
+ Open Modal
+
+
+
+
+
+ modal.current?.dismiss()}>Close
+
+ Modal
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/performance/mount/vue.md b/static/usage/v9/modal/performance/mount/vue.md
new file mode 100644
index 00000000000..1bec009881e
--- /dev/null
+++ b/static/usage/v9/modal/performance/mount/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+ Cancel
+
+ Modal
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/auto-height/angular/example_component_css.md b/static/usage/v9/modal/sheet/auto-height/angular/example_component_css.md
new file mode 100644
index 00000000000..88d0e5c0594
--- /dev/null
+++ b/static/usage/v9/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/v9/modal/sheet/auto-height/angular/example_component_html.md b/static/usage/v9/modal/sheet/auto-height/angular/example_component_html.md
new file mode 100644
index 00000000000..3280a3f9e85
--- /dev/null
+++ b/static/usage/v9/modal/sheet/auto-height/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+ Block of Content
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/auto-height/angular/example_component_ts.md b/static/usage/v9/modal/sheet/auto-height/angular/example_component_ts.md
new file mode 100644
index 00000000000..deb6dd854d8
--- /dev/null
+++ b/static/usage/v9/modal/sheet/auto-height/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/modal/sheet/auto-height/demo.html b/static/usage/v9/modal/sheet/auto-height/demo.html
new file mode 100644
index 00000000000..3b48d58123d
--- /dev/null
+++ b/static/usage/v9/modal/sheet/auto-height/demo.html
@@ -0,0 +1,49 @@
+
+
+
+ Modal | Sheet
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+ Block of Content
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/sheet/auto-height/index.md b/static/usage/v9/modal/sheet/auto-height/index.md
new file mode 100644
index 00000000000..5c651b9486e
--- /dev/null
+++ b/static/usage/v9/modal/sheet/auto-height/index.md
@@ -0,0 +1,35 @@
+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';
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+ Block of Content
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/auto-height/react/main_css.md b/static/usage/v9/modal/sheet/auto-height/react/main_css.md
new file mode 100644
index 00000000000..88d0e5c0594
--- /dev/null
+++ b/static/usage/v9/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/v9/modal/sheet/auto-height/react/main_tsx.md b/static/usage/v9/modal/sheet/auto-height/react/main_tsx.md
new file mode 100644
index 00000000000..532f3e095c7
--- /dev/null
+++ b/static/usage/v9/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(null);
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Sheet Modal
+
+
+ Block of Content
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/sheet/auto-height/vue.md b/static/usage/v9/modal/sheet/auto-height/vue.md
new file mode 100644
index 00000000000..a34d713c512
--- /dev/null
+++ b/static/usage/v9/modal/sheet/auto-height/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+ Block of Content
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/background-content/angular/example_component_css.md b/static/usage/v9/modal/sheet/background-content/angular/example_component_css.md
new file mode 100644
index 00000000000..8730cae2d21
--- /dev/null
+++ b/static/usage/v9/modal/sheet/background-content/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+.counter__section {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+```
diff --git a/static/usage/v9/modal/sheet/background-content/angular/example_component_html.md b/static/usage/v9/modal/sheet/background-content/angular/example_component_html.md
new file mode 100644
index 00000000000..d3b92ec0e13
--- /dev/null
+++ b/static/usage/v9/modal/sheet/background-content/angular/example_component_html.md
@@ -0,0 +1,72 @@
+```html
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
Modal | Sheet
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/sheet/background-content/index.md b/static/usage/v9/modal/sheet/background-content/index.md
new file mode 100644
index 00000000000..df34831f99b
--- /dev/null
+++ b/static/usage/v9/modal/sheet/background-content/index.md
@@ -0,0 +1,28 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/background-content/react.md b/static/usage/v9/modal/sheet/background-content/react.md
new file mode 100644
index 00000000000..85fb9bbd83c
--- /dev/null
+++ b/static/usage/v9/modal/sheet/background-content/react.md
@@ -0,0 +1,99 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import {
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+ IonSearchbar,
+} from '@ionic/react';
+
+function Example() {
+ const modal = useRef(null);
+ const [count, setCount] = useState(0);
+
+ return (
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
setCount(count - 1)}>-
+
{count}
+
setCount(count + 1)}>+
+
+
+ modal.current?.setCurrentBreakpoint(0.75)} placeholder="Search">
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/sheet/background-content/vue.md b/static/usage/v9/modal/sheet/background-content/vue.md
new file mode 100644
index 00000000000..89ddab7ad40
--- /dev/null
+++ b/static/usage/v9/modal/sheet/background-content/vue.md
@@ -0,0 +1,97 @@
+```html
+
+
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/basic/angular/example_component_html.md b/static/usage/v9/modal/sheet/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..5a8fff67ab1
--- /dev/null
+++ b/static/usage/v9/modal/sheet/basic/angular/example_component_html.md
@@ -0,0 +1,56 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/basic/angular/example_component_ts.md b/static/usage/v9/modal/sheet/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..3eef3b942d4
--- /dev/null
+++ b/static/usage/v9/modal/sheet/basic/angular/example_component_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonAvatar,
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonModal,
+ IonSearchbar,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonAvatar,
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonModal,
+ IonSearchbar,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/modal/sheet/basic/demo.html b/static/usage/v9/modal/sheet/basic/demo.html
new file mode 100644
index 00000000000..4999820d9ee
--- /dev/null
+++ b/static/usage/v9/modal/sheet/basic/demo.html
@@ -0,0 +1,80 @@
+
+
+
+ Modal | Sheet
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/sheet/basic/index.md b/static/usage/v9/modal/sheet/basic/index.md
new file mode 100644
index 00000000000..fe9f6a1a963
--- /dev/null
+++ b/static/usage/v9/modal/sheet/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/basic/react.md b/static/usage/v9/modal/sheet/basic/react.md
new file mode 100644
index 00000000000..781cb467e49
--- /dev/null
+++ b/static/usage/v9/modal/sheet/basic/react.md
@@ -0,0 +1,81 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+ IonSearchbar,
+} from '@ionic/react';
+
+function Example() {
+ const modal = useRef(null);
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Sheet Modal
+
+
+
+ modal.current?.setCurrentBreakpoint(0.75)} placeholder="Search">
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/sheet/basic/vue.md b/static/usage/v9/modal/sheet/basic/vue.md
new file mode 100644
index 00000000000..31878f427e1
--- /dev/null
+++ b/static/usage/v9/modal/sheet/basic/vue.md
@@ -0,0 +1,72 @@
+```html
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_html.md b/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_html.md
new file mode 100644
index 00000000000..166b499f1c7
--- /dev/null
+++ b/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_html.md
@@ -0,0 +1,141 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Jack Smith
+ Product Designer
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Claire Smith
+ Graphic Designer
+
+
+
+
+
+
+ Kim Smith
+ Software Engineer
+
+
+
+
+
+
+ Alex Smith
+ Software Engineer
+
+
+
+
+
+
+ Eric Smith
+ Product Manager
+
+
+
+
+
+
+ Grace Smith
+ Product Manager
+
+
+
+
+
+
+ Henry Smith
+ Product Owner
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+ Oliver Smith
+ COO
+
+
+
+
+
+
+ Emma Smith
+ CTO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_ts.md b/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_ts.md
new file mode 100644
index 00000000000..a75d69f6f8d
--- /dev/null
+++ b/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonAvatar,
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonModal,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonAvatar, IonButton, IonContent, IonHeader, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/demo.html b/static/usage/v9/modal/sheet/expand-to-scroll/demo.html
new file mode 100644
index 00000000000..b8ba7f12aa8
--- /dev/null
+++ b/static/usage/v9/modal/sheet/expand-to-scroll/demo.html
@@ -0,0 +1,155 @@
+
+
+
+ Modal | Sheet
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Jack Smith
+ Product Designer
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Claire Smith
+ Graphic Designer
+
+
+
+
+
+
+ Kim Smith
+ Software Engineer
+
+
+
+
+
+
+ Alex Smith
+ Software Engineer
+
+
+
+
+
+
+ Eric Smith
+ Product Manager
+
+
+
+
+
+
+ Grace Smith
+ Product Manager
+
+
+
+
+
+
+ Henry Smith
+ Product Owner
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+ Oliver Smith
+ COO
+
+
+
+
+
+
+ Emma Smith
+ CTO
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/index.md b/static/usage/v9/modal/sheet/expand-to-scroll/index.md
new file mode 100644
index 00000000000..3c78e4ecad1
--- /dev/null
+++ b/static/usage/v9/modal/sheet/expand-to-scroll/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';
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Jack Smith
+ Product Designer
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Claire Smith
+ Graphic Designer
+
+
+
+
+
+
+ Kim Smith
+ Software Engineer
+
+
+
+
+
+
+ Alex Smith
+ Software Engineer
+
+
+
+
+
+
+ Eric Smith
+ Product Manager
+
+
+
+
+
+
+ Grace Smith
+ Product Manager
+
+
+
+
+
+
+ Henry Smith
+ Product Owner
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+ Oliver Smith
+ COO
+
+
+
+
+
+
+ Emma Smith
+ CTO
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/react.md b/static/usage/v9/modal/sheet/expand-to-scroll/react.md
new file mode 100644
index 00000000000..4b8bced61c9
--- /dev/null
+++ b/static/usage/v9/modal/sheet/expand-to-scroll/react.md
@@ -0,0 +1,163 @@
+```tsx
+import React from 'react';
+import {
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+} from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ App
+
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Jack Smith
+ Product Designer
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Claire Smith
+ Graphic Designer
+
+
+
+
+
+
+ Kim Smith
+ Software Engineer
+
+
+
+
+
+
+ Alex Smith
+ Software Engineer
+
+
+
+
+
+
+ Eric Smith
+ Product Manager
+
+
+
+
+
+
+ Grace Smith
+ Product Manager
+
+
+
+
+
+
+ Henry Smith
+ Product Owner
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+ Oliver Smith
+ COO
+
+
+
+
+
+
+ Emma Smith
+ CTO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/vue.md b/static/usage/v9/modal/sheet/expand-to-scroll/vue.md
new file mode 100644
index 00000000000..2dcaa7aa6d8
--- /dev/null
+++ b/static/usage/v9/modal/sheet/expand-to-scroll/vue.md
@@ -0,0 +1,156 @@
+```html
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Jack Smith
+ Product Designer
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Claire Smith
+ Graphic Designer
+
+
+
+
+
+
+ Kim Smith
+ Software Engineer
+
+
+
+
+
+
+ Alex Smith
+ Software Engineer
+
+
+
+
+
+
+ Eric Smith
+ Product Manager
+
+
+
+
+
+
+ Grace Smith
+ Product Manager
+
+
+
+
+
+
+ Henry Smith
+ Product Owner
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+ Oliver Smith
+ COO
+
+
+
+
+
+
+ Emma Smith
+ CTO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_html.md b/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_html.md
new file mode 100644
index 00000000000..d6f30b1ca8f
--- /dev/null
+++ b/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_ts.md b/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_ts.md
new file mode 100644
index 00000000000..23510a4d6fb
--- /dev/null
+++ b/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/modal/sheet/handle-behavior/demo.html b/static/usage/v9/modal/sheet/handle-behavior/demo.html
new file mode 100644
index 00000000000..351f54bebf1
--- /dev/null
+++ b/static/usage/v9/modal/sheet/handle-behavior/demo.html
@@ -0,0 +1,39 @@
+
+
+
+ Modal | Sheet
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/sheet/handle-behavior/index.md b/static/usage/v9/modal/sheet/handle-behavior/index.md
new file mode 100644
index 00000000000..af57ba0560f
--- /dev/null
+++ b/static/usage/v9/modal/sheet/handle-behavior/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/sheet/handle-behavior/react.md b/static/usage/v9/modal/sheet/handle-behavior/react.md
new file mode 100644
index 00000000000..bb415ae6bb2
--- /dev/null
+++ b/static/usage/v9/modal/sheet/handle-behavior/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ App
+
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/sheet/handle-behavior/vue.md b/static/usage/v9/modal/sheet/handle-behavior/vue.md
new file mode 100644
index 00000000000..d129fe176cd
--- /dev/null
+++ b/static/usage/v9/modal/sheet/handle-behavior/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/styling/animations/angular/example_component_html.md b/static/usage/v9/modal/styling/animations/angular/example_component_html.md
new file mode 100644
index 00000000000..7e3784676a7
--- /dev/null
+++ b/static/usage/v9/modal/styling/animations/angular/example_component_html.md
@@ -0,0 +1,63 @@
+```html
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/styling/animations/angular/example_component_ts.md b/static/usage/v9/modal/styling/animations/angular/example_component_ts.md
new file mode 100644
index 00000000000..b5f7d92d0e1
--- /dev/null
+++ b/static/usage/v9/modal/styling/animations/angular/example_component_ts.md
@@ -0,0 +1,67 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ AnimationController,
+ IonAvatar,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonModal,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonAvatar,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonModal,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ constructor(private animationCtrl: AnimationController) {}
+
+ enterAnimation = (baseEl: HTMLElement) => {
+ const root = baseEl.shadowRoot;
+
+ const backdropAnimation = this.animationCtrl
+ .create()
+ .addElement(root!.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = this.animationCtrl
+ .create()
+ .addElement(root!.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+ ]);
+
+ return this.animationCtrl
+ .create()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ };
+
+ leaveAnimation = (baseEl: HTMLElement) => {
+ return this.enterAnimation(baseEl).direction('reverse');
+ };
+}
+```
diff --git a/static/usage/v9/modal/styling/animations/demo.html b/static/usage/v9/modal/styling/animations/demo.html
new file mode 100644
index 00000000000..f3d9ad18c0f
--- /dev/null
+++ b/static/usage/v9/modal/styling/animations/demo.html
@@ -0,0 +1,114 @@
+
+
+
+ Modal | Animations
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/styling/animations/index.md b/static/usage/v9/modal/styling/animations/index.md
new file mode 100644
index 00000000000..a772737fdc5
--- /dev/null
+++ b/static/usage/v9/modal/styling/animations/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import vue from './vue.md';
+import react from './react.md';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/styling/animations/javascript/index_ts.md b/static/usage/v9/modal/styling/animations/javascript/index_ts.md
new file mode 100644
index 00000000000..550bb177c77
--- /dev/null
+++ b/static/usage/v9/modal/styling/animations/javascript/index_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { createAnimation } from '@ionic/core';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+defineCustomElements();
+
+(window as any).createAnimation = createAnimation;
+```
diff --git a/static/usage/v9/modal/styling/animations/react.md b/static/usage/v9/modal/styling/animations/react.md
new file mode 100644
index 00000000000..c0d872e30c3
--- /dev/null
+++ b/static/usage/v9/modal/styling/animations/react.md
@@ -0,0 +1,122 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ createAnimation,
+ IonButtons,
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+} from '@ionic/react';
+
+function Example() {
+ const modal = useRef(null);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ const enterAnimation = (baseEl: HTMLElement) => {
+ const root = baseEl.shadowRoot;
+
+ const backdropAnimation = createAnimation()
+ .addElement(root?.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = createAnimation()
+ .addElement(root?.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+ ]);
+
+ return createAnimation()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ };
+
+ const leaveAnimation = (baseEl: HTMLElement) => {
+ return enterAnimation(baseEl).direction('reverse');
+ };
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ dismiss()}>Close
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/styling/animations/vue.md b/static/usage/v9/modal/styling/animations/vue.md
new file mode 100644
index 00000000000..3928fe74219
--- /dev/null
+++ b/static/usage/v9/modal/styling/animations/vue.md
@@ -0,0 +1,108 @@
+```html
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/styling/theming/angular/example_component_html.md b/static/usage/v9/modal/styling/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..ba0d12d2e5a
--- /dev/null
+++ b/static/usage/v9/modal/styling/theming/angular/example_component_html.md
@@ -0,0 +1,61 @@
+```html
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/styling/theming/angular/example_component_ts.md b/static/usage/v9/modal/styling/theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..d54a03379a0
--- /dev/null
+++ b/static/usage/v9/modal/styling/theming/angular/example_component_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonAvatar,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonModal,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonAvatar,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonModal,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/modal/styling/theming/angular/global_css.md b/static/usage/v9/modal/styling/theming/angular/global_css.md
new file mode 100644
index 00000000000..00b7c80f86d
--- /dev/null
+++ b/static/usage/v9/modal/styling/theming/angular/global_css.md
@@ -0,0 +1,17 @@
+```css
+ion-modal {
+ --height: 50%;
+ --border-radius: 16px;
+ --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+ion-modal::part(backdrop) {
+ background: rgba(209, 213, 219);
+ opacity: 1;
+}
+
+ion-modal ion-toolbar {
+ --background: rgb(14 116 144);
+ --color: white;
+}
+```
diff --git a/static/usage/v9/modal/styling/theming/demo.html b/static/usage/v9/modal/styling/theming/demo.html
new file mode 100644
index 00000000000..2177a2b783a
--- /dev/null
+++ b/static/usage/v9/modal/styling/theming/demo.html
@@ -0,0 +1,99 @@
+
+
+
+ Modal | Theming
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/modal/styling/theming/index.md b/static/usage/v9/modal/styling/theming/index.md
new file mode 100644
index 00000000000..a92a9f8e7e3
--- /dev/null
+++ b/static/usage/v9/modal/styling/theming/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/modal/styling/theming/react/main_css.md b/static/usage/v9/modal/styling/theming/react/main_css.md
new file mode 100644
index 00000000000..c1d585b8f72
--- /dev/null
+++ b/static/usage/v9/modal/styling/theming/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-modal#example-modal {
+ --height: 50%;
+ --border-radius: 16px;
+ --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+ion-modal#example-modal::part(backdrop) {
+ background: rgba(209, 213, 219);
+ opacity: 1;
+}
+
+ion-modal#example-modal ion-toolbar {
+ --background: rgb(14 116 144);
+ --color: white;
+}
+```
diff --git a/static/usage/v9/modal/styling/theming/react/main_tsx.md b/static/usage/v9/modal/styling/theming/react/main_tsx.md
new file mode 100644
index 00000000000..b1d894b2a22
--- /dev/null
+++ b/static/usage/v9/modal/styling/theming/react/main_tsx.md
@@ -0,0 +1,94 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButtons,
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const modal = useRef(null);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ dismiss()}>
+ Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/modal/styling/theming/vue.md b/static/usage/v9/modal/styling/theming/vue.md
new file mode 100644
index 00000000000..b571114f1b8
--- /dev/null
+++ b/static/usage/v9/modal/styling/theming/vue.md
@@ -0,0 +1,100 @@
+```html
+
+
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/nav/modal-navigation/angular/example_component_html.md b/static/usage/v9/nav/modal-navigation/angular/example_component_html.md
new file mode 100644
index 00000000000..06d46334df5
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v9/nav/modal-navigation/angular/example_component_ts.md
new file mode 100644
index 00000000000..583995bceac
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar } from '@ionic/angular';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ @ViewChild('nav') private nav!: IonNav;
+
+ onWillPresent() {
+ this.nav.setRoot(PageOneComponent);
+ }
+}
+```
diff --git a/static/usage/v9/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v9/nav/modal-navigation/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..549a9c19592
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/angular/page_one_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonNav } from '@ionic/angular';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+ Page One
+ Go to Page Two
+
+ `,
+ imports: [IonButton, IonContent],
+})
+export class PageOneComponent {
+ constructor(private nav: IonNav) {}
+
+ navigateToPageTwo() {
+ this.nav.push(PageTwoComponent);
+ }
+}
+```
diff --git a/static/usage/v9/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v9/nav/modal-navigation/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..d141baa2c58
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/angular/page_three_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonNav } from '@ionic/angular';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+ Page Three
+ Go Back
+ Go to Root
+
+ `,
+ imports: [IonButton, IonContent],
+})
+export class PageThreeComponent {
+ constructor(private nav: IonNav) {}
+
+ navigateBack() {
+ this.nav.pop();
+ }
+
+ navigateToRoot() {
+ this.nav.popToRoot();
+ }
+}
+```
diff --git a/static/usage/v9/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v9/nav/modal-navigation/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..843f96c3160
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/angular/page_two_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonNav } from '@ionic/angular';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+ Page Two
+ Go to Page Three
+
+ `,
+ imports: [IonButton, IonContent],
+})
+export class PageTwoComponent {
+ component = PageThreeComponent;
+
+ constructor(private nav: IonNav) {}
+
+ navigateToPageThree() {
+ this.nav.push(PageThreeComponent);
+ }
+}
+```
diff --git a/static/usage/v9/nav/modal-navigation/demo.html b/static/usage/v9/nav/modal-navigation/demo.html
new file mode 100644
index 00000000000..d85c343110c
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/demo.html
@@ -0,0 +1,100 @@
+
+
+
+
+ Nav | Modal Navigation
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/nav/modal-navigation/index.md b/static/usage/v9/nav/modal-navigation/index.md
new file mode 100644
index 00000000000..f273628af86
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/index.md
@@ -0,0 +1,54 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/nav/modal-navigation/react/main_tsx.md b/static/usage/v9/nav/modal-navigation/react/main_tsx.md
new file mode 100644
index 00000000000..fc6901b3d6d
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/react/main_tsx.md
@@ -0,0 +1,60 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonNav,
+ IonPage,
+ IonHeader,
+ IonToolbar,
+ IonTitle,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonModal,
+} from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ const nav = useRef(null);
+ const modal = useRef(null);
+
+ const didPresent = () => {
+ if (nav.current) {
+ nav.current.setRoot(PageOne, { nav: nav.current });
+ }
+ };
+
+ const dismiss = () => {
+ if (modal.current) {
+ modal.current.dismiss();
+ }
+ };
+
+ return (
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/nav/modal-navigation/react/page_one_tsx.md b/static/usage/v9/nav/modal-navigation/react/page_one_tsx.md
new file mode 100644
index 00000000000..ce5c266e21b
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/react/page_one_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne({ nav }: { nav: HTMLIonNavElement }) {
+ const navigateToPageTwo = () => nav.push(PageTwo, { nav });
+ return (
+
+ Page One
+ Go to Page Two
+
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v9/nav/modal-navigation/react/page_three_tsx.md b/static/usage/v9/nav/modal-navigation/react/page_three_tsx.md
new file mode 100644
index 00000000000..3613967edfd
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/react/page_three_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function PageThree({ nav }: { nav: HTMLIonNavElement }) {
+ const navigateBack = () => nav.pop();
+ const navigateToRoot = () => nav.popToRoot();
+
+ return (
+
+ Page Three
+ Go Back
+ Go to Root
+
+ );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/v9/nav/modal-navigation/react/page_two_tsx.md b/static/usage/v9/nav/modal-navigation/react/page_two_tsx.md
new file mode 100644
index 00000000000..48562bd23cd
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/react/page_two_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo({ nav }: { nav: HTMLIonNavElement }) {
+ const navigateToPageThree = () => nav.push(PageThree, { nav });
+
+ return (
+
+ Page Two
+ Go to Page Three
+
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v9/nav/modal-navigation/vue/example_vue.md b/static/usage/v9/nav/modal-navigation/vue/example_vue.md
new file mode 100644
index 00000000000..d0be7ab7647
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/vue/example_vue.md
@@ -0,0 +1,59 @@
+```html
+
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/nav/modal-navigation/vue/page_one_vue.md b/static/usage/v9/nav/modal-navigation/vue/page_one_vue.md
new file mode 100644
index 00000000000..b2ed82f816e
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/vue/page_one_vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+ Page One
+ Go to Page Two
+
+
+
+
+```
diff --git a/static/usage/v9/nav/modal-navigation/vue/page_three_vue.md b/static/usage/v9/nav/modal-navigation/vue/page_three_vue.md
new file mode 100644
index 00000000000..db50e12c87e
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/vue/page_three_vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+ Page Three
+ Go Back
+ Go to Root
+
+
+
+
+```
diff --git a/static/usage/v9/nav/modal-navigation/vue/page_two_vue.md b/static/usage/v9/nav/modal-navigation/vue/page_two_vue.md
new file mode 100644
index 00000000000..b70b3bbe440
--- /dev/null
+++ b/static/usage/v9/nav/modal-navigation/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+ Page Two
+ Go to Page Three
+
+
+
+
+```
diff --git a/static/usage/v9/nav/nav-link/angular/example_component_html.md b/static/usage/v9/nav/nav-link/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+
+ Page One
+
+
+
+ Page One
+
+ Go to Page Two
+
+
+ `,
+ imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
+})
+export class PageOneComponent {
+ component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v9/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v9/nav/nav-link/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..839ba7d21e5
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/angular/page_three_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+ `,
+ imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class PageThreeComponent {}
+```
diff --git a/static/usage/v9/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v9/nav/nav-link/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..7a5dcb2ae6a
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/angular/page_two_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonNavLink,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+
+
+ Go to Page Three
+
+
+
+ `,
+ imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
+})
+export class PageTwoComponent {
+ component = PageThreeComponent;
+}
+```
diff --git a/static/usage/v9/nav/nav-link/demo.html b/static/usage/v9/nav/nav-link/demo.html
new file mode 100644
index 00000000000..426e1ba9832
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/demo.html
@@ -0,0 +1,81 @@
+
+
+
+
+ Nav | NavLink
+
+
+
+
+
+
diff --git a/static/usage/v9/nav/nav-link/index.md b/static/usage/v9/nav/nav-link/index.md
new file mode 100644
index 00000000000..84422cc2ed4
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/index.md
@@ -0,0 +1,53 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/nav/nav-link/react/main_tsx.md b/static/usage/v9/nav/nav-link/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v9/nav/nav-link/react/page_one_tsx.md b/static/usage/v9/nav/nav-link/react/page_one_tsx.md
new file mode 100644
index 00000000000..303ad18547a
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/react/page_one_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+ return (
+ <>
+
+
+ Page One
+
+
+
+ Page One
+ Go to Page Two
+
+
+
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v9/nav/nav-link/react/page_three_tsx.md b/static/usage/v9/nav/nav-link/react/page_three_tsx.md
new file mode 100644
index 00000000000..451d30db85d
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/react/page_three_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+
+function PageThree() {
+ return (
+ <>
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+
+ );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/v9/nav/nav-link/react/page_two_tsx.md b/static/usage/v9/nav/nav-link/react/page_two_tsx.md
new file mode 100644
index 00000000000..fd3f8764873
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/react/page_two_tsx.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import {
+ IonBackButton,
+ IonButtons,
+ IonButton,
+ IonHeader,
+ IonContent,
+ IonNavLink,
+ IonToolbar,
+ IonTitle,
+} from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo() {
+ return (
+ <>
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+ Go to Page Three
+
+
+
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v9/nav/nav-link/vue/example_vue.md b/static/usage/v9/nav/nav-link/vue/example_vue.md
new file mode 100644
index 00000000000..0cff5d69a9b
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/vue/example_vue.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/nav/nav-link/vue/page_one_vue.md b/static/usage/v9/nav/nav-link/vue/page_one_vue.md
new file mode 100644
index 00000000000..0226b65a597
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/vue/page_one_vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Page One
+
+
+
+ Page One
+
+ Go to Page Two
+
+
+
+
+
+```
diff --git a/static/usage/v9/nav/nav-link/vue/page_three_vue.md b/static/usage/v9/nav/nav-link/vue/page_three_vue.md
new file mode 100644
index 00000000000..215be80da5e
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/vue/page_three_vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+
+
+
+```
diff --git a/static/usage/v9/nav/nav-link/vue/page_two_vue.md b/static/usage/v9/nav/nav-link/vue/page_two_vue.md
new file mode 100644
index 00000000000..49170458c16
--- /dev/null
+++ b/static/usage/v9/nav/nav-link/vue/page_two_vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+
+ Go to Page Three
+
+
+
+
+
+```
diff --git a/static/usage/v9/navigation/angular/app_component_html.md b/static/usage/v9/navigation/angular/app_component_html.md
new file mode 100644
index 00000000000..3b819dc640d
--- /dev/null
+++ b/static/usage/v9/navigation/angular/app_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+
+```
diff --git a/static/usage/v9/navigation/angular/app_component_ts.md b/static/usage/v9/navigation/angular/app_component_ts.md
new file mode 100644
index 00000000000..a6d389e72ed
--- /dev/null
+++ b/static/usage/v9/navigation/angular/app_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ imports: [IonApp, IonRouterOutlet],
+})
+export class AppComponent {}
+```
diff --git a/static/usage/v9/navigation/angular/app_routes_ts.md b/static/usage/v9/navigation/angular/app_routes_ts.md
new file mode 100644
index 00000000000..79e8250c89d
--- /dev/null
+++ b/static/usage/v9/navigation/angular/app_routes_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Routes } from '@angular/router';
+import { ExampleComponent } from './example.component';
+
+export const routes: Routes = [
+ {
+ path: 'example',
+ component: ExampleComponent,
+ children: [
+ {
+ path: 'dashboard',
+ loadComponent: () => import('./dashboard/dashboard-page.component').then((m) => m.DashboardPageComponent),
+ },
+ {
+ path: 'dashboard/:id',
+ loadComponent: () => import('./item-detail/item-detail-page.component').then((m) => m.ItemDetailPageComponent),
+ },
+ {
+ path: 'settings',
+ loadComponent: () => import('./settings/settings-page.component').then((m) => m.SettingsPageComponent),
+ },
+ {
+ path: '',
+ redirectTo: '/example/dashboard',
+ pathMatch: 'full',
+ },
+ ],
+ },
+ {
+ path: '',
+ redirectTo: '/example/dashboard',
+ pathMatch: 'full',
+ },
+];
+```
diff --git a/static/usage/v9/navigation/angular/dashboard_page_component_html.md b/static/usage/v9/navigation/angular/dashboard_page_component_html.md
new file mode 100644
index 00000000000..e20f2b19520
--- /dev/null
+++ b/static/usage/v9/navigation/angular/dashboard_page_component_html.md
@@ -0,0 +1,16 @@
+```html
+
+
+ Dashboard
+
+
+
+
+ @for (item of items; track item.id) {
+
+ {{ item.name }}
+
+ }
+
+
+```
diff --git a/static/usage/v9/navigation/angular/dashboard_page_component_ts.md b/static/usage/v9/navigation/angular/dashboard_page_component_ts.md
new file mode 100644
index 00000000000..9b48dc7012a
--- /dev/null
+++ b/static/usage/v9/navigation/angular/dashboard_page_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar, IonRouterLink } from '@ionic/angular';
+
+@Component({
+ selector: 'app-dashboard-page',
+ templateUrl: 'dashboard-page.component.html',
+ imports: [IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar, IonRouterLink, RouterLink],
+})
+export class DashboardPageComponent {
+ items = [
+ { id: '1', name: 'Item One' },
+ { id: '2', name: 'Item Two' },
+ { id: '3', name: 'Item Three' },
+ ];
+}
+```
diff --git a/static/usage/v9/navigation/angular/example_component_html.md b/static/usage/v9/navigation/angular/example_component_html.md
new file mode 100644
index 00000000000..dd7a83446e9
--- /dev/null
+++ b/static/usage/v9/navigation/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+ Dashboard
+
+
+ Settings
+
+
+
+```
diff --git a/static/usage/v9/navigation/angular/example_component_ts.md b/static/usage/v9/navigation/angular/example_component_ts.md
new file mode 100644
index 00000000000..103c9c24b25
--- /dev/null
+++ b/static/usage/v9/navigation/angular/example_component_ts.md
@@ -0,0 +1,17 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { gridOutline, settingsOutline } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ imports: [IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs],
+})
+export class ExampleComponent {
+ constructor() {
+ addIcons({ gridOutline, settingsOutline });
+ }
+}
+```
diff --git a/static/usage/v9/navigation/angular/item_detail_page_component_html.md b/static/usage/v9/navigation/angular/item_detail_page_component_html.md
new file mode 100644
index 00000000000..581d088a361
--- /dev/null
+++ b/static/usage/v9/navigation/angular/item_detail_page_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+ Item {{ id }}
+
+
+You navigated to item {{ id }}.
+```
diff --git a/static/usage/v9/navigation/angular/item_detail_page_component_ts.md b/static/usage/v9/navigation/angular/item_detail_page_component_ts.md
new file mode 100644
index 00000000000..569c8bf2705
--- /dev/null
+++ b/static/usage/v9/navigation/angular/item_detail_page_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-item-detail-page',
+ templateUrl: 'item-detail-page.component.html',
+ imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ItemDetailPageComponent implements OnInit {
+ id = '';
+
+ constructor(private route: ActivatedRoute) {}
+
+ ngOnInit() {
+ this.id = this.route.snapshot.paramMap.get('id') ?? '';
+ }
+}
+```
diff --git a/static/usage/v9/navigation/angular/settings_page_component_html.md b/static/usage/v9/navigation/angular/settings_page_component_html.md
new file mode 100644
index 00000000000..bad2d5268d4
--- /dev/null
+++ b/static/usage/v9/navigation/angular/settings_page_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Settings
+
+
+Settings content
+```
diff --git a/static/usage/v9/navigation/angular/settings_page_component_ts.md b/static/usage/v9/navigation/angular/settings_page_component_ts.md
new file mode 100644
index 00000000000..12df19492cd
--- /dev/null
+++ b/static/usage/v9/navigation/angular/settings_page_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-settings-page',
+ templateUrl: 'settings-page.component.html',
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class SettingsPageComponent {}
+```
diff --git a/static/usage/v9/navigation/demo.html b/static/usage/v9/navigation/demo.html
new file mode 100644
index 00000000000..9defa527e6e
--- /dev/null
+++ b/static/usage/v9/navigation/demo.html
@@ -0,0 +1,95 @@
+
+
+
+ Navigation
+
+
+
+
+
+
+ Dashboard
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+
+
+
+
+
+
+ Settings
+
+
+ Settings content
+
+
+
+
+ Dashboard
+
+
+ Settings
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/navigation/index.md b/static/usage/v9/navigation/index.md
new file mode 100644
index 00000000000..1495e9daf1a
--- /dev/null
+++ b/static/usage/v9/navigation/index.md
@@ -0,0 +1,55 @@
+import Playground from '@site/src/components/global/Playground';
+
+import angular_app_routes_ts from './angular/app_routes_ts.md';
+import angular_app_component_html from './angular/app_component_html.md';
+import angular_app_component_ts from './angular/app_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_dashboard_page_component_html from './angular/dashboard_page_component_html.md';
+import angular_dashboard_page_component_ts from './angular/dashboard_page_component_ts.md';
+import angular_item_detail_page_component_html from './angular/item_detail_page_component_html.md';
+import angular_item_detail_page_component_ts from './angular/item_detail_page_component_ts.md';
+import angular_settings_page_component_html from './angular/settings_page_component_html.md';
+import angular_settings_page_component_ts from './angular/settings_page_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_dashboard_page_tsx from './react/dashboard_page_tsx.md';
+import react_item_detail_page_tsx from './react/item_detail_page_tsx.md';
+import react_settings_page_tsx from './react/settings_page_tsx.md';
+
+export default function NavigationPlayground({ defaultFramework = 'angular' }) {
+ return (
+
+
+
+ Dashboard
+
+
+
+
+ {items.map((item) => (
+
+ {item.name}
+
+ ))}
+
+
+
+);
+
+export default DashboardPage;
+```
diff --git a/static/usage/v9/navigation/react/item_detail_page_tsx.md b/static/usage/v9/navigation/react/item_detail_page_tsx.md
new file mode 100644
index 00000000000..7918ed60813
--- /dev/null
+++ b/static/usage/v9/navigation/react/item_detail_page_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { useParams } from 'react-router-dom';
+
+const ItemDetailPage: React.FC = () => {
+ const { id } = useParams<{ id: string }>();
+
+ return (
+
+
+
+
+
+ Item {id}
+
+
+ You navigated to item {id}.
+
+ );
+};
+
+export default ItemDetailPage;
+```
diff --git a/static/usage/v9/navigation/react/main_tsx.md b/static/usage/v9/navigation/react/main_tsx.md
new file mode 100644
index 00000000000..143a2f02021
--- /dev/null
+++ b/static/usage/v9/navigation/react/main_tsx.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import { Route, Navigate } from 'react-router-dom';
+import { gridOutline, settingsOutline } from 'ionicons/icons';
+import DashboardPage from './pages/DashboardPage';
+import ItemDetailPage from './pages/ItemDetailPage';
+import SettingsPage from './pages/SettingsPage';
+
+const Example: React.FC = () => (
+
+
+
+
+
+
+ Dashboard
+
+
+ Settings
+
+
+
+
+);
+
+export default Example;
+```
diff --git a/static/usage/v9/navigation/react/settings_page_tsx.md b/static/usage/v9/navigation/react/settings_page_tsx.md
new file mode 100644
index 00000000000..5bdcec02a51
--- /dev/null
+++ b/static/usage/v9/navigation/react/settings_page_tsx.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+const SettingsPage: React.FC = () => (
+
+
+
+ Settings
+
+
+ Settings content
+
+);
+
+export default SettingsPage;
+```
diff --git a/static/usage/v9/note/basic/angular/example_component_html.md b/static/usage/v9/note/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/v9/note/basic/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Default Note
+```
diff --git a/static/usage/v9/note/basic/angular/example_component_ts.md b/static/usage/v9/note/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..54f99813ece
--- /dev/null
+++ b/static/usage/v9/note/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNote } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/note/basic/demo.html b/static/usage/v9/note/basic/demo.html
new file mode 100644
index 00000000000..7176e55bea8
--- /dev/null
+++ b/static/usage/v9/note/basic/demo.html
@@ -0,0 +1,22 @@
+
+
+
+ Note
+
+
+
+ Default Note
+
+
+
+
+
diff --git a/static/usage/v9/note/basic/index.md b/static/usage/v9/note/basic/index.md
new file mode 100644
index 00000000000..d19c2c31a55
--- /dev/null
+++ b/static/usage/v9/note/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Default Note
+```
diff --git a/static/usage/v9/note/basic/react.md b/static/usage/v9/note/basic/react.md
new file mode 100644
index 00000000000..9f1cdb45225
--- /dev/null
+++ b/static/usage/v9/note/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default Note
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/note/basic/vue.md b/static/usage/v9/note/basic/vue.md
new file mode 100644
index 00000000000..3790ce220a0
--- /dev/null
+++ b/static/usage/v9/note/basic/vue.md
@@ -0,0 +1,9 @@
+```html
+
+ Default Note
+
+
+
+```
diff --git a/static/usage/v9/note/item/angular/example_component_html.md b/static/usage/v9/note/item/angular/example_component_html.md
new file mode 100644
index 00000000000..0d26cf33b27
--- /dev/null
+++ b/static/usage/v9/note/item/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+```
diff --git a/static/usage/v9/note/item/angular/example_component_ts.md b/static/usage/v9/note/item/angular/example_component_ts.md
new file mode 100644
index 00000000000..287c08efcea
--- /dev/null
+++ b/static/usage/v9/note/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonNote } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/note/item/demo.html b/static/usage/v9/note/item/demo.html
new file mode 100644
index 00000000000..91f0932efc8
--- /dev/null
+++ b/static/usage/v9/note/item/demo.html
@@ -0,0 +1,36 @@
+
+
+
+ Note
+
+
+
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+
+
+
+
+
diff --git a/static/usage/v9/note/item/index.md b/static/usage/v9/note/item/index.md
new file mode 100644
index 00000000000..78e9c28339b
--- /dev/null
+++ b/static/usage/v9/note/item/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+```
diff --git a/static/usage/v9/note/item/react.md b/static/usage/v9/note/item/react.md
new file mode 100644
index 00000000000..422ba6eff85
--- /dev/null
+++ b/static/usage/v9/note/item/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonNote } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/note/item/vue.md b/static/usage/v9/note/item/vue.md
new file mode 100644
index 00000000000..698cb771b29
--- /dev/null
+++ b/static/usage/v9/note/item/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+
+
+
+```
diff --git a/static/usage/v9/note/theming/colors/angular/example_component_html.md b/static/usage/v9/note/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..2740648d5ad
--- /dev/null
+++ b/static/usage/v9/note/theming/colors/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+Default Note
+Primary Note
+Secondary Note
+Tertiary Note
+Success Note
+Warning Note
+Danger Note
+Light Note
+Medium Note
+Dark Note
+```
diff --git a/static/usage/v9/note/theming/colors/angular/example_component_ts.md b/static/usage/v9/note/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..54f99813ece
--- /dev/null
+++ b/static/usage/v9/note/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNote } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/note/theming/colors/demo.html b/static/usage/v9/note/theming/colors/demo.html
new file mode 100644
index 00000000000..4f7a685575e
--- /dev/null
+++ b/static/usage/v9/note/theming/colors/demo.html
@@ -0,0 +1,47 @@
+
+
+
+ Note
+
+
+
+
+ Default Note
+ Primary Note
+ Secondary Note
+ Tertiary Note
+ Success Note
+ Warning Note
+ Danger Note
+ Light Note
+ Medium Note
+ Dark Note
+
+
+
+
+
diff --git a/static/usage/v9/note/theming/colors/index.md b/static/usage/v9/note/theming/colors/index.md
new file mode 100644
index 00000000000..78067588f91
--- /dev/null
+++ b/static/usage/v9/note/theming/colors/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Default Note
+Primary Note
+Secondary Note
+Tertiary Note
+Success Note
+Warning Note
+Danger Note
+Light Note
+Medium Note
+Dark Note
+```
diff --git a/static/usage/v9/note/theming/colors/react.md b/static/usage/v9/note/theming/colors/react.md
new file mode 100644
index 00000000000..0f17783c5c6
--- /dev/null
+++ b/static/usage/v9/note/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default Note
+ Primary Note
+ Secondary Note
+ Tertiary Note
+ Success Note
+ Warning Note
+ Danger Note
+ Light Note
+ Medium Note
+ Dark Note
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/note/theming/colors/vue.md b/static/usage/v9/note/theming/colors/vue.md
new file mode 100644
index 00000000000..f330f2b4298
--- /dev/null
+++ b/static/usage/v9/note/theming/colors/vue.md
@@ -0,0 +1,18 @@
+```html
+
+ Default Note
+ Primary Note
+ Secondary Note
+ Tertiary Note
+ Success Note
+ Warning Note
+ Danger Note
+ Light Note
+ Medium Note
+ Dark Note
+
+
+
+```
diff --git a/static/usage/v9/note/theming/css-properties/angular/example_component_css.md b/static/usage/v9/note/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..5f39ab9c48f
--- /dev/null
+++ b/static/usage/v9/note/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+ --color: #54dc98;
+}
+```
diff --git a/static/usage/v9/note/theming/css-properties/angular/example_component_html.md b/static/usage/v9/note/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/v9/note/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Default Note
+```
diff --git a/static/usage/v9/note/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/note/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..54f99813ece
--- /dev/null
+++ b/static/usage/v9/note/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNote } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/note/theming/css-properties/demo.html b/static/usage/v9/note/theming/css-properties/demo.html
new file mode 100644
index 00000000000..f8144a332dd
--- /dev/null
+++ b/static/usage/v9/note/theming/css-properties/demo.html
@@ -0,0 +1,28 @@
+
+
+
+ Note
+
+
+
+ Default Note
+
+
+
+
+
diff --git a/static/usage/v9/note/theming/css-properties/index.md b/static/usage/v9/note/theming/css-properties/index.md
new file mode 100644
index 00000000000..d6eb8a8a615
--- /dev/null
+++ b/static/usage/v9/note/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Default Note
+```
diff --git a/static/usage/v9/note/theming/css-properties/react/main_css.md b/static/usage/v9/note/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..5f39ab9c48f
--- /dev/null
+++ b/static/usage/v9/note/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+ --color: #54dc98;
+}
+```
diff --git a/static/usage/v9/note/theming/css-properties/react/main_tsx.md b/static/usage/v9/note/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..798b6ab90d1
--- /dev/null
+++ b/static/usage/v9/note/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Default Note
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/note/theming/css-properties/vue.md b/static/usage/v9/note/theming/css-properties/vue.md
new file mode 100644
index 00000000000..5feb93da730
--- /dev/null
+++ b/static/usage/v9/note/theming/css-properties/vue.md
@@ -0,0 +1,15 @@
+```html
+
+ Default Note
+
+
+
+
+
+```
diff --git a/static/usage/v9/picker/basic/angular/example_component_html.md b/static/usage/v9/picker/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..c3f180464f4
--- /dev/null
+++ b/static/usage/v9/picker/basic/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+ --
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+```
diff --git a/static/usage/v9/picker/basic/angular/example_component_ts.md b/static/usage/v9/picker/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..887370aa403
--- /dev/null
+++ b/static/usage/v9/picker/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonPicker, IonPickerColumn, IonPickerColumnOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/picker/basic/demo.html b/static/usage/v9/picker/basic/demo.html
new file mode 100644
index 00000000000..400d92577b3
--- /dev/null
+++ b/static/usage/v9/picker/basic/demo.html
@@ -0,0 +1,31 @@
+
+
+
+ Picker | Basic
+
+
+
+
+
+ --
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/picker/basic/index.md b/static/usage/v9/picker/basic/index.md
new file mode 100644
index 00000000000..5319f1d52a5
--- /dev/null
+++ b/static/usage/v9/picker/basic/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import react from './react.md';
+import vue from './vue.md';
+
+
+
+ --
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+```
diff --git a/static/usage/v9/picker/basic/react.md b/static/usage/v9/picker/basic/react.md
new file mode 100644
index 00000000000..b25fda24872
--- /dev/null
+++ b/static/usage/v9/picker/basic/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+ --
+
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/picker/basic/vue.md b/static/usage/v9/picker/basic/vue.md
new file mode 100644
index 00000000000..e1dceca490e
--- /dev/null
+++ b/static/usage/v9/picker/basic/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+ --
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+
+
+
+```
diff --git a/static/usage/v9/picker/modal/angular/example_component_css.md b/static/usage/v9/picker/modal/angular/example_component_css.md
new file mode 100644
index 00000000000..b3640befc58
--- /dev/null
+++ b/static/usage/v9/picker/modal/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-modal {
+ --height: auto;
+
+ align-items: end;
+}
+
+ion-picker {
+ margin-bottom: var(--ion-safe-area-bottom);
+}
+```
diff --git a/static/usage/v9/picker/modal/angular/example_component_html.md b/static/usage/v9/picker/modal/angular/example_component_html.md
new file mode 100644
index 00000000000..dd221429f52
--- /dev/null
+++ b/static/usage/v9/picker/modal/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+Open modal
+
+
+
+
+ Cancel
+
+
+ Done
+
+
+
+
+ --
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+
+
+```
diff --git a/static/usage/v9/picker/modal/angular/example_component_ts.md b/static/usage/v9/picker/modal/angular/example_component_ts.md
new file mode 100644
index 00000000000..3e3fd532dac
--- /dev/null
+++ b/static/usage/v9/picker/modal/angular/example_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonButton,
+ IonButtons,
+ IonModal,
+ IonPicker,
+ IonPickerColumn,
+ IonPickerColumnOption,
+ IonToolbar,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: './example.component.html',
+ styleUrls: ['./example.component.css'],
+ imports: [IonButton, IonButtons, IonModal, IonPicker, IonPickerColumn, IonPickerColumnOption, IonToolbar],
+})
+export class ExampleComponent {
+ currentValue = 'javascript';
+
+ onIonChange(event: CustomEvent) {
+ this.currentValue = event.detail.value;
+ }
+
+ onDidDismiss(event: CustomEvent) {
+ console.log('didDismiss', JSON.stringify(event.detail));
+ }
+}
+```
diff --git a/static/usage/v9/picker/modal/demo.html b/static/usage/v9/picker/modal/demo.html
new file mode 100644
index 00000000000..76e185f5186
--- /dev/null
+++ b/static/usage/v9/picker/modal/demo.html
@@ -0,0 +1,67 @@
+
+
+
+ Picker | Basic
+
+
+
+ Open modal
+
+
+
+
+ Cancel
+
+
+ Done
+
+
+
+
+ --
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/picker/modal/index.md b/static/usage/v9/picker/modal/index.md
new file mode 100644
index 00000000000..dcdadb4a858
--- /dev/null
+++ b/static/usage/v9/picker/modal/index.md
@@ -0,0 +1,37 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.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';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+Open modal
+
+
+
+
+ Cancel
+
+
+ Done
+
+
+
+
+ --
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+
+
+
+```
diff --git a/static/usage/v9/picker/modal/react/main_css.md b/static/usage/v9/picker/modal/react/main_css.md
new file mode 100644
index 00000000000..b3640befc58
--- /dev/null
+++ b/static/usage/v9/picker/modal/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-modal {
+ --height: auto;
+
+ align-items: end;
+}
+
+ion-picker {
+ margin-bottom: var(--ion-safe-area-bottom);
+}
+```
diff --git a/static/usage/v9/picker/modal/react/main_tsx.md b/static/usage/v9/picker/modal/react/main_tsx.md
new file mode 100644
index 00000000000..dbf059f8650
--- /dev/null
+++ b/static/usage/v9/picker/modal/react/main_tsx.md
@@ -0,0 +1,53 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import {
+ IonModal,
+ IonToolbar,
+ IonButtons,
+ IonButton,
+ IonPicker,
+ IonPickerColumn,
+ IonPickerColumnOption,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const modal = useRef(null);
+ const [value, setValue] = useState('javascript');
+
+ return (
+ <>
+ Open modal
+ console.log('didDismiss', JSON.stringify(detail))}
+ >
+
+
+ modal.current!.dismiss(null, 'cancel')}>Cancel
+
+
+ modal.current!.dismiss(value, 'confirm')}>Done
+
+
+
+ setValue(detail.value)}>
+
+ --
+
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/picker/modal/vue.md b/static/usage/v9/picker/modal/vue.md
new file mode 100644
index 00000000000..b35a1ff04c0
--- /dev/null
+++ b/static/usage/v9/picker/modal/vue.md
@@ -0,0 +1,62 @@
+```html
+
+
+
+ Open modal
+
+
+
+ Cancel
+
+
+ Done
+
+
+
+
+ --
+ Javascript
+ Typescript
+ Rust
+ C#
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/picker/prefix-suffix/angular/example_component_html.md b/static/usage/v9/picker/prefix-suffix/angular/example_component_html.md
new file mode 100644
index 00000000000..2505b4d1a26
--- /dev/null
+++ b/static/usage/v9/picker/prefix-suffix/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+
+
+ $
+ --
+ 1
+ 2
+ 3
+ 4
+ 5
+ USD
+
+
+```
diff --git a/static/usage/v9/picker/prefix-suffix/angular/example_component_ts.md b/static/usage/v9/picker/prefix-suffix/angular/example_component_ts.md
new file mode 100644
index 00000000000..887370aa403
--- /dev/null
+++ b/static/usage/v9/picker/prefix-suffix/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonPicker, IonPickerColumn, IonPickerColumnOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/picker/prefix-suffix/demo.html b/static/usage/v9/picker/prefix-suffix/demo.html
new file mode 100644
index 00000000000..1e1d6247242
--- /dev/null
+++ b/static/usage/v9/picker/prefix-suffix/demo.html
@@ -0,0 +1,34 @@
+
+
+
+ Picker | Slot
+
+
+
+
+
+ $
+ --
+ 1
+ 2
+ 3
+ 4
+ 5
+ USD
+
+
+
+
+
+
+
diff --git a/static/usage/v9/picker/prefix-suffix/index.md b/static/usage/v9/picker/prefix-suffix/index.md
new file mode 100644
index 00000000000..2a05dcc2706
--- /dev/null
+++ b/static/usage/v9/picker/prefix-suffix/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import react from './react.md';
+import vue from './vue.md';
+
+
+
+ $
+ --
+ 1
+ 2
+ 3
+ 4
+ 5
+ USD
+
+
+```
diff --git a/static/usage/v9/picker/prefix-suffix/react.md b/static/usage/v9/picker/prefix-suffix/react.md
new file mode 100644
index 00000000000..760aa97cddb
--- /dev/null
+++ b/static/usage/v9/picker/prefix-suffix/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ $
+
+ --
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ USD
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/picker/prefix-suffix/vue.md b/static/usage/v9/picker/prefix-suffix/vue.md
new file mode 100644
index 00000000000..b985108fed3
--- /dev/null
+++ b/static/usage/v9/picker/prefix-suffix/vue.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+ $
+ --
+ 1
+ 2
+ 3
+ 4
+ 5
+ USD
+
+
+
+
+
+```
diff --git a/static/usage/v9/picker/theming/css-properties/angular/example_component_css.md b/static/usage/v9/picker/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..1e59648e40e
--- /dev/null
+++ b/static/usage/v9/picker/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,36 @@
+```css
+ion-picker {
+ --highlight-background: var(--ion-color-dark);
+ --highlight-border-radius: 50px;
+
+ --fade-background-rgb: var(--ion-color-light-rgb);
+}
+
+ion-picker-column-option {
+ text-transform: uppercase;
+ background-size: auto auto;
+ background-clip: border-box;
+ background-size: 200% auto;
+ color: #fff;
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: textclip 2s linear infinite;
+}
+
+ion-picker-column-option[value='red'] {
+ background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
+}
+ion-picker-column-option[value='blue'] {
+ background-image: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%);
+}
+ion-picker-column-option[value='green'] {
+ background-image: linear-gradient(-225deg, #11998e 0%, #38ef7d 48%, #40e0d0 100%);
+}
+
+@keyframes textclip {
+ to {
+ background-position: 200% center;
+ }
+}
+```
diff --git a/static/usage/v9/picker/theming/css-properties/angular/example_component_html.md b/static/usage/v9/picker/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..38347003e75
--- /dev/null
+++ b/static/usage/v9/picker/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ --
+ Red
+ Blue
+ Green
+
+
+```
diff --git a/static/usage/v9/picker/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/picker/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..887370aa403
--- /dev/null
+++ b/static/usage/v9/picker/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonPicker, IonPickerColumn, IonPickerColumnOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/picker/theming/css-properties/demo.html b/static/usage/v9/picker/theming/css-properties/demo.html
new file mode 100644
index 00000000000..2fd7347c427
--- /dev/null
+++ b/static/usage/v9/picker/theming/css-properties/demo.html
@@ -0,0 +1,67 @@
+
+
+
+ Picker | CSS Variables
+
+
+
+
+
+ --
+ Red
+ Blue
+ Green
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/picker/theming/css-properties/index.md b/static/usage/v9/picker/theming/css-properties/index.md
new file mode 100644
index 00000000000..8cb98acab73
--- /dev/null
+++ b/static/usage/v9/picker/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.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';
+
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+
+
+ --
+ Red
+ Blue
+ Green
+
+
+```
diff --git a/static/usage/v9/picker/theming/css-properties/react/main_css.md b/static/usage/v9/picker/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..43a136e6b6f
--- /dev/null
+++ b/static/usage/v9/picker/theming/css-properties/react/main_css.md
@@ -0,0 +1,37 @@
+```css
+ion-picker {
+ --highlight-background: var(--ion-color-dark);
+ --highlight-border-radius: 50px;
+
+ --fade-background-rgb: var(--ion-color-light-rgb);
+}
+
+ion-picker-column-option {
+ text-transform: uppercase;
+ background-size: auto auto;
+ background-clip: border-box;
+ background-size: 200% auto;
+ color: #fff;
+ background-clip: text;
+ text-fill-color: transparent;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: textclip 2s linear infinite;
+}
+
+ion-picker-column-option[value='red'] {
+ background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
+}
+ion-picker-column-option[value='blue'] {
+ background-image: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%);
+}
+ion-picker-column-option[value='green'] {
+ background-image: linear-gradient(-225deg, #11998e 0%, #38ef7d 48%, #40e0d0 100%);
+}
+
+@keyframes textclip {
+ to {
+ background-position: 200% center;
+ }
+}
+```
diff --git a/static/usage/v9/picker/theming/css-properties/react/main_tsx.md b/static/usage/v9/picker/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..cf6b93e3851
--- /dev/null
+++ b/static/usage/v9/picker/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ --
+
+ Red
+ Blue
+ Green
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/picker/theming/css-properties/vue.md b/static/usage/v9/picker/theming/css-properties/vue.md
new file mode 100644
index 00000000000..ceb0fa94470
--- /dev/null
+++ b/static/usage/v9/picker/theming/css-properties/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+
+ --
+ Red
+ Blue
+ Green
+
+
+
+
+
+```
diff --git a/static/usage/v9/popover/customization/positioning/angular/example_component_css.md b/static/usage/v9/popover/customization/positioning/angular/example_component_css.md
new file mode 100644
index 00000000000..56a63480d75
--- /dev/null
+++ b/static/usage/v9/popover/customization/positioning/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-popover {
+ --width: 80px;
+}
+
+.container {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ padding: 80px;
+}
+```
diff --git a/static/usage/v9/popover/customization/positioning/angular/example_component_html.md b/static/usage/v9/popover/customization/positioning/angular/example_component_html.md
new file mode 100644
index 00000000000..d911b195f92
--- /dev/null
+++ b/static/usage/v9/popover/customization/positioning/angular/example_component_html.md
@@ -0,0 +1,31 @@
+```html
+
+ Side=Top, Alignment=Center
+
+
+ Hello World!
+
+
+
+ Side=Bottom, Alignment=Start
+
+
+ Hello World!
+
+
+
+ Side=Left, Alignment=Start
+
+
+ Hello World!
+
+
+
+ Side=Right, Alignment=End
+
+
+ Hello World!
+
+
+
+```
diff --git a/static/usage/v9/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v9/popover/customization/positioning/angular/example_component_ts.md
new file mode 100644
index 00000000000..1e16c2b30e9
--- /dev/null
+++ b/static/usage/v9/popover/customization/positioning/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/popover/customization/positioning/demo.html b/static/usage/v9/popover/customization/positioning/demo.html
new file mode 100644
index 00000000000..aca0602e8bf
--- /dev/null
+++ b/static/usage/v9/popover/customization/positioning/demo.html
@@ -0,0 +1,50 @@
+
+
+
+ Popover
+
+
+
+ Side=Top, Alignment=Center
+
+ Hello World!
+
+
+ Side=Bottom, Alignment=Start
+
+ Hello World!
+
+
+ Side=Left, Alignment=Start
+
+ Hello World!
+
+
+ Side=Right, Alignment=End
+
+ Hello World!
+
+
+
+
+
+
diff --git a/static/usage/v9/popover/customization/positioning/index.md b/static/usage/v9/popover/customization/positioning/index.md
new file mode 100644
index 00000000000..7711ae92e6e
--- /dev/null
+++ b/static/usage/v9/popover/customization/positioning/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Side=Top, Alignment=Center
+
+ Hello World!
+
+
+ Side=Bottom, Alignment=Start
+
+ Hello World!
+
+
+ Side=Left, Alignment=Start
+
+ Hello World!
+
+
+ Side=Right, Alignment=End
+
+ Hello World!
+
+
+
+
+```
diff --git a/static/usage/v9/popover/customization/positioning/react/main_css.md b/static/usage/v9/popover/customization/positioning/react/main_css.md
new file mode 100644
index 00000000000..56a63480d75
--- /dev/null
+++ b/static/usage/v9/popover/customization/positioning/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-popover {
+ --width: 80px;
+}
+
+.container {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ padding: 80px;
+}
+```
diff --git a/static/usage/v9/popover/customization/positioning/react/main_tsx.md b/static/usage/v9/popover/customization/positioning/react/main_tsx.md
new file mode 100644
index 00000000000..54235b0f593
--- /dev/null
+++ b/static/usage/v9/popover/customization/positioning/react/main_tsx.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Side=Top, Alignment=Center
+
+ Hello World!
+
+
+ Side=Bottom, Alignment=Start
+
+ Hello World!
+
+
+ Side=Left, Alignment=Start
+
+ Hello World!
+
+
+ Side=Right, Alignment=End
+
+ Hello World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/popover/customization/positioning/vue.md b/static/usage/v9/popover/customization/positioning/vue.md
new file mode 100644
index 00000000000..9627c5bd14f
--- /dev/null
+++ b/static/usage/v9/popover/customization/positioning/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+ Side=Top, Alignment=Center
+
+ Hello World!
+
+
+ Side=Bottom, Alignment=Start
+
+ Hello World!
+
+
+ Side=Left, Alignment=Start
+
+ Hello World!
+
+
+ Side=Right, Alignment=End
+
+ Hello World!
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/popover/customization/sizing/angular/example_component_html.md b/static/usage/v9/popover/customization/sizing/angular/example_component_html.md
new file mode 100644
index 00000000000..ca06883d451
--- /dev/null
+++ b/static/usage/v9/popover/customization/sizing/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+Size=Auto
+
+
+ Hello!
+
+
+
+Size=Cover
+
+
+ Hello!
+
+
+```
diff --git a/static/usage/v9/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v9/popover/customization/sizing/angular/example_component_ts.md
new file mode 100644
index 00000000000..1e16c2b30e9
--- /dev/null
+++ b/static/usage/v9/popover/customization/sizing/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/popover/customization/sizing/demo.html b/static/usage/v9/popover/customization/sizing/demo.html
new file mode 100644
index 00000000000..4876e653120
--- /dev/null
+++ b/static/usage/v9/popover/customization/sizing/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Popover
+
+
+
+ Size=Auto
+
+ Hello!
+
+
+ Size=Cover
+
+ Hello!
+
+
+
+
+
+
diff --git a/static/usage/v9/popover/customization/sizing/index.md b/static/usage/v9/popover/customization/sizing/index.md
new file mode 100644
index 00000000000..ac4b94583b0
--- /dev/null
+++ b/static/usage/v9/popover/customization/sizing/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';
+
+Size=Auto
+
+ Hello!
+
+
+Size=Cover
+
+ Hello!
+
+```
diff --git a/static/usage/v9/popover/customization/sizing/react.md b/static/usage/v9/popover/customization/sizing/react.md
new file mode 100644
index 00000000000..35b60534df6
--- /dev/null
+++ b/static/usage/v9/popover/customization/sizing/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Size=Auto
+
+ Hello!
+
+
+ Size=Cover
+
+ Hello!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/popover/customization/sizing/vue.md b/static/usage/v9/popover/customization/sizing/vue.md
new file mode 100644
index 00000000000..14ca82fb3e9
--- /dev/null
+++ b/static/usage/v9/popover/customization/sizing/vue.md
@@ -0,0 +1,17 @@
+```html
+
+ Size=Auto
+
+ Hello!
+
+
+ Size=Cover
+
+ Hello!
+
+
+
+
+```
diff --git a/static/usage/v9/popover/customization/styling/angular/example_component_html.md b/static/usage/v9/popover/customization/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..03df30e973a
--- /dev/null
+++ b/static/usage/v9/popover/customization/styling/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+Click Me
+
+
+ Hello Styled World!
+
+
+```
diff --git a/static/usage/v9/popover/customization/styling/angular/example_component_ts.md b/static/usage/v9/popover/customization/styling/angular/example_component_ts.md
new file mode 100644
index 00000000000..1e16c2b30e9
--- /dev/null
+++ b/static/usage/v9/popover/customization/styling/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/popover/customization/styling/angular/global_css.md b/static/usage/v9/popover/customization/styling/angular/global_css.md
new file mode 100644
index 00000000000..434a31d24d9
--- /dev/null
+++ b/static/usage/v9/popover/customization/styling/angular/global_css.md
@@ -0,0 +1,17 @@
+```css
+ion-popover {
+ --background: rgba(40, 173, 218, 0.6);
+ --backdrop-opacity: 0.6;
+ --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+ --color: white;
+ --width: 300px;
+}
+
+ion-popover ion-content {
+ --background: rgba(40, 173, 218, 0.6);
+}
+
+ion-popover::part(backdrop) {
+ background-color: rgb(6, 14, 106);
+}
+```
diff --git a/static/usage/v9/popover/customization/styling/demo.html b/static/usage/v9/popover/customization/styling/demo.html
new file mode 100644
index 00000000000..c1555920896
--- /dev/null
+++ b/static/usage/v9/popover/customization/styling/demo.html
@@ -0,0 +1,43 @@
+
+
+
+ Popover
+
+
+
+ Click Me
+
+ Hello Styled World!
+
+
+
+
+
+
diff --git a/static/usage/v9/popover/customization/styling/index.md b/static/usage/v9/popover/customization/styling/index.md
new file mode 100644
index 00000000000..43937cc8aa9
--- /dev/null
+++ b/static/usage/v9/popover/customization/styling/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+Click Me
+
+ Hello Styled World!
+
+
+
+```
diff --git a/static/usage/v9/popover/customization/styling/react/main_css.md b/static/usage/v9/popover/customization/styling/react/main_css.md
new file mode 100644
index 00000000000..434a31d24d9
--- /dev/null
+++ b/static/usage/v9/popover/customization/styling/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-popover {
+ --background: rgba(40, 173, 218, 0.6);
+ --backdrop-opacity: 0.6;
+ --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+ --color: white;
+ --width: 300px;
+}
+
+ion-popover ion-content {
+ --background: rgba(40, 173, 218, 0.6);
+}
+
+ion-popover::part(backdrop) {
+ background-color: rgb(6, 14, 106);
+}
+```
diff --git a/static/usage/v9/popover/customization/styling/react/main_tsx.md b/static/usage/v9/popover/customization/styling/react/main_tsx.md
new file mode 100644
index 00000000000..1a905f8056d
--- /dev/null
+++ b/static/usage/v9/popover/customization/styling/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+ Hello Styled World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/popover/customization/styling/vue.md b/static/usage/v9/popover/customization/styling/vue.md
new file mode 100644
index 00000000000..7cbc7bb145d
--- /dev/null
+++ b/static/usage/v9/popover/customization/styling/vue.md
@@ -0,0 +1,30 @@
+```html
+
+ Click Me
+
+ Hello Styled World!
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/popover/nested/angular/example_component_html.md b/static/usage/v9/popover/nested/angular/example_component_html.md
new file mode 100644
index 00000000000..cdbe68f341f
--- /dev/null
+++ b/static/usage/v9/popover/nested/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+Open Menu
+
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/popover/nested/angular/example_component_ts.md b/static/usage/v9/popover/nested/angular/example_component_ts.md
new file mode 100644
index 00000000000..ee591ce55e3
--- /dev/null
+++ b/static/usage/v9/popover/nested/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonItem, IonList, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/popover/nested/demo.html b/static/usage/v9/popover/nested/demo.html
new file mode 100644
index 00000000000..84417d0d48a
--- /dev/null
+++ b/static/usage/v9/popover/nested/demo.html
@@ -0,0 +1,39 @@
+
+
+
+ Popover
+
+
+
+ Open Menu
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/popover/nested/index.md b/static/usage/v9/popover/nested/index.md
new file mode 100644
index 00000000000..289df4eb234
--- /dev/null
+++ b/static/usage/v9/popover/nested/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';
+
+Open Menu
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+ Nested option
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/popover/nested/react.md b/static/usage/v9/popover/nested/react.md
new file mode 100644
index 00000000000..eb84d67effb
--- /dev/null
+++ b/static/usage/v9/popover/nested/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Open Menu
+
+
+
+
+ Option 1
+
+
+ Option 2
+
+
+ More options...
+
+
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/popover/nested/vue.md b/static/usage/v9/popover/nested/vue.md
new file mode 100644
index 00000000000..bdc5199a0e4
--- /dev/null
+++ b/static/usage/v9/popover/nested/vue.md
@@ -0,0 +1,26 @@
+```html
+
+ Open Menu
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/popover/performance/mount/angular/example_component_html.md b/static/usage/v9/popover/performance/mount/angular/example_component_html.md
new file mode 100644
index 00000000000..b8a696ab948
--- /dev/null
+++ b/static/usage/v9/popover/performance/mount/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+Open Popover
+
+
+ This content was mounted as soon as the popover was created.
+
+
+```
diff --git a/static/usage/v9/popover/performance/mount/angular/example_component_ts.md b/static/usage/v9/popover/performance/mount/angular/example_component_ts.md
new file mode 100644
index 00000000000..1e16c2b30e9
--- /dev/null
+++ b/static/usage/v9/popover/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/popover/performance/mount/demo.html b/static/usage/v9/popover/performance/mount/demo.html
new file mode 100644
index 00000000000..3835634aed8
--- /dev/null
+++ b/static/usage/v9/popover/performance/mount/demo.html
@@ -0,0 +1,25 @@
+
+
+
+ Popover
+
+
+
+ Open Popover
+
+ This content was mounted as soon as the popover was created.
+
+
+
+
+
+
diff --git a/static/usage/v9/popover/performance/mount/index.md b/static/usage/v9/popover/performance/mount/index.md
new file mode 100644
index 00000000000..91410bee326
--- /dev/null
+++ b/static/usage/v9/popover/performance/mount/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';
+
+Open Popover
+
+ This content was mounted as soon as the popover was created.
+
+```
diff --git a/static/usage/v9/popover/performance/mount/react.md b/static/usage/v9/popover/performance/mount/react.md
new file mode 100644
index 00000000000..24e7230d966
--- /dev/null
+++ b/static/usage/v9/popover/performance/mount/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+
+ Open Popover
+
+ This content was mounted as soon as the popover was created.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/popover/performance/mount/vue.md b/static/usage/v9/popover/performance/mount/vue.md
new file mode 100644
index 00000000000..e62f5504e56
--- /dev/null
+++ b/static/usage/v9/popover/performance/mount/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+ Open Popover
+
+ This content was mounted as soon as the popover was created.
+
+
+
+
+
+```
diff --git a/static/usage/v9/popover/presenting/controller/angular/example_component_html.md b/static/usage/v9/popover/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..679b36f5040
--- /dev/null
+++ b/static/usage/v9/popover/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Click Me
+```
diff --git a/static/usage/v9/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v9/popover/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..ed97e19cee7
--- /dev/null
+++ b/static/usage/v9/popover/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, PopoverController } from '@ionic/angular';
+
+import { PopoverComponent } from './popover.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton],
+})
+export class ExampleComponent {
+ constructor(public popoverController: PopoverController) {}
+
+ async presentPopover(e: Event) {
+ const popover = await this.popoverController.create({
+ component: PopoverComponent,
+ event: e,
+ });
+
+ await popover.present();
+
+ const { role } = await popover.onDidDismiss();
+ console.log(`Popover dismissed with role: ${role}`);
+ }
+}
+```
diff --git a/static/usage/v9/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v9/popover/presenting/controller/angular/popover_component_html.md
new file mode 100644
index 00000000000..583a6dea593
--- /dev/null
+++ b/static/usage/v9/popover/presenting/controller/angular/popover_component_html.md
@@ -0,0 +1,3 @@
+```html
+Hello World!
+```
diff --git a/static/usage/v9/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v9/popover/presenting/controller/angular/popover_component_ts.md
new file mode 100644
index 00000000000..49989aeb071
--- /dev/null
+++ b/static/usage/v9/popover/presenting/controller/angular/popover_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-popover',
+ templateUrl: 'popover.component.html',
+ imports: [IonContent],
+})
+export class PopoverComponent {}
+```
diff --git a/static/usage/v9/popover/presenting/controller/demo.html b/static/usage/v9/popover/presenting/controller/demo.html
new file mode 100644
index 00000000000..c3c20b10171
--- /dev/null
+++ b/static/usage/v9/popover/presenting/controller/demo.html
@@ -0,0 +1,52 @@
+
+
+
+ Popover
+
+
+
+ Click Me
+
+
+
+
+
+
+
diff --git a/static/usage/v9/popover/presenting/controller/index.md b/static/usage/v9/popover/presenting/controller/index.md
new file mode 100644
index 00000000000..53dc7133cec
--- /dev/null
+++ b/static/usage/v9/popover/presenting/controller/index.md
@@ -0,0 +1,37 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_popover from './vue/popover_vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_popover_component_html from './angular/popover_component_html.md';
+import angular_popover_component_ts from './angular/popover_component_ts.md';
+
+Click Me
+
+
+```
diff --git a/static/usage/v9/popover/presenting/controller/react.md b/static/usage/v9/popover/presenting/controller/react.md
new file mode 100644
index 00000000000..48043ab57ef
--- /dev/null
+++ b/static/usage/v9/popover/presenting/controller/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, useIonPopover } from '@ionic/react';
+
+const Popover = () => Hello World! ;
+
+function Example() {
+ const [present] = useIonPopover(Popover);
+
+ return (
+
+ present({
+ event: e,
+ onDidDismiss: (e: CustomEvent) => console.log(`Popover dismissed with role: ${e.detail.role}`),
+ })
+ }
+ >
+ Click Me
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/popover/presenting/controller/vue/example_vue.md b/static/usage/v9/popover/presenting/controller/vue/example_vue.md
new file mode 100644
index 00000000000..0bf2dacf698
--- /dev/null
+++ b/static/usage/v9/popover/presenting/controller/vue/example_vue.md
@@ -0,0 +1,21 @@
+```html
+
+ Click Me
+
+
+
+```
diff --git a/static/usage/v9/popover/presenting/controller/vue/popover_vue.md b/static/usage/v9/popover/presenting/controller/vue/popover_vue.md
new file mode 100644
index 00000000000..e945ee01ce3
--- /dev/null
+++ b/static/usage/v9/popover/presenting/controller/vue/popover_vue.md
@@ -0,0 +1,9 @@
+```html
+
+ Hello World!
+
+
+
+```
diff --git a/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_html.md
new file mode 100644
index 00000000000..1d8369f31e2
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+Click Me
+
+
+ Hello World!
+
+
+```
diff --git a/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_ts.md
new file mode 100644
index 00000000000..16ba3a0479c
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {
+ @ViewChild('popover') popover!: HTMLIonPopoverElement;
+
+ isOpen = false;
+
+ presentPopover(e: Event) {
+ this.popover.event = e;
+ this.isOpen = true;
+ }
+}
+```
diff --git a/static/usage/v9/popover/presenting/inline-isopen/demo.html b/static/usage/v9/popover/presenting/inline-isopen/demo.html
new file mode 100644
index 00000000000..cb71301248a
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-isopen/demo.html
@@ -0,0 +1,37 @@
+
+
+
+ Popover
+
+
+
+ Click Me
+
+ Hello World!
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/popover/presenting/inline-isopen/index.md b/static/usage/v9/popover/presenting/inline-isopen/index.md
new file mode 100644
index 00000000000..02f0895a674
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-isopen/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Click Me
+
+ Hello World!
+
+
+
+```
diff --git a/static/usage/v9/popover/presenting/inline-isopen/react.md b/static/usage/v9/popover/presenting/inline-isopen/react.md
new file mode 100644
index 00000000000..1d0b68fd1f5
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-isopen/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+function Example() {
+ const popover = useRef(null);
+ const [popoverOpen, setPopoverOpen] = useState(false);
+
+ const openPopover = (e: any) => {
+ popover.current!.event = e;
+ setPopoverOpen(true);
+ };
+
+ return (
+ <>
+ Click Me
+ setPopoverOpen(false)}>
+ Hello World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/popover/presenting/inline-isopen/vue.md b/static/usage/v9/popover/presenting/inline-isopen/vue.md
new file mode 100644
index 00000000000..0cdf2619e7a
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-isopen/vue.md
@@ -0,0 +1,21 @@
+```html
+
+ Click Me
+
+ Hello World!
+
+
+
+
+```
diff --git a/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_html.md b/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..de7f6d02a6f
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_html.md
@@ -0,0 +1,22 @@
+```html
+Left-Click Me
+
+
+ Hello World!
+
+
+
+
+
+
+ Hello World!
+
+
+
+Hover Over Me
+
+
+ Hello World!
+
+
+```
diff --git a/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_ts.md b/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..1e16c2b30e9
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/popover/presenting/inline-trigger/demo.html b/static/usage/v9/popover/presenting/inline-trigger/demo.html
new file mode 100644
index 00000000000..e46ef091d2b
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-trigger/demo.html
@@ -0,0 +1,35 @@
+
+
+
+ Popover
+
+
+
+ Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+ Hover Over Me
+
+ Hello World!
+
+
+
+
+
+
diff --git a/static/usage/v9/popover/presenting/inline-trigger/index.md b/static/usage/v9/popover/presenting/inline-trigger/index.md
new file mode 100644
index 00000000000..c01d54786b1
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-trigger/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+Hover Over Me
+
+ Hello World!
+
+```
diff --git a/static/usage/v9/popover/presenting/inline-trigger/react.md b/static/usage/v9/popover/presenting/inline-trigger/react.md
new file mode 100644
index 00000000000..93ba97cbd7c
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-trigger/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+ Hover Over Me
+
+ Hello World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/popover/presenting/inline-trigger/vue.md b/static/usage/v9/popover/presenting/inline-trigger/vue.md
new file mode 100644
index 00000000000..0241fdd6904
--- /dev/null
+++ b/static/usage/v9/popover/presenting/inline-trigger/vue.md
@@ -0,0 +1,22 @@
+```html
+
+ Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+ Hover Over Me
+
+ Hello World!
+
+
+
+
+```
diff --git a/static/usage/v9/progress-bar/buffer/angular/example_component_html.md b/static/usage/v9/progress-bar/buffer/angular/example_component_html.md
new file mode 100644
index 00000000000..8ad364be69a
--- /dev/null
+++ b/static/usage/v9/progress-bar/buffer/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Progress Bar
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/progress-bar/buffer/index.md b/static/usage/v9/progress-bar/buffer/index.md
new file mode 100644
index 00000000000..64047a9400d
--- /dev/null
+++ b/static/usage/v9/progress-bar/buffer/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/progress-bar/determinate/angular/example_component_html.md b/static/usage/v9/progress-bar/determinate/angular/example_component_html.md
new file mode 100644
index 00000000000..d246f5403af
--- /dev/null
+++ b/static/usage/v9/progress-bar/determinate/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Progress Bar
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/progress-bar/determinate/index.md b/static/usage/v9/progress-bar/determinate/index.md
new file mode 100644
index 00000000000..5b6b142664e
--- /dev/null
+++ b/static/usage/v9/progress-bar/determinate/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/progress-bar/indeterminate/angular/example_component_html.md b/static/usage/v9/progress-bar/indeterminate/angular/example_component_html.md
new file mode 100644
index 00000000000..f83f9173c39
--- /dev/null
+++ b/static/usage/v9/progress-bar/indeterminate/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Progress Bar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/progress-bar/indeterminate/index.md b/static/usage/v9/progress-bar/indeterminate/index.md
new file mode 100644
index 00000000000..e164bd3710e
--- /dev/null
+++ b/static/usage/v9/progress-bar/indeterminate/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/progress-bar/theming/colors/angular/example_component_html.md b/static/usage/v9/progress-bar/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..71bc3675422
--- /dev/null
+++ b/static/usage/v9/progress-bar/theming/colors/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Progress Bar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/progress-bar/theming/colors/index.md b/static/usage/v9/progress-bar/theming/colors/index.md
new file mode 100644
index 00000000000..cc315fa2a07
--- /dev/null
+++ b/static/usage/v9/progress-bar/theming/colors/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_css.md b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7d5576bdeeb
--- /dev/null
+++ b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-progress-bar {
+ --background: #f3e895;
+ --progress-background: #09c567;
+}
+```
diff --git a/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..a374b2ee72c
--- /dev/null
+++ b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Progress Bar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/progress-bar/theming/css-properties/index.md b/static/usage/v9/progress-bar/theming/css-properties/index.md
new file mode 100644
index 00000000000..544c8b4c739
--- /dev/null
+++ b/static/usage/v9/progress-bar/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..2ccf6f72dd8
--- /dev/null
+++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+ion-progress-bar::part(track) {
+ background: #f3e895;
+}
+
+ion-progress-bar::part(progress) {
+ background: #09c567;
+}
+
+ion-progress-bar::part(stream) {
+ background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+}
+```
diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..a374b2ee72c
--- /dev/null
+++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Progress Bar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..7cfb27b0b7e
--- /dev/null
+++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/alignment/angular/example_component_html.md b/static/usage/v9/radio/alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..51ebedc3c4c
--- /dev/null
+++ b/static/usage/v9/radio/alignment/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+ Aligned to the Start
+
+
+
+
+
+ Aligned to the Center
+
+
+
+```
diff --git a/static/usage/v9/radio/alignment/angular/example_component_ts.md b/static/usage/v9/radio/alignment/angular/example_component_ts.md
new file mode 100644
index 00000000000..f3044cd786b
--- /dev/null
+++ b/static/usage/v9/radio/alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/radio/alignment/demo.html b/static/usage/v9/radio/alignment/demo.html
new file mode 100644
index 00000000000..173204e3a54
--- /dev/null
+++ b/static/usage/v9/radio/alignment/demo.html
@@ -0,0 +1,34 @@
+
+
+
+ Radio
+
+
+
+
+
+
+ Aligned to the Start
+
+
+
+
+
+ Aligned to the Center
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/alignment/index.md b/static/usage/v9/radio/alignment/index.md
new file mode 100644
index 00000000000..c68fc6aab4d
--- /dev/null
+++ b/static/usage/v9/radio/alignment/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Aligned to the Start
+
+
+
+
+
+ Aligned to the Center
+
+
+
+```
diff --git a/static/usage/v9/radio/alignment/react.md b/static/usage/v9/radio/alignment/react.md
new file mode 100644
index 00000000000..f7fcb232aea
--- /dev/null
+++ b/static/usage/v9/radio/alignment/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ Aligned to the Start
+
+
+
+
+
+
+
+ Aligned to the Center
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/alignment/vue.md b/static/usage/v9/radio/alignment/vue.md
new file mode 100644
index 00000000000..1a8d117d68e
--- /dev/null
+++ b/static/usage/v9/radio/alignment/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+ Aligned to the Start
+
+
+
+
+
+ Aligned to the Center
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/basic/angular/example_component_html.md b/static/usage/v9/radio/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..a8caa3c1973
--- /dev/null
+++ b/static/usage/v9/radio/basic/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+ Grapes Strawberries Pineapple Cherries
+
+```
diff --git a/static/usage/v9/radio/basic/angular/example_component_ts.md b/static/usage/v9/radio/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..52b3dc6fef4
--- /dev/null
+++ b/static/usage/v9/radio/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/radio/basic/demo.html b/static/usage/v9/radio/basic/demo.html
new file mode 100644
index 00000000000..093b9202674
--- /dev/null
+++ b/static/usage/v9/radio/basic/demo.html
@@ -0,0 +1,33 @@
+
+
+
+ Radio
+
+
+
+
+ Grapes Strawberries Pineapple Cherries
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/basic/index.md b/static/usage/v9/radio/basic/index.md
new file mode 100644
index 00000000000..6b3a122d9bd
--- /dev/null
+++ b/static/usage/v9/radio/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Grapes Strawberries Pineapple Cherries
+
+```
diff --git a/static/usage/v9/radio/basic/react.md b/static/usage/v9/radio/basic/react.md
new file mode 100644
index 00000000000..7f8cf4e07f4
--- /dev/null
+++ b/static/usage/v9/radio/basic/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Grapes
+ Strawberries
+ Pineapple
+ Cherries
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/basic/vue.md b/static/usage/v9/radio/basic/vue.md
new file mode 100644
index 00000000000..b18ffdf9c6f
--- /dev/null
+++ b/static/usage/v9/radio/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+ Grapes Strawberries Pineapple Cherries
+
+
+
+
+```
diff --git a/static/usage/v9/radio/empty-selection/angular/example_component_html.md b/static/usage/v9/radio/empty-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..61e5c0d4e4b
--- /dev/null
+++ b/static/usage/v9/radio/empty-selection/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+ Dogs Cats Turtles Fish
+```
diff --git a/static/usage/v9/radio/empty-selection/angular/example_component_ts.md b/static/usage/v9/radio/empty-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..52b3dc6fef4
--- /dev/null
+++ b/static/usage/v9/radio/empty-selection/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/radio/empty-selection/demo.html b/static/usage/v9/radio/empty-selection/demo.html
new file mode 100644
index 00000000000..ba31bd2f99f
--- /dev/null
+++ b/static/usage/v9/radio/empty-selection/demo.html
@@ -0,0 +1,27 @@
+
+
+
+ Radio
+
+
+
+
+ Dogs Cats Turtles Fish
+
+
+
+
+
diff --git a/static/usage/v9/radio/empty-selection/index.md b/static/usage/v9/radio/empty-selection/index.md
new file mode 100644
index 00000000000..a20d218c8b8
--- /dev/null
+++ b/static/usage/v9/radio/empty-selection/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Dogs Cats Turtles Fish
+```
diff --git a/static/usage/v9/radio/empty-selection/react.md b/static/usage/v9/radio/empty-selection/react.md
new file mode 100644
index 00000000000..999a230419b
--- /dev/null
+++ b/static/usage/v9/radio/empty-selection/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Dogs
+ Cats
+ Turtles
+ Fish
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/empty-selection/vue.md b/static/usage/v9/radio/empty-selection/vue.md
new file mode 100644
index 00000000000..87294166e1d
--- /dev/null
+++ b/static/usage/v9/radio/empty-selection/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+ Dogs Cats Turtles Fish
+
+
+
+```
diff --git a/static/usage/v9/radio/helper-error/angular/example_component_html.md b/static/usage/v9/radio/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..87b06290e49
--- /dev/null
+++ b/static/usage/v9/radio/helper-error/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+```
diff --git a/static/usage/v9/radio/helper-error/angular/example_component_ts.md b/static/usage/v9/radio/helper-error/angular/example_component_ts.md
new file mode 100644
index 00000000000..369e1bc3325
--- /dev/null
+++ b/static/usage/v9/radio/helper-error/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { IonRadioGroup, IonRadio, IonButton } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ imports: [IonRadioGroup, IonRadio, IonButton, ReactiveFormsModule],
+ templateUrl: './example.component.html',
+ styleUrl: './example.component.css',
+})
+export class ExampleComponent {
+ myForm: FormGroup;
+
+ constructor(private fb: FormBuilder) {
+ this.myForm = this.fb.group({
+ favFruit: ['', Validators.required],
+ });
+ }
+
+ onSubmit() {
+ // Mark the control as touched to trigger the error message.
+ // This is needed if the user submits the form without interacting
+ // with the toggle.
+ this.myForm.get('favFruit')!.markAsTouched();
+ }
+}
+```
diff --git a/static/usage/v9/radio/helper-error/demo.html b/static/usage/v9/radio/helper-error/demo.html
new file mode 100644
index 00000000000..15cdf69bd2f
--- /dev/null
+++ b/static/usage/v9/radio/helper-error/demo.html
@@ -0,0 +1,62 @@
+
+
+
+ Input
+
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/helper-error/index.md b/static/usage/v9/radio/helper-error/index.md
new file mode 100644
index 00000000000..dbed711502e
--- /dev/null
+++ b/static/usage/v9/radio/helper-error/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+(false);
+ const [isValid, setIsValid] = useState();
+
+ const favFruitRef = useRef(null);
+
+ const validateRadioGroup = (event: RadioGroupCustomEvent<{ value: string }>) => {
+ setIsTouched(true);
+ setIsValid(event.detail.value ? true : false);
+ };
+
+ const submit = (event: React.FormEvent) => {
+ event.preventDefault();
+
+ if (favFruitRef.current) {
+ validateRadioGroup({ detail: { value: favFruitRef.current.value } } as RadioGroupCustomEvent<{
+ value: string;
+ }>);
+ }
+ };
+
+ return (
+ <>
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/radio/helper-error/vue.md b/static/usage/v9/radio/helper-error/vue.md
new file mode 100644
index 00000000000..e899a7a5950
--- /dev/null
+++ b/static/usage/v9/radio/helper-error/vue.md
@@ -0,0 +1,40 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/justify/angular/example_component_html.md b/static/usage/v9/radio/justify/angular/example_component_html.md
new file mode 100644
index 00000000000..8ca8e3c568b
--- /dev/null
+++ b/static/usage/v9/radio/justify/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+```
diff --git a/static/usage/v9/radio/justify/angular/example_component_ts.md b/static/usage/v9/radio/justify/angular/example_component_ts.md
new file mode 100644
index 00000000000..f3044cd786b
--- /dev/null
+++ b/static/usage/v9/radio/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/radio/justify/demo.html b/static/usage/v9/radio/justify/demo.html
new file mode 100644
index 00000000000..75ca8653f85
--- /dev/null
+++ b/static/usage/v9/radio/justify/demo.html
@@ -0,0 +1,45 @@
+
+
+
+ Radio
+
+
+
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/justify/index.md b/static/usage/v9/radio/justify/index.md
new file mode 100644
index 00000000000..c2b2d96e7e1
--- /dev/null
+++ b/static/usage/v9/radio/justify/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+```
diff --git a/static/usage/v9/radio/justify/react.md b/static/usage/v9/radio/justify/react.md
new file mode 100644
index 00000000000..0cae0d9191a
--- /dev/null
+++ b/static/usage/v9/radio/justify/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/justify/vue.md b/static/usage/v9/radio/justify/vue.md
new file mode 100644
index 00000000000..e8dbeb82acd
--- /dev/null
+++ b/static/usage/v9/radio/justify/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/label-placement/angular/example_component_html.md b/static/usage/v9/radio/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..c62acb2938a
--- /dev/null
+++ b/static/usage/v9/radio/label-placement/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+
+
+ Stacked Label
+
+```
diff --git a/static/usage/v9/radio/label-placement/angular/example_component_ts.md b/static/usage/v9/radio/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..52b3dc6fef4
--- /dev/null
+++ b/static/usage/v9/radio/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/radio/label-placement/demo.html b/static/usage/v9/radio/label-placement/demo.html
new file mode 100644
index 00000000000..9feca78040f
--- /dev/null
+++ b/static/usage/v9/radio/label-placement/demo.html
@@ -0,0 +1,44 @@
+
+
+
+ Radio
+
+
+
+
+
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+
+
+ Stacked Label
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/label-placement/index.md b/static/usage/v9/radio/label-placement/index.md
new file mode 100644
index 00000000000..202e390ae63
--- /dev/null
+++ b/static/usage/v9/radio/label-placement/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+
+
+ Stacked Label
+
+```
diff --git a/static/usage/v9/radio/label-placement/react.md b/static/usage/v9/radio/label-placement/react.md
new file mode 100644
index 00000000000..42eb433075d
--- /dev/null
+++ b/static/usage/v9/radio/label-placement/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+
+
+
+
+ Stacked Label
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/label-placement/vue.md b/static/usage/v9/radio/label-placement/vue.md
new file mode 100644
index 00000000000..9fd1f5cda97
--- /dev/null
+++ b/static/usage/v9/radio/label-placement/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+
+
+ Stacked Label
+
+
+
+
+```
diff --git a/static/usage/v9/radio/label-wrap/angular/example_component_css.md b/static/usage/v9/radio/label-wrap/angular/example_component_css.md
new file mode 100644
index 00000000000..ec109440a50
--- /dev/null
+++ b/static/usage/v9/radio/label-wrap/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+ion-list {
+ width: 250px;
+}
+
+ion-radio.wrapped::part(label) {
+ white-space: normal;
+}
+```
diff --git a/static/usage/v9/radio/label-wrap/angular/example_component_html.md b/static/usage/v9/radio/label-wrap/angular/example_component_html.md
new file mode 100644
index 00000000000..0837d088fab
--- /dev/null
+++ b/static/usage/v9/radio/label-wrap/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+ Truncated with ellipsis by default
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+ Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+```
diff --git a/static/usage/v9/radio/label-wrap/angular/example_component_ts.md b/static/usage/v9/radio/label-wrap/angular/example_component_ts.md
new file mode 100644
index 00000000000..f3044cd786b
--- /dev/null
+++ b/static/usage/v9/radio/label-wrap/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/radio/label-wrap/demo.html b/static/usage/v9/radio/label-wrap/demo.html
new file mode 100644
index 00000000000..2141ba26a94
--- /dev/null
+++ b/static/usage/v9/radio/label-wrap/demo.html
@@ -0,0 +1,48 @@
+
+
+
+ Radio
+
+
+
+
+
+
+ Truncated with ellipsis by default
+
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
+ Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/label-wrap/index.md b/static/usage/v9/radio/label-wrap/index.md
new file mode 100644
index 00000000000..e5c0c3cb8bf
--- /dev/null
+++ b/static/usage/v9/radio/label-wrap/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Truncated with ellipsis by default
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+ Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/label-wrap/react/main_css.md b/static/usage/v9/radio/label-wrap/react/main_css.md
new file mode 100644
index 00000000000..ec109440a50
--- /dev/null
+++ b/static/usage/v9/radio/label-wrap/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+ion-list {
+ width: 250px;
+}
+
+ion-radio.wrapped::part(label) {
+ white-space: normal;
+}
+```
diff --git a/static/usage/v9/radio/label-wrap/react/main_tsx.md b/static/usage/v9/radio/label-wrap/react/main_tsx.md
new file mode 100644
index 00000000000..25b4d4618dc
--- /dev/null
+++ b/static/usage/v9/radio/label-wrap/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+ Truncated with ellipsis by default
+
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
+ Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/label-wrap/vue.md b/static/usage/v9/radio/label-wrap/vue.md
new file mode 100644
index 00000000000..70510f8787a
--- /dev/null
+++ b/static/usage/v9/radio/label-wrap/vue.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+ Truncated with ellipsis by default
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+ Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/theming/colors/angular/example_component_html.md b/static/usage/v9/radio/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..d3389196bfa
--- /dev/null
+++ b/static/usage/v9/radio/theming/colors/angular/example_component_html.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/theming/colors/angular/example_component_ts.md b/static/usage/v9/radio/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..52b3dc6fef4
--- /dev/null
+++ b/static/usage/v9/radio/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/radio/theming/colors/demo.html b/static/usage/v9/radio/theming/colors/demo.html
new file mode 100644
index 00000000000..7a4604744bb
--- /dev/null
+++ b/static/usage/v9/radio/theming/colors/demo.html
@@ -0,0 +1,48 @@
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/theming/colors/index.md b/static/usage/v9/radio/theming/colors/index.md
new file mode 100644
index 00000000000..0409697e730
--- /dev/null
+++ b/static/usage/v9/radio/theming/colors/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';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/theming/colors/react.md b/static/usage/v9/radio/theming/colors/react.md
new file mode 100644
index 00000000000..cccf60c87da
--- /dev/null
+++ b/static/usage/v9/radio/theming/colors/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/theming/colors/vue.md b/static/usage/v9/radio/theming/colors/vue.md
new file mode 100644
index 00000000000..0e30c02f2e5
--- /dev/null
+++ b/static/usage/v9/radio/theming/colors/vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/theming/css-properties/angular/example_component_css.md b/static/usage/v9/radio/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..fa96171282e
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,21 @@
+```css
+ion-radio {
+ --border-radius: 4px;
+ --inner-border-radius: 4px;
+
+ --color: #ddd;
+ --color-checked: #6815ec;
+}
+
+ion-radio.ios::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/v9/radio/theming/css-properties/angular/example_component_html.md b/static/usage/v9/radio/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31e21f3f19b
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+
+
+```
diff --git a/static/usage/v9/radio/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/radio/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..52b3dc6fef4
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/radio/theming/css-properties/demo.html b/static/usage/v9/radio/theming/css-properties/demo.html
new file mode 100644
index 00000000000..349e869aa18
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-properties/demo.html
@@ -0,0 +1,47 @@
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/theming/css-properties/index.md b/static/usage/v9/radio/theming/css-properties/index.md
new file mode 100644
index 00000000000..fdf93d9b389
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/theming/css-properties/react/main_css.md b/static/usage/v9/radio/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..fa96171282e
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-properties/react/main_css.md
@@ -0,0 +1,21 @@
+```css
+ion-radio {
+ --border-radius: 4px;
+ --inner-border-radius: 4px;
+
+ --color: #ddd;
+ --color-checked: #6815ec;
+}
+
+ion-radio.ios::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/v9/radio/theming/css-properties/react/main_tsx.md b/static/usage/v9/radio/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..2a0c72670a3
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/theming/css-properties/vue.md b/static/usage/v9/radio/theming/css-properties/vue.md
new file mode 100644
index 00000000000..fa35772db41
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-properties/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..ed13071b193
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,32 @@
+```css
+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);
+}
+```
diff --git a/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..31e21f3f19b
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+
+
+```
diff --git a/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 00000000000..52b3dc6fef4
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/radio/theming/css-shadow-parts/demo.html b/static/usage/v9/radio/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..a8412932acf
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-shadow-parts/demo.html
@@ -0,0 +1,58 @@
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/theming/css-shadow-parts/index.md b/static/usage/v9/radio/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..423eb2250e5
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-shadow-parts/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/radio/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..ed13071b193
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,32 @@
+```css
+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);
+}
+```
diff --git a/static/usage/v9/radio/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/radio/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..2a0c72670a3
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/theming/css-shadow-parts/vue.md b/static/usage/v9/radio/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..d6b83eef631
--- /dev/null
+++ b/static/usage/v9/radio/theming/css-shadow-parts/vue.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/using-comparewith/angular/example_component_html.md b/static/usage/v9/radio/using-comparewith/angular/example_component_html.md
new file mode 100644
index 00000000000..e80e73021d7
--- /dev/null
+++ b/static/usage/v9/radio/using-comparewith/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+ @for (food of foods; track food.id) {
+
+ {{ food.name }}
+
+ }
+
+
+```
diff --git a/static/usage/v9/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v9/radio/using-comparewith/angular/example_component_ts.md
new file mode 100644
index 00000000000..4df9095059a
--- /dev/null
+++ b/static/usage/v9/radio/using-comparewith/angular/example_component_ts.md
@@ -0,0 +1,45 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {
+ foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+ ];
+
+ compareWith(o1: Food, o2: Food): boolean {
+ return o1.id === o2.id;
+ }
+
+ handleChange(event: Event): void {
+ const target = event.target as HTMLInputElement;
+ console.log('Current value:', JSON.stringify(target.value));
+ }
+}
+```
diff --git a/static/usage/v9/radio/using-comparewith/demo.html b/static/usage/v9/radio/using-comparewith/demo.html
new file mode 100644
index 00000000000..5babdc3581d
--- /dev/null
+++ b/static/usage/v9/radio/using-comparewith/demo.html
@@ -0,0 +1,67 @@
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/radio/using-comparewith/index.md b/static/usage/v9/radio/using-comparewith/index.md
new file mode 100644
index 00000000000..b37703d02dc
--- /dev/null
+++ b/static/usage/v9/radio/using-comparewith/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/radio/using-comparewith/react.md b/static/usage/v9/radio/using-comparewith/react.md
new file mode 100644
index 00000000000..bbecd62f841
--- /dev/null
+++ b/static/usage/v9/radio/using-comparewith/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+const foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+ return o1.id === o2.id;
+};
+
+function Example() {
+ return (
+
+ console.log('Current value:', JSON.stringify(event.detail.value))}
+ >
+ {foods.map((food) => (
+
+
+ {food.name}
+
+
+ ))}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/radio/using-comparewith/vue.md b/static/usage/v9/radio/using-comparewith/vue.md
new file mode 100644
index 00000000000..d698017d98d
--- /dev/null
+++ b/static/usage/v9/radio/using-comparewith/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+
+
+ {{ food.name }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/range/basic/angular/example_component_html.md b/static/usage/v9/range/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v9/range/basic/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Range
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/basic/index.md b/static/usage/v9/range/basic/index.md
new file mode 100644
index 00000000000..93ca192a852
--- /dev/null
+++ b/static/usage/v9/range/basic/index.md
@@ -0,0 +1,26 @@
+# TODO FW-4608
+
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/range/dual-knobs/angular/example_component_html.md b/static/usage/v9/range/dual-knobs/angular/example_component_html.md
new file mode 100644
index 00000000000..96eb2e59a0e
--- /dev/null
+++ b/static/usage/v9/range/dual-knobs/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Range
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/dual-knobs/index.md b/static/usage/v9/range/dual-knobs/index.md
new file mode 100644
index 00000000000..fd076c02f77
--- /dev/null
+++ b/static/usage/v9/range/dual-knobs/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/range/ion-change-event/angular/example_component_html.md b/static/usage/v9/range/ion-change-event/angular/example_component_html.md
new file mode 100644
index 00000000000..bbcbd120285
--- /dev/null
+++ b/static/usage/v9/range/ion-change-event/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Range
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/ion-change-event/index.md b/static/usage/v9/range/ion-change-event/index.md
new file mode 100644
index 00000000000..25067bc63e9
--- /dev/null
+++ b/static/usage/v9/range/ion-change-event/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';
+
+ console.log('ionChange emitted value: ' + detail.value)}
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/range/ion-change-event/vue.md b/static/usage/v9/range/ion-change-event/vue.md
new file mode 100644
index 00000000000..d9f83a4c2b4
--- /dev/null
+++ b/static/usage/v9/range/ion-change-event/vue.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md b/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md
new file mode 100644
index 00000000000..aa044d03b66
--- /dev/null
+++ b/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+Range
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/ion-knob-move-event/index.md b/static/usage/v9/range/ion-knob-move-event/index.md
new file mode 100644
index 00000000000..7abe6e655c7
--- /dev/null
+++ b/static/usage/v9/range/ion-knob-move-event/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';
+
+ console.log('ionKnobMoveStart:', detail.value)}
+ onIonKnobMoveEnd={({ detail }) => console.log('ionKnobMoveEnd:', detail.value)}
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/range/ion-knob-move-event/vue.md b/static/usage/v9/range/ion-knob-move-event/vue.md
new file mode 100644
index 00000000000..6c74d47b808
--- /dev/null
+++ b/static/usage/v9/range/ion-knob-move-event/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/range/label-slot/angular/example_component_html.md b/static/usage/v9/range/label-slot/angular/example_component_html.md
new file mode 100644
index 00000000000..a1942046521
--- /dev/null
+++ b/static/usage/v9/range/label-slot/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Label with custom HTML
+
+```
diff --git a/static/usage/v9/range/label-slot/angular/example_component_ts.md b/static/usage/v9/range/label-slot/angular/example_component_ts.md
new file mode 100644
index 00000000000..8832fea6720
--- /dev/null
+++ b/static/usage/v9/range/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange, IonText } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonRange, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/range/label-slot/demo.html b/static/usage/v9/range/label-slot/demo.html
new file mode 100644
index 00000000000..c55cd3b0cc5
--- /dev/null
+++ b/static/usage/v9/range/label-slot/demo.html
@@ -0,0 +1,29 @@
+
+
+
+ Range
+
+
+
+
+ Label with custom HTML
+
+
+
+
+
diff --git a/static/usage/v9/range/label-slot/index.md b/static/usage/v9/range/label-slot/index.md
new file mode 100644
index 00000000000..6983e5bc33d
--- /dev/null
+++ b/static/usage/v9/range/label-slot/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Label with custom HTML
+
+```
diff --git a/static/usage/v9/range/label-slot/react.md b/static/usage/v9/range/label-slot/react.md
new file mode 100644
index 00000000000..8a3e4a8a07d
--- /dev/null
+++ b/static/usage/v9/range/label-slot/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonRange, IonText } from '@ionic/react';
+function Example() {
+ return (
+
+
+ Label with custom HTML
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/range/label-slot/vue.md b/static/usage/v9/range/label-slot/vue.md
new file mode 100644
index 00000000000..5d6d579ac74
--- /dev/null
+++ b/static/usage/v9/range/label-slot/vue.md
@@ -0,0 +1,11 @@
+```html
+
+
+ Label with custom HTML
+
+
+
+
+```
diff --git a/static/usage/v9/range/labels/angular/example_component_html.md b/static/usage/v9/range/labels/angular/example_component_html.md
new file mode 100644
index 00000000000..24c92babb74
--- /dev/null
+++ b/static/usage/v9/range/labels/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+Range
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/labels/index.md b/static/usage/v9/range/labels/index.md
new file mode 100644
index 00000000000..099a87f8c7e
--- /dev/null
+++ b/static/usage/v9/range/labels/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/range/no-visible-label/angular/example_component_html.md b/static/usage/v9/range/no-visible-label/angular/example_component_html.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v9/range/no-visible-label/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Range
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/no-visible-label/index.md b/static/usage/v9/range/no-visible-label/index.md
new file mode 100644
index 00000000000..b6edaea741e
--- /dev/null
+++ b/static/usage/v9/range/no-visible-label/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/range/pins/angular/example_component_html.md b/static/usage/v9/range/pins/angular/example_component_html.md
new file mode 100644
index 00000000000..f27f095a636
--- /dev/null
+++ b/static/usage/v9/range/pins/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Range
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/pins/index.md b/static/usage/v9/range/pins/index.md
new file mode 100644
index 00000000000..a928a820c53
--- /dev/null
+++ b/static/usage/v9/range/pins/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+ `${value}%`}> ;
+}
+export default Example;
+```
diff --git a/static/usage/v9/range/pins/vue.md b/static/usage/v9/range/pins/vue.md
new file mode 100644
index 00000000000..19d1146121a
--- /dev/null
+++ b/static/usage/v9/range/pins/vue.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/range/slots/angular/example_component_html.md b/static/usage/v9/range/slots/angular/example_component_html.md
new file mode 100644
index 00000000000..253663f6c6e
--- /dev/null
+++ b/static/usage/v9/range/slots/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+
+
+```
diff --git a/static/usage/v9/range/slots/angular/example_component_ts.md b/static/usage/v9/range/slots/angular/example_component_ts.md
new file mode 100644
index 00000000000..01bd2dc2365
--- /dev/null
+++ b/static/usage/v9/range/slots/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon, IonRange } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { snowOutline, sunnyOutline } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon, IonRange],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ snowOutline, sunnyOutline });
+ }
+}
+```
diff --git a/static/usage/v9/range/slots/demo.html b/static/usage/v9/range/slots/demo.html
new file mode 100644
index 00000000000..c1282a6af00
--- /dev/null
+++ b/static/usage/v9/range/slots/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/slots/index.md b/static/usage/v9/range/slots/index.md
new file mode 100644
index 00000000000..10dabbc5b2c
--- /dev/null
+++ b/static/usage/v9/range/slots/index.md
@@ -0,0 +1,31 @@
+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 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';
+
+
+
+```
diff --git a/static/usage/v9/range/slots/javascript/index_ts.md b/static/usage/v9/range/slots/javascript/index_ts.md
new file mode 100644
index 00000000000..8e885c82ebe
--- /dev/null
+++ b/static/usage/v9/range/slots/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { snowOutline, sunnyOutline } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'snow-outline': snowOutline, 'sunny-outline': sunnyOutline });
+ */
+addIcons({ snowOutline, sunnyOutline });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/range/slots/react.md b/static/usage/v9/range/slots/react.md
new file mode 100644
index 00000000000..36a5228d0a1
--- /dev/null
+++ b/static/usage/v9/range/slots/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonRange, IonIcon } from '@ionic/react';
+import { snowOutline, sunnyOutline } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/range/slots/vue.md b/static/usage/v9/range/slots/vue.md
new file mode 100644
index 00000000000..d54935dc574
--- /dev/null
+++ b/static/usage/v9/range/slots/vue.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/range/snapping-ticks/angular/example_component_html.md b/static/usage/v9/range/snapping-ticks/angular/example_component_html.md
new file mode 100644
index 00000000000..d52f5e4b119
--- /dev/null
+++ b/static/usage/v9/range/snapping-ticks/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Range
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/snapping-ticks/index.md b/static/usage/v9/range/snapping-ticks/index.md
new file mode 100644
index 00000000000..42a47e2368c
--- /dev/null
+++ b/static/usage/v9/range/snapping-ticks/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/range/theming/css-properties/angular/example_component_css.md b/static/usage/v9/range/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..bcc87bbf1b4
--- /dev/null
+++ b/static/usage/v9/range/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-range {
+ --bar-background: #a2d2ff;
+ --bar-background-active: #bde0fe;
+ --bar-height: 8px;
+ --bar-border-radius: 8px;
+ --knob-background: #ffc8dd;
+ --knob-size: 40px;
+ --pin-background: #ffafcc;
+ --pin-color: #fff;
+}
+```
diff --git a/static/usage/v9/range/theming/css-properties/angular/example_component_html.md b/static/usage/v9/range/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..6c9011af30a
--- /dev/null
+++ b/static/usage/v9/range/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Range
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/range/theming/css-properties/index.md b/static/usage/v9/range/theming/css-properties/index.md
new file mode 100644
index 00000000000..9c437655d21
--- /dev/null
+++ b/static/usage/v9/range/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..2c6bf85e09e
--- /dev/null
+++ b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,114 @@
+```css
+/* Shared styles for all ranges */
+ion-range {
+ --knob-size: 34px;
+}
+
+ion-range::part(knob) {
+ background: #fff;
+
+ box-sizing: border-box;
+}
+
+/* Hide the Material Design indicator */
+ion-range::part(knob)::before {
+ display: none;
+}
+
+ion-range::part(pin) {
+ color: #fff;
+ border-radius: 50%;
+}
+
+ion-range::part(tick),
+ion-range::part(tick-active) {
+ height: 8px;
+ top: 17px;
+}
+
+/* Single Knob Range */
+#range-single::part(bar),
+#range-single::part(tick) {
+ background: #bed4ff;
+}
+
+#range-single::part(bar-active),
+#range-single::part(tick-active) {
+ background: #40a2fd;
+}
+
+#range-single::part(knob) {
+ border: 4px solid #40a2fd;
+}
+
+#range-single::part(knob pressed) {
+ background: #bed4ff;
+}
+
+#range-single::part(pin),
+#range-single::part(pin)::before {
+ background: #40a2fd;
+}
+
+/* Dual Knobs (A/B) Range */
+#range-a-b::part(bar-active) {
+ background: #1ea9ca;
+}
+
+#range-a-b::part(knob-a) {
+ border: 4px solid #0f8fd6;
+}
+
+#range-a-b::part(knob-a pressed) {
+ background: #cfeefe;
+}
+
+#range-a-b::part(pin-a),
+#range-a-b::part(pin-a)::before {
+ background: #0f8fd6;
+}
+
+#range-a-b::part(knob-b) {
+ border: 4px solid #2dc2bd;
+}
+
+#range-a-b::part(knob-b pressed) {
+ background: #d4f5f3;
+}
+
+#range-a-b::part(pin-b),
+#range-a-b::part(pin-b)::before {
+ background: #2dc2bd;
+}
+
+/* Dual Knobs (Lower/Upper) Range */
+#range-lower-upper::part(bar-active) {
+ background: linear-gradient(to right, #0059ff 0%, #b77bff 100%);
+}
+
+#range-lower-upper::part(knob-lower) {
+ border: 4px solid #0059ff;
+}
+
+#range-lower-upper::part(knob-lower pressed) {
+ background: #bed4ff;
+}
+
+#range-lower-upper::part(pin-lower),
+#range-lower-upper::part(pin-lower)::before {
+ background: #0059ff;
+}
+
+#range-lower-upper::part(knob-upper) {
+ border: 4px solid #b77bff;
+}
+
+#range-lower-upper::part(knob-upper pressed) {
+ background: #f1e5ff;
+}
+
+#range-lower-upper::part(pin-upper),
+#range-lower-upper::part(pin-upper)::before {
+ background: #b77bff;
+}
+```
diff --git a/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..eaee00e99c6
--- /dev/null
+++ b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,35 @@
+```html
+Single Knob
+Dual Knobs (A/B)
+Dual Knobs (Lower/Upper)
+Range
+
+
+
+
Single Knob
+ Dual Knobs (A/B)
+ Dual Knobs (Lower/Upper)
+
+
+
+
+
+
diff --git a/static/usage/v9/range/theming/css-shadow-parts/index.md b/static/usage/v9/range/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..9da9df59dd7
--- /dev/null
+++ b/static/usage/v9/range/theming/css-shadow-parts/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Single Knob
+Dual Knobs (A/B)
+Dual Knobs (Lower/Upper)
+Single Knob
+ Dual Knobs (A/B)
+ Dual Knobs (Lower/Upper)
+
+ Single Knob
+ Dual Knobs (A/B)
+ Dual Knobs (Lower/Upper)
+
+
+
+```
diff --git a/static/usage/v9/refresher/advanced/angular/example_component_css.md b/static/usage/v9/refresher/advanced/angular/example_component_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/v9/refresher/advanced/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+ --padding-start: 8px;
+}
+
+ion-icon {
+ font-size: 12px;
+ align-self: start;
+ margin: 15px 8px;
+}
+```
diff --git a/static/usage/v9/refresher/advanced/angular/example_component_html.md b/static/usage/v9/refresher/advanced/angular/example_component_html.md
new file mode 100644
index 00000000000..46c550b5f72
--- /dev/null
+++ b/static/usage/v9/refresher/advanced/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ @for (item of items(); track item) {
+
+
+ {{ item.name }}
+ New message from {{ item.name }}
+
+
+ }
+
+
+```
diff --git a/static/usage/v9/refresher/advanced/angular/example_component_ts.md b/static/usage/v9/refresher/advanced/angular/example_component_ts.md
new file mode 100644
index 00000000000..98479a8e528
--- /dev/null
+++ b/static/usage/v9/refresher/advanced/angular/example_component_ts.md
@@ -0,0 +1,95 @@
+```ts
+import { Component, signal } from '@angular/core';
+import {
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { ellipse } from 'ionicons/icons';
+
+interface Item {
+ name: string;
+ unread: boolean;
+}
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+ imports: [
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+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',
+ ];
+ readonly items = signal([]);
+
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ ellipse });
+ }
+
+ ngOnInit() {
+ this.addItems(5);
+ }
+
+ chooseRandomName() {
+ return this.names[Math.floor(Math.random() * this.names.length)];
+ }
+
+ addItems(count: number, unread = false) {
+ const newItems: Item[] = [];
+ for (let i = 0; i < count; i++) {
+ newItems.unshift({
+ name: this.chooseRandomName(),
+ unread: unread,
+ });
+ }
+ this.items.update((items) => [...newItems, ...items]);
+ }
+
+ handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ this.addItems(3, true);
+ event.target.complete();
+ }, 2000);
+ }
+}
+```
diff --git a/static/usage/v9/refresher/advanced/demo.html b/static/usage/v9/refresher/advanced/demo.html
new file mode 100644
index 00000000000..43e2acd0868
--- /dev/null
+++ b/static/usage/v9/refresher/advanced/demo.html
@@ -0,0 +1,97 @@
+
+
+
+ Refresher
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/refresher/advanced/index.md b/static/usage/v9/refresher/advanced/index.md
new file mode 100644
index 00000000000..b5d7baabdc9
--- /dev/null
+++ b/static/usage/v9/refresher/advanced/index.md
@@ -0,0 +1,42 @@
+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/main_tsx.md';
+import react_main_css from './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';
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/refresher/advanced/javascript/index_ts.md b/static/usage/v9/refresher/advanced/javascript/index_ts.md
new file mode 100644
index 00000000000..49796c8ebf1
--- /dev/null
+++ b/static/usage/v9/refresher/advanced/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { ellipse } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to an "ellipse" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'ellipse': ellipse });
+ */
+addIcons({ ellipse });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/refresher/advanced/react/main_css.md b/static/usage/v9/refresher/advanced/react/main_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/v9/refresher/advanced/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+ --padding-start: 8px;
+}
+
+ion-icon {
+ font-size: 12px;
+ align-self: start;
+ margin: 15px 8px;
+}
+```
diff --git a/static/usage/v9/refresher/advanced/react/main_tsx.md b/static/usage/v9/refresher/advanced/react/main_tsx.md
new file mode 100644
index 00000000000..2ddb57ac50a
--- /dev/null
+++ b/static/usage/v9/refresher/advanced/react/main_tsx.md
@@ -0,0 +1,93 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import {
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/react';
+import { ellipse } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ const names = [
+ 'Burt Bear',
+ 'Charlie Cheetah',
+ 'Donald Duck',
+ 'Eva Eagle',
+ 'Ellie Elephant',
+ 'Gino Giraffe',
+ 'Isabella Iguana',
+ 'Karl Kitten',
+ 'Lionel Lion',
+ 'Molly Mouse',
+ 'Paul Puppy',
+ 'Rachel Rabbit',
+ 'Ted Turtle',
+ ];
+ const [items, setItems] = useState<{ name: string; unread: boolean }[]>([]);
+
+ let didInit = false;
+
+ useEffect(() => {
+ if (!didInit) {
+ didInit = true;
+ addItems(5);
+ }
+ }, []);
+
+ function handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ addItems(3, true);
+ event.detail.complete();
+ }, 2000);
+ }
+
+ function chooseRandomName() {
+ return names[Math.floor(Math.random() * names.length)];
+ }
+
+ function addItems(count: number, unread = false) {
+ for (let i = 0; i < count; i++) {
+ setItems((current) => [{ name: chooseRandomName(), unread }, ...current]);
+ }
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ {items.map((item) => (
+
+
+ {item.name}
+ New message from {item.name}
+
+
+ ))}
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/refresher/advanced/vue.md b/static/usage/v9/refresher/advanced/vue.md
new file mode 100644
index 00000000000..9293f8df4e5
--- /dev/null
+++ b/static/usage/v9/refresher/advanced/vue.md
@@ -0,0 +1,91 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ New message from {{ item.name }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/refresher/basic/angular/example_component_html.md b/static/usage/v9/refresher/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f665c1c51a1
--- /dev/null
+++ b/static/usage/v9/refresher/basic/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v9/refresher/basic/angular/example_component_ts.md b/static/usage/v9/refresher/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..b6b531fcaa3
--- /dev/null
+++ b/static/usage/v9/refresher/basic/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonContent,
+ IonHeader,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ }
+}
+```
diff --git a/static/usage/v9/refresher/basic/demo.html b/static/usage/v9/refresher/basic/demo.html
new file mode 100644
index 00000000000..1a5c27fedb7
--- /dev/null
+++ b/static/usage/v9/refresher/basic/demo.html
@@ -0,0 +1,41 @@
+
+
+
+ Refresher
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+
+
diff --git a/static/usage/v9/refresher/basic/index.md b/static/usage/v9/refresher/basic/index.md
new file mode 100644
index 00000000000..554cfc1dc26
--- /dev/null
+++ b/static/usage/v9/refresher/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+```
diff --git a/static/usage/v9/refresher/basic/react.md b/static/usage/v9/refresher/basic/react.md
new file mode 100644
index 00000000000..bcdd53422d8
--- /dev/null
+++ b/static/usage/v9/refresher/basic/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import {
+ IonContent,
+ IonHeader,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/react';
+
+function Example() {
+ function handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/refresher/basic/vue.md b/static/usage/v9/refresher/basic/vue.md
new file mode 100644
index 00000000000..f6669585bfb
--- /dev/null
+++ b/static/usage/v9/refresher/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+```
diff --git a/static/usage/v9/refresher/custom-content/angular/example_component_html.md b/static/usage/v9/refresher/custom-content/angular/example_component_html.md
new file mode 100644
index 00000000000..5f0e0a5171f
--- /dev/null
+++ b/static/usage/v9/refresher/custom-content/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v9/refresher/custom-content/angular/example_component_ts.md b/static/usage/v9/refresher/custom-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..b6b531fcaa3
--- /dev/null
+++ b/static/usage/v9/refresher/custom-content/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonContent,
+ IonHeader,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ }
+}
+```
diff --git a/static/usage/v9/refresher/custom-content/demo.html b/static/usage/v9/refresher/custom-content/demo.html
new file mode 100644
index 00000000000..b1d6fca3437
--- /dev/null
+++ b/static/usage/v9/refresher/custom-content/demo.html
@@ -0,0 +1,47 @@
+
+
+
+ Refresher
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+
+
diff --git a/static/usage/v9/refresher/custom-content/index.md b/static/usage/v9/refresher/custom-content/index.md
new file mode 100644
index 00000000000..45b809a1f32
--- /dev/null
+++ b/static/usage/v9/refresher/custom-content/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+```
diff --git a/static/usage/v9/refresher/custom-content/react.md b/static/usage/v9/refresher/custom-content/react.md
new file mode 100644
index 00000000000..dabe3059aab
--- /dev/null
+++ b/static/usage/v9/refresher/custom-content/react.md
@@ -0,0 +1,46 @@
+```tsx
+import React from 'react';
+import {
+ IonContent,
+ IonHeader,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/react';
+import { chevronDownCircleOutline } from 'ionicons/icons';
+
+function Example() {
+ function handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/refresher/custom-content/vue.md b/static/usage/v9/refresher/custom-content/vue.md
new file mode 100644
index 00000000000..badf54c02b8
--- /dev/null
+++ b/static/usage/v9/refresher/custom-content/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+```
diff --git a/static/usage/v9/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..fbfd63c926a
--- /dev/null
+++ b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,28 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+
+.ion-content-scroll-host::before,
+.ion-content-scroll-host::after {
+ position: absolute;
+
+ width: 1px;
+ height: 1px;
+
+ content: '';
+}
+
+.ion-content-scroll-host::before {
+ bottom: -1px;
+}
+
+.ion-content-scroll-host::after {
+ top: -1px;
+}
+```
diff --git a/static/usage/v9/refresher/custom-scroll-target/angular/example_component_html.md b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..4c0e2cddc16
--- /dev/null
+++ b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v9/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 00000000000..b6b531fcaa3
--- /dev/null
+++ b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonContent,
+ IonHeader,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ }
+}
+```
diff --git a/static/usage/v9/refresher/custom-scroll-target/demo.html b/static/usage/v9/refresher/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..626d30aaf4b
--- /dev/null
+++ b/static/usage/v9/refresher/custom-scroll-target/demo.html
@@ -0,0 +1,72 @@
+
+
+
+ Refresher
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
Pull this content down to trigger the refresh.
+
+
+
+
+
+
diff --git a/static/usage/v9/refresher/custom-scroll-target/index.md b/static/usage/v9/refresher/custom-scroll-target/index.md
new file mode 100644
index 00000000000..168b1407829
--- /dev/null
+++ b/static/usage/v9/refresher/custom-scroll-target/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
Pull this content down to trigger the refresh.
+
+
+
+
+
+```
diff --git a/static/usage/v9/refresher/custom-scroll-target/react/main_css.md b/static/usage/v9/refresher/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..fbfd63c926a
--- /dev/null
+++ b/static/usage/v9/refresher/custom-scroll-target/react/main_css.md
@@ -0,0 +1,28 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+
+.ion-content-scroll-host::before,
+.ion-content-scroll-host::after {
+ position: absolute;
+
+ width: 1px;
+ height: 1px;
+
+ content: '';
+}
+
+.ion-content-scroll-host::before {
+ bottom: -1px;
+}
+
+.ion-content-scroll-host::after {
+ top: -1px;
+}
+```
diff --git a/static/usage/v9/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/v9/refresher/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..0bee7ff5cc3
--- /dev/null
+++ b/static/usage/v9/refresher/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import {
+ IonContent,
+ IonHeader,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ function handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/refresher/custom-scroll-target/vue.md b/static/usage/v9/refresher/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..b2567a741a1
--- /dev/null
+++ b/static/usage/v9/refresher/custom-scroll-target/vue.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
Pull this content down to trigger the refresh.
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/refresher/pull-properties/angular/example_component_html.md b/static/usage/v9/refresher/pull-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..1e5948063b8
--- /dev/null
+++ b/static/usage/v9/refresher/pull-properties/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v9/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v9/refresher/pull-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..b6b531fcaa3
--- /dev/null
+++ b/static/usage/v9/refresher/pull-properties/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonContent,
+ IonHeader,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ }
+}
+```
diff --git a/static/usage/v9/refresher/pull-properties/demo.html b/static/usage/v9/refresher/pull-properties/demo.html
new file mode 100644
index 00000000000..941e844dac5
--- /dev/null
+++ b/static/usage/v9/refresher/pull-properties/demo.html
@@ -0,0 +1,41 @@
+
+
+
+ Refresher
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+
+
diff --git a/static/usage/v9/refresher/pull-properties/index.md b/static/usage/v9/refresher/pull-properties/index.md
new file mode 100644
index 00000000000..1124fd774f1
--- /dev/null
+++ b/static/usage/v9/refresher/pull-properties/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+```
diff --git a/static/usage/v9/refresher/pull-properties/react.md b/static/usage/v9/refresher/pull-properties/react.md
new file mode 100644
index 00000000000..278e50aa34a
--- /dev/null
+++ b/static/usage/v9/refresher/pull-properties/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import {
+ IonContent,
+ IonHeader,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+} from '@ionic/react';
+
+function Example() {
+ function handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/refresher/pull-properties/vue.md b/static/usage/v9/refresher/pull-properties/vue.md
new file mode 100644
index 00000000000..335a0b0f651
--- /dev/null
+++ b/static/usage/v9/refresher/pull-properties/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+```
diff --git a/static/usage/v9/refresher/pull-start-end-events/angular/example_component_html.md b/static/usage/v9/refresher/pull-start-end-events/angular/example_component_html.md
new file mode 100644
index 00000000000..3ee329401af
--- /dev/null
+++ b/static/usage/v9/refresher/pull-start-end-events/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ @for (item of items; track item; let i = $index) {
+
+ {{ item.label }}
+
+ }
+
+
+```
diff --git a/static/usage/v9/refresher/pull-start-end-events/angular/example_component_ts.md b/static/usage/v9/refresher/pull-start-end-events/angular/example_component_ts.md
new file mode 100644
index 00000000000..1fba72b54b0
--- /dev/null
+++ b/static/usage/v9/refresher/pull-start-end-events/angular/example_component_ts.md
@@ -0,0 +1,72 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonCheckbox,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ RefresherCustomEvent,
+ RefresherPullEndCustomEvent,
+} from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonCheckbox,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonRefresher,
+ IonRefresherContent,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ items = [
+ { label: 'Finalize Q1 budget proposal', checked: false, disabled: false },
+ { label: 'Review design mockups', checked: true, disabled: false },
+ { label: 'Sync with engineering on API docs', checked: true, disabled: false },
+ { label: 'Approve PTO requests for March', checked: false, disabled: false },
+ { label: 'Draft monthly newsletter', checked: false, disabled: false },
+ ];
+
+ constructor() {}
+
+ handlePullStart() {
+ console.log('Pull started');
+
+ // Disable the checkboxes when the pull starts
+ this.items.forEach((item) => {
+ item.disabled = true;
+ });
+ }
+
+ handlePullEnd(event: RefresherPullEndCustomEvent) {
+ console.log('Pull ended with reason: "' + event.detail.reason + '"');
+
+ // Enable the checkboxes when the pull ends
+ this.items.forEach((item) => {
+ item.disabled = false;
+ });
+ }
+
+ handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ console.log('Refresh completed');
+ }, 2000);
+ }
+}
+```
diff --git a/static/usage/v9/refresher/pull-start-end-events/demo.html b/static/usage/v9/refresher/pull-start-end-events/demo.html
new file mode 100644
index 00000000000..c65f95214a0
--- /dev/null
+++ b/static/usage/v9/refresher/pull-start-end-events/demo.html
@@ -0,0 +1,82 @@
+
+
+
+ Refresher
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+ Finalize Q1 budget proposal
+
+
+ Review design mockups
+
+
+ Sync with engineering on API docs
+
+
+ Approve PTO requests for March
+
+
+ Draft monthly newsletter
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/refresher/pull-start-end-events/index.md b/static/usage/v9/refresher/pull-start-end-events/index.md
new file mode 100644
index 00000000000..65f7e2fde9e
--- /dev/null
+++ b/static/usage/v9/refresher/pull-start-end-events/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';
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+ Finalize Q1 budget proposal
+
+
+ Review design mockups
+
+
+ Sync with engineering on API docs
+
+
+ Approve PTO requests for March
+
+
+ Draft monthly newsletter
+
+
+
+
+
+```
diff --git a/static/usage/v9/refresher/pull-start-end-events/react.md b/static/usage/v9/refresher/pull-start-end-events/react.md
new file mode 100644
index 00000000000..7278b39be6a
--- /dev/null
+++ b/static/usage/v9/refresher/pull-start-end-events/react.md
@@ -0,0 +1,90 @@
+```tsx
+import React, { useState } from 'react';
+import {
+ IonCheckbox,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonTitle,
+ IonToolbar,
+ IonRefresher,
+ IonRefresherContent,
+ RefresherCustomEvent,
+ RefresherPullEndCustomEvent,
+} from '@ionic/react';
+
+interface TodoItem {
+ label: string;
+ checked: boolean;
+ disabled: boolean;
+}
+
+function Example() {
+ const [items, setItems] = useState([
+ { label: 'Finalize Q1 budget proposal', checked: false, disabled: false },
+ { label: 'Review design mockups', checked: true, disabled: false },
+ { label: 'Sync with engineering on API docs', checked: true, disabled: false },
+ { label: 'Approve PTO requests for March', checked: false, disabled: false },
+ { label: 'Draft monthly newsletter', checked: false, disabled: false },
+ ]);
+
+ function handlePullStart() {
+ console.log('Pull started');
+
+ // Disable the checkboxes when the pull starts
+ setItems((prev) => prev.map((item) => ({ ...item, disabled: true })));
+ }
+
+ function handlePullEnd(event: RefresherPullEndCustomEvent) {
+ console.log('Pull ended with reason: "' + event.detail.reason + '"');
+
+ // Enable the checkboxes when the pull ends
+ setItems((prev) => prev.map((item) => ({ ...item, disabled: false })));
+ }
+
+ function handleRefresh(event: RefresherCustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ console.log('Refresh completed');
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ {items.map((item: TodoItem) => (
+
+ {item.label}
+
+ ))}
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/refresher/pull-start-end-events/vue.md b/static/usage/v9/refresher/pull-start-end-events/vue.md
new file mode 100644
index 00000000000..51590f93722
--- /dev/null
+++ b/static/usage/v9/refresher/pull-start-end-events/vue.md
@@ -0,0 +1,82 @@
+```vue
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/basic/angular/example_component_html.md b/static/usage/v9/reorder/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..8b1294bd101
--- /dev/null
+++ b/static/usage/v9/reorder/basic/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+```
diff --git a/static/usage/v9/reorder/basic/angular/example_component_ts.md b/static/usage/v9/reorder/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..66f52425413
--- /dev/null
+++ b/static/usage/v9/reorder/basic/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
+})
+export class ExampleComponent {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v9/reorder/basic/demo.html b/static/usage/v9/reorder/basic/demo.html
new file mode 100644
index 00000000000..3b2f1777444
--- /dev/null
+++ b/static/usage/v9/reorder/basic/demo.html
@@ -0,0 +1,71 @@
+
+
+
+ Reorder
+
+
+
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/reorder/basic/index.md b/static/usage/v9/reorder/basic/index.md
new file mode 100644
index 00000000000..cd40d61806b
--- /dev/null
+++ b/static/usage/v9/reorder/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/basic/react.md b/static/usage/v9/reorder/basic/react.md
new file mode 100644
index 00000000000..397ebc395d7
--- /dev/null
+++ b/static/usage/v9/reorder/basic/react.md
@@ -0,0 +1,50 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
+
+function Example() {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/reorder/basic/vue.md b/static/usage/v9/reorder/basic/vue.md
new file mode 100644
index 00000000000..3c02f91c370
--- /dev/null
+++ b/static/usage/v9/reorder/basic/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/custom-icon/angular/example_component_html.md b/static/usage/v9/reorder/custom-icon/angular/example_component_html.md
new file mode 100644
index 00000000000..cc6692c862d
--- /dev/null
+++ b/static/usage/v9/reorder/custom-icon/angular/example_component_html.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v9/reorder/custom-icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..bbf0be5f1fa
--- /dev/null
+++ b/static/usage/v9/reorder/custom-icon/angular/example_component_ts.md
@@ -0,0 +1,43 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonReorder,
+ IonReorderGroup,
+ ReorderEndCustomEvent,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { pizza } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ pizza });
+ }
+
+ handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v9/reorder/custom-icon/demo.html b/static/usage/v9/reorder/custom-icon/demo.html
new file mode 100644
index 00000000000..0ecd4984d33
--- /dev/null
+++ b/static/usage/v9/reorder/custom-icon/demo.html
@@ -0,0 +1,81 @@
+
+
+
+ Reorder
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/reorder/custom-icon/index.md b/static/usage/v9/reorder/custom-icon/index.md
new file mode 100644
index 00000000000..ba3218b6b0a
--- /dev/null
+++ b/static/usage/v9/reorder/custom-icon/index.md
@@ -0,0 +1,33 @@
+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 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';
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/custom-icon/javascript/index_html.md b/static/usage/v9/reorder/custom-icon/javascript/index_html.md
new file mode 100644
index 00000000000..8535da7544a
--- /dev/null
+++ b/static/usage/v9/reorder/custom-icon/javascript/index_html.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/custom-icon/javascript/index_ts.md b/static/usage/v9/reorder/custom-icon/javascript/index_ts.md
new file mode 100644
index 00000000000..529ffffa809
--- /dev/null
+++ b/static/usage/v9/reorder/custom-icon/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { pizza } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to a "pizza" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'pizza': pizza });
+ */
+addIcons({ pizza });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/reorder/custom-icon/react.md b/static/usage/v9/reorder/custom-icon/react.md
new file mode 100644
index 00000000000..f5fe620035b
--- /dev/null
+++ b/static/usage/v9/reorder/custom-icon/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
+import { pizza } from 'ionicons/icons';
+
+function Example() {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/reorder/custom-icon/vue.md b/static/usage/v9/reorder/custom-icon/vue.md
new file mode 100644
index 00000000000..e4fbe1bdd2d
--- /dev/null
+++ b/static/usage/v9/reorder/custom-icon/vue.md
@@ -0,0 +1,59 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/custom-scroll-target/angular/example_component_css.md b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v9/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..73fc3967021
--- /dev/null
+++ b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 00000000000..bc129b320eb
--- /dev/null
+++ b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,31 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ ReorderEndCustomEvent,
+ IonContent,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonReorder,
+ IonReorderGroup,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+ imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
+})
+export class ExampleComponent {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v9/reorder/custom-scroll-target/demo.html b/static/usage/v9/reorder/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..149e8963f83
--- /dev/null
+++ b/static/usage/v9/reorder/custom-scroll-target/demo.html
@@ -0,0 +1,84 @@
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/reorder/custom-scroll-target/index.md b/static/usage/v9/reorder/custom-scroll-target/index.md
new file mode 100644
index 00000000000..1d7af407e61
--- /dev/null
+++ b/static/usage/v9/reorder/custom-scroll-target/index.md
@@ -0,0 +1,37 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/custom-scroll-target/react/main_css.md b/static/usage/v9/reorder/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v9/reorder/custom-scroll-target/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v9/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v9/reorder/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..79ef62da9d7
--- /dev/null
+++ b/static/usage/v9/reorder/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,64 @@
+```tsx
+import React from 'react';
+import {
+ IonContent,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonReorder,
+ IonReorderGroup,
+ ReorderEndCustomEvent,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+
+ return (
+
+
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/reorder/custom-scroll-target/vue.md b/static/usage/v9/reorder/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..c12bd5660c1
--- /dev/null
+++ b/static/usage/v9/reorder/custom-scroll-target/vue.md
@@ -0,0 +1,72 @@
+```html
+
+
+
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/reorder-move-event/angular/example_component_html.md b/static/usage/v9/reorder/reorder-move-event/angular/example_component_html.md
new file mode 100644
index 00000000000..02e2dc827ac
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-move-event/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+ @for (item of items; track item; let i = $index) {
+
+ {{ i + 1 }}
+ {{ item }}
+
+ }
+
+
+```
diff --git a/static/usage/v9/reorder/reorder-move-event/angular/example_component_ts.md b/static/usage/v9/reorder/reorder-move-event/angular/example_component_ts.md
new file mode 100644
index 00000000000..85c4e932f5e
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-move-event/angular/example_component_ts.md
@@ -0,0 +1,79 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonItem,
+ IonLabel,
+ IonList,
+ IonReorder,
+ IonReorderGroup,
+ ReorderEndCustomEvent,
+ ReorderMoveCustomEvent,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
+})
+export class ExampleComponent {
+ items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
+
+ handleReorderMove(event: ReorderMoveCustomEvent) {
+ const from = event.detail.from;
+ const to = event.detail.to;
+
+ if (from !== to) {
+ console.log('Dragged from index', from, 'to', to);
+ }
+
+ // Get all items and sort by their current id (item-1, item-2, ...)
+ const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => {
+ const aNum = parseInt(a.id.replace('item-', ''), 10);
+ const bNum = parseInt(b.id.replace('item-', ''), 10);
+ return aNum - bNum;
+ });
+
+ // Dragging down: shift up items between from+1 and to, set dragged to to+1
+ if (from < to) {
+ for (let i = from; i <= to; i++) {
+ const item = itemElements[i];
+ const itemNum = item.querySelector('b');
+ if (itemNum) {
+ if (i === from) {
+ // Dragged item
+ itemNum.textContent = String(to + 1);
+ item.id = `item-${to + 1}`;
+ } else {
+ // Items shift up
+ itemNum.textContent = String(i);
+ item.id = `item-${i}`;
+ }
+ }
+ }
+ // Dragging up: shift down items between to and from-1, set dragged to to+1
+ } else if (from > to) {
+ for (let i = to; i <= from; i++) {
+ const item = itemElements[i];
+ const itemNum = item.querySelector('b');
+ if (itemNum) {
+ if (i === from) {
+ // Dragged item
+ itemNum.textContent = String(to + 1);
+ item.id = `item-${to + 1}`;
+ } else {
+ // Items shift down
+ itemNum.textContent = String(i + 2);
+ item.id = `item-${i + 2}`;
+ }
+ }
+ }
+ }
+ }
+
+ handleReorderEnd(event: ReorderEndCustomEvent) {
+ // Finish the reorder and update the items data
+ this.items = event.detail.complete(this.items);
+ }
+}
+```
diff --git a/static/usage/v9/reorder/reorder-move-event/demo.html b/static/usage/v9/reorder/reorder-move-event/demo.html
new file mode 100644
index 00000000000..2b1c106344b
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-move-event/demo.html
@@ -0,0 +1,116 @@
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/reorder/reorder-move-event/index.md b/static/usage/v9/reorder/reorder-move-event/index.md
new file mode 100644
index 00000000000..7ef67b4523e
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-move-event/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_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/reorder-move-event/react.md b/static/usage/v9/reorder/reorder-move-event/react.md
new file mode 100644
index 00000000000..39a0680728d
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-move-event/react.md
@@ -0,0 +1,92 @@
+```tsx
+import React, { useState } from 'react';
+import {
+ IonItem,
+ IonLabel,
+ IonList,
+ IonReorder,
+ IonReorderGroup,
+ ReorderEndCustomEvent,
+ ReorderMoveCustomEvent,
+} from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState([
+ 'Buy groceries',
+ 'Call the bank',
+ 'Finish project report',
+ 'Book flight tickets',
+ 'Read a book',
+ ]);
+
+ function handleReorderMove(event: ReorderMoveCustomEvent) {
+ const from = event.detail.from;
+ const to = event.detail.to;
+
+ if (from !== to) {
+ console.log('Dragged from index', from, 'to', to);
+ }
+
+ // Get all items and sort by their current id (item-1, item-2, ...)
+ const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => {
+ const aNum = parseInt(a.id.replace('item-', ''), 10);
+ const bNum = parseInt(b.id.replace('item-', ''), 10);
+ return aNum - bNum;
+ });
+
+ // Dragging down: shift up items between from+1 and to, set dragged to to+1
+ if (from < to) {
+ for (let i = from; i <= to; i++) {
+ const item = itemElements[i];
+ const itemNum = item.querySelector('b');
+ if (i === from) {
+ // Dragged item
+ itemNum!.textContent = String(to + 1);
+ item.id = `item-${to + 1}`;
+ } else {
+ // Items shift up
+ itemNum!.textContent = String(i);
+ item.id = `item-${i}`;
+ }
+ }
+ // Dragging up: shift down items between to and from-1, set dragged to to+1
+ } else if (from > to) {
+ for (let i = to; i <= from; i++) {
+ const item = itemElements[i];
+ const itemNum = item.querySelector('b');
+ if (i === from) {
+ // Dragged item
+ itemNum!.textContent = String(to + 1);
+ item.id = `item-${to + 1}`;
+ } else {
+ // Items shift down
+ itemNum!.textContent = String(i + 2);
+ item.id = `item-${i + 2}`;
+ }
+ }
+ }
+ }
+
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
+ // Finish the reorder and update the items data
+ setItems(event.detail.complete(items));
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+ {items.map((item, index) => (
+
+ {index + 1}
+ {item}
+
+ ))}
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/reorder/reorder-move-event/vue.md b/static/usage/v9/reorder/reorder-move-event/vue.md
new file mode 100644
index 00000000000..cd3518e5aac
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-move-event/vue.md
@@ -0,0 +1,81 @@
+```html
+
+
+
+
+
+ {{ index + 1 }}
+ {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_html.md b/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_html.md
new file mode 100644
index 00000000000..7b9be3a150c
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+ @for (item of items; track item; let i = $index) {
+
+ {{ item.label }}
+
+ }
+
+
+```
diff --git a/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_ts.md b/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_ts.md
new file mode 100644
index 00000000000..3dff5b48ba9
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_ts.md
@@ -0,0 +1,62 @@
+```ts
+import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';
+import {
+ ReorderEndCustomEvent,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonReorder,
+ IonReorderGroup,
+ IonIcon,
+} from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { caretDown, ellipse, warning } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, IonIcon],
+})
+export class ExampleComponent {
+ items = [
+ { label: 'Buy groceries', icon: 'warning', color: 'warning' },
+ { label: 'Call the bank', icon: 'warning', color: 'warning' },
+ { label: 'Finish project report', icon: 'ellipse', color: 'light' },
+ { label: 'Book flight tickets', icon: 'ellipse', color: 'light' },
+ { label: 'Read a book', icon: 'caret-down', color: 'secondary' },
+ ];
+
+ @ViewChildren('icon', { read: ElementRef }) icons!: QueryList>;
+
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ caretDown, ellipse, warning });
+ }
+
+ handleReorderStart() {
+ console.log('Reorder started');
+
+ // Hide the icons when the reorder starts
+ this.icons.forEach((icon) => {
+ icon.nativeElement.style.opacity = '0';
+ });
+ }
+
+ handleReorderEnd(event: ReorderEndCustomEvent) {
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Show the icons again
+ this.icons.forEach((icon) => {
+ icon.nativeElement.style.opacity = '1';
+ });
+
+ // Finish the reorder and update the items data
+ this.items = event.detail.complete(this.items);
+ }
+}
+```
diff --git a/static/usage/v9/reorder/reorder-start-end-events/demo.html b/static/usage/v9/reorder/reorder-start-end-events/demo.html
new file mode 100644
index 00000000000..a9bcf896da6
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-start-end-events/demo.html
@@ -0,0 +1,82 @@
+
+
+
+ Reorder
+
+
+
+
+
+
+
+ Buy groceries
+
+
+ Call the bank
+
+
+ Finish project report
+
+
+ Book flight tickets
+
+
+ Read a book
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/reorder/reorder-start-end-events/index.md b/static/usage/v9/reorder/reorder-start-end-events/index.md
new file mode 100644
index 00000000000..194ab4606c1
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-start-end-events/index.md
@@ -0,0 +1,33 @@
+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 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';
+
+
+
+
+
+ Buy groceries
+
+
+ Call the bank
+
+
+ Finish project report
+
+
+ Book flight tickets
+
+
+ Read a book
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/reorder-start-end-events/javascript/index_ts.md b/static/usage/v9/reorder/reorder-start-end-events/javascript/index_ts.md
new file mode 100644
index 00000000000..c9e03106886
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-start-end-events/javascript/index_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { caretDown, ellipse, warning } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons get mapped
+ * to "caret-down", "ellipse", "warning" keys.
+ * Alternatively, developers can do:
+ * addIcons({ 'caret-down': caretDown,
+ * "ellipse": ellipse, "warning": warning });
+ */
+addIcons({ caretDown, ellipse, warning });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/reorder/reorder-start-end-events/react.md b/static/usage/v9/reorder/reorder-start-end-events/react.md
new file mode 100644
index 00000000000..c70462d5b32
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-start-end-events/react.md
@@ -0,0 +1,67 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
+import { caretDown, ellipse, warning } from 'ionicons/icons';
+
+interface TodoItem {
+ label: string;
+ icon: string;
+ color: string;
+}
+
+function Example() {
+ const [items, setItems] = useState([
+ { label: 'Buy groceries', icon: warning, color: 'warning' },
+ { label: 'Call the bank', icon: warning, color: 'warning' },
+ { label: 'Finish project report', icon: ellipse, color: 'light' },
+ { label: 'Book flight tickets', icon: ellipse, color: 'light' },
+ { label: 'Read a book', icon: caretDown, color: 'secondary' },
+ ]);
+ const iconsRef = useRef<(HTMLIonIconElement | null)[]>([]);
+
+ function handleReorderStart() {
+ console.log('Reorder started');
+
+ // Hide the icons when the reorder starts
+ iconsRef.current.forEach((icon) => {
+ if (icon) icon.style.opacity = '0';
+ });
+ }
+
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Show the icons again
+ iconsRef.current.forEach((icon) => {
+ if (icon) icon.style.opacity = '1';
+ });
+
+ // Finish the reorder and update the items data
+ setItems(event.detail.complete(items));
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+ {items.map((item: TodoItem, i: number) => (
+
+ {item.label}
+ {
+ iconsRef.current[i] = el;
+ }}
+ />
+
+ ))}
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/reorder/reorder-start-end-events/vue.md b/static/usage/v9/reorder/reorder-start-end-events/vue.md
new file mode 100644
index 00000000000..0648e09bddc
--- /dev/null
+++ b/static/usage/v9/reorder/reorder-start-end-events/vue.md
@@ -0,0 +1,59 @@
+```html
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v9/reorder/toggling-disabled/angular/example_component_html.md
new file mode 100644
index 00000000000..dbfe175895b
--- /dev/null
+++ b/static/usage/v9/reorder/toggling-disabled/angular/example_component_html.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+ Toggle Reorder
+```
diff --git a/static/usage/v9/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v9/reorder/toggling-disabled/angular/example_component_ts.md
new file mode 100644
index 00000000000..0f11877cfe7
--- /dev/null
+++ b/static/usage/v9/reorder/toggling-disabled/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonButton,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonReorder,
+ IonReorderGroup,
+ ReorderEndCustomEvent,
+} from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
+})
+export class ExampleComponent {
+ public isDisabled = true;
+
+ handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+
+ toggleReorder() {
+ this.isDisabled = !this.isDisabled;
+ }
+}
+```
diff --git a/static/usage/v9/reorder/toggling-disabled/demo.html b/static/usage/v9/reorder/toggling-disabled/demo.html
new file mode 100644
index 00000000000..8aa545d2886
--- /dev/null
+++ b/static/usage/v9/reorder/toggling-disabled/demo.html
@@ -0,0 +1,82 @@
+
+
+
+ Reorder
+
+
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+ Toggle Reorder
+
+
+
+
+
+
+
diff --git a/static/usage/v9/reorder/toggling-disabled/index.md b/static/usage/v9/reorder/toggling-disabled/index.md
new file mode 100644
index 00000000000..ba771dd15eb
--- /dev/null
+++ b/static/usage/v9/reorder/toggling-disabled/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_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+ Toggle Reorder
+
+
+```
diff --git a/static/usage/v9/reorder/toggling-disabled/react.md b/static/usage/v9/reorder/toggling-disabled/react.md
new file mode 100644
index 00000000000..6b5aecaed2a
--- /dev/null
+++ b/static/usage/v9/reorder/toggling-disabled/react.md
@@ -0,0 +1,68 @@
+```tsx
+import React, { useState } from 'react';
+import {
+ IonButton,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonReorder,
+ IonReorderGroup,
+ ReorderEndCustomEvent,
+} from '@ionic/react';
+
+function Example() {
+ const [isDisabled, setIsDisabled] = useState(true);
+
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+
+ function toggleReorder() {
+ setIsDisabled((current) => !current);
+ }
+
+ return (
+ <>
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+ Toggle Reorder
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/reorder/toggling-disabled/vue.md b/static/usage/v9/reorder/toggling-disabled/vue.md
new file mode 100644
index 00000000000..f12e67a2e06
--- /dev/null
+++ b/static/usage/v9/reorder/toggling-disabled/vue.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+ Item 5
+
+
+
+
+
+ Toggle Reorder
+
+
+
+```
diff --git a/static/usage/v9/reorder/updating-data/angular/example_component_html.md b/static/usage/v9/reorder/updating-data/angular/example_component_html.md
new file mode 100644
index 00000000000..6326a17c949
--- /dev/null
+++ b/static/usage/v9/reorder/updating-data/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+ @for (item of items; track item) {
+
+ Item {{ item }}
+
+ }
+
+
+```
diff --git a/static/usage/v9/reorder/updating-data/angular/example_component_ts.md b/static/usage/v9/reorder/updating-data/angular/example_component_ts.md
new file mode 100644
index 00000000000..4d1c351d0b8
--- /dev/null
+++ b/static/usage/v9/reorder/updating-data/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
+})
+export class ExampleComponent {
+ items = [1, 2, 3, 4, 5];
+
+ handleReorderEnd(event: ReorderEndCustomEvent) {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', this.items);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ this.items = event.detail.complete(this.items);
+
+ // After complete is called the items will be in the new order
+ console.log('After complete', this.items);
+ }
+}
+```
diff --git a/static/usage/v9/reorder/updating-data/demo.html b/static/usage/v9/reorder/updating-data/demo.html
new file mode 100644
index 00000000000..ed7390761de
--- /dev/null
+++ b/static/usage/v9/reorder/updating-data/demo.html
@@ -0,0 +1,74 @@
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/reorder/updating-data/index.md b/static/usage/v9/reorder/updating-data/index.md
new file mode 100644
index 00000000000..f62741cedc4
--- /dev/null
+++ b/static/usage/v9/reorder/updating-data/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_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/updating-data/react.md b/static/usage/v9/reorder/updating-data/react.md
new file mode 100644
index 00000000000..36b9049e56a
--- /dev/null
+++ b/static/usage/v9/reorder/updating-data/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState([1, 2, 3, 4, 5]);
+
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', items);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ setItems(event.detail.complete(items));
+
+ // After complete is called the items will be in the new order
+ console.log('After complete', items);
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+ {items.map((item) => (
+
+ Item {item}
+
+ ))}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/reorder/updating-data/vue.md b/static/usage/v9/reorder/updating-data/vue.md
new file mode 100644
index 00000000000..9e7e336485c
--- /dev/null
+++ b/static/usage/v9/reorder/updating-data/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+ Item {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/wrapper/angular/example_component_html.md b/static/usage/v9/reorder/wrapper/angular/example_component_html.md
new file mode 100644
index 00000000000..5abb818e8b3
--- /dev/null
+++ b/static/usage/v9/reorder/wrapper/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/wrapper/angular/example_component_ts.md b/static/usage/v9/reorder/wrapper/angular/example_component_ts.md
new file mode 100644
index 00000000000..66f52425413
--- /dev/null
+++ b/static/usage/v9/reorder/wrapper/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
+})
+export class ExampleComponent {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v9/reorder/wrapper/demo.html b/static/usage/v9/reorder/wrapper/demo.html
new file mode 100644
index 00000000000..afa510ec24f
--- /dev/null
+++ b/static/usage/v9/reorder/wrapper/demo.html
@@ -0,0 +1,76 @@
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/reorder/wrapper/index.md b/static/usage/v9/reorder/wrapper/index.md
new file mode 100644
index 00000000000..64e55cfd4f5
--- /dev/null
+++ b/static/usage/v9/reorder/wrapper/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_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/reorder/wrapper/react.md b/static/usage/v9/reorder/wrapper/react.md
new file mode 100644
index 00000000000..50210964586
--- /dev/null
+++ b/static/usage/v9/reorder/wrapper/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
+
+function Example() {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group.
+ event.detail.complete();
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/reorder/wrapper/vue.md b/static/usage/v9/reorder/wrapper/vue.md
new file mode 100644
index 00000000000..953fd0157dd
--- /dev/null
+++ b/static/usage/v9/reorder/wrapper/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/ripple-effect/basic/angular/example_component_css.md b/static/usage/v9/ripple-effect/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..792bc105ff8
--- /dev/null
+++ b/static/usage/v9/ripple-effect/basic/angular/example_component_css.md
@@ -0,0 +1,43 @@
+```css
+.wrapper {
+ display: flex;
+ flex-wrap: wrap;
+
+ align-items: center;
+ justify-content: space-between;
+ text-align: center;
+
+ height: 300px;
+ width: 300px;
+
+ margin: 0 auto;
+}
+
+b {
+ width: 100%;
+}
+
+.ripple-parent {
+ position: relative;
+ overflow: hidden;
+
+ border: 1px solid #ddd;
+}
+
+.rectangle {
+ width: 300px;
+ height: 150px;
+}
+
+.rounded-rectangle {
+ width: 185px;
+ height: 65px;
+ border-radius: 8px;
+}
+
+.circle {
+ width: 90px;
+ height: 90px;
+ border-radius: 50%;
+}
+```
diff --git a/static/usage/v9/ripple-effect/basic/angular/example_component_html.md b/static/usage/v9/ripple-effect/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f46a434abac
--- /dev/null
+++ b/static/usage/v9/ripple-effect/basic/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
Ripple Effect
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/ripple-effect/basic/index.md b/static/usage/v9/ripple-effect/basic/index.md
new file mode 100644
index 00000000000..0db9f95c528
--- /dev/null
+++ b/static/usage/v9/ripple-effect/basic/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_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';
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/ripple-effect/customizing/angular/example_component_css.md b/static/usage/v9/ripple-effect/customizing/angular/example_component_css.md
new file mode 100644
index 00000000000..521a109d099
--- /dev/null
+++ b/static/usage/v9/ripple-effect/customizing/angular/example_component_css.md
@@ -0,0 +1,44 @@
+```css
+.wrapper {
+ display: flex;
+ flex-wrap: wrap;
+
+ align-items: center;
+ justify-content: space-between;
+ text-align: center;
+
+ height: 170px;
+ width: 400px;
+
+ margin: 0 auto;
+}
+
+b {
+ width: 100%;
+}
+
+.ripple-parent {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ position: relative;
+ overflow: hidden;
+
+ border: 1px solid #ddd;
+
+ user-select: none;
+
+ width: 100%;
+ height: 50px;
+ border-radius: 8px;
+}
+
+.custom-parent {
+ color: #de1e7e;
+}
+
+.custom-ripple {
+ color: #501ace;
+}
+```
diff --git a/static/usage/v9/ripple-effect/customizing/angular/example_component_html.md b/static/usage/v9/ripple-effect/customizing/angular/example_component_html.md
new file mode 100644
index 00000000000..0fa38298eb5
--- /dev/null
+++ b/static/usage/v9/ripple-effect/customizing/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+ Custom Ripple Color
+
+
Ripple Effect
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+ Custom Ripple Color
+
+
+
+
+
+
diff --git a/static/usage/v9/ripple-effect/customizing/index.md b/static/usage/v9/ripple-effect/customizing/index.md
new file mode 100644
index 00000000000..9dc9d289703
--- /dev/null
+++ b/static/usage/v9/ripple-effect/customizing/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+ Custom Ripple Color
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+ Custom Ripple Color
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+ Custom Ripple Color
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/ripple-effect/type/angular/example_component_css.md b/static/usage/v9/ripple-effect/type/angular/example_component_css.md
new file mode 100644
index 00000000000..e76413cf0ff
--- /dev/null
+++ b/static/usage/v9/ripple-effect/type/angular/example_component_css.md
@@ -0,0 +1,44 @@
+```css
+.wrapper {
+ display: flex;
+ flex-wrap: wrap;
+
+ align-items: center;
+ justify-content: space-between;
+ text-align: center;
+
+ height: 170px;
+ width: 400px;
+
+ margin: 0 auto;
+}
+
+b {
+ width: 100%;
+}
+
+.ripple-parent {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ position: relative;
+ overflow: hidden;
+
+ border: 1px solid #ddd;
+
+ user-select: none;
+}
+
+.rounded-rectangle {
+ width: 250px;
+ height: 75px;
+ border-radius: 8px;
+}
+
+.circle {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+}
+```
diff --git a/static/usage/v9/ripple-effect/type/angular/example_component_html.md b/static/usage/v9/ripple-effect/type/angular/example_component_html.md
new file mode 100644
index 00000000000..0e764c2e79a
--- /dev/null
+++ b/static/usage/v9/ripple-effect/type/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+ Unbounded
+
+
Ripple Effect
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+ Unbounded
+
+
+
+
+
+
diff --git a/static/usage/v9/ripple-effect/type/index.md b/static/usage/v9/ripple-effect/type/index.md
new file mode 100644
index 00000000000..33c09796822
--- /dev/null
+++ b/static/usage/v9/ripple-effect/type/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+ Unbounded
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+ Unbounded
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+ Unbounded
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/router/basic/demo.html b/static/usage/v9/router/basic/demo.html
new file mode 100644
index 00000000000..8edf1c1e482
--- /dev/null
+++ b/static/usage/v9/router/basic/demo.html
@@ -0,0 +1,62 @@
+
+
+
+ Router
+
+
+
+
+
+
+
diff --git a/static/usage/v9/router/basic/index.md b/static/usage/v9/router/basic/index.md
new file mode 100644
index 00000000000..35dab1281e3
--- /dev/null
+++ b/static/usage/v9/router/basic/index.md
@@ -0,0 +1,11 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+
+
+
+Router | ion-nav within a Routed Page
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/router/nav-within-page/index.md b/static/usage/v9/router/nav-within-page/index.md
new file mode 100644
index 00000000000..3230e6ae931
--- /dev/null
+++ b/static/usage/v9/router/nav-within-page/index.md
@@ -0,0 +1,11 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+
+
+
+Searchbar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/searchbar/basic/index.md b/static/usage/v9/searchbar/basic/index.md
new file mode 100644
index 00000000000..6fe9334e404
--- /dev/null
+++ b/static/usage/v9/searchbar/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/searchbar/cancel-button/angular/example_component_html.md b/static/usage/v9/searchbar/cancel-button/angular/example_component_html.md
new file mode 100644
index 00000000000..1843708f78b
--- /dev/null
+++ b/static/usage/v9/searchbar/cancel-button/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Searchbar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/searchbar/cancel-button/index.md b/static/usage/v9/searchbar/cancel-button/index.md
new file mode 100644
index 00000000000..f855867e4a9
--- /dev/null
+++ b/static/usage/v9/searchbar/cancel-button/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/searchbar/clear-button/angular/example_component_html.md b/static/usage/v9/searchbar/clear-button/angular/example_component_html.md
new file mode 100644
index 00000000000..fa10e4b90d9
--- /dev/null
+++ b/static/usage/v9/searchbar/clear-button/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+Searchbar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/searchbar/clear-button/index.md b/static/usage/v9/searchbar/clear-button/index.md
new file mode 100644
index 00000000000..3182ba5d4a8
--- /dev/null
+++ b/static/usage/v9/searchbar/clear-button/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/searchbar/debounce/angular/example_component_html.md b/static/usage/v9/searchbar/debounce/angular/example_component_html.md
new file mode 100644
index 00000000000..f0ee9b81eb7
--- /dev/null
+++ b/static/usage/v9/searchbar/debounce/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+ @for (result of results; track result) {
+
+ {{ result }}
+
+ }
+
+```
diff --git a/static/usage/v9/searchbar/debounce/angular/example_component_ts.md b/static/usage/v9/searchbar/debounce/angular/example_component_ts.md
new file mode 100644
index 00000000000..d5daed1d5e6
--- /dev/null
+++ b/static/usage/v9/searchbar/debounce/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonSearchbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList, IonSearchbar],
+})
+export class ExampleComponent {
+ public data = [
+ 'Amsterdam',
+ 'Buenos Aires',
+ 'Cairo',
+ 'Geneva',
+ 'Hong Kong',
+ 'Istanbul',
+ 'London',
+ 'Madrid',
+ 'New York',
+ 'Panama City',
+ ];
+ public results = [...this.data];
+
+ handleInput(event: Event) {
+ const target = event.target as HTMLIonSearchbarElement;
+ const query = target.value?.toLowerCase() || '';
+ this.results = this.data.filter((d) => d.toLowerCase().includes(query));
+ }
+}
+```
diff --git a/static/usage/v9/searchbar/debounce/demo.html b/static/usage/v9/searchbar/debounce/demo.html
new file mode 100644
index 00000000000..72005241fdf
--- /dev/null
+++ b/static/usage/v9/searchbar/debounce/demo.html
@@ -0,0 +1,73 @@
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/searchbar/debounce/index.md b/static/usage/v9/searchbar/debounce/index.md
new file mode 100644
index 00000000000..a7c9ccec9ec
--- /dev/null
+++ b/static/usage/v9/searchbar/debounce/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+ handleInput(event)}>
+
+
+ {results.map((result) => (
+ {result}
+ ))}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/searchbar/debounce/vue.md b/static/usage/v9/searchbar/debounce/vue.md
new file mode 100644
index 00000000000..466df02af5b
--- /dev/null
+++ b/static/usage/v9/searchbar/debounce/vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+ {{ result }}
+
+
+
+
+
+```
diff --git a/static/usage/v9/searchbar/search-icon/angular/example_component_html.md b/static/usage/v9/searchbar/search-icon/angular/example_component_html.md
new file mode 100644
index 00000000000..2a66008d0cc
--- /dev/null
+++ b/static/usage/v9/searchbar/search-icon/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Searchbar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/searchbar/search-icon/index.md b/static/usage/v9/searchbar/search-icon/index.md
new file mode 100644
index 00000000000..d9f69a3b0b3
--- /dev/null
+++ b/static/usage/v9/searchbar/search-icon/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/searchbar/theming/colors/angular/example_component_html.md b/static/usage/v9/searchbar/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..b0f0f2e533f
--- /dev/null
+++ b/static/usage/v9/searchbar/theming/colors/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+Searchbar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/searchbar/theming/colors/index.md b/static/usage/v9/searchbar/theming/colors/index.md
new file mode 100644
index 00000000000..cb99ed090d2
--- /dev/null
+++ b/static/usage/v9/searchbar/theming/colors/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/searchbar/theming/css-properties/angular/example_component_css.md b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..22aa0428b89
--- /dev/null
+++ b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,20 @@
+```css
+/* Scoped components require higher specificity to customize */
+ion-searchbar.custom {
+ --background: #19422d;
+ --color: #fff;
+ --placeholder-color: #fff;
+ --icon-color: #fff;
+ --clear-button-color: #fff;
+
+ --border-radius: 4px;
+}
+
+ion-searchbar.ios.custom {
+ --cancel-button-color: #19422d;
+}
+
+ion-searchbar.md.custom {
+ --cancel-button-color: #fff;
+}
+```
diff --git a/static/usage/v9/searchbar/theming/css-properties/angular/example_component_html.md b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..080217dcc41
--- /dev/null
+++ b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Searchbar
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/searchbar/theming/css-properties/index.md b/static/usage/v9/searchbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..539b28a89d9
--- /dev/null
+++ b/static/usage/v9/searchbar/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment-button/basic/angular/example_component_html.md b/static/usage/v9/segment-button/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..6f3fc0bb9ab
--- /dev/null
+++ b/static/usage/v9/segment-button/basic/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+```
diff --git a/static/usage/v9/segment-button/basic/angular/example_component_ts.md b/static/usage/v9/segment-button/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..bdeb9b73031
--- /dev/null
+++ b/static/usage/v9/segment-button/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/segment-button/basic/demo.html b/static/usage/v9/segment-button/basic/demo.html
new file mode 100644
index 00000000000..5082662f11f
--- /dev/null
+++ b/static/usage/v9/segment-button/basic/demo.html
@@ -0,0 +1,54 @@
+
+
+
+ Segment Button
+
+
+
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+
+
diff --git a/static/usage/v9/segment-button/basic/index.md b/static/usage/v9/segment-button/basic/index.md
new file mode 100644
index 00000000000..62a0067f4b9
--- /dev/null
+++ b/static/usage/v9/segment-button/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+```
diff --git a/static/usage/v9/segment-button/basic/react.md b/static/usage/v9/segment-button/basic/react.md
new file mode 100644
index 00000000000..241242412bf
--- /dev/null
+++ b/static/usage/v9/segment-button/basic/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/segment-button/basic/vue.md b/static/usage/v9/segment-button/basic/vue.md
new file mode 100644
index 00000000000..42db166daca
--- /dev/null
+++ b/static/usage/v9/segment-button/basic/vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment-button/layout/angular/example_component_html.md b/static/usage/v9/segment-button/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..3f634915d9b
--- /dev/null
+++ b/static/usage/v9/segment-button/layout/angular/example_component_html.md
@@ -0,0 +1,73 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+```
diff --git a/static/usage/v9/segment-button/layout/angular/example_component_ts.md b/static/usage/v9/segment-button/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..b652f9d826d
--- /dev/null
+++ b/static/usage/v9/segment-button/layout/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { call, heart, pin } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon, IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ call, heart, pin });
+ }
+}
+```
diff --git a/static/usage/v9/segment-button/layout/demo.html b/static/usage/v9/segment-button/layout/demo.html
new file mode 100644
index 00000000000..3466803b89f
--- /dev/null
+++ b/static/usage/v9/segment-button/layout/demo.html
@@ -0,0 +1,102 @@
+
+
+
+ Segment Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+
+
diff --git a/static/usage/v9/segment-button/layout/index.md b/static/usage/v9/segment-button/layout/index.md
new file mode 100644
index 00000000000..19023bf02a2
--- /dev/null
+++ b/static/usage/v9/segment-button/layout/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+```
diff --git a/static/usage/v9/segment-button/layout/javascript/index_ts.md b/static/usage/v9/segment-button/layout/javascript/index_ts.md
new file mode 100644
index 00000000000..d7694855f73
--- /dev/null
+++ b/static/usage/v9/segment-button/layout/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { call, heart, pin } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'call': call, 'heart': heart, 'pin': pin });
+ */
+addIcons({ call, heart, pin });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/segment-button/layout/react.md b/static/usage/v9/segment-button/layout/react.md
new file mode 100644
index 00000000000..9b6c44ac073
--- /dev/null
+++ b/static/usage/v9/segment-button/layout/react.md
@@ -0,0 +1,84 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+import { call, heart, pin } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/segment-button/layout/vue.md b/static/usage/v9/segment-button/layout/vue.md
new file mode 100644
index 00000000000..3243cda2f5c
--- /dev/null
+++ b/static/usage/v9/segment-button/layout/vue.md
@@ -0,0 +1,80 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+ Call
+
+
+ Heart
+
+
+ Pin
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment-button/theming/css-properties/angular/example_component_css.md b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,19 @@
+```css
+ion-segment-button {
+ --indicator-color: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md {
+ --color: #000;
+ --color-checked: #08a391;
+ --indicator-height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios {
+ --color: #08a391;
+ --color-checked: #fff;
+ --border-radius: 20px;
+}
+```
diff --git a/static/usage/v9/segment-button/theming/css-properties/angular/example_component_html.md b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v9/segment-button/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..bdeb9b73031
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/segment-button/theming/css-properties/demo.html b/static/usage/v9/segment-button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..51ff1da044d
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-properties/demo.html
@@ -0,0 +1,57 @@
+
+
+
+ Segment Button
+
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
diff --git a/static/usage/v9/segment-button/theming/css-properties/index.md b/static/usage/v9/segment-button/theming/css-properties/index.md
new file mode 100644
index 00000000000..6c70c70c3f1
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v9/segment-button/theming/css-properties/react/main_css.md b/static/usage/v9/segment-button/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-properties/react/main_css.md
@@ -0,0 +1,19 @@
+```css
+ion-segment-button {
+ --indicator-color: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md {
+ --color: #000;
+ --color-checked: #08a391;
+ --indicator-height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios {
+ --color: #08a391;
+ --color-checked: #fff;
+ --border-radius: 20px;
+}
+```
diff --git a/static/usage/v9/segment-button/theming/css-properties/react/main_tsx.md b/static/usage/v9/segment-button/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/segment-button/theming/css-properties/vue.md b/static/usage/v9/segment-button/theming/css-properties/vue.md
new file mode 100644
index 00000000000..36ca9019acd
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-properties/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,31 @@
+```css
+ion-segment-button::part(indicator-background) {
+ background: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md::part(native) {
+ color: #000;
+}
+
+.segment-button-checked.md::part(native) {
+ color: #08a391;
+}
+
+ion-segment-button.md::part(indicator-background) {
+ height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios::part(native) {
+ color: #08a391;
+}
+
+.segment-button-checked.ios::part(native) {
+ color: #fff;
+}
+
+ion-segment-button.ios::part(indicator-background) {
+ border-radius: 20px;
+}
+```
diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 00000000000..bdeb9b73031
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v9/segment-button/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..0d255ee0167
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-shadow-parts/demo.html
@@ -0,0 +1,69 @@
+
+
+
+ Segment Button
+
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/index.md b/static/usage/v9/segment-button/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..f973f9cdc0e
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-shadow-parts/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,31 @@
+```css
+ion-segment-button::part(indicator-background) {
+ background: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md::part(native) {
+ color: #000;
+}
+
+.segment-button-checked.md::part(native) {
+ color: #08a391;
+}
+
+ion-segment-button.md::part(indicator-background) {
+ height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios::part(native) {
+ color: #08a391;
+}
+
+.segment-button-checked.ios::part(native) {
+ color: #fff;
+}
+
+ion-segment-button.ios::part(indicator-background) {
+ border-radius: 20px;
+}
+```
diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/vue.md b/static/usage/v9/segment-button/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..bb7b6a013a2
--- /dev/null
+++ b/static/usage/v9/segment-button/theming/css-shadow-parts/vue.md
@@ -0,0 +1,51 @@
+```html
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment/basic/angular/example_component_html.md b/static/usage/v9/segment/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..c497151f125
--- /dev/null
+++ b/static/usage/v9/segment/basic/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v9/segment/basic/angular/example_component_ts.md b/static/usage/v9/segment/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..bdeb9b73031
--- /dev/null
+++ b/static/usage/v9/segment/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/segment/basic/demo.html b/static/usage/v9/segment/basic/demo.html
new file mode 100644
index 00000000000..6173a699e8a
--- /dev/null
+++ b/static/usage/v9/segment/basic/demo.html
@@ -0,0 +1,48 @@
+
+
+
+ Segment
+
+
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+
+
+
+
+
diff --git a/static/usage/v9/segment/basic/index.md b/static/usage/v9/segment/basic/index.md
new file mode 100644
index 00000000000..a2957667e8d
--- /dev/null
+++ b/static/usage/v9/segment/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v9/segment/basic/react.md b/static/usage/v9/segment/basic/react.md
new file mode 100644
index 00000000000..bb5c402112f
--- /dev/null
+++ b/static/usage/v9/segment/basic/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/segment/basic/vue.md b/static/usage/v9/segment/basic/vue.md
new file mode 100644
index 00000000000..b341022a007
--- /dev/null
+++ b/static/usage/v9/segment/basic/vue.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment/scrollable/angular/example_component_html.md b/static/usage/v9/segment/scrollable/angular/example_component_html.md
new file mode 100644
index 00000000000..bbcc03848ec
--- /dev/null
+++ b/static/usage/v9/segment/scrollable/angular/example_component_html.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment/scrollable/angular/example_component_ts.md b/static/usage/v9/segment/scrollable/angular/example_component_ts.md
new file mode 100644
index 00000000000..5ef41a5d6f2
--- /dev/null
+++ b/static/usage/v9/segment/scrollable/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ barbell, basket, call, globe, heart, home, person, pin, star, trash });
+ }
+}
+```
diff --git a/static/usage/v9/segment/scrollable/demo.html b/static/usage/v9/segment/scrollable/demo.html
new file mode 100644
index 00000000000..2e47883b646
--- /dev/null
+++ b/static/usage/v9/segment/scrollable/demo.html
@@ -0,0 +1,64 @@
+
+
+
+ Segment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/segment/scrollable/index.md b/static/usage/v9/segment/scrollable/index.md
new file mode 100644
index 00000000000..fe969ef9e9d
--- /dev/null
+++ b/static/usage/v9/segment/scrollable/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment/scrollable/javascript/index_ts.md b/static/usage/v9/segment/scrollable/javascript/index_ts.md
new file mode 100644
index 00000000000..52fcf877e98
--- /dev/null
+++ b/static/usage/v9/segment/scrollable/javascript/index_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'barbell': barbell, 'basket': basket, 'call': call, 'globe': globe,
+ * 'heart': heart, 'home': home, 'person': person, 'pin': pin, 'star': star, 'trash': trash });
+ */
+addIcons({ barbell, basket, call, globe, heart, home, person, pin, star, trash });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/segment/scrollable/react.md b/static/usage/v9/segment/scrollable/react.md
new file mode 100644
index 00000000000..61d304989bb
--- /dev/null
+++ b/static/usage/v9/segment/scrollable/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/react';
+import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/segment/scrollable/vue.md b/static/usage/v9/segment/scrollable/vue.md
new file mode 100644
index 00000000000..92114db927e
--- /dev/null
+++ b/static/usage/v9/segment/scrollable/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment/swipeable/angular/example_component_css.md b/static/usage/v9/segment/swipeable/angular/example_component_css.md
new file mode 100644
index 00000000000..dd13ba75999
--- /dev/null
+++ b/static/usage/v9/segment/swipeable/angular/example_component_css.md
@@ -0,0 +1,20 @@
+```css
+ion-segment-view {
+ height: 150px;
+}
+
+ion-segment-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+ion-segment-content:nth-of-type(1) {
+ background: lightpink;
+}
+ion-segment-content:nth-of-type(2) {
+ background: lightblue;
+}
+ion-segment-content:nth-of-type(3) {
+ background: lightgreen;
+}
+```
diff --git a/static/usage/v9/segment/swipeable/angular/example_component_html.md b/static/usage/v9/segment/swipeable/angular/example_component_html.md
new file mode 100644
index 00000000000..0d372f239c5
--- /dev/null
+++ b/static/usage/v9/segment/swipeable/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+
+ First
+
+
+ Second
+
+
+ Third
+
+
+
+ First
+ Second
+ Third
+
+```
diff --git a/static/usage/v9/segment/swipeable/angular/example_component_ts.md b/static/usage/v9/segment/swipeable/angular/example_component_ts.md
new file mode 100644
index 00000000000..bf20b5afee4
--- /dev/null
+++ b/static/usage/v9/segment/swipeable/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/segment/swipeable/demo.html b/static/usage/v9/segment/swipeable/demo.html
new file mode 100644
index 00000000000..1e4fde4d117
--- /dev/null
+++ b/static/usage/v9/segment/swipeable/demo.html
@@ -0,0 +1,56 @@
+
+
+
+ Segment - Swipeable
+
+
+
+
+ First
+
+
+ Second
+
+
+ Third
+
+
+
+ First
+ Second
+ Third
+
+
+
+
+
diff --git a/static/usage/v9/segment/swipeable/index.md b/static/usage/v9/segment/swipeable/index.md
new file mode 100644
index 00000000000..c4ebb83e29c
--- /dev/null
+++ b/static/usage/v9/segment/swipeable/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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ First
+
+
+ Second
+
+
+ Third
+
+
+
+ First
+ Second
+ Third
+
+
+
+```
diff --git a/static/usage/v9/segment/swipeable/react/main_css.md b/static/usage/v9/segment/swipeable/react/main_css.md
new file mode 100644
index 00000000000..dd13ba75999
--- /dev/null
+++ b/static/usage/v9/segment/swipeable/react/main_css.md
@@ -0,0 +1,20 @@
+```css
+ion-segment-view {
+ height: 150px;
+}
+
+ion-segment-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+ion-segment-content:nth-of-type(1) {
+ background: lightpink;
+}
+ion-segment-content:nth-of-type(2) {
+ background: lightblue;
+}
+ion-segment-content:nth-of-type(3) {
+ background: lightgreen;
+}
+```
diff --git a/static/usage/v9/segment/swipeable/react/main_tsx.md b/static/usage/v9/segment/swipeable/react/main_tsx.md
new file mode 100644
index 00000000000..e571d9c793e
--- /dev/null
+++ b/static/usage/v9/segment/swipeable/react/main_tsx.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ First
+
+
+ Second
+
+
+ Third
+
+
+
+ First
+ Second
+ Third
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/segment/swipeable/vue.md b/static/usage/v9/segment/swipeable/vue.md
new file mode 100644
index 00000000000..850d5d7f011
--- /dev/null
+++ b/static/usage/v9/segment/swipeable/vue.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+ First
+
+
+ Second
+
+
+ Third
+
+
+
+ First
+ Second
+ Third
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment/theming/colors/angular/example_component_html.md b/static/usage/v9/segment/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..4787acc7ba3
--- /dev/null
+++ b/static/usage/v9/segment/theming/colors/angular/example_component_html.md
@@ -0,0 +1,82 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v9/segment/theming/colors/angular/example_component_ts.md b/static/usage/v9/segment/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..bdeb9b73031
--- /dev/null
+++ b/static/usage/v9/segment/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/segment/theming/colors/demo.html b/static/usage/v9/segment/theming/colors/demo.html
new file mode 100644
index 00000000000..8d0d6e5ce5c
--- /dev/null
+++ b/static/usage/v9/segment/theming/colors/demo.html
@@ -0,0 +1,111 @@
+
+
+
+ Segment
+
+
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+
+
+
+
+
diff --git a/static/usage/v9/segment/theming/colors/index.md b/static/usage/v9/segment/theming/colors/index.md
new file mode 100644
index 00000000000..2cef5054bcf
--- /dev/null
+++ b/static/usage/v9/segment/theming/colors/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';
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v9/segment/theming/colors/react.md b/static/usage/v9/segment/theming/colors/react.md
new file mode 100644
index 00000000000..81c799bbbec
--- /dev/null
+++ b/static/usage/v9/segment/theming/colors/react.md
@@ -0,0 +1,92 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/segment/theming/colors/vue.md b/static/usage/v9/segment/theming/colors/vue.md
new file mode 100644
index 00000000000..9c4822fdb2c
--- /dev/null
+++ b/static/usage/v9/segment/theming/colors/vue.md
@@ -0,0 +1,88 @@
+```html
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+
+
+
+```
diff --git a/static/usage/v9/segment/theming/css-properties/angular/example_component_css.md b/static/usage/v9/segment/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/v9/segment/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+ --background: #54dc98;
+}
+```
diff --git a/static/usage/v9/segment/theming/css-properties/angular/example_component_html.md b/static/usage/v9/segment/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..01aac10305d
--- /dev/null
+++ b/static/usage/v9/segment/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Custom
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v9/segment/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/segment/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..bdeb9b73031
--- /dev/null
+++ b/static/usage/v9/segment/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/segment/theming/css-properties/demo.html b/static/usage/v9/segment/theming/css-properties/demo.html
new file mode 100644
index 00000000000..52905adb687
--- /dev/null
+++ b/static/usage/v9/segment/theming/css-properties/demo.html
@@ -0,0 +1,40 @@
+
+
+
+ Note
+
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+
+
+
+
+
diff --git a/static/usage/v9/segment/theming/css-properties/index.md b/static/usage/v9/segment/theming/css-properties/index.md
new file mode 100644
index 00000000000..aa4867250ad
--- /dev/null
+++ b/static/usage/v9/segment/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Custom
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v9/segment/theming/css-properties/react/main_css.md b/static/usage/v9/segment/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/v9/segment/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+ --background: #54dc98;
+}
+```
diff --git a/static/usage/v9/segment/theming/css-properties/react/main_tsx.md b/static/usage/v9/segment/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a7e9dc7e0f5
--- /dev/null
+++ b/static/usage/v9/segment/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Custom
+
+
+ Segment
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/segment/theming/css-properties/vue.md b/static/usage/v9/segment/theming/css-properties/vue.md
new file mode 100644
index 00000000000..161a8b89420
--- /dev/null
+++ b/static/usage/v9/segment/theming/css-properties/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ Custom
+
+
+ Segment
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/basic/multiple-selection/angular/example_component_html.md b/static/usage/v9/select/basic/multiple-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..e65d1ace014
--- /dev/null
+++ b/static/usage/v9/select/basic/multiple-selection/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/basic/multiple-selection/angular/example_component_ts.md b/static/usage/v9/select/basic/multiple-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..14297fc18d4
--- /dev/null
+++ b/static/usage/v9/select/basic/multiple-selection/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/basic/multiple-selection/demo.html b/static/usage/v9/select/basic/multiple-selection/demo.html
new file mode 100644
index 00000000000..b95ba95efae
--- /dev/null
+++ b/static/usage/v9/select/basic/multiple-selection/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Select - Multiple Selection
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/basic/multiple-selection/index.md b/static/usage/v9/select/basic/multiple-selection/index.md
new file mode 100644
index 00000000000..9850001f2af
--- /dev/null
+++ b/static/usage/v9/select/basic/multiple-selection/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/basic/multiple-selection/react.md b/static/usage/v9/select/basic/multiple-selection/react.md
new file mode 100644
index 00000000000..4533409e292
--- /dev/null
+++ b/static/usage/v9/select/basic/multiple-selection/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/basic/multiple-selection/vue.md b/static/usage/v9/select/basic/multiple-selection/vue.md
new file mode 100644
index 00000000000..08ea8e968c4
--- /dev/null
+++ b/static/usage/v9/select/basic/multiple-selection/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_html.md
new file mode 100644
index 00000000000..eb02be61202
--- /dev/null
+++ b/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_ts.md
new file mode 100644
index 00000000000..e0602c543a3
--- /dev/null
+++ b/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+ handleChange(event: CustomEvent) {
+ console.log('ionChange fired with value: ' + event.detail.value);
+ }
+
+ handleCancel() {
+ console.log('ionCancel fired');
+ }
+
+ handleDismiss() {
+ console.log('ionDismiss fired');
+ }
+}
+```
diff --git a/static/usage/v9/select/basic/responding-to-interaction/demo.html b/static/usage/v9/select/basic/responding-to-interaction/demo.html
new file mode 100644
index 00000000000..ca555896f32
--- /dev/null
+++ b/static/usage/v9/select/basic/responding-to-interaction/demo.html
@@ -0,0 +1,46 @@
+
+
+
+ Select - Responding to Interaction
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/basic/responding-to-interaction/index.md b/static/usage/v9/select/basic/responding-to-interaction/index.md
new file mode 100644
index 00000000000..393bf2a563f
--- /dev/null
+++ b/static/usage/v9/select/basic/responding-to-interaction/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';
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/basic/responding-to-interaction/react.md b/static/usage/v9/select/basic/responding-to-interaction/react.md
new file mode 100644
index 00000000000..f730bf4c69a
--- /dev/null
+++ b/static/usage/v9/select/basic/responding-to-interaction/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ console.log(`ionChange fired with value: ${e.detail.value}`)}
+ onIonCancel={() => console.log('ionCancel fired')}
+ onIonDismiss={() => console.log('ionDismiss fired')}
+ >
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/select/basic/responding-to-interaction/vue.md b/static/usage/v9/select/basic/responding-to-interaction/vue.md
new file mode 100644
index 00000000000..bfc4e339b43
--- /dev/null
+++ b/static/usage/v9/select/basic/responding-to-interaction/vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/basic/single-selection/angular/example_component_html.md b/static/usage/v9/select/basic/single-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..9c587d71a67
--- /dev/null
+++ b/static/usage/v9/select/basic/single-selection/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v9/select/basic/single-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..14297fc18d4
--- /dev/null
+++ b/static/usage/v9/select/basic/single-selection/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/basic/single-selection/demo.html b/static/usage/v9/select/basic/single-selection/demo.html
new file mode 100644
index 00000000000..1b3cfede270
--- /dev/null
+++ b/static/usage/v9/select/basic/single-selection/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Select - Single Selection
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/basic/single-selection/index.md b/static/usage/v9/select/basic/single-selection/index.md
new file mode 100644
index 00000000000..1f7e4ec0d19
--- /dev/null
+++ b/static/usage/v9/select/basic/single-selection/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/basic/single-selection/react.md b/static/usage/v9/select/basic/single-selection/react.md
new file mode 100644
index 00000000000..d30a1dbe40b
--- /dev/null
+++ b/static/usage/v9/select/basic/single-selection/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/basic/single-selection/vue.md b/static/usage/v9/select/basic/single-selection/vue.md
new file mode 100644
index 00000000000..551fbffeb48
--- /dev/null
+++ b/static/usage/v9/select/basic/single-selection/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/customization/button-text/angular/example_component_html.md b/static/usage/v9/select/customization/button-text/angular/example_component_html.md
new file mode 100644
index 00000000000..3d1ab2ab3a1
--- /dev/null
+++ b/static/usage/v9/select/customization/button-text/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/customization/button-text/angular/example_component_ts.md b/static/usage/v9/select/customization/button-text/angular/example_component_ts.md
new file mode 100644
index 00000000000..14297fc18d4
--- /dev/null
+++ b/static/usage/v9/select/customization/button-text/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/customization/button-text/demo.html b/static/usage/v9/select/customization/button-text/demo.html
new file mode 100644
index 00000000000..89ce1e8355a
--- /dev/null
+++ b/static/usage/v9/select/customization/button-text/demo.html
@@ -0,0 +1,47 @@
+
+
+
+ Select - Button Text
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/customization/button-text/index.md b/static/usage/v9/select/customization/button-text/index.md
new file mode 100644
index 00000000000..15c42a5f538
--- /dev/null
+++ b/static/usage/v9/select/customization/button-text/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';
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/customization/button-text/react.md b/static/usage/v9/select/customization/button-text/react.md
new file mode 100644
index 00000000000..94bf337191c
--- /dev/null
+++ b/static/usage/v9/select/customization/button-text/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/customization/button-text/vue.md b/static/usage/v9/select/customization/button-text/vue.md
new file mode 100644
index 00000000000..2a7b1109a11
--- /dev/null
+++ b/static/usage/v9/select/customization/button-text/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_html.md b/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_html.md
new file mode 100644
index 00000000000..429435daa6a
--- /dev/null
+++ b/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_ts.md
new file mode 100644
index 00000000000..03ec018576e
--- /dev/null
+++ b/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { add, remove } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ add, remove });
+ }
+}
+```
diff --git a/static/usage/v9/select/customization/custom-toggle-icons/demo.html b/static/usage/v9/select/customization/custom-toggle-icons/demo.html
new file mode 100644
index 00000000000..18ea9a45b47
--- /dev/null
+++ b/static/usage/v9/select/customization/custom-toggle-icons/demo.html
@@ -0,0 +1,36 @@
+
+
+
+ Select - Custom Toggle Icons
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/customization/custom-toggle-icons/index.md b/static/usage/v9/select/customization/custom-toggle-icons/index.md
new file mode 100644
index 00000000000..9df69e2e508
--- /dev/null
+++ b/static/usage/v9/select/customization/custom-toggle-icons/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';
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/customization/custom-toggle-icons/react.md b/static/usage/v9/select/customization/custom-toggle-icons/react.md
new file mode 100644
index 00000000000..c7358752605
--- /dev/null
+++ b/static/usage/v9/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 (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/customization/custom-toggle-icons/vue.md b/static/usage/v9/select/customization/custom-toggle-icons/vue.md
new file mode 100644
index 00000000000..6f0793d5496
--- /dev/null
+++ b/static/usage/v9/select/customization/custom-toggle-icons/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_css.md b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_css.md
new file mode 100644
index 00000000000..b031a2d4851
--- /dev/null
+++ b/static/usage/v9/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/v9/select/customization/icon-flip-behavior/angular/example_component_html.md b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_html.md
new file mode 100644
index 00000000000..5f40703296c
--- /dev/null
+++ b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_ts.md
new file mode 100644
index 00000000000..5bb366e4ae0
--- /dev/null
+++ b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { caretDownSharp } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ caretDownSharp });
+ }
+}
+```
diff --git a/static/usage/v9/select/customization/icon-flip-behavior/demo.html b/static/usage/v9/select/customization/icon-flip-behavior/demo.html
new file mode 100644
index 00000000000..2e883c680dc
--- /dev/null
+++ b/static/usage/v9/select/customization/icon-flip-behavior/demo.html
@@ -0,0 +1,63 @@
+
+
+
+ Select - Icon Flip Behavior
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/customization/icon-flip-behavior/index.md b/static/usage/v9/select/customization/icon-flip-behavior/index.md
new file mode 100644
index 00000000000..2d5fa1f0b91
--- /dev/null
+++ b/static/usage/v9/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';
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/customization/icon-flip-behavior/react/main_css.md b/static/usage/v9/select/customization/icon-flip-behavior/react/main_css.md
new file mode 100644
index 00000000000..b031a2d4851
--- /dev/null
+++ b/static/usage/v9/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/v9/select/customization/icon-flip-behavior/react/main_tsx.md b/static/usage/v9/select/customization/icon-flip-behavior/react/main_tsx.md
new file mode 100644
index 00000000000..e7b146efcee
--- /dev/null
+++ b/static/usage/v9/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 (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/customization/icon-flip-behavior/vue.md b/static/usage/v9/select/customization/icon-flip-behavior/vue.md
new file mode 100644
index 00000000000..3234c0351f7
--- /dev/null
+++ b/static/usage/v9/select/customization/icon-flip-behavior/vue.md
@@ -0,0 +1,51 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/customization/interface-options/angular/example_component_html.md b/static/usage/v9/select/customization/interface-options/angular/example_component_html.md
new file mode 100644
index 00000000000..34316637911
--- /dev/null
+++ b/static/usage/v9/select/customization/interface-options/angular/example_component_html.md
@@ -0,0 +1,40 @@
+```html
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+
+
+ Reese's
+ Snickers
+ Twix
+
+
+
+```
diff --git a/static/usage/v9/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v9/select/customization/interface-options/angular/example_component_ts.md
new file mode 100644
index 00000000000..8bd3d734248
--- /dev/null
+++ b/static/usage/v9/select/customization/interface-options/angular/example_component_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+ customAlertOptions = {
+ header: 'Pizza Toppings',
+ subHeader: 'Select your favorite topping',
+ message: 'Choose only one',
+ translucent: true,
+ };
+
+ customPopoverOptions = {
+ header: 'Hair Color',
+ subHeader: 'Select your hair color',
+ message: 'Only select your dominant hair color',
+ };
+
+ customActionSheetOptions = {
+ header: 'Colors',
+ subHeader: 'Select your favorite color',
+ };
+
+ customModalOptions = {
+ header: 'Favorite Candy',
+ breakpoints: [0, 0.5],
+ initialBreakpoint: 0.5,
+ };
+}
+```
diff --git a/static/usage/v9/select/customization/interface-options/demo.html b/static/usage/v9/select/customization/interface-options/demo.html
new file mode 100644
index 00000000000..b09f8780556
--- /dev/null
+++ b/static/usage/v9/select/customization/interface-options/demo.html
@@ -0,0 +1,99 @@
+
+
+
+ Select - Interface Options
+
+
+
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+
+
+ Reese's
+ Snickers
+ Twix
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/customization/interface-options/index.md b/static/usage/v9/select/customization/interface-options/index.md
new file mode 100644
index 00000000000..29617fbb1cc
--- /dev/null
+++ b/static/usage/v9/select/customization/interface-options/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+
+
+ Reese's
+ Snickers
+ Twix
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/customization/interface-options/react.md b/static/usage/v9/select/customization/interface-options/react.md
new file mode 100644
index 00000000000..3252b3a5681
--- /dev/null
+++ b/static/usage/v9/select/customization/interface-options/react.md
@@ -0,0 +1,71 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ const customAlertOptions = {
+ header: 'Pizza Toppings',
+ subHeader: 'Select your favorite topping',
+ message: 'Choose only one',
+ translucent: true,
+ };
+
+ const customPopoverOptions = {
+ header: 'Hair Color',
+ subHeader: 'Select your hair color',
+ message: 'Only select your dominant hair color',
+ };
+
+ const customActionSheetOptions = {
+ header: 'Colors',
+ subHeader: 'Select your favorite color',
+ };
+
+ const customModalOptions = {
+ header: 'Favorite Candy',
+ breakpoints: [0, 0.5],
+ initialBreakpoint: 0.5,
+ };
+
+ return (
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+
+
+ Reese's
+ Snickers
+ Twix
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/customization/interface-options/vue.md b/static/usage/v9/select/customization/interface-options/vue.md
new file mode 100644
index 00000000000..ef8558e3f02
--- /dev/null
+++ b/static/usage/v9/select/customization/interface-options/vue.md
@@ -0,0 +1,75 @@
+```html
+
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+
+
+ Reese's
+ Snickers
+ Twix
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/customization/styling-select/angular/example_component_css.md b/static/usage/v9/select/customization/styling-select/angular/example_component_css.md
new file mode 100644
index 00000000000..4ca173bed8f
--- /dev/null
+++ b/static/usage/v9/select/customization/styling-select/angular/example_component_css.md
@@ -0,0 +1,27 @@
+```css
+ion-select {
+ --placeholder-color: #971e49;
+ --placeholder-opacity: 1;
+ width: 100%;
+ justify-content: center;
+}
+
+ion-select::part(placeholder),
+ion-select::part(text) {
+ flex: 0 0 auto;
+}
+
+ion-select::part(placeholder)::first-letter {
+ font-size: 24px;
+ font-weight: 500;
+}
+
+ion-select::part(text) {
+ color: #545ca7;
+}
+
+ion-select::part(icon) {
+ color: #971e49;
+ opacity: 1;
+}
+```
diff --git a/static/usage/v9/select/customization/styling-select/angular/example_component_html.md b/static/usage/v9/select/customization/styling-select/angular/example_component_html.md
new file mode 100644
index 00000000000..c2f19e70065
--- /dev/null
+++ b/static/usage/v9/select/customization/styling-select/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+ Apples
+ Oranges
+ Bananas
+
+```
diff --git a/static/usage/v9/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v9/select/customization/styling-select/angular/example_component_ts.md
new file mode 100644
index 00000000000..d526f852997
--- /dev/null
+++ b/static/usage/v9/select/customization/styling-select/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/customization/styling-select/demo.html b/static/usage/v9/select/customization/styling-select/demo.html
new file mode 100644
index 00000000000..3e5e660c6bb
--- /dev/null
+++ b/static/usage/v9/select/customization/styling-select/demo.html
@@ -0,0 +1,58 @@
+
+
+
+ Select - Styling the Select
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/customization/styling-select/index.md b/static/usage/v9/select/customization/styling-select/index.md
new file mode 100644
index 00000000000..2eb8572ab2c
--- /dev/null
+++ b/static/usage/v9/select/customization/styling-select/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/customization/styling-select/react/main_css.md b/static/usage/v9/select/customization/styling-select/react/main_css.md
new file mode 100644
index 00000000000..4ca173bed8f
--- /dev/null
+++ b/static/usage/v9/select/customization/styling-select/react/main_css.md
@@ -0,0 +1,27 @@
+```css
+ion-select {
+ --placeholder-color: #971e49;
+ --placeholder-opacity: 1;
+ width: 100%;
+ justify-content: center;
+}
+
+ion-select::part(placeholder),
+ion-select::part(text) {
+ flex: 0 0 auto;
+}
+
+ion-select::part(placeholder)::first-letter {
+ font-size: 24px;
+ font-weight: 500;
+}
+
+ion-select::part(text) {
+ color: #545ca7;
+}
+
+ion-select::part(icon) {
+ color: #971e49;
+ opacity: 1;
+}
+```
diff --git a/static/usage/v9/select/customization/styling-select/react/main_tsx.md b/static/usage/v9/select/customization/styling-select/react/main_tsx.md
new file mode 100644
index 00000000000..00e0e7a8027
--- /dev/null
+++ b/static/usage/v9/select/customization/styling-select/react/main_tsx.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSelect, IonSelectOption } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Apples
+ Oranges
+ Bananas
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/customization/styling-select/vue.md b/static/usage/v9/select/customization/styling-select/vue.md
new file mode 100644
index 00000000000..88d8160375b
--- /dev/null
+++ b/static/usage/v9/select/customization/styling-select/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/fill/angular/example_component_html.md b/static/usage/v9/select/fill/angular/example_component_html.md
new file mode 100644
index 00000000000..fcfe25bfe2c
--- /dev/null
+++ b/static/usage/v9/select/fill/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+ Apple
+ Banana
+ Orange
+
+
+
+ Apple
+ Banana
+ Orange
+
+```
diff --git a/static/usage/v9/select/fill/angular/example_component_ts.md b/static/usage/v9/select/fill/angular/example_component_ts.md
new file mode 100644
index 00000000000..d526f852997
--- /dev/null
+++ b/static/usage/v9/select/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/fill/demo.html b/static/usage/v9/select/fill/demo.html
new file mode 100644
index 00000000000..611f95cbf62
--- /dev/null
+++ b/static/usage/v9/select/fill/demo.html
@@ -0,0 +1,42 @@
+
+
+
+ Input
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
diff --git a/static/usage/v9/select/fill/index.md b/static/usage/v9/select/fill/index.md
new file mode 100644
index 00000000000..2ff332cee6f
--- /dev/null
+++ b/static/usage/v9/select/fill/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';
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+ Apple
+ Banana
+ Orange
+
+```
diff --git a/static/usage/v9/select/fill/react.md b/static/usage/v9/select/fill/react.md
new file mode 100644
index 00000000000..e6813654ee2
--- /dev/null
+++ b/static/usage/v9/select/fill/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Apple
+ Banana
+ Orange
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/fill/vue.md b/static/usage/v9/select/fill/vue.md
new file mode 100644
index 00000000000..68fa92c3e25
--- /dev/null
+++ b/static/usage/v9/select/fill/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+```
diff --git a/static/usage/v9/select/helper-error/angular/example_component_html.md b/static/usage/v9/select/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..0e65b13e6fe
--- /dev/null
+++ b/static/usage/v9/select/helper-error/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+
+```
diff --git a/static/usage/v9/select/helper-error/angular/example_component_ts.md b/static/usage/v9/select/helper-error/angular/example_component_ts.md
new file mode 100644
index 00000000000..59948b78540
--- /dev/null
+++ b/static/usage/v9/select/helper-error/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { IonSelect, IonSelectOption, IonButton } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ imports: [IonSelect, IonSelectOption, IonButton, ReactiveFormsModule],
+ templateUrl: './example.component.html',
+ styleUrl: './example.component.css',
+})
+export class ExampleComponent {
+ myForm: FormGroup;
+
+ constructor(private fb: FormBuilder) {
+ this.myForm = this.fb.group({
+ favFruit: ['', Validators.required],
+ });
+ }
+
+ onSubmit() {
+ // Mark the control as touched to trigger the error message.
+ // This is needed if the user submits the form without interacting
+ // with the select.
+ this.myForm.get('favFruit')!.markAsTouched();
+ }
+}
+```
diff --git a/static/usage/v9/select/helper-error/demo.html b/static/usage/v9/select/helper-error/demo.html
new file mode 100644
index 00000000000..b9b893275fc
--- /dev/null
+++ b/static/usage/v9/select/helper-error/demo.html
@@ -0,0 +1,68 @@
+
+
+
+ Input
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/helper-error/index.md b/static/usage/v9/select/helper-error/index.md
new file mode 100644
index 00000000000..1215d5b4871
--- /dev/null
+++ b/static/usage/v9/select/helper-error/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';
+
+(false);
+ const [isValid, setIsValid] = useState();
+
+ const favFruitRef = useRef(null);
+
+ const validateSelect = (event: SelectCustomEvent<{ value: string }>) => {
+ setIsValid(event.detail.value ? true : false);
+ };
+
+ const markTouched = () => {
+ setIsTouched(true);
+ };
+
+ const onIonBlur = () => {
+ markTouched();
+
+ if (favFruitRef.current) {
+ validateSelect({ detail: { value: favFruitRef.current.value } } as SelectCustomEvent<{
+ value: string;
+ }>);
+ }
+ };
+
+ const submit = (event: React.FormEvent) => {
+ event.preventDefault();
+
+ markTouched();
+
+ if (favFruitRef.current) {
+ validateSelect({ detail: { value: favFruitRef.current.value } } as SelectCustomEvent<{
+ value: string;
+ }>);
+ }
+ };
+
+ return (
+ <>
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/select/helper-error/vue.md b/static/usage/v9/select/helper-error/vue.md
new file mode 100644
index 00000000000..eb2a24e1afd
--- /dev/null
+++ b/static/usage/v9/select/helper-error/vue.md
@@ -0,0 +1,51 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/interfaces/action-sheet/angular/example_component_html.md b/static/usage/v9/select/interfaces/action-sheet/angular/example_component_html.md
new file mode 100644
index 00000000000..f8d864e3a7c
--- /dev/null
+++ b/static/usage/v9/select/interfaces/action-sheet/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/interfaces/action-sheet/angular/example_component_ts.md b/static/usage/v9/select/interfaces/action-sheet/angular/example_component_ts.md
new file mode 100644
index 00000000000..14297fc18d4
--- /dev/null
+++ b/static/usage/v9/select/interfaces/action-sheet/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/interfaces/action-sheet/demo.html b/static/usage/v9/select/interfaces/action-sheet/demo.html
new file mode 100644
index 00000000000..21c7d002a2d
--- /dev/null
+++ b/static/usage/v9/select/interfaces/action-sheet/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Select - Action Sheet
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/interfaces/action-sheet/index.md b/static/usage/v9/select/interfaces/action-sheet/index.md
new file mode 100644
index 00000000000..ed647b54776
--- /dev/null
+++ b/static/usage/v9/select/interfaces/action-sheet/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';
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/interfaces/action-sheet/react.md b/static/usage/v9/select/interfaces/action-sheet/react.md
new file mode 100644
index 00000000000..b285c79f0b3
--- /dev/null
+++ b/static/usage/v9/select/interfaces/action-sheet/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/interfaces/action-sheet/vue.md b/static/usage/v9/select/interfaces/action-sheet/vue.md
new file mode 100644
index 00000000000..102714dd2be
--- /dev/null
+++ b/static/usage/v9/select/interfaces/action-sheet/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/interfaces/modal/angular/example_component_html.md b/static/usage/v9/select/interfaces/modal/angular/example_component_html.md
new file mode 100644
index 00000000000..ac93580e0c3
--- /dev/null
+++ b/static/usage/v9/select/interfaces/modal/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/interfaces/modal/angular/example_component_ts.md b/static/usage/v9/select/interfaces/modal/angular/example_component_ts.md
new file mode 100644
index 00000000000..14297fc18d4
--- /dev/null
+++ b/static/usage/v9/select/interfaces/modal/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/interfaces/modal/demo.html b/static/usage/v9/select/interfaces/modal/demo.html
new file mode 100644
index 00000000000..5d81ee10860
--- /dev/null
+++ b/static/usage/v9/select/interfaces/modal/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Select - Modal
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/interfaces/modal/index.md b/static/usage/v9/select/interfaces/modal/index.md
new file mode 100644
index 00000000000..0ff91d2a547
--- /dev/null
+++ b/static/usage/v9/select/interfaces/modal/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';
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/interfaces/modal/react.md b/static/usage/v9/select/interfaces/modal/react.md
new file mode 100644
index 00000000000..42251a782d6
--- /dev/null
+++ b/static/usage/v9/select/interfaces/modal/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/interfaces/modal/vue.md b/static/usage/v9/select/interfaces/modal/vue.md
new file mode 100644
index 00000000000..6b9d6fc3cbb
--- /dev/null
+++ b/static/usage/v9/select/interfaces/modal/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/interfaces/popover/angular/example_component_html.md b/static/usage/v9/select/interfaces/popover/angular/example_component_html.md
new file mode 100644
index 00000000000..fe01597afa5
--- /dev/null
+++ b/static/usage/v9/select/interfaces/popover/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v9/select/interfaces/popover/angular/example_component_ts.md
new file mode 100644
index 00000000000..14297fc18d4
--- /dev/null
+++ b/static/usage/v9/select/interfaces/popover/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/interfaces/popover/demo.html b/static/usage/v9/select/interfaces/popover/demo.html
new file mode 100644
index 00000000000..768298d7637
--- /dev/null
+++ b/static/usage/v9/select/interfaces/popover/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ Select - Popover
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/interfaces/popover/index.md b/static/usage/v9/select/interfaces/popover/index.md
new file mode 100644
index 00000000000..e4f91cffac1
--- /dev/null
+++ b/static/usage/v9/select/interfaces/popover/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';
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v9/select/interfaces/popover/react.md b/static/usage/v9/select/interfaces/popover/react.md
new file mode 100644
index 00000000000..2afe98eef3c
--- /dev/null
+++ b/static/usage/v9/select/interfaces/popover/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/interfaces/popover/vue.md b/static/usage/v9/select/interfaces/popover/vue.md
new file mode 100644
index 00000000000..e51289b4e26
--- /dev/null
+++ b/static/usage/v9/select/interfaces/popover/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/justify/angular/example_component_html.md b/static/usage/v9/select/justify/angular/example_component_html.md
new file mode 100644
index 00000000000..a3951bb1a59
--- /dev/null
+++ b/static/usage/v9/select/justify/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+```
diff --git a/static/usage/v9/select/justify/angular/example_component_ts.md b/static/usage/v9/select/justify/angular/example_component_ts.md
new file mode 100644
index 00000000000..cc0e99d8d78
--- /dev/null
+++ b/static/usage/v9/select/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/justify/demo.html b/static/usage/v9/select/justify/demo.html
new file mode 100644
index 00000000000..d175225c686
--- /dev/null
+++ b/static/usage/v9/select/justify/demo.html
@@ -0,0 +1,49 @@
+
+
+
+ select
+
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/justify/index.md b/static/usage/v9/select/justify/index.md
new file mode 100644
index 00000000000..e9485fa8640
--- /dev/null
+++ b/static/usage/v9/select/justify/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';
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+```
diff --git a/static/usage/v9/select/justify/react.md b/static/usage/v9/select/justify/react.md
new file mode 100644
index 00000000000..3c9b16c3129
--- /dev/null
+++ b/static/usage/v9/select/justify/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/justify/vue.md b/static/usage/v9/select/justify/vue.md
new file mode 100644
index 00000000000..f6be5ad8681
--- /dev/null
+++ b/static/usage/v9/select/justify/vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/label-placement/angular/example_component_html.md b/static/usage/v9/select/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..063c257914d
--- /dev/null
+++ b/static/usage/v9/select/label-placement/angular/example_component_html.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+```
diff --git a/static/usage/v9/select/label-placement/angular/example_component_ts.md b/static/usage/v9/select/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..14297fc18d4
--- /dev/null
+++ b/static/usage/v9/select/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/label-placement/demo.html b/static/usage/v9/select/label-placement/demo.html
new file mode 100644
index 00000000000..c407e2310d7
--- /dev/null
+++ b/static/usage/v9/select/label-placement/demo.html
@@ -0,0 +1,60 @@
+
+
+
+ select
+
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/label-placement/index.md b/static/usage/v9/select/label-placement/index.md
new file mode 100644
index 00000000000..8cc5db318f6
--- /dev/null
+++ b/static/usage/v9/select/label-placement/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';
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+```
diff --git a/static/usage/v9/select/label-placement/react.md b/static/usage/v9/select/label-placement/react.md
new file mode 100644
index 00000000000..3850747793d
--- /dev/null
+++ b/static/usage/v9/select/label-placement/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/label-placement/vue.md b/static/usage/v9/select/label-placement/vue.md
new file mode 100644
index 00000000000..ba1256888c4
--- /dev/null
+++ b/static/usage/v9/select/label-placement/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/label-slot/angular/example_component_html.md b/static/usage/v9/select/label-slot/angular/example_component_html.md
new file mode 100644
index 00000000000..93790d050e2
--- /dev/null
+++ b/static/usage/v9/select/label-slot/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+ Favorite Fruit (Required)
+ Apple
+ Banana
+ Orange
+
+
+
+```
diff --git a/static/usage/v9/select/label-slot/angular/example_component_ts.md b/static/usage/v9/select/label-slot/angular/example_component_ts.md
new file mode 100644
index 00000000000..ed7368e5da6
--- /dev/null
+++ b/static/usage/v9/select/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/label-slot/demo.html b/static/usage/v9/select/label-slot/demo.html
new file mode 100644
index 00000000000..076d932ec3a
--- /dev/null
+++ b/static/usage/v9/select/label-slot/demo.html
@@ -0,0 +1,31 @@
+
+
+
+ select
+
+
+
+
+
+
+ Favorite Fruit (Required)
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/label-slot/index.md b/static/usage/v9/select/label-slot/index.md
new file mode 100644
index 00000000000..e561ae542ab
--- /dev/null
+++ b/static/usage/v9/select/label-slot/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';
+
+
+
+
+ Favorite Fruit (Required)
+ Apple
+ Banana
+ Orange
+
+
+
+```
diff --git a/static/usage/v9/select/label-slot/react.md b/static/usage/v9/select/label-slot/react.md
new file mode 100644
index 00000000000..a903897a65b
--- /dev/null
+++ b/static/usage/v9/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 (
+
+
+
+
+ Favorite Fruit (Required)
+
+ Apple
+ Banana
+ Orange
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/label-slot/vue.md b/static/usage/v9/select/label-slot/vue.md
new file mode 100644
index 00000000000..872d609abe7
--- /dev/null
+++ b/static/usage/v9/select/label-slot/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+ Favorite Fruit (Required)
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/no-visible-label/angular/example_component_html.md b/static/usage/v9/select/no-visible-label/angular/example_component_html.md
new file mode 100644
index 00000000000..1c14ab03008
--- /dev/null
+++ b/static/usage/v9/select/no-visible-label/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+```
diff --git a/static/usage/v9/select/no-visible-label/angular/example_component_ts.md b/static/usage/v9/select/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 00000000000..14297fc18d4
--- /dev/null
+++ b/static/usage/v9/select/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/select/no-visible-label/demo.html b/static/usage/v9/select/no-visible-label/demo.html
new file mode 100644
index 00000000000..bbaaf4956a6
--- /dev/null
+++ b/static/usage/v9/select/no-visible-label/demo.html
@@ -0,0 +1,30 @@
+
+
+
+ select
+
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/no-visible-label/index.md b/static/usage/v9/select/no-visible-label/index.md
new file mode 100644
index 00000000000..f628c0cb7f9
--- /dev/null
+++ b/static/usage/v9/select/no-visible-label/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';
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+```
diff --git a/static/usage/v9/select/no-visible-label/react.md b/static/usage/v9/select/no-visible-label/react.md
new file mode 100644
index 00000000000..8695381a487
--- /dev/null
+++ b/static/usage/v9/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 (
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/no-visible-label/vue.md b/static/usage/v9/select/no-visible-label/vue.md
new file mode 100644
index 00000000000..dbb3a256f08
--- /dev/null
+++ b/static/usage/v9/select/no-visible-label/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..361cfbad1b8
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+ @for (food of foods; track food) {
+ {{ food.name }}
+ }
+
+
+
+```
diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..929ad9395b7
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -0,0 +1,53 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+ foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+ ];
+
+ compareWith(o1: Food | null, o2: Food | Food[] | null): boolean {
+ if (!o1 || !o2) {
+ return o1 === o2;
+ }
+
+ if (Array.isArray(o2)) {
+ return o2.some((o) => o.id === o1.id);
+ }
+
+ return o1.id === o2.id;
+ }
+
+ handleChange(event: Event) {
+ const target = event.target as HTMLIonSelectElement;
+ console.log('Current value:', JSON.stringify(target.value));
+ }
+}
+```
diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/demo.html b/static/usage/v9/select/objects-as-values/multiple-selection/demo.html
new file mode 100644
index 00000000000..64ffeaa327d
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/multiple-selection/demo.html
@@ -0,0 +1,72 @@
+
+
+
+ Select - Object Values and Multiple Selection
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/index.md b/static/usage/v9/select/objects-as-values/multiple-selection/index.md
new file mode 100644
index 00000000000..3ece9e0a7a3
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/multiple-selection/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';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/react.md b/static/usage/v9/select/objects-as-values/multiple-selection/react.md
new file mode 100644
index 00000000000..3fc8c0d54f9
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/multiple-selection/react.md
@@ -0,0 +1,63 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+const foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+ if (!o1 || !o2) {
+ return o1 === o2;
+ }
+
+ if (Array.isArray(o2)) {
+ return o2.some((o) => o.id === o1.id);
+ }
+
+ return o1.id === o2.id;
+};
+
+function Example() {
+ return (
+
+
+ console.log('Current value:', JSON.stringify(event.detail.value))}
+ multiple={true}
+ >
+ {foods.map((food) => (
+
+ {food.name}
+
+ ))}
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/vue.md b/static/usage/v9/select/objects-as-values/multiple-selection/vue.md
new file mode 100644
index 00000000000..35a2c3b69ee
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/multiple-selection/vue.md
@@ -0,0 +1,55 @@
+```html
+
+
+
+
+ {{ food.name }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_html.md
new file mode 100644
index 00000000000..808a9743cc2
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+ @for (food of foods; track food) {
+ {{ food.name }}
+ }
+
+
+
+```
diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_ts.md
new file mode 100644
index 00000000000..1deee0fc6ed
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -0,0 +1,45 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+ foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+ ];
+
+ compareWith(o1: Food | null, o2: Food | null): boolean {
+ return o1 && o2 ? o1.id === o2.id : o1 === o2;
+ }
+
+ handleChange(event: Event) {
+ const target = event.target as HTMLIonSelectElement;
+ console.log('Current value:', JSON.stringify(target.value));
+ }
+}
+```
diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/demo.html b/static/usage/v9/select/objects-as-values/using-comparewith/demo.html
new file mode 100644
index 00000000000..54218949ed9
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/using-comparewith/demo.html
@@ -0,0 +1,64 @@
+
+
+
+ Select - Using compareWith
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/index.md b/static/usage/v9/select/objects-as-values/using-comparewith/index.md
new file mode 100644
index 00000000000..e5870bfc059
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/using-comparewith/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';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/react.md b/static/usage/v9/select/objects-as-values/using-comparewith/react.md
new file mode 100644
index 00000000000..ba3a3b7f556
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/using-comparewith/react.md
@@ -0,0 +1,54 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+const foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+ return o1 && o2 ? o1.id === o2.id : o1 === o2;
+};
+
+function Example() {
+ return (
+
+
+ console.log('Current value:', JSON.stringify(event.detail.value))}
+ >
+ {foods.map((food) => (
+
+ {food.name}
+
+ ))}
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/vue.md b/static/usage/v9/select/objects-as-values/using-comparewith/vue.md
new file mode 100644
index 00000000000..a88d6cb7b5e
--- /dev/null
+++ b/static/usage/v9/select/objects-as-values/using-comparewith/vue.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+ {{ food.name }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/rich-content-options/angular/example_component_html.md b/static/usage/v9/select/rich-content-options/angular/example_component_html.md
new file mode 100644
index 00000000000..f8431fb7164
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+
+ @for (selectInterface of selectInterfaces; track selectInterface) {
+
+
+
+ Flight
+ 2h 15m · Nonstop
+ $279
+
+
+ Bus
+ 6h 40m · 1 transfer
+ $39
+
+
+ Rental Car
+ 5h 10m · Flexible route
+ $92
+
+
+ Train
+ 4h 55m · Direct
+ $64
+
+
+
+ }
+
+```
diff --git a/static/usage/v9/select/rich-content-options/angular/example_component_ts.md b/static/usage/v9/select/rich-content-options/angular/example_component_ts.md
new file mode 100644
index 00000000000..a85d2012c74
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/angular/example_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBadge, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { airplane, bus, car, train } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ imports: [IonBadge, IonIcon, IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+ readonly selectInterfaces = ['alert', 'action-sheet', 'modal', 'popover'];
+
+ /* The interfaceOptions property is for demonstration purposes only. */
+ /* It is not required for the rich options to work. */
+ readonly interfaceOptions = { header: 'Travel mode' };
+
+ constructor() {
+ addIcons({ airplane, bus, car, train });
+ }
+
+ formatInterfaceLabel(selectInterface: string): string {
+ return selectInterface
+ .split('-')
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(' ');
+ }
+}
+```
diff --git a/static/usage/v9/select/rich-content-options/angular/global_css.md b/static/usage/v9/select/rich-content-options/angular/global_css.md
new file mode 100644
index 00000000000..4210c475efa
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/angular/global_css.md
@@ -0,0 +1,49 @@
+```css
+/* -----------------------------------------------------*/
+/* These styles are for demonstration purposes only. */
+/* They are not required for the rich options to work. */
+/* -----------------------------------------------------*/
+
+/**
+* All Interfaces
+* ------------------------------------------------
+* Override the flex styles so that the title and
+* subtitle stack vertically.
+*/
+.select-option-content div.alert-radio-label-text,
+.select-option-content span.action-sheet-button-label-text,
+.select-option-content div.select-option-label-text {
+ flex-direction: column;
+ align-items: start;
+ gap: 5px;
+}
+
+/* Action Sheet Interface */
+ion-action-sheet .select-option-description {
+ text-align: start;
+}
+
+/* Alert Interface */
+ion-alert.select-alert {
+ --min-width: 350px;
+}
+
+/* Modal, Popover Interfaces */
+ion-popover.select-popover ion-list ion-radio.in-item::part(label),
+ion-modal.select-modal ion-list ion-radio.in-item::part(label) {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+/* Custom Select Option Title */
+.select-option-content .option-title {
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+/* Custom Select Option Subtitle */
+.select-option-content .option-subtitle {
+ font-size: 0.8125rem;
+ font-weight: 500;
+}
+```
diff --git a/static/usage/v9/select/rich-content-options/angular/main_ts.md b/static/usage/v9/select/rich-content-options/angular/main_ts.md
new file mode 100644
index 00000000000..8849e212e82
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/angular/main_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular';
+
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+ providers: [
+ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+ provideIonicAngular({
+ /**
+ * `innerHTMLTemplatesEnabled` must be enabled for rich-content
+ * select options to render correctly.
+ */
+ innerHTMLTemplatesEnabled: true,
+ }),
+ provideRouter(routes, withPreloading(PreloadAllModules)),
+ ],
+});
+```
diff --git a/static/usage/v9/select/rich-content-options/demo.html b/static/usage/v9/select/rich-content-options/demo.html
new file mode 100644
index 00000000000..9bc45a69c20
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/demo.html
@@ -0,0 +1,148 @@
+
+
+
+ Select - Rich Content Option
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/rich-content-options/index.md b/static/usage/v9/select/rich-content-options/index.md
new file mode 100644
index 00000000000..a2a88596f02
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/index.md
@@ -0,0 +1,51 @@
+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_app_tsx from './react/app_tsx.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue_main_ts from './vue/main_ts.md';
+import vue_example_vue from './vue/example_vue.md';
+
+import angular_main_ts from './angular/main_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/rich-content-options/javascript/index_ts.md b/static/usage/v9/select/rich-content-options/javascript/index_ts.md
new file mode 100644
index 00000000000..01ce02c278a
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { airplane, bus, car, train } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'airplane': airplane, 'bus': bus, 'car': car, 'train', train });
+ */
+addIcons({ airplane, bus, car, train });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/select/rich-content-options/react/app_tsx.md b/static/usage/v9/select/rich-content-options/react/app_tsx.md
new file mode 100644
index 00000000000..1b6a1f30942
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/react/app_tsx.md
@@ -0,0 +1,54 @@
+```tsx
+import React from 'react';
+import { setupIonicReact, IonApp, IonContent } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark Theme
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/react/css/palettes/dark.always.css';
+// import '@ionic/react/css/palettes/dark.class.css';
+import '@ionic/react/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+import Example from './main';
+
+/**
+ * `innerHTMLTemplatesEnabled` must be enabled for rich-content
+ * select options to render correctly.
+ */
+setupIonicReact({
+ innerHTMLTemplatesEnabled: true,
+});
+
+export default function App() {
+ return (
+
+
+
+
+ );
+}
+```
diff --git a/static/usage/v9/select/rich-content-options/react/main_css.md b/static/usage/v9/select/rich-content-options/react/main_css.md
new file mode 100644
index 00000000000..4210c475efa
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/react/main_css.md
@@ -0,0 +1,49 @@
+```css
+/* -----------------------------------------------------*/
+/* These styles are for demonstration purposes only. */
+/* They are not required for the rich options to work. */
+/* -----------------------------------------------------*/
+
+/**
+* All Interfaces
+* ------------------------------------------------
+* Override the flex styles so that the title and
+* subtitle stack vertically.
+*/
+.select-option-content div.alert-radio-label-text,
+.select-option-content span.action-sheet-button-label-text,
+.select-option-content div.select-option-label-text {
+ flex-direction: column;
+ align-items: start;
+ gap: 5px;
+}
+
+/* Action Sheet Interface */
+ion-action-sheet .select-option-description {
+ text-align: start;
+}
+
+/* Alert Interface */
+ion-alert.select-alert {
+ --min-width: 350px;
+}
+
+/* Modal, Popover Interfaces */
+ion-popover.select-popover ion-list ion-radio.in-item::part(label),
+ion-modal.select-modal ion-list ion-radio.in-item::part(label) {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+/* Custom Select Option Title */
+.select-option-content .option-title {
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+/* Custom Select Option Subtitle */
+.select-option-content .option-subtitle {
+ font-size: 0.8125rem;
+ font-weight: 500;
+}
+```
diff --git a/static/usage/v9/select/rich-content-options/react/main_tsx.md b/static/usage/v9/select/rich-content-options/react/main_tsx.md
new file mode 100644
index 00000000000..1497ab84dac
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/react/main_tsx.md
@@ -0,0 +1,71 @@
+```tsx
+import React from 'react';
+import { SelectInterface } from '@ionic/core';
+import { IonBadge, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+import { airplane, bus, car, train } from 'ionicons/icons';
+
+import './main.css';
+
+const selectInterfaces: SelectInterface[] = ['alert', 'action-sheet', 'modal', 'popover'];
+
+/* The interfaceOptions property is for demonstration purposes only. */
+/* It is not required for the rich options to work. */
+const interfaceOptions = { header: 'Travel mode' };
+
+const formatInterfaceLabel = (selectInterface: string) =>
+ selectInterface
+ .split('-')
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(' ');
+
+function Example() {
+ return (
+
+ {selectInterfaces.map((selectInterface) => (
+
+
+
+ Flight
+ 2h 15m · Nonstop
+
+ $279
+
+
+
+ Bus
+ 6h 40m · 1 transfer
+
+ $39
+
+
+
+ Rental Car
+ 5h 10m · Flexible route
+
+ $92
+
+
+
+ Train
+ 4h 55m · Direct
+
+ $64
+
+
+
+
+ ))}
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/rich-content-options/vue/example_vue.md b/static/usage/v9/select/rich-content-options/vue/example_vue.md
new file mode 100644
index 00000000000..626aa4e4d00
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/vue/example_vue.md
@@ -0,0 +1,106 @@
+```vue
+
+
+
+
+
+ Flight
+ 2h 15m · Nonstop
+ $279
+
+
+ Bus
+ 6h 40m · 1 transfer
+ $39
+
+
+ Rental Car
+ 5h 10m · Flexible route
+ $92
+
+
+ Train
+ 4h 55m · Direct
+ $64
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/rich-content-options/vue/main_ts.md b/static/usage/v9/select/rich-content-options/vue/main_ts.md
new file mode 100644
index 00000000000..5c0704d315d
--- /dev/null
+++ b/static/usage/v9/select/rich-content-options/vue/main_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic Dark Theme
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/vue/css/palettes/dark.always.css';
+// import '@ionic/vue/css/palettes/dark.class.css';
+import '@ionic/vue/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * `innerHTMLTemplatesEnabled` must be enabled for rich-content
+ * select options to render correctly.
+ */
+createApp(App)
+ .use(IonicVue, {
+ innerHTMLTemplatesEnabled: true,
+ })
+ .mount('#app');
+```
diff --git a/static/usage/v9/select/start-end-slots/angular/example_component_html.md b/static/usage/v9/select/start-end-slots/angular/example_component_html.md
new file mode 100644
index 00000000000..e42b896605c
--- /dev/null
+++ b/static/usage/v9/select/start-end-slots/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/start-end-slots/angular/example_component_ts.md b/static/usage/v9/select/start-end-slots/angular/example_component_ts.md
new file mode 100644
index 00000000000..4bcba3f6d5d
--- /dev/null
+++ b/static/usage/v9/select/start-end-slots/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { eye, leaf } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ eye, leaf });
+ }
+}
+```
diff --git a/static/usage/v9/select/start-end-slots/demo.html b/static/usage/v9/select/start-end-slots/demo.html
new file mode 100644
index 00000000000..3661bde204b
--- /dev/null
+++ b/static/usage/v9/select/start-end-slots/demo.html
@@ -0,0 +1,40 @@
+
+
+
+ Select
+
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/start-end-slots/index.md b/static/usage/v9/select/start-end-slots/index.md
new file mode 100644
index 00000000000..118f8e25e13
--- /dev/null
+++ b/static/usage/v9/select/start-end-slots/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/start-end-slots/javascript/index_ts.md b/static/usage/v9/select/start-end-slots/javascript/index_ts.md
new file mode 100644
index 00000000000..3b788666e48
--- /dev/null
+++ b/static/usage/v9/select/start-end-slots/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { eye, leaf } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'eye': eye, 'leaf': leaf });
+ */
+addIcons({ eye, leaf });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/select/start-end-slots/react.md b/static/usage/v9/select/start-end-slots/react.md
new file mode 100644
index 00000000000..98bbf6208d7
--- /dev/null
+++ b/static/usage/v9/select/start-end-slots/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+import { eye, leaf } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/start-end-slots/vue.md b/static/usage/v9/select/start-end-slots/vue.md
new file mode 100644
index 00000000000..8905cec221a
--- /dev/null
+++ b/static/usage/v9/select/start-end-slots/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/typeahead/angular/angular_types_ts.md b/static/usage/v9/select/typeahead/angular/angular_types_ts.md
new file mode 100644
index 00000000000..42d4583e026
--- /dev/null
+++ b/static/usage/v9/select/typeahead/angular/angular_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+ text: string;
+ value: string;
+}
+```
diff --git a/static/usage/v9/select/typeahead/angular/example_component_html.md b/static/usage/v9/select/typeahead/angular/example_component_html.md
new file mode 100644
index 00000000000..5d4c94d6c44
--- /dev/null
+++ b/static/usage/v9/select/typeahead/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Favorite Fruits
+ {{ selectedFruitsText }}
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/typeahead/angular/example_component_ts.md b/static/usage/v9/select/typeahead/angular/example_component_ts.md
new file mode 100644
index 00000000000..dae298b07e1
--- /dev/null
+++ b/static/usage/v9/select/typeahead/angular/example_component_ts.md
@@ -0,0 +1,71 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular';
+import { Item } from './types';
+
+import { TypeaheadComponent } from './typeahead.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent],
+})
+export class ExampleComponent {
+ @ViewChild('modal', { static: true }) modal!: IonModal;
+
+ selectedFruitsText = '0 Items';
+ selectedFruits: string[] = [];
+
+ fruits: Item[] = [
+ { text: 'Apple', value: 'apple' },
+ { text: 'Apricot', value: 'apricot' },
+ { text: 'Banana', value: 'banana' },
+ { text: 'Blackberry', value: 'blackberry' },
+ { text: 'Blueberry', value: 'blueberry' },
+ { text: 'Cherry', value: 'cherry' },
+ { text: 'Cranberry', value: 'cranberry' },
+ { text: 'Grape', value: 'grape' },
+ { text: 'Grapefruit', value: 'grapefruit' },
+ { text: 'Guava', value: 'guava' },
+ { text: 'Jackfruit', value: 'jackfruit' },
+ { text: 'Lime', value: 'lime' },
+ { text: 'Mango', value: 'mango' },
+ { text: 'Nectarine', value: 'nectarine' },
+ { text: 'Orange', value: 'orange' },
+ { text: 'Papaya', value: 'papaya' },
+ { text: 'Passionfruit', value: 'passionfruit' },
+ { text: 'Peach', value: 'peach' },
+ { text: 'Pear', value: 'pear' },
+ { text: 'Plantain', value: 'plantain' },
+ { text: 'Plum', value: 'plum' },
+ { text: 'Pineapple', value: 'pineapple' },
+ { text: 'Pomegranate', value: 'pomegranate' },
+ { text: 'Raspberry', value: 'raspberry' },
+ { text: 'Strawberry', value: 'strawberry' },
+ ];
+
+ /**
+ * Formats the display text based on the selected fruits.
+ * @param data - Array of selected fruit values
+ * @returns A formatted string for display
+ */
+ private formatData(data: string[]): string {
+ if (data.length === 1) {
+ const fruit = this.fruits.find((fruit) => fruit.value === data[0]);
+ return fruit ? fruit.text : '';
+ }
+ return `${data.length} items`;
+ }
+
+ /**
+ * Handles fruit selection changes and updates the selected fruits and text.
+ * @param fruits - Array of selected fruit values
+ */
+ fruitSelectionChanged(fruits: string[]) {
+ this.selectedFruits = fruits;
+ this.selectedFruitsText = this.formatData(this.selectedFruits);
+ this.modal.dismiss();
+ }
+}
+```
diff --git a/static/usage/v9/select/typeahead/angular/typeahead_component_html.md b/static/usage/v9/select/typeahead/angular/typeahead_component_html.md
new file mode 100644
index 00000000000..ed147c64254
--- /dev/null
+++ b/static/usage/v9/select/typeahead/angular/typeahead_component_html.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ Cancel
+
+ {{ title }}
+
+ Done
+
+
+
+
+
+
+
+
+ @for (item of filteredItems; track item.value) {
+
+ {{ item.text }}
+
+ }
+
+
+```
diff --git a/static/usage/v9/select/typeahead/angular/typeahead_component_ts.md b/static/usage/v9/select/typeahead/angular/typeahead_component_ts.md
new file mode 100644
index 00000000000..ada61dc9b30
--- /dev/null
+++ b/static/usage/v9/select/typeahead/angular/typeahead_component_ts.md
@@ -0,0 +1,103 @@
+```ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import type { OnInit } from '@angular/core';
+
+import {
+ IonButton,
+ IonButtons,
+ IonCheckbox,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonList,
+ IonSearchbar,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { Item } from './types';
+
+@Component({
+ selector: 'app-typeahead',
+ templateUrl: 'typeahead.component.html',
+ imports: [
+ IonButton,
+ IonButtons,
+ IonCheckbox,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonList,
+ IonSearchbar,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+export class TypeaheadComponent implements OnInit {
+ @Input() items: Item[] = [];
+ @Input() selectedItems: string[] = [];
+ @Input() title = 'Select Items';
+
+ @Output() selectionCancel = new EventEmitter();
+ @Output() selectionChange = new EventEmitter();
+
+ filteredItems: Item[] = [];
+ workingSelectedValues: string[] = [];
+
+ ngOnInit() {
+ this.filteredItems = [...this.items];
+ this.workingSelectedValues = [...this.selectedItems];
+ }
+
+ cancelChanges() {
+ this.selectionCancel.emit();
+ }
+
+ confirmChanges() {
+ this.selectionChange.emit(this.workingSelectedValues);
+ }
+
+ searchbarInput(event: Event) {
+ const inputElement = event.target as HTMLInputElement;
+ this.filterList(inputElement.value);
+ }
+
+ /**
+ * Update the rendered view with
+ * the provided search query. If no
+ * query is provided, all data
+ * will be rendered.
+ */
+ filterList(searchQuery: string | undefined) {
+ /**
+ * If no search query is defined,
+ * return all options.
+ */
+ if (searchQuery === undefined || searchQuery.trim() === '') {
+ this.filteredItems = [...this.items];
+ } else {
+ /**
+ * Otherwise, normalize the search
+ * query and check to see which items
+ * contain the search query as a substring.
+ */
+ const normalizedQuery = searchQuery.toLowerCase();
+ this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery));
+ }
+ }
+
+ isChecked(value: string): boolean {
+ return this.workingSelectedValues.includes(value);
+ }
+
+ checkboxChange(event: CustomEvent<{ checked: boolean; value: string }>) {
+ const { checked, value } = event.detail;
+
+ if (checked) {
+ this.workingSelectedValues = [...this.workingSelectedValues, value];
+ } else {
+ this.workingSelectedValues = this.workingSelectedValues.filter((item) => item !== value);
+ }
+ }
+}
+```
diff --git a/static/usage/v9/select/typeahead/demo.html b/static/usage/v9/select/typeahead/demo.html
new file mode 100644
index 00000000000..ff5915ddb9f
--- /dev/null
+++ b/static/usage/v9/select/typeahead/demo.html
@@ -0,0 +1,220 @@
+
+
+
+ Select
+
+
+
+
+
+ Favorite Fruits
+ 0 Items
+
+
+
+
+
+
+
+
+ Cancel
+
+ Favorite Fruits
+
+ Done
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/select/typeahead/index.md b/static/usage/v9/select/typeahead/index.md
new file mode 100644
index 00000000000..4d2ed63c4fa
--- /dev/null
+++ b/static/usage/v9/select/typeahead/index.md
@@ -0,0 +1,50 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_types_ts from './react/react_types_ts.md';
+import typeahead_component_tsx from './react/typeahead_component_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_types_ts from './vue/vue_types_ts.md';
+import vue_typeahead_component from './vue/typeahead_component_vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_typeahead_component_ts from './angular/typeahead_component_ts.md';
+import angular_typeahead_component_html from './angular/typeahead_component_html.md';
+import angular_types_ts from './angular/angular_types_ts.md';
+
+
+
+
+
+ Favorite Fruits
+ 0 Items
+
+
+
+
+
+
+
+
+ Cancel
+
+ Favorite Fruits
+
+ Done
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/typeahead/react/main_tsx.md b/static/usage/v9/select/typeahead/react/main_tsx.md
new file mode 100644
index 00000000000..391259a7ecf
--- /dev/null
+++ b/static/usage/v9/select/typeahead/react/main_tsx.md
@@ -0,0 +1,83 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/react';
+import AppTypeahead from './AppTypeahead';
+
+import type { Item } from './types';
+
+const fruits: Item[] = [
+ { text: 'Apple', value: 'apple' },
+ { text: 'Apricot', value: 'apricot' },
+ { text: 'Banana', value: 'banana' },
+ { text: 'Blackberry', value: 'blackberry' },
+ { text: 'Blueberry', value: 'blueberry' },
+ { text: 'Cherry', value: 'cherry' },
+ { text: 'Cranberry', value: 'cranberry' },
+ { text: 'Grape', value: 'grape' },
+ { text: 'Grapefruit', value: 'grapefruit' },
+ { text: 'Guava', value: 'guava' },
+ { text: 'Jackfruit', value: 'jackfruit' },
+ { text: 'Lime', value: 'lime' },
+ { text: 'Mango', value: 'mango' },
+ { text: 'Nectarine', value: 'nectarine' },
+ { text: 'Orange', value: 'orange' },
+ { text: 'Papaya', value: 'papaya' },
+ { text: 'Passionfruit', value: 'passionfruit' },
+ { text: 'Peach', value: 'peach' },
+ { text: 'Pear', value: 'pear' },
+ { text: 'Plantain', value: 'plantain' },
+ { text: 'Plum', value: 'plum' },
+ { text: 'Pineapple', value: 'pineapple' },
+ { text: 'Pomegranate', value: 'pomegranate' },
+ { text: 'Raspberry', value: 'raspberry' },
+ { text: 'Strawberry', value: 'strawberry' },
+];
+
+function Example() {
+ const [selectedFruitsText, setSelectedFruitsText] = useState('0 Items');
+ const [selectedFruits, setSelectedFruits] = useState([]);
+
+ const modal = useRef(null);
+
+ const formatData = (data: string[]) => {
+ if (data.length === 1) {
+ const fruit = fruits.find((fruit) => fruit.value === data[0])!;
+ return fruit.text;
+ }
+
+ return `${data.length} items`;
+ };
+
+ const fruitSelectionChanged = (fruits: string[]) => {
+ setSelectedFruits(fruits);
+ setSelectedFruitsText(formatData(fruits));
+ modal.current?.dismiss();
+ };
+
+ return (
+ <>
+
+
+
+ Favorite Fruits
+
+ {selectedFruitsText}
+
+
+
+
+
+
+ modal.current?.dismiss()}
+ onSelectionChange={fruitSelectionChanged}
+ />
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/select/typeahead/react/react_types_ts.md b/static/usage/v9/select/typeahead/react/react_types_ts.md
new file mode 100644
index 00000000000..42d4583e026
--- /dev/null
+++ b/static/usage/v9/select/typeahead/react/react_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+ text: string;
+ value: string;
+}
+```
diff --git a/static/usage/v9/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v9/select/typeahead/react/typeahead_component_tsx.md
new file mode 100644
index 00000000000..7aee53fae3f
--- /dev/null
+++ b/static/usage/v9/select/typeahead/react/typeahead_component_tsx.md
@@ -0,0 +1,122 @@
+```tsx
+import React, { useState } from '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';
+
+interface TypeaheadProps {
+ items: Item[];
+ selectedItems: string[];
+ title?: string;
+ onSelectionCancel?: () => void;
+ onSelectionChange?: (items: string[]) => void;
+}
+
+function AppTypeahead(props: TypeaheadProps) {
+ const [filteredItems, setFilteredItems] = useState([...props.items]);
+ const [workingSelectedValues, setWorkingSelectedValues] = useState([...props.selectedItems]);
+
+ const isChecked = (value: string) => {
+ return workingSelectedValues.find((item) => item === value) !== undefined;
+ };
+
+ const cancelChanges = () => {
+ const { onSelectionCancel } = props;
+ if (onSelectionCancel !== undefined) {
+ onSelectionCancel();
+ }
+ };
+
+ const confirmChanges = () => {
+ const { onSelectionChange } = props;
+ if (onSelectionChange !== undefined) {
+ onSelectionChange(workingSelectedValues);
+ }
+ };
+
+ const searchbarInput = (event: any) => {
+ filterList(event.target.value);
+ };
+
+ /**
+ * Update the rendered view with
+ * the provided search query. If no
+ * query is provided, all data
+ * will be rendered.
+ */
+ const filterList = (searchQuery: string | null | undefined) => {
+ /**
+ * If no search query is defined,
+ * return all options.
+ */
+ if (searchQuery === undefined || searchQuery === null) {
+ setFilteredItems([...props.items]);
+ } else {
+ /**
+ * Otherwise, normalize the search
+ * query and check to see which items
+ * contain the search query as a substring.
+ */
+ const normalizedQuery = searchQuery.toLowerCase();
+ setFilteredItems(
+ props.items.filter((item) => {
+ return item.text.toLowerCase().includes(normalizedQuery);
+ })
+ );
+ }
+ };
+
+ const checkboxChange = (event: CheckboxCustomEvent) => {
+ const { checked, value } = event.detail;
+
+ if (checked) {
+ setWorkingSelectedValues([...workingSelectedValues, value]);
+ } else {
+ setWorkingSelectedValues(workingSelectedValues.filter((item) => item !== value));
+ }
+ };
+
+ return (
+ <>
+
+
+
+ Cancel
+
+ {props.title}
+
+ Done
+
+
+
+
+
+
+
+
+ {filteredItems.map((item) => (
+
+
+ {item.text}
+
+
+ ))}
+
+
+
+ );
+}
+export default AppTypeahead;
+```
diff --git a/static/usage/v9/select/typeahead/vue/example_vue.md b/static/usage/v9/select/typeahead/vue/example_vue.md
new file mode 100644
index 00000000000..bf15d147b79
--- /dev/null
+++ b/static/usage/v9/select/typeahead/vue/example_vue.md
@@ -0,0 +1,76 @@
+```html
+
+
+
+
+ Favorite Fruits
+ {{ selectedFruitsText }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v9/select/typeahead/vue/typeahead_component_vue.md
new file mode 100644
index 00000000000..1d145e47fb5
--- /dev/null
+++ b/static/usage/v9/select/typeahead/vue/typeahead_component_vue.md
@@ -0,0 +1,115 @@
+```html
+
+
+
+
+ Cancel
+
+ {{ $props.title }}
+
+ Done
+
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/select/typeahead/vue/vue_types_ts.md b/static/usage/v9/select/typeahead/vue/vue_types_ts.md
new file mode 100644
index 00000000000..42d4583e026
--- /dev/null
+++ b/static/usage/v9/select/typeahead/vue/vue_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+ text: string;
+ value: string;
+}
+```
diff --git a/static/usage/v9/skeleton-text/basic/angular/example_component_html.md b/static/usage/v9/skeleton-text/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..de7aaafd2f3
--- /dev/null
+++ b/static/usage/v9/skeleton-text/basic/angular/example_component_html.md
@@ -0,0 +1,41 @@
+```html
+@if (loaded) {
+
+ Albums
+
+
+
+
+ Abbey Road
+ The Beatles
+ 1969
+
+
+
+} @else {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+Toggle
+```
diff --git a/static/usage/v9/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v9/skeleton-text/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..fc9695838c8
--- /dev/null
+++ b/static/usage/v9/skeleton-text/basic/angular/example_component_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonButton,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonSkeletonText,
+ IonThumbnail,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { musicalNotes } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail],
+})
+export class ExampleComponent {
+ public loaded = false;
+
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ musicalNotes });
+ }
+}
+```
diff --git a/static/usage/v9/skeleton-text/basic/demo.html b/static/usage/v9/skeleton-text/basic/demo.html
new file mode 100644
index 00000000000..1a29180e73f
--- /dev/null
+++ b/static/usage/v9/skeleton-text/basic/demo.html
@@ -0,0 +1,89 @@
+
+
+
+ Accordion
+
+
+
+ Toggle
+
+
+
+
+
+
+
diff --git a/static/usage/v9/skeleton-text/basic/index.md b/static/usage/v9/skeleton-text/basic/index.md
new file mode 100644
index 00000000000..9c1dfdb57c9
--- /dev/null
+++ b/static/usage/v9/skeleton-text/basic/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+Toggle
+
+
+```
diff --git a/static/usage/v9/skeleton-text/basic/javascript/index_ts.md b/static/usage/v9/skeleton-text/basic/javascript/index_ts.md
new file mode 100644
index 00000000000..71e4281cb46
--- /dev/null
+++ b/static/usage/v9/skeleton-text/basic/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { musicalNotes } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to a "musical-notes" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'musical-notes': musicalNotes });
+ */
+addIcons({ musicalNotes });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/skeleton-text/basic/react.md b/static/usage/v9/skeleton-text/basic/react.md
new file mode 100644
index 00000000000..a247849a478
--- /dev/null
+++ b/static/usage/v9/skeleton-text/basic/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React, { useState } from 'react';
+import {
+ IonButton,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonSkeletonText,
+ IonThumbnail,
+} from '@ionic/react';
+import { musicalNotes } from 'ionicons/icons';
+function Example() {
+ const [loaded, setLoaded] = useState(false);
+ return (
+ <>
+ {loaded && (
+
+ Albums
+
+
+
+
+ Abbey Road
+ The Beatles
+ 1969
+
+
+
+ )}
+ {!loaded && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ setLoaded(!loaded)}>Toggle
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/skeleton-text/basic/vue.md b/static/usage/v9/skeleton-text/basic/vue.md
new file mode 100644
index 00000000000..17b4eb4985f
--- /dev/null
+++ b/static/usage/v9/skeleton-text/basic/vue.md
@@ -0,0 +1,59 @@
+```html
+
+
+ Albums
+
+
+
+
+ Abbey Road
+ The Beatles
+ 1969
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle
+
+
+
+```
diff --git a/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..c59d8603262
--- /dev/null
+++ b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+ion-skeleton-text {
+ --border-radius: 9999px;
+ --background: rgba(188, 0, 255, 0.065);
+ --background-rgb: 188, 0, 255;
+}
+```
diff --git a/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_html.md b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4044c112b0c
--- /dev/null
+++ b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..fde523457ca
--- /dev/null
+++ b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/skeleton-text/theming/css-properties/demo.html b/static/usage/v9/skeleton-text/theming/css-properties/demo.html
new file mode 100644
index 00000000000..c7b8c229dae
--- /dev/null
+++ b/static/usage/v9/skeleton-text/theming/css-properties/demo.html
@@ -0,0 +1,58 @@
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/skeleton-text/theming/css-properties/index.md b/static/usage/v9/skeleton-text/theming/css-properties/index.md
new file mode 100644
index 00000000000..f616ab8f1f8
--- /dev/null
+++ b/static/usage/v9/skeleton-text/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_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';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v9/skeleton-text/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..c59d8603262
--- /dev/null
+++ b/static/usage/v9/skeleton-text/theming/css-properties/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+ion-skeleton-text {
+ --border-radius: 9999px;
+ --background: rgba(188, 0, 255, 0.065);
+ --background-rgb: 188, 0, 255;
+}
+```
diff --git a/static/usage/v9/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v9/skeleton-text/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..d66ea73ff7f
--- /dev/null
+++ b/static/usage/v9/skeleton-text/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/skeleton-text/theming/css-properties/vue.md b/static/usage/v9/skeleton-text/theming/css-properties/vue.md
new file mode 100644
index 00000000000..58395e04bf9
--- /dev/null
+++ b/static/usage/v9/skeleton-text/theming/css-properties/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/spinner/basic/angular/example_component_html.md b/static/usage/v9/spinner/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..72997980940
--- /dev/null
+++ b/static/usage/v9/spinner/basic/angular/example_component_html.md
@@ -0,0 +1,51 @@
+```html
+
+ Default
+
+
+
+ Dots
+
+
+
+ Lines
+
+
+
+ Lines Small
+
+
+
+ Lines Sharp
+
+
+
+ Lines Sharp Small
+
+
+
+ Bubbles
+
+
+
+ Circles
+
+
+
+ Circular
+
+
+
+ Crescent
+
+```
diff --git a/static/usage/v9/spinner/basic/angular/example_component_ts.md b/static/usage/v9/spinner/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..7fffdae985b
--- /dev/null
+++ b/static/usage/v9/spinner/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonSpinner } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonSpinner],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/spinner/basic/demo.html b/static/usage/v9/spinner/basic/demo.html
new file mode 100644
index 00000000000..b93f88ab8cf
--- /dev/null
+++ b/static/usage/v9/spinner/basic/demo.html
@@ -0,0 +1,77 @@
+
+
+
+ Spinner
+
+
+
+
+ Default
+
+
+
+ Dots
+
+
+
+ Lines
+
+
+
+ Lines Small
+
+
+
+ Lines Sharp
+
+
+
+ Lines Sharp Small
+
+
+
+ Bubbles
+
+
+
+ Circles
+
+
+
+ Circular
+
+
+
+ Crescent
+
+
+
+
+
+
diff --git a/static/usage/v9/spinner/basic/index.md b/static/usage/v9/spinner/basic/index.md
new file mode 100644
index 00000000000..f005e3a820a
--- /dev/null
+++ b/static/usage/v9/spinner/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';
+
+
+ Default
+
+
+
+ Dots
+
+
+
+ Lines
+
+
+
+ Lines Small
+
+
+
+ Lines Sharp
+
+
+
+ Lines Sharp Small
+
+
+
+ Bubbles
+
+
+
+ Circles
+
+
+
+ Circular
+
+
+
+ Crescent
+
+```
diff --git a/static/usage/v9/spinner/basic/react.md b/static/usage/v9/spinner/basic/react.md
new file mode 100644
index 00000000000..c6219c28b42
--- /dev/null
+++ b/static/usage/v9/spinner/basic/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonSpinner } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default
+
+
+
+ Dots
+
+
+
+ Lines
+
+
+
+ Lines Small
+
+
+
+ Lines Sharp
+
+
+
+ Lines Sharp Small
+
+
+
+ Bubbles
+
+
+
+ Circles
+
+
+
+ Circular
+
+
+
+ Crescent
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/spinner/basic/vue.md b/static/usage/v9/spinner/basic/vue.md
new file mode 100644
index 00000000000..e12bd51515a
--- /dev/null
+++ b/static/usage/v9/spinner/basic/vue.md
@@ -0,0 +1,57 @@
+```html
+
+
+ Default
+
+
+
+ Dots
+
+
+
+ Lines
+
+
+
+ Lines Small
+
+
+
+ Lines Sharp
+
+
+
+ Lines Sharp Small
+
+
+
+ Bubbles
+
+
+
+ Circles
+
+
+
+ Circular
+
+
+
+ Crescent
+
+
+
+
+```
diff --git a/static/usage/v9/spinner/theming/colors/angular/example_component_html.md b/static/usage/v9/spinner/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..089ea023e92
--- /dev/null
+++ b/static/usage/v9/spinner/theming/colors/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+Spinner
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/spinner/theming/colors/index.md b/static/usage/v9/spinner/theming/colors/index.md
new file mode 100644
index 00000000000..5061ddb9845
--- /dev/null
+++ b/static/usage/v9/spinner/theming/colors/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/spinner/theming/css-properties/angular/example_component_css.md b/static/usage/v9/spinner/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..e77a7d79e6a
--- /dev/null
+++ b/static/usage/v9/spinner/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-spinner {
+ --color: #54dc98;
+}
+```
diff --git a/static/usage/v9/spinner/theming/css-properties/angular/example_component_html.md b/static/usage/v9/spinner/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4b3b8d665b4
--- /dev/null
+++ b/static/usage/v9/spinner/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Spinner
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/spinner/theming/css-properties/index.md b/static/usage/v9/spinner/theming/css-properties/index.md
new file mode 100644
index 00000000000..c6a39a53bc8
--- /dev/null
+++ b/static/usage/v9/spinner/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/spinner/theming/resizing/angular/example_component_css.md b/static/usage/v9/spinner/theming/resizing/angular/example_component_css.md
new file mode 100644
index 00000000000..845d1a9af47
--- /dev/null
+++ b/static/usage/v9/spinner/theming/resizing/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-spinner {
+ width: 100px;
+ height: 100px;
+}
+```
diff --git a/static/usage/v9/spinner/theming/resizing/angular/example_component_html.md b/static/usage/v9/spinner/theming/resizing/angular/example_component_html.md
new file mode 100644
index 00000000000..4b3b8d665b4
--- /dev/null
+++ b/static/usage/v9/spinner/theming/resizing/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Spinner
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/spinner/theming/resizing/index.md b/static/usage/v9/spinner/theming/resizing/index.md
new file mode 100644
index 00000000000..f6e4e80ab55
--- /dev/null
+++ b/static/usage/v9/spinner/theming/resizing/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/split-pane/basic/angular/example_component_html.md b/static/usage/v9/split-pane/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..c642d54bc50
--- /dev/null
+++ b/static/usage/v9/split-pane/basic/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+ Menu
+
+
+ Menu Content
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+```
diff --git a/static/usage/v9/split-pane/basic/angular/example_component_ts.md b/static/usage/v9/split-pane/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..84c41501166
--- /dev/null
+++ b/static/usage/v9/split-pane/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/split-pane/basic/demo.html b/static/usage/v9/split-pane/basic/demo.html
new file mode 100644
index 00000000000..78ff2beed37
--- /dev/null
+++ b/static/usage/v9/split-pane/basic/demo.html
@@ -0,0 +1,36 @@
+
+
+
+ Spinner
+
+
+
+
+
+ Menu
+
+
+ Menu Content
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+
+
+
diff --git a/static/usage/v9/split-pane/basic/index.md b/static/usage/v9/split-pane/basic/index.md
new file mode 100644
index 00000000000..4416c17578b
--- /dev/null
+++ b/static/usage/v9/split-pane/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';
+
+
+
+
+
+ Menu
+
+
+ Menu Content
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+```
diff --git a/static/usage/v9/split-pane/basic/react.md b/static/usage/v9/split-pane/basic/react.md
new file mode 100644
index 00000000000..f754f18b3a6
--- /dev/null
+++ b/static/usage/v9/split-pane/basic/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ Menu
+
+
+ Menu Content
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/split-pane/basic/vue.md b/static/usage/v9/split-pane/basic/vue.md
new file mode 100644
index 00000000000..eab2924fd6b
--- /dev/null
+++ b/static/usage/v9/split-pane/basic/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+
+ Menu
+
+
+ Menu Content
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+
+
+
+```
diff --git a/static/usage/v9/split-pane/theming/css-properties/angular/example_component_css.md b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-split-pane {
+ --side-width: 350px;
+ --side-max-width: 350px;
+
+ --border: 1px dashed #b3baff;
+}
+```
diff --git a/static/usage/v9/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..029f5d3ee56
--- /dev/null
+++ b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+ Menu
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+```
diff --git a/static/usage/v9/split-pane/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..84c41501166
--- /dev/null
+++ b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/split-pane/theming/css-properties/demo.html b/static/usage/v9/split-pane/theming/css-properties/demo.html
new file mode 100644
index 00000000000..d4dd6e05ff4
--- /dev/null
+++ b/static/usage/v9/split-pane/theming/css-properties/demo.html
@@ -0,0 +1,44 @@
+
+
+
+ Spinner
+
+
+
+
+
+ Menu
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+
+
+
diff --git a/static/usage/v9/split-pane/theming/css-properties/index.md b/static/usage/v9/split-pane/theming/css-properties/index.md
new file mode 100644
index 00000000000..213d1efdd7a
--- /dev/null
+++ b/static/usage/v9/split-pane/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_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';
+
+
+
+
+
+ Menu
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+
+
+```
diff --git a/static/usage/v9/split-pane/theming/css-properties/react/main_css.md b/static/usage/v9/split-pane/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/v9/split-pane/theming/css-properties/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-split-pane {
+ --side-width: 350px;
+ --side-max-width: 350px;
+
+ --border: 1px dashed #b3baff;
+}
+```
diff --git a/static/usage/v9/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v9/split-pane/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..1d4ad6a2e19
--- /dev/null
+++ b/static/usage/v9/split-pane/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+ Menu
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/split-pane/theming/css-properties/vue.md b/static/usage/v9/split-pane/theming/css-properties/vue.md
new file mode 100644
index 00000000000..ffdbb6343e1
--- /dev/null
+++ b/static/usage/v9/split-pane/theming/css-properties/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+
+
+ Menu
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+ Main View
+
+
+ Main View Content
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/basic/angular/example_component_css.md b/static/usage/v9/tabs/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..b177722f8cc
--- /dev/null
+++ b/static/usage/v9/tabs/basic/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+/* This style is for demonstration purposes only. */
+/* It's not required for the tabs to function. */
+.example-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+```
diff --git a/static/usage/v9/tabs/basic/angular/example_component_html.md b/static/usage/v9/tabs/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..703dde43d65
--- /dev/null
+++ b/static/usage/v9/tabs/basic/angular/example_component_html.md
@@ -0,0 +1,71 @@
+```html
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/basic/angular/example_component_ts.md b/static/usage/v9/tabs/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..b1f3b7fa444
--- /dev/null
+++ b/static/usage/v9/tabs/basic/angular/example_component_ts.md
@@ -0,0 +1,34 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonTab,
+ IonTabBar,
+ IonTabButton,
+ IonTabs,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonIcon, IonTab, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ library, playCircle, radio, search });
+ }
+}
+```
diff --git a/static/usage/v9/tabs/basic/demo.html b/static/usage/v9/tabs/basic/demo.html
new file mode 100644
index 00000000000..7025c4f8222
--- /dev/null
+++ b/static/usage/v9/tabs/basic/demo.html
@@ -0,0 +1,94 @@
+
+
+
+ Tabs
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/tabs/basic/index.md b/static/usage/v9/tabs/basic/index.md
new file mode 100644
index 00000000000..edbc5dbb5c8
--- /dev/null
+++ b/static/usage/v9/tabs/basic/index.md
@@ -0,0 +1,42 @@
+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/main_tsx.md';
+import react_main_css from './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';
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/basic/javascript/index_ts.md b/static/usage/v9/tabs/basic/javascript/index_ts.md
new file mode 100644
index 00000000000..2952676d830
--- /dev/null
+++ b/static/usage/v9/tabs/basic/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search });
+ */
+addIcons({ library, playCircle, radio, search });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/tabs/basic/react/main_css.md b/static/usage/v9/tabs/basic/react/main_css.md
new file mode 100644
index 00000000000..b177722f8cc
--- /dev/null
+++ b/static/usage/v9/tabs/basic/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+/* This style is for demonstration purposes only. */
+/* It's not required for the tabs to function. */
+.example-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+```
diff --git a/static/usage/v9/tabs/basic/react/main_tsx.md b/static/usage/v9/tabs/basic/react/main_tsx.md
new file mode 100644
index 00000000000..f97e29769bd
--- /dev/null
+++ b/static/usage/v9/tabs/basic/react/main_tsx.md
@@ -0,0 +1,94 @@
+```tsx
+import React from 'react';
+import {
+ IonContent,
+ IonIcon,
+ IonHeader,
+ IonTab,
+ IonTabs,
+ IonTabBar,
+ IonTabButton,
+ IonTitle,
+ IonToolbar,
+ IonPage,
+} from '@ionic/react';
+
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/tabs/basic/vue.md b/static/usage/v9/tabs/basic/vue.md
new file mode 100644
index 00000000000..dc7e2358f46
--- /dev/null
+++ b/static/usage/v9/tabs/basic/vue.md
@@ -0,0 +1,100 @@
+```html
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/router/angular/app_component_html.md b/static/usage/v9/tabs/router/angular/app_component_html.md
new file mode 100644
index 00000000000..3b819dc640d
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/app_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+
+```
diff --git a/static/usage/v9/tabs/router/angular/app_component_ts.md b/static/usage/v9/tabs/router/angular/app_component_ts.md
new file mode 100644
index 00000000000..2cdd21a9f62
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/app_component_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.css'],
+ imports: [IonApp, IonRouterOutlet],
+})
+export class AppComponent {
+ constructor() {}
+}
+```
diff --git a/static/usage/v9/tabs/router/angular/app_routes_ts.md b/static/usage/v9/tabs/router/angular/app_routes_ts.md
new file mode 100644
index 00000000000..fd959555b28
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/app_routes_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Routes } from '@angular/router';
+import { ExampleComponent } from './example.component';
+
+export const routes: Routes = [
+ {
+ path: 'example',
+ component: ExampleComponent,
+ children: [
+ {
+ path: 'home',
+ loadComponent: () => import('./home/home-page.component').then((m) => m.HomePageComponent),
+ },
+ {
+ path: 'library',
+ loadComponent: () => import('./library/library-page.component').then((m) => m.LibraryPageComponent),
+ },
+ {
+ path: 'radio',
+ loadComponent: () => import('./radio/radio-page.component').then((m) => m.RadioPageComponent),
+ },
+ {
+ path: 'search',
+ loadComponent: () => import('./search/search-page.component').then((m) => m.SearchPageComponent),
+ },
+ {
+ path: '',
+ redirectTo: '/example/home',
+ pathMatch: 'full',
+ },
+ ],
+ },
+ {
+ path: '',
+ redirectTo: '/example/home',
+ pathMatch: 'full',
+ },
+];
+```
diff --git a/static/usage/v9/tabs/router/angular/example_component_html.md b/static/usage/v9/tabs/router/angular/example_component_html.md
new file mode 100644
index 00000000000..67be68b564c
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/example_component_html.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/router/angular/example_component_ts.md b/static/usage/v9/tabs/router/angular/example_component_ts.md
new file mode 100644
index 00000000000..57413fcfea3
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon, IonTabBar, IonTabButton, IonTabs],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ library, playCircle, radio, search });
+ }
+}
+```
diff --git a/static/usage/v9/tabs/router/angular/global_css.md b/static/usage/v9/tabs/router/angular/global_css.md
new file mode 100644
index 00000000000..a782d2d7f90
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/global_css.md
@@ -0,0 +1,8 @@
+```css
+.example-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+```
diff --git a/static/usage/v9/tabs/router/angular/home_page_component_html.md b/static/usage/v9/tabs/router/angular/home_page_component_html.md
new file mode 100644
index 00000000000..7ef5bc47333
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/home_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Listen now
+
+
+
+ Listen now content
+
+```
diff --git a/static/usage/v9/tabs/router/angular/home_page_component_ts.md b/static/usage/v9/tabs/router/angular/home_page_component_ts.md
new file mode 100644
index 00000000000..f4092fc5434
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/home_page_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-home-page',
+ templateUrl: './home-page.component.html',
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class HomePageComponent {}
+```
diff --git a/static/usage/v9/tabs/router/angular/library_page_component_html.md b/static/usage/v9/tabs/router/angular/library_page_component_html.md
new file mode 100644
index 00000000000..a0df4a6d684
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/library_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Library
+
+
+
+ Library content
+
+```
diff --git a/static/usage/v9/tabs/router/angular/library_page_component_ts.md b/static/usage/v9/tabs/router/angular/library_page_component_ts.md
new file mode 100644
index 00000000000..d6a2ab400d2
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/library_page_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-library-page',
+ templateUrl: './library-page.component.html',
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class LibraryPageComponent {}
+```
diff --git a/static/usage/v9/tabs/router/angular/radio_page_component_html.md b/static/usage/v9/tabs/router/angular/radio_page_component_html.md
new file mode 100644
index 00000000000..e6affd4132f
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/radio_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Radio
+
+
+
+ Radio content
+
+```
diff --git a/static/usage/v9/tabs/router/angular/radio_page_component_ts.md b/static/usage/v9/tabs/router/angular/radio_page_component_ts.md
new file mode 100644
index 00000000000..1938955bb9d
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/radio_page_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-radio-page',
+ templateUrl: './radio-page.component.html',
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class RadioPageComponent {}
+```
diff --git a/static/usage/v9/tabs/router/angular/search_page_component_html.md b/static/usage/v9/tabs/router/angular/search_page_component_html.md
new file mode 100644
index 00000000000..91cb5c6f2db
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/search_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Search
+
+
+
+ Search content
+
+```
diff --git a/static/usage/v9/tabs/router/angular/search_page_component_ts.md b/static/usage/v9/tabs/router/angular/search_page_component_ts.md
new file mode 100644
index 00000000000..f069e1384d4
--- /dev/null
+++ b/static/usage/v9/tabs/router/angular/search_page_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-search-page',
+ templateUrl: './search-page.component.html',
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class SearchPageComponent {}
+```
diff --git a/static/usage/v9/tabs/router/demo.html b/static/usage/v9/tabs/router/demo.html
new file mode 100644
index 00000000000..db3aa7fbdd6
--- /dev/null
+++ b/static/usage/v9/tabs/router/demo.html
@@ -0,0 +1,114 @@
+
+
+
+ Tabs
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/tabs/router/index.md b/static/usage/v9/tabs/router/index.md
new file mode 100644
index 00000000000..d3835f7833a
--- /dev/null
+++ b/static/usage/v9/tabs/router/index.md
@@ -0,0 +1,94 @@
+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 angular_app_routes_ts from './angular/app_routes_ts.md';
+import angular_app_component_html from './angular/app_component_html.md';
+import angular_app_component_ts from './angular/app_component_ts.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+import angular_home_page_component_ts from './angular/home_page_component_ts.md';
+import angular_home_page_component_html from './angular/home_page_component_html.md';
+
+import angular_library_page_component_ts from './angular/library_page_component_ts.md';
+import angular_library_page_component_html from './angular/library_page_component_html.md';
+
+import angular_radio_page_component_ts from './angular/radio_page_component_ts.md';
+import angular_radio_page_component_html from './angular/radio_page_component_html.md';
+
+import angular_search_page_component_ts from './angular/search_page_component_ts.md';
+import angular_search_page_component_html from './angular/search_page_component_html.md';
+
+import angular_global_css from './angular/global_css.md';
+
+import vue_app_vue from './vue/app_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+import vue_example_vue from './vue/example_vue.md';
+import vue_router_ts from './vue/router_ts.md';
+import vue_home_page_vue from './vue/home_page_vue.md';
+import vue_radio_page_vue from './vue/radio_page_vue.md';
+import vue_library_page_vue from './vue/library_page_vue.md';
+import vue_search_page_vue from './vue/search_page_vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_home_page_tsx from './react/home_page_tsx.md';
+import react_radio_page_tsx from './react/radio_page_tsx.md';
+import react_library_page_tsx from './react/library_page_tsx.md';
+import react_search_page_tsx from './react/search_page_tsx.md';
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/router/javascript/index_ts.md b/static/usage/v9/tabs/router/javascript/index_ts.md
new file mode 100644
index 00000000000..2952676d830
--- /dev/null
+++ b/static/usage/v9/tabs/router/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search });
+ */
+addIcons({ library, playCircle, radio, search });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/tabs/router/react/home_page_tsx.md b/static/usage/v9/tabs/router/react/home_page_tsx.md
new file mode 100644
index 00000000000..f30578f2c86
--- /dev/null
+++ b/static/usage/v9/tabs/router/react/home_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+const HomePage = () => (
+
+
+
+ Listen now
+
+
+
+
+ Listen now content
+
+
+
+);
+
+export default HomePage;
+```
diff --git a/static/usage/v9/tabs/router/react/library_page_tsx.md b/static/usage/v9/tabs/router/react/library_page_tsx.md
new file mode 100644
index 00000000000..b2ee1528d04
--- /dev/null
+++ b/static/usage/v9/tabs/router/react/library_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+const LibraryPage = () => (
+
+
+
+ Library
+
+
+
+
+ Library content
+
+
+
+);
+
+export default LibraryPage;
+```
diff --git a/static/usage/v9/tabs/router/react/main_tsx.md b/static/usage/v9/tabs/router/react/main_tsx.md
new file mode 100644
index 00000000000..075a20027e6
--- /dev/null
+++ b/static/usage/v9/tabs/router/react/main_tsx.md
@@ -0,0 +1,53 @@
+```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+
+import { Route, Navigate } from 'react-router-dom';
+
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+import HomePage from './pages/HomePage';
+import RadioPage from './pages/RadioPage';
+import LibraryPage from './pages/LibraryPage';
+import SearchPage from './pages/SearchPage';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+ Listen now
+
+
+
+ Radio
+
+
+
+ Library
+
+
+
+ Search
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/tabs/router/react/radio_page_tsx.md b/static/usage/v9/tabs/router/react/radio_page_tsx.md
new file mode 100644
index 00000000000..83efaf77667
--- /dev/null
+++ b/static/usage/v9/tabs/router/react/radio_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+const RadioPage = () => (
+
+
+
+ Radio
+
+
+
+
+ Radio content
+
+
+
+);
+
+export default RadioPage;
+```
diff --git a/static/usage/v9/tabs/router/react/search_page_tsx.md b/static/usage/v9/tabs/router/react/search_page_tsx.md
new file mode 100644
index 00000000000..2fedbcf962a
--- /dev/null
+++ b/static/usage/v9/tabs/router/react/search_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+const SearchPage = () => (
+
+
+
+ Search
+
+
+
+
+ Search content
+
+
+
+);
+
+export default SearchPage;
+```
diff --git a/static/usage/v9/tabs/router/vue/app_vue.md b/static/usage/v9/tabs/router/vue/app_vue.md
new file mode 100644
index 00000000000..0b0450daca8
--- /dev/null
+++ b/static/usage/v9/tabs/router/vue/app_vue.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/router/vue/example_vue.md b/static/usage/v9/tabs/router/vue/example_vue.md
new file mode 100644
index 00000000000..a59a1d5784a
--- /dev/null
+++ b/static/usage/v9/tabs/router/vue/example_vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+
+
+ Listen now
+
+
+
+ Radio
+
+
+
+ Library
+
+
+
+ Search
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/router/vue/home_page_vue.md b/static/usage/v9/tabs/router/vue/home_page_vue.md
new file mode 100644
index 00000000000..ce5c59ddcac
--- /dev/null
+++ b/static/usage/v9/tabs/router/vue/home_page_vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/router/vue/library_page_vue.md b/static/usage/v9/tabs/router/vue/library_page_vue.md
new file mode 100644
index 00000000000..e25ad802ba5
--- /dev/null
+++ b/static/usage/v9/tabs/router/vue/library_page_vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/router/vue/main_ts.md b/static/usage/v9/tabs/router/vue/main_ts.md
new file mode 100644
index 00000000000..f03f4831313
--- /dev/null
+++ b/static/usage/v9/tabs/router/vue/main_ts.md
@@ -0,0 +1,43 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+import router from './router';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic Dark Theme
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/vue/css/palettes/dark.always.css';
+// import '@ionic/vue/css/palettes/dark.class.css';
+import '@ionic/vue/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+const app = createApp(App).use(IonicVue).use(router);
+
+router.isReady().then(() => {
+ app.mount('#app');
+});
+```
diff --git a/static/usage/v9/tabs/router/vue/radio_page_vue.md b/static/usage/v9/tabs/router/vue/radio_page_vue.md
new file mode 100644
index 00000000000..6ee82832885
--- /dev/null
+++ b/static/usage/v9/tabs/router/vue/radio_page_vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/router/vue/router_ts.md b/static/usage/v9/tabs/router/vue/router_ts.md
new file mode 100644
index 00000000000..3279c38def4
--- /dev/null
+++ b/static/usage/v9/tabs/router/vue/router_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import Example from './components/Example.vue';
+
+const routes: Array = [
+ {
+ path: '/',
+ redirect: '/home',
+ },
+ {
+ path: '/',
+ component: Example,
+ children: [
+ {
+ path: '',
+ redirect: '/home',
+ },
+ {
+ path: 'home',
+ component: () => import('./views/HomePage.vue'),
+ },
+ {
+ path: 'radio',
+ component: () => import('./views/RadioPage.vue'),
+ },
+ {
+ path: 'library',
+ component: () => import('./views/LibraryPage.vue'),
+ },
+ {
+ path: 'search',
+ component: () => import('./views/SearchPage.vue'),
+ },
+ ],
+ },
+];
+
+const router = createRouter({
+ // Use: createWebHistory(process.env.BASE_URL) in your app
+ history: createWebHistory(),
+ routes,
+});
+
+export default router;
+```
diff --git a/static/usage/v9/tabs/router/vue/search_page_vue.md b/static/usage/v9/tabs/router/vue/search_page_vue.md
new file mode 100644
index 00000000000..6d2ee2d3d2b
--- /dev/null
+++ b/static/usage/v9/tabs/router/vue/search_page_vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/select-method/angular/example_component_css.md b/static/usage/v9/tabs/select-method/angular/example_component_css.md
new file mode 100644
index 00000000000..ba3bdfca17c
--- /dev/null
+++ b/static/usage/v9/tabs/select-method/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+/* This style is for demonstration purposes only. */
+/* It's not required for the tabs to function. */
+.example-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ gap: 10px;
+}
+```
diff --git a/static/usage/v9/tabs/select-method/angular/example_component_html.md b/static/usage/v9/tabs/select-method/angular/example_component_html.md
new file mode 100644
index 00000000000..2edb44c9dcd
--- /dev/null
+++ b/static/usage/v9/tabs/select-method/angular/example_component_html.md
@@ -0,0 +1,74 @@
+```html
+
+
+
+
+
+ Listen now
+
+
+
+
+ Listen now content
+ Go to Radio
+
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/select-method/angular/example_component_ts.md b/static/usage/v9/tabs/select-method/angular/example_component_ts.md
new file mode 100644
index 00000000000..6368ee1d387
--- /dev/null
+++ b/static/usage/v9/tabs/select-method/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonTab,
+ IonTabBar,
+ IonTabButton,
+ IonTabs,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonHeader, IonIcon, IonTab, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ @ViewChild('tabs') tabs!: IonTabs;
+
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ library, playCircle, radio, search });
+ }
+
+ selectRadio() {
+ this.tabs.select('radio');
+ }
+}
+```
diff --git a/static/usage/v9/tabs/select-method/demo.html b/static/usage/v9/tabs/select-method/demo.html
new file mode 100644
index 00000000000..0ba933d0ec7
--- /dev/null
+++ b/static/usage/v9/tabs/select-method/demo.html
@@ -0,0 +1,106 @@
+
+
+
+ Tabs
+
+
+
+
+
+
+ Listen now
+
+
+
+
+ Listen now content
+ Go to Radio
+
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/tabs/select-method/index.md b/static/usage/v9/tabs/select-method/index.md
new file mode 100644
index 00000000000..c72725df41c
--- /dev/null
+++ b/static/usage/v9/tabs/select-method/index.md
@@ -0,0 +1,42 @@
+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/main_tsx.md';
+import react_main_css from './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';
+
+
+
+
+
+
+ Listen now
+
+
+
+
+ Listen now content
+ Go to Radio
+
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/tabs/select-method/javascript/index_ts.md b/static/usage/v9/tabs/select-method/javascript/index_ts.md
new file mode 100644
index 00000000000..2952676d830
--- /dev/null
+++ b/static/usage/v9/tabs/select-method/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search });
+ */
+addIcons({ library, playCircle, radio, search });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/tabs/select-method/react/main_css.md b/static/usage/v9/tabs/select-method/react/main_css.md
new file mode 100644
index 00000000000..ba3bdfca17c
--- /dev/null
+++ b/static/usage/v9/tabs/select-method/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+/* This style is for demonstration purposes only. */
+/* It's not required for the tabs to function. */
+.example-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ gap: 10px;
+}
+```
diff --git a/static/usage/v9/tabs/select-method/react/main_tsx.md b/static/usage/v9/tabs/select-method/react/main_tsx.md
new file mode 100644
index 00000000000..02b6b7d41a3
--- /dev/null
+++ b/static/usage/v9/tabs/select-method/react/main_tsx.md
@@ -0,0 +1,103 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButton,
+ IonContent,
+ IonIcon,
+ IonHeader,
+ IonTab,
+ IonTabs,
+ IonTabBar,
+ IonTabButton,
+ IonTitle,
+ IonToolbar,
+ IonPage,
+} from '@ionic/react';
+
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ const selectRadio = () => {
+ const tabs = document.querySelector('ion-tabs');
+ tabs?.select('radio');
+ };
+
+ return (
+
+
+
+
+
+ Listen now
+
+
+
+
+ Listen now content
+ Go to Radio
+
+
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/tabs/select-method/vue.md b/static/usage/v9/tabs/select-method/vue.md
new file mode 100644
index 00000000000..5db2a6eb2da
--- /dev/null
+++ b/static/usage/v9/tabs/select-method/vue.md
@@ -0,0 +1,113 @@
+```html
+
+
+
+
+
+
+ Listen now
+
+
+
+
+ Listen now content
+ Go to Radio
+
+
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/text/basic/angular/example_component_html.md b/static/usage/v9/text/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..e63da3cacf9
--- /dev/null
+++ b/static/usage/v9/text/basic/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+ streets was big dish of beef chow mein.
+
+```
diff --git a/static/usage/v9/text/basic/angular/example_component_ts.md b/static/usage/v9/text/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..7bf01889929
--- /dev/null
+++ b/static/usage/v9/text/basic/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonIcon, IonText } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { warning } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonIcon, IonText],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ warning });
+ }
+}
+```
diff --git a/static/usage/v9/text/basic/demo.html b/static/usage/v9/text/basic/demo.html
new file mode 100644
index 00000000000..3ccf505c17e
--- /dev/null
+++ b/static/usage/v9/text/basic/demo.html
@@ -0,0 +1,59 @@
+
+
+
+ Text
+
+
+
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand. Walking through the
+ streets was big dish of beef chow mein.
+
+
+
+
+
diff --git a/static/usage/v9/text/basic/index.md b/static/usage/v9/text/basic/index.md
new file mode 100644
index 00000000000..d6696b98479
--- /dev/null
+++ b/static/usage/v9/text/basic/index.md
@@ -0,0 +1,31 @@
+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 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';
+
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+ streets was big dish of beef chow mein.
+
+```
diff --git a/static/usage/v9/text/basic/javascript/index_ts.md b/static/usage/v9/text/basic/javascript/index_ts.md
new file mode 100644
index 00000000000..6e234de55e4
--- /dev/null
+++ b/static/usage/v9/text/basic/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { warning } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to a "warning" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'warning': warning });
+ */
+addIcons({ warning });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/text/basic/react.md b/static/usage/v9/text/basic/react.md
new file mode 100644
index 00000000000..da8882e3bf5
--- /dev/null
+++ b/static/usage/v9/text/basic/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonText, IonIcon } from '@ionic/react';
+import { warning } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand. Walking through the
+ streets
+ of Soho in the rain. He
+ was
+ looking for a place called Lee Ho Fook's. Gonna get a big dish of beef chow mein.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/text/basic/vue.md b/static/usage/v9/text/basic/vue.md
new file mode 100644
index 00000000000..f1ca97719fc
--- /dev/null
+++ b/static/usage/v9/text/basic/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+ streets was big dish of beef chow mein.
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/autogrow/angular/example_component_html.md b/static/usage/v9/textarea/autogrow/angular/example_component_html.md
new file mode 100644
index 00000000000..03de94359b6
--- /dev/null
+++ b/static/usage/v9/textarea/autogrow/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/autogrow/angular/example_component_ts.md b/static/usage/v9/textarea/autogrow/angular/example_component_ts.md
new file mode 100644
index 00000000000..d6df94753a5
--- /dev/null
+++ b/static/usage/v9/textarea/autogrow/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonTextarea } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/textarea/autogrow/demo.html b/static/usage/v9/textarea/autogrow/demo.html
new file mode 100644
index 00000000000..34282ea0028
--- /dev/null
+++ b/static/usage/v9/textarea/autogrow/demo.html
@@ -0,0 +1,41 @@
+
+
+
+ Textarea - Autogrow
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/autogrow/index.md b/static/usage/v9/textarea/autogrow/index.md
new file mode 100644
index 00000000000..4a670df31b9
--- /dev/null
+++ b/static/usage/v9/textarea/autogrow/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/autogrow/react.md b/static/usage/v9/textarea/autogrow/react.md
new file mode 100644
index 00000000000..28d11b28efc
--- /dev/null
+++ b/static/usage/v9/textarea/autogrow/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonItem, IonTextarea } from '@ionic/react';
+function Example() {
+ return (
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/textarea/autogrow/vue.md b/static/usage/v9/textarea/autogrow/vue.md
new file mode 100644
index 00000000000..086bbcfa85b
--- /dev/null
+++ b/static/usage/v9/textarea/autogrow/vue.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/basic/angular/example_component_html.md b/static/usage/v9/textarea/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..af32fc35b03
--- /dev/null
+++ b/static/usage/v9/textarea/basic/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/basic/angular/example_component_ts.md b/static/usage/v9/textarea/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..b799ed08451
--- /dev/null
+++ b/static/usage/v9/textarea/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/textarea/basic/demo.html b/static/usage/v9/textarea/basic/demo.html
new file mode 100644
index 00000000000..3ae7a1dc7a7
--- /dev/null
+++ b/static/usage/v9/textarea/basic/demo.html
@@ -0,0 +1,38 @@
+
+
+
+ Textarea - Basic Usage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/basic/index.md b/static/usage/v9/textarea/basic/index.md
new file mode 100644
index 00000000000..4b5a3d06379
--- /dev/null
+++ b/static/usage/v9/textarea/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';
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/basic/react.md b/static/usage/v9/textarea/basic/react.md
new file mode 100644
index 00000000000..5d47cf710dd
--- /dev/null
+++ b/static/usage/v9/textarea/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonTextarea } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/textarea/basic/vue.md b/static/usage/v9/textarea/basic/vue.md
new file mode 100644
index 00000000000..6bc024c61b3
--- /dev/null
+++ b/static/usage/v9/textarea/basic/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/clear-on-edit/angular/example_component_html.md b/static/usage/v9/textarea/clear-on-edit/angular/example_component_html.md
new file mode 100644
index 00000000000..409362189a3
--- /dev/null
+++ b/static/usage/v9/textarea/clear-on-edit/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+Textarea - Clear on Edit
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/clear-on-edit/index.md b/static/usage/v9/textarea/clear-on-edit/index.md
new file mode 100644
index 00000000000..b175d3022b5
--- /dev/null
+++ b/static/usage/v9/textarea/clear-on-edit/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/counter/angular/example_component_html.md b/static/usage/v9/textarea/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..436babf6fa4
--- /dev/null
+++ b/static/usage/v9/textarea/counter/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Textarea
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/counter/index.md b/static/usage/v9/textarea/counter/index.md
new file mode 100644
index 00000000000..77c85060f7d
--- /dev/null
+++ b/static/usage/v9/textarea/counter/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+ `${maxLength - inputLength} characters remaining`}
+ >
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/textarea/counter/vue.md b/static/usage/v9/textarea/counter/vue.md
new file mode 100644
index 00000000000..7c100f2cfe9
--- /dev/null
+++ b/static/usage/v9/textarea/counter/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/fill/angular/example_component_html.md b/static/usage/v9/textarea/fill/angular/example_component_html.md
new file mode 100644
index 00000000000..38bcfa1067d
--- /dev/null
+++ b/static/usage/v9/textarea/fill/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+Textarea
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/fill/index.md b/static/usage/v9/textarea/fill/index.md
new file mode 100644
index 00000000000..e735671848f
--- /dev/null
+++ b/static/usage/v9/textarea/fill/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';
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/helper-error/angular/example_component_html.md b/static/usage/v9/textarea/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..3095fd27ead
--- /dev/null
+++ b/static/usage/v9/textarea/helper-error/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Textarea
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/helper-error/index.md b/static/usage/v9/textarea/helper-error/index.md
new file mode 100644
index 00000000000..98402138264
--- /dev/null
+++ b/static/usage/v9/textarea/helper-error/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';
+
+();
+
+ const validateEmail = (email: string) => {
+ return email.match(
+ /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+ );
+ };
+
+ const validate = (event: Event) => {
+ const value = (event.target as HTMLTextAreaElement).value;
+
+ setIsValid(undefined);
+
+ if (value === '') return;
+
+ validateEmail(value) !== null ? setIsValid(true) : setIsValid(false);
+ };
+
+ const markTouched = () => {
+ setIsTouched(true);
+ };
+
+ return (
+ validate(event)}
+ onIonBlur={() => markTouched()}
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/textarea/helper-error/vue.md b/static/usage/v9/textarea/helper-error/vue.md
new file mode 100644
index 00000000000..dd03797bdb5
--- /dev/null
+++ b/static/usage/v9/textarea/helper-error/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/label-placement/angular/example_component_html.md b/static/usage/v9/textarea/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..ef14c919fb8
--- /dev/null
+++ b/static/usage/v9/textarea/label-placement/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/label-placement/angular/example_component_ts.md b/static/usage/v9/textarea/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..b799ed08451
--- /dev/null
+++ b/static/usage/v9/textarea/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/textarea/label-placement/demo.html b/static/usage/v9/textarea/label-placement/demo.html
new file mode 100644
index 00000000000..8202caf78b9
--- /dev/null
+++ b/static/usage/v9/textarea/label-placement/demo.html
@@ -0,0 +1,41 @@
+
+
+
+ Textarea
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/label-placement/index.md b/static/usage/v9/textarea/label-placement/index.md
new file mode 100644
index 00000000000..e0da9ab0c8b
--- /dev/null
+++ b/static/usage/v9/textarea/label-placement/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';
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/label-placement/react.md b/static/usage/v9/textarea/label-placement/react.md
new file mode 100644
index 00000000000..cf2b06229cf
--- /dev/null
+++ b/static/usage/v9/textarea/label-placement/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonTextarea, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/textarea/label-placement/vue.md b/static/usage/v9/textarea/label-placement/vue.md
new file mode 100644
index 00000000000..ed0e760f16e
--- /dev/null
+++ b/static/usage/v9/textarea/label-placement/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/label-slot/angular/example_component_html.md b/static/usage/v9/textarea/label-slot/angular/example_component_html.md
new file mode 100644
index 00000000000..9c8e09ec88a
--- /dev/null
+++ b/static/usage/v9/textarea/label-slot/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+ Comments (Required)
+
+
+
+```
diff --git a/static/usage/v9/textarea/label-slot/angular/example_component_ts.md b/static/usage/v9/textarea/label-slot/angular/example_component_ts.md
new file mode 100644
index 00000000000..3d64bea6dce
--- /dev/null
+++ b/static/usage/v9/textarea/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonText, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/textarea/label-slot/demo.html b/static/usage/v9/textarea/label-slot/demo.html
new file mode 100644
index 00000000000..aa0bcb144fd
--- /dev/null
+++ b/static/usage/v9/textarea/label-slot/demo.html
@@ -0,0 +1,28 @@
+
+
+
+ textarea
+
+
+
+
+
+
+ Comments (Required)
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/label-slot/index.md b/static/usage/v9/textarea/label-slot/index.md
new file mode 100644
index 00000000000..02052862067
--- /dev/null
+++ b/static/usage/v9/textarea/label-slot/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Comments (Required)
+
+
+
+```
diff --git a/static/usage/v9/textarea/label-slot/react.md b/static/usage/v9/textarea/label-slot/react.md
new file mode 100644
index 00000000000..4c58fdf2a7b
--- /dev/null
+++ b/static/usage/v9/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 (
+
+
+
+
+ Comments (Required)
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/textarea/label-slot/vue.md b/static/usage/v9/textarea/label-slot/vue.md
new file mode 100644
index 00000000000..cd3fa2d3f67
--- /dev/null
+++ b/static/usage/v9/textarea/label-slot/vue.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+ Comments (Required)
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/no-visible-label/angular/example_component_html.md b/static/usage/v9/textarea/no-visible-label/angular/example_component_html.md
new file mode 100644
index 00000000000..2f4baaa7511
--- /dev/null
+++ b/static/usage/v9/textarea/no-visible-label/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v9/textarea/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 00000000000..b799ed08451
--- /dev/null
+++ b/static/usage/v9/textarea/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/textarea/no-visible-label/demo.html b/static/usage/v9/textarea/no-visible-label/demo.html
new file mode 100644
index 00000000000..f3e99ffb188
--- /dev/null
+++ b/static/usage/v9/textarea/no-visible-label/demo.html
@@ -0,0 +1,26 @@
+
+
+
+ textarea
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/no-visible-label/index.md b/static/usage/v9/textarea/no-visible-label/index.md
new file mode 100644
index 00000000000..c6d8d19949f
--- /dev/null
+++ b/static/usage/v9/textarea/no-visible-label/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/no-visible-label/react.md b/static/usage/v9/textarea/no-visible-label/react.md
new file mode 100644
index 00000000000..c024d0fee66
--- /dev/null
+++ b/static/usage/v9/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 (
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/textarea/no-visible-label/vue.md b/static/usage/v9/textarea/no-visible-label/vue.md
new file mode 100644
index 00000000000..c889e88da2d
--- /dev/null
+++ b/static/usage/v9/textarea/no-visible-label/vue.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/start-end-slots/angular/example_component_html.md b/static/usage/v9/textarea/start-end-slots/angular/example_component_html.md
new file mode 100644
index 00000000000..ce0988fefec
--- /dev/null
+++ b/static/usage/v9/textarea/start-end-slots/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/start-end-slots/angular/example_component_ts.md b/static/usage/v9/textarea/start-end-slots/angular/example_component_ts.md
new file mode 100644
index 00000000000..7b86bac3c8a
--- /dev/null
+++ b/static/usage/v9/textarea/start-end-slots/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { eye, lockClosed } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonIcon, IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ eye, lockClosed });
+ }
+}
+```
diff --git a/static/usage/v9/textarea/start-end-slots/demo.html b/static/usage/v9/textarea/start-end-slots/demo.html
new file mode 100644
index 00000000000..960bf0fdae9
--- /dev/null
+++ b/static/usage/v9/textarea/start-end-slots/demo.html
@@ -0,0 +1,31 @@
+
+
+
+ Textarea
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/start-end-slots/index.md b/static/usage/v9/textarea/start-end-slots/index.md
new file mode 100644
index 00000000000..16ada68ae9e
--- /dev/null
+++ b/static/usage/v9/textarea/start-end-slots/index.md
@@ -0,0 +1,31 @@
+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 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';
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/start-end-slots/javascript/index_ts.md b/static/usage/v9/textarea/start-end-slots/javascript/index_ts.md
new file mode 100644
index 00000000000..002e3ae87ac
--- /dev/null
+++ b/static/usage/v9/textarea/start-end-slots/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { eye, lockClosed } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'eye': eye, 'lock-closed': lockClosed });
+ */
+addIcons({ eye, lockClosed });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/textarea/start-end-slots/react.md b/static/usage/v9/textarea/start-end-slots/react.md
new file mode 100644
index 00000000000..a64852d4c67
--- /dev/null
+++ b/static/usage/v9/textarea/start-end-slots/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/react';
+import { eye, lockClosed } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/textarea/start-end-slots/vue.md b/static/usage/v9/textarea/start-end-slots/vue.md
new file mode 100644
index 00000000000..8864b474914
--- /dev/null
+++ b/static/usage/v9/textarea/start-end-slots/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/textarea/theming/angular/example_component_css.md b/static/usage/v9/textarea/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..37a2f874cdc
--- /dev/null
+++ b/static/usage/v9/textarea/theming/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-textarea.custom {
+ --background: #373737;
+ --color: #fff;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: 0.8;
+}
+```
diff --git a/static/usage/v9/textarea/theming/angular/example_component_html.md b/static/usage/v9/textarea/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..d5237b2cc36
--- /dev/null
+++ b/static/usage/v9/textarea/theming/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Textarea - Theming
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/textarea/theming/index.md b/static/usage/v9/textarea/theming/index.md
new file mode 100644
index 00000000000..5c06e4258bb
--- /dev/null
+++ b/static/usage/v9/textarea/theming/index.md
@@ -0,0 +1,37 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/always-dark-mode/angular/example_component_html.md b/static/usage/v9/theming/always-dark-mode/angular/example_component_html.md
new file mode 100644
index 00000000000..418eddfc30f
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/angular/example_component_html.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+```
diff --git a/static/usage/v9/theming/always-dark-mode/angular/example_component_ts.md b/static/usage/v9/theming/always-dark-mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..9e62ea5b762
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/angular/example_component_ts.md
@@ -0,0 +1,56 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+ }
+}
+```
diff --git a/static/usage/v9/theming/always-dark-mode/angular/styles_css.md b/static/usage/v9/theming/always-dark-mode/angular/styles_css.md
new file mode 100644
index 00000000000..8f15de61b63
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/angular/styles_css.md
@@ -0,0 +1,39 @@
+```css
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import '@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+@import '@ionic/angular/css/palettes/dark.always.css';
+/* @import '@ionic/angular/css/palettes/dark.class.css'; */
+/* @import '@ionic/angular/css/palettes/dark.system.css'; */
+```
diff --git a/static/usage/v9/theming/always-dark-mode/demo.html b/static/usage/v9/theming/always-dark-mode/demo.html
new file mode 100644
index 00000000000..0d0dedcc68d
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/demo.html
@@ -0,0 +1,82 @@
+
+
+
+ Theming
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/theming/always-dark-mode/index.md b/static/usage/v9/theming/always-dark-mode/index.md
new file mode 100644
index 00000000000..5caaa113c48
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/index.md
@@ -0,0 +1,54 @@
+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_app_tsx from './react/app_tsx.md';
+import react_main_tsx from './react/main_tsx.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_styles_css from './angular/styles_css.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+
+import variables_css from './theme/variables_css.md';
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+```
diff --git a/static/usage/v9/theming/always-dark-mode/javascript/index_ts.md b/static/usage/v9/theming/always-dark-mode/javascript/index_ts.md
new file mode 100644
index 00000000000..2fd7ff17d24
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/javascript/index_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+// import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline,
+ * 'sunny': sunny, 'sunny-outline': sunnyOutline });
+ */
+addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/theming/always-dark-mode/react/app_tsx.md b/static/usage/v9/theming/always-dark-mode/react/app_tsx.md
new file mode 100644
index 00000000000..ed04b3337a5
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/react/app_tsx.md
@@ -0,0 +1,46 @@
+```tsx
+import React from 'react';
+import { setupIonicReact, IonApp } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+import '@ionic/react/css/palettes/dark.always.css';
+// import '@ionic/react/css/palettes/dark.class.css';
+// import '@ionic/react/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+import Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+ return (
+
+
+ );
+}
+```
diff --git a/static/usage/v9/theming/always-dark-mode/react/main_tsx.md b/static/usage/v9/theming/always-dark-mode/react/main_tsx.md
new file mode 100644
index 00000000000..f6a15cd12f7
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/react/main_tsx.md
@@ -0,0 +1,76 @@
+```tsx
+import React from 'react';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/react';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+
+ Night Shift
+
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/theming/always-dark-mode/theme/variables_css.md b/static/usage/v9/theming/always-dark-mode/theme/variables_css.md
new file mode 100644
index 00000000000..dd68eb1b1ec
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/theme/variables_css.md
@@ -0,0 +1,27 @@
+```css
+/* Ionic Variables and Theming
+ * ---------------------------------------------------------------
+ * Any overrides to theme variables should be placed in this file.
+ * For more information, please see:
+ * http://ionicframework.com/docs/theming/
+ */
+
+/* This sets a different item border color for the default theme on ios and md */
+:root {
+ --ion-item-border-color: var(--ion-background-color-step-200);
+}
+
+/* This sets a different background and item background for the default theme on ios */
+:root.ios {
+ --ion-background-color: var(--ion-background-color-step-50);
+ --ion-toolbar-background: var(--ion-background-color);
+ --ion-item-background: #1c1c1d;
+}
+
+/* This sets a different background and item background for the default theme on md */
+:root.md {
+ --ion-background-color: var(--ion-background-color-step-100);
+ --ion-toolbar-background: var(--ion-background-color);
+ --ion-item-background: #1c1c1d;
+}
+```
diff --git a/static/usage/v9/theming/always-dark-mode/vue/example_vue.md b/static/usage/v9/theming/always-dark-mode/vue/example_vue.md
new file mode 100644
index 00000000000..46274fd9af6
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/vue/example_vue.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/always-dark-mode/vue/main_ts.md b/static/usage/v9/theming/always-dark-mode/vue/main_ts.md
new file mode 100644
index 00000000000..4b82b084cb7
--- /dev/null
+++ b/static/usage/v9/theming/always-dark-mode/vue/main_ts.md
@@ -0,0 +1,38 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+import '@ionic/vue/css/palettes/dark.always.css';
+// import '@ionic/vue/css/palettes/dark.class.css';
+// import '@ionic/vue/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+createApp(App).use(IonicVue).mount('#app');
+```
diff --git a/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_html.md b/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_html.md
new file mode 100644
index 00000000000..8eb041af7cf
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_html.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+```
diff --git a/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_ts.md b/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..9e62ea5b762
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_ts.md
@@ -0,0 +1,56 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+ }
+}
+```
diff --git a/static/usage/v9/theming/always-high-contrast-mode/angular/styles_css.md b/static/usage/v9/theming/always-high-contrast-mode/angular/styles_css.md
new file mode 100644
index 00000000000..616b3c7076c
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/angular/styles_css.md
@@ -0,0 +1,37 @@
+```css
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import '@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/display.css';
+
+/**
+ * Ionic High Contrast Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+@import '@ionic/angular/css/palettes/high-contrast.always.css';
+```
diff --git a/static/usage/v9/theming/always-high-contrast-mode/demo.html b/static/usage/v9/theming/always-high-contrast-mode/demo.html
new file mode 100644
index 00000000000..215dff44cb7
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/demo.html
@@ -0,0 +1,61 @@
+
+
+
+ Theming
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
diff --git a/static/usage/v9/theming/always-high-contrast-mode/index.md b/static/usage/v9/theming/always-high-contrast-mode/index.md
new file mode 100644
index 00000000000..07d57783829
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/index.md
@@ -0,0 +1,48 @@
+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_app_tsx from './react/app_tsx.md';
+import react_main_tsx from './react/main_tsx.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_styles_css from './angular/styles_css.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+```
diff --git a/static/usage/v9/theming/always-high-contrast-mode/javascript/index_ts.md b/static/usage/v9/theming/always-high-contrast-mode/javascript/index_ts.md
new file mode 100644
index 00000000000..8f41c94bf99
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/javascript/index_ts.md
@@ -0,0 +1,45 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic High Contrast Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+import '@ionic/core/css/palettes/high-contrast.always.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline,
+ * 'sunny': sunny, 'sunny-outline': sunnyOutline });
+ */
+addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/theming/always-high-contrast-mode/react/app_tsx.md b/static/usage/v9/theming/always-high-contrast-mode/react/app_tsx.md
new file mode 100644
index 00000000000..d9fc3e677fd
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/react/app_tsx.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { setupIonicReact, IonApp } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic High Contrast Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+import '@ionic/react/css/palettes/high-contrast.always.css';
+
+import Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+ return (
+
+
+ );
+}
+```
diff --git a/static/usage/v9/theming/always-high-contrast-mode/react/main_tsx.md b/static/usage/v9/theming/always-high-contrast-mode/react/main_tsx.md
new file mode 100644
index 00000000000..ac9c82c6119
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/react/main_tsx.md
@@ -0,0 +1,76 @@
+```tsx
+import React from 'react';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/react';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+
+ Night Shift
+
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/theming/always-high-contrast-mode/vue/example_vue.md b/static/usage/v9/theming/always-high-contrast-mode/vue/example_vue.md
new file mode 100644
index 00000000000..8e0e6616e96
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/vue/example_vue.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/always-high-contrast-mode/vue/main_ts.md b/static/usage/v9/theming/always-high-contrast-mode/vue/main_ts.md
new file mode 100644
index 00000000000..5c521224bea
--- /dev/null
+++ b/static/usage/v9/theming/always-high-contrast-mode/vue/main_ts.md
@@ -0,0 +1,33 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic High Contrast Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+import '@ionic/vue/css/palettes/high-contrast.always.css';
+
+createApp(App).use(IonicVue).mount('#app');
+```
diff --git a/static/usage/v9/theming/class-dark-mode/angular/example_component_html.md b/static/usage/v9/theming/class-dark-mode/angular/example_component_html.md
new file mode 100644
index 00000000000..d338e3aaa53
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/angular/example_component_html.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+ Dark Mode
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+```
diff --git a/static/usage/v9/theming/class-dark-mode/angular/example_component_ts.md b/static/usage/v9/theming/class-dark-mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..b1893ef296d
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/angular/example_component_ts.md
@@ -0,0 +1,88 @@
+```ts
+import { Component, OnInit, signal } from '@angular/core';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent implements OnInit {
+ // Backs the toggle's checked state. Using a signal keeps the toggle in sync
+ // when the value is updated from the matchMedia listener, even without Zone.js.
+ readonly paletteToggle = signal(false);
+
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+ }
+
+ ngOnInit() {
+ // Use matchMedia to check the user preference
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+ // Initialize the dark palette based on the initial
+ // value of the prefers-color-scheme media query
+ this.initializeDarkPalette(prefersDark.matches);
+
+ // Listen for changes to the prefers-color-scheme media query
+ prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkPalette(mediaQuery.matches));
+ }
+
+ // Check/uncheck the toggle and update the palette based on isDark
+ initializeDarkPalette(isDark: boolean) {
+ this.paletteToggle.set(isDark);
+ this.toggleDarkPalette(isDark);
+ }
+
+ // Listen for the toggle check/uncheck to toggle the dark palette
+ toggleChange(event: CustomEvent) {
+ this.initializeDarkPalette(event.detail.checked);
+ }
+
+ // Add or remove the "ion-palette-dark" class on the html element
+ toggleDarkPalette(shouldAdd: boolean) {
+ document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
+ }
+}
+```
diff --git a/static/usage/v9/theming/class-dark-mode/angular/global_css.md b/static/usage/v9/theming/class-dark-mode/angular/global_css.md
new file mode 100644
index 00000000000..ac28ad28a5f
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/angular/global_css.md
@@ -0,0 +1,6 @@
+```css
+/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */
+ion-item {
+ --transition: none;
+}
+```
diff --git a/static/usage/v9/theming/class-dark-mode/angular/styles_css.md b/static/usage/v9/theming/class-dark-mode/angular/styles_css.md
new file mode 100644
index 00000000000..bd4b9d3ba5b
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/angular/styles_css.md
@@ -0,0 +1,39 @@
+```css
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import '@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import '@ionic/angular/css/palettes/dark.always.css'; */
+@import '@ionic/angular/css/palettes/dark.class.css';
+/* @import '@ionic/angular/css/palettes/dark.system.css'; */
+```
diff --git a/static/usage/v9/theming/class-dark-mode/demo.html b/static/usage/v9/theming/class-dark-mode/demo.html
new file mode 100644
index 00000000000..87e0d0b736c
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/demo.html
@@ -0,0 +1,150 @@
+
+
+
+ Theming
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+ Dark Mode
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/theming/class-dark-mode/index.md b/static/usage/v9/theming/class-dark-mode/index.md
new file mode 100644
index 00000000000..2cd2d309b40
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/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_app_tsx from './react/app_tsx.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+import angular_styles_css from './angular/styles_css.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+
+import variables_css from './theme/variables_css.md';
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+ Dark Mode
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/class-dark-mode/javascript/index_ts.md b/static/usage/v9/theming/class-dark-mode/javascript/index_ts.md
new file mode 100644
index 00000000000..84dabd234f7
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/javascript/index_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+import '@ionic/core/css/palettes/dark.class.css';
+// import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline,
+ * 'sunny': sunny, 'sunny-outline': sunnyOutline });
+ */
+addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/theming/class-dark-mode/react/app_tsx.md b/static/usage/v9/theming/class-dark-mode/react/app_tsx.md
new file mode 100644
index 00000000000..895757a0253
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/react/app_tsx.md
@@ -0,0 +1,46 @@
+```tsx
+import React from 'react';
+import { setupIonicReact, IonApp } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/react/css/palettes/dark.always.css';
+import '@ionic/react/css/palettes/dark.class.css';
+// import '@ionic/react/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+import Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+ return (
+
+
+ );
+}
+```
diff --git a/static/usage/v9/theming/class-dark-mode/react/main_css.md b/static/usage/v9/theming/class-dark-mode/react/main_css.md
new file mode 100644
index 00000000000..ac28ad28a5f
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */
+ion-item {
+ --transition: none;
+}
+```
diff --git a/static/usage/v9/theming/class-dark-mode/react/main_tsx.md b/static/usage/v9/theming/class-dark-mode/react/main_tsx.md
new file mode 100644
index 00000000000..fa342bd21b0
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/react/main_tsx.md
@@ -0,0 +1,125 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/react';
+import type { ToggleCustomEvent } from '@ionic/react';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ const [paletteToggle, setPaletteToggle] = useState(false);
+
+ // Listen for the toggle check/uncheck to toggle the dark palette
+ const toggleChange = (event: ToggleCustomEvent) => {
+ toggleDarkPalette(event.detail.checked);
+ };
+
+ // Add or remove the "ion-palette-dark" class on the html element
+ const toggleDarkPalette = (shouldAdd: boolean) => {
+ document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
+ };
+
+ // Check/uncheck the toggle and update the palette based on isDark
+ const initializeDarkPalette = (isDark: boolean) => {
+ setPaletteToggle(isDark);
+ toggleDarkPalette(isDark);
+ };
+
+ useEffect(() => {
+ // Use matchMedia to check the user preference
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+ // Initialize the dark palette based on the initial
+ // value of the prefers-color-scheme media query
+ initializeDarkPalette(prefersDark.matches);
+
+ const setDarkPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => {
+ initializeDarkPalette(mediaQuery.matches);
+ };
+
+ // Listen for changes to the prefers-color-scheme media query
+ prefersDark.addEventListener('change', setDarkPaletteFromMediaQuery);
+
+ return () => {
+ prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery);
+ };
+ }, []);
+
+ return (
+ <>
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+
+ Dark Mode
+
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+
+ Night Shift
+
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/theming/class-dark-mode/theme/variables_css.md b/static/usage/v9/theming/class-dark-mode/theme/variables_css.md
new file mode 100644
index 00000000000..9ed7948adac
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/theme/variables_css.md
@@ -0,0 +1,33 @@
+```css
+/* Ionic Variables and Theming
+ * ---------------------------------------------------------------
+ * Any overrides to theme variables should be placed in this file.
+ * For more information, please see:
+ * http://ionicframework.com/docs/theming/
+ */
+
+/* This sets a different item border color for the default theme on ios and md */
+:root {
+ --ion-item-border-color: var(--ion-background-color-step-200);
+}
+
+/* This sets a different background and item background for the default theme on ios */
+:root.ios {
+ --ion-background-color: var(--ion-background-color-step-50, #f2f2f6);
+ --ion-toolbar-background: var(--ion-background-color);
+ --ion-item-background: #fff;
+}
+
+/* This sets a different background and item background for the default theme on md */
+:root.md {
+ --ion-background-color: var(--ion-background-color-step-100, #f9f9f9);
+ --ion-toolbar-background: var(--ion-background-color);
+ --ion-item-background: #fff;
+}
+
+/* This sets a different item background when dark mode is enabled on ios and md */
+.ion-palette-dark.ios,
+.ion-palette-dark.md {
+ --ion-item-background: #1c1c1d;
+}
+```
diff --git a/static/usage/v9/theming/class-dark-mode/vue/example_vue.md b/static/usage/v9/theming/class-dark-mode/vue/example_vue.md
new file mode 100644
index 00000000000..87467758ea0
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/vue/example_vue.md
@@ -0,0 +1,112 @@
+```html
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+ Dark Mode
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/class-dark-mode/vue/main_ts.md b/static/usage/v9/theming/class-dark-mode/vue/main_ts.md
new file mode 100644
index 00000000000..3077050a61f
--- /dev/null
+++ b/static/usage/v9/theming/class-dark-mode/vue/main_ts.md
@@ -0,0 +1,38 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/vue/css/palettes/dark.always.css';
+import '@ionic/vue/css/palettes/dark.class.css';
+// import '@ionic/vue/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+createApp(App).use(IonicVue).mount('#app');
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_html.md b/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_html.md
new file mode 100644
index 00000000000..d06f11fb2fb
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_html.md
@@ -0,0 +1,61 @@
+```html
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+ Dark Mode
+
+
+ High Contrast Mode
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_ts.md b/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..775c5ae70ae
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_ts.md
@@ -0,0 +1,110 @@
+```ts
+import { Component, OnInit, signal } from '@angular/core';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent implements OnInit {
+ // Signals so the palette state set from the matchMedia listeners (which fire
+ // outside Angular) re-renders the toggles on its own, with no manual change detection.
+ readonly darkPaletteToggle = signal(false);
+ readonly highContrastPaletteToggle = signal(false);
+
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+ }
+
+ ngOnInit() {
+ // Use matchMedia to check the user preference
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+ const prefersHighContrast = window.matchMedia('(prefers-contrast: more)');
+
+ // Initialize the dark and high contrast palettes based on the initial
+ // value of the media queries
+ this.initializeDarkPalette(prefersDark.matches);
+ this.initializeHighContrastPalette(prefersHighContrast.matches);
+
+ // Listen for changes to the media queries
+ prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkPalette(mediaQuery.matches));
+ prefersHighContrast.addEventListener('change', (mediaQuery) =>
+ this.initializeHighContrastPalette(mediaQuery.matches)
+ );
+ }
+
+ // Check/uncheck the toggle and update the palette based on isDark
+ initializeDarkPalette(isDark: boolean) {
+ this.darkPaletteToggle.set(isDark);
+ this.toggleDarkPalette(isDark);
+ }
+
+ // Check/uncheck the toggle and update the palette based on isHighContrast
+ initializeHighContrastPalette(isHighContrast: boolean) {
+ this.highContrastPaletteToggle.set(isHighContrast);
+ this.toggleHighContrastPalette(isHighContrast);
+ }
+
+ // Listen for the toggle check/uncheck to toggle the dark palette
+ darkPaletteToggleChange(event: CustomEvent) {
+ this.initializeDarkPalette(event.detail.checked);
+ }
+
+ // Listen for the toggle check/uncheck to toggle the high contrast palette
+ highContrastPaletteToggleChange(event: CustomEvent) {
+ this.initializeHighContrastPalette(event.detail.checked);
+ }
+
+ // Add or remove the "ion-palette-dark" class on the html element
+ toggleDarkPalette(shouldAdd: boolean) {
+ document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
+ }
+
+ // Add or remove the "ion-palette-high-contrast" class on the html element
+ toggleHighContrastPalette(shouldAdd: boolean) {
+ document.documentElement.classList.toggle('ion-palette-high-contrast', shouldAdd);
+ }
+}
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/angular/global_css.md b/static/usage/v9/theming/class-high-contrast-mode/angular/global_css.md
new file mode 100644
index 00000000000..ac28ad28a5f
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/angular/global_css.md
@@ -0,0 +1,6 @@
+```css
+/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */
+ion-item {
+ --transition: none;
+}
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/angular/styles_css.md b/static/usage/v9/theming/class-high-contrast-mode/angular/styles_css.md
new file mode 100644
index 00000000000..f3cf8196e1d
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/angular/styles_css.md
@@ -0,0 +1,40 @@
+```css
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import '@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/display.css';
+
+/**
+ * Ionic Dark and High Contrast Palettes
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+@import '@ionic/angular/css/palettes/dark.class.css';
+@import '@ionic/angular/css/palettes/high-contrast.class.css';
+@import '@ionic/angular/css/palettes/high-contrast-dark.class.css';
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/demo.html b/static/usage/v9/theming/class-high-contrast-mode/demo.html
new file mode 100644
index 00000000000..89ba2a9589c
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/demo.html
@@ -0,0 +1,145 @@
+
+
+
+ Theming
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+ Dark Mode
+
+
+ High Contrast Mode
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/theming/class-high-contrast-mode/index.md b/static/usage/v9/theming/class-high-contrast-mode/index.md
new file mode 100644
index 00000000000..e7c999fa737
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/index.md
@@ -0,0 +1,52 @@
+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_app_tsx from './react/app_tsx.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+import angular_styles_css from './angular/styles_css.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+ Dark Mode
+
+
+ High Contrast Mode
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/javascript/index_ts.md b/static/usage/v9/theming/class-high-contrast-mode/javascript/index_ts.md
new file mode 100644
index 00000000000..42ad5bdbd9a
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/javascript/index_ts.md
@@ -0,0 +1,48 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark and High Contrast Palettes
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/high-contrast.class.css';
+import '@ionic/core/css/palettes/high-contrast-dark.class.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline,
+ * 'sunny': sunny, 'sunny-outline': sunnyOutline });
+ */
+addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/react/app_tsx.md b/static/usage/v9/theming/class-high-contrast-mode/react/app_tsx.md
new file mode 100644
index 00000000000..4509c0560a2
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/react/app_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { setupIonicReact, IonApp } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark and High Contrast Palettes
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+import '@ionic/react/css/palettes/dark.class.css';
+import '@ionic/react/css/palettes/high-contrast.class.css';
+import '@ionic/react/css/palettes/high-contrast-dark.class.css';
+
+import Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+ return (
+
+
+ );
+}
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/react/main_css.md b/static/usage/v9/theming/class-high-contrast-mode/react/main_css.md
new file mode 100644
index 00000000000..ac28ad28a5f
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */
+ion-item {
+ --transition: none;
+}
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/react/main_tsx.md b/static/usage/v9/theming/class-high-contrast-mode/react/main_tsx.md
new file mode 100644
index 00000000000..c7852259727
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/react/main_tsx.md
@@ -0,0 +1,157 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/react';
+import type { ToggleCustomEvent } from '@ionic/react';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ const [darkPaletteToggle, setDarkPaletteToggle] = useState(false);
+ const [highContrastPaletteToggle, setHighContrastPaletteToggle] = useState(false);
+
+ // Listen for the toggle check/uncheck to toggle the palettes
+ const darkPaletteToggleChange = (event: ToggleCustomEvent) => {
+ toggleDarkPalette(event.detail.checked);
+ };
+
+ const highContrastPaletteToggleChange = (event: ToggleCustomEvent) => {
+ toggleHighContrastPalette(event.detail.checked);
+ };
+
+ // Add or remove the "ion-palette-dark" class on the html element
+ const toggleDarkPalette = (shouldAdd: boolean) => {
+ document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
+ };
+
+ // Add or remove the "ion-palette-high-contrast" class on the html element
+ const toggleHighContrastPalette = (shouldAdd: boolean) => {
+ document.documentElement.classList.toggle('ion-palette-high-contrast', shouldAdd);
+ };
+
+ // Check/uncheck the toggle and update the palette
+ const initializeDarkPalette = (isDark: boolean) => {
+ setDarkPaletteToggle(isDark);
+ toggleDarkPalette(isDark);
+ };
+
+ const initializeHighContrastPalette = (isHighContrast: boolean) => {
+ setHighContrastPaletteToggle(isHighContrast);
+ toggleHighContrastPalette(isHighContrast);
+ };
+
+ useEffect(() => {
+ // Use matchMedia to check the user preference
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+ const prefersHighContrast = window.matchMedia('(prefers-contrast: more)');
+
+ // Initialize the dark palette based on the initial
+ // value of the media queries
+ initializeDarkPalette(prefersDark.matches);
+ initializeHighContrastPalette(prefersHighContrast.matches);
+
+ const setDarkPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => {
+ initializeDarkPalette(mediaQuery.matches);
+ };
+
+ const setHighContrastPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => {
+ initializeHighContrastPalette(mediaQuery.matches);
+ };
+
+ // Listen for changes to the media queries
+ prefersDark.addEventListener('change', setDarkPaletteFromMediaQuery);
+ prefersHighContrast.addEventListener('change', setHighContrastPaletteFromMediaQuery);
+
+ return () => {
+ prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery);
+ prefersHighContrast.removeEventListener('change', setHighContrastPaletteFromMediaQuery);
+ };
+ }, []);
+
+ return (
+ <>
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+
+ Dark Mode
+
+
+
+
+ High Contrast Mode
+
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+
+ Night Shift
+
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/vue/example_vue.md b/static/usage/v9/theming/class-high-contrast-mode/vue/example_vue.md
new file mode 100644
index 00000000000..2aa03d30caf
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/vue/example_vue.md
@@ -0,0 +1,136 @@
+```html
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+
+ Dark Mode
+
+
+ High Contrast Mode
+
+
+
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/class-high-contrast-mode/vue/main_ts.md b/static/usage/v9/theming/class-high-contrast-mode/vue/main_ts.md
new file mode 100644
index 00000000000..73afd976654
--- /dev/null
+++ b/static/usage/v9/theming/class-high-contrast-mode/vue/main_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic Dark and High Contrast Palettes
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+import '@ionic/vue/css/palettes/dark.class.css';
+import '@ionic/vue/css/palettes/high-contrast.class.css';
+import '@ionic/vue/css/palettes/high-contrast-dark.class.css';
+
+createApp(App).use(IonicVue).mount('#app');
+```
diff --git a/static/usage/v9/theming/system-dark-mode/angular/example_component_html.md b/static/usage/v9/theming/system-dark-mode/angular/example_component_html.md
new file mode 100644
index 00000000000..418eddfc30f
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/angular/example_component_html.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+```
diff --git a/static/usage/v9/theming/system-dark-mode/angular/example_component_ts.md b/static/usage/v9/theming/system-dark-mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..9e62ea5b762
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/angular/example_component_ts.md
@@ -0,0 +1,56 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+ }
+}
+```
diff --git a/static/usage/v9/theming/system-dark-mode/angular/global_css.md b/static/usage/v9/theming/system-dark-mode/angular/global_css.md
new file mode 100644
index 00000000000..ac28ad28a5f
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/angular/global_css.md
@@ -0,0 +1,6 @@
+```css
+/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */
+ion-item {
+ --transition: none;
+}
+```
diff --git a/static/usage/v9/theming/system-dark-mode/angular/styles_css.md b/static/usage/v9/theming/system-dark-mode/angular/styles_css.md
new file mode 100644
index 00000000000..7216c77a9bf
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/angular/styles_css.md
@@ -0,0 +1,39 @@
+```css
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import '@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import '@ionic/angular/css/palettes/dark.always.css'; */
+/* @import '@ionic/angular/css/palettes/dark.class.css'; */
+@import '@ionic/angular/css/palettes/dark.system.css';
+```
diff --git a/static/usage/v9/theming/system-dark-mode/demo.html b/static/usage/v9/theming/system-dark-mode/demo.html
new file mode 100644
index 00000000000..d5d601958bb
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/demo.html
@@ -0,0 +1,95 @@
+
+
+
+ Theming
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/theming/system-dark-mode/index.md b/static/usage/v9/theming/system-dark-mode/index.md
new file mode 100644
index 00000000000..4e326743783
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/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_app_tsx from './react/app_tsx.md';
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+import angular_styles_css from './angular/styles_css.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+
+import variables_css from './theme/variables_css.md';
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/system-dark-mode/javascript/index_ts.md b/static/usage/v9/theming/system-dark-mode/javascript/index_ts.md
new file mode 100644
index 00000000000..9afb89215c3
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/javascript/index_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline,
+ * 'sunny': sunny, 'sunny-outline': sunnyOutline });
+ */
+addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/theming/system-dark-mode/react/app_tsx.md b/static/usage/v9/theming/system-dark-mode/react/app_tsx.md
new file mode 100644
index 00000000000..09635b94656
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/react/app_tsx.md
@@ -0,0 +1,46 @@
+```tsx
+import React from 'react';
+import { setupIonicReact, IonApp } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/react/css/palettes/dark.always.css';
+// import '@ionic/react/css/palettes/dark.class.css';
+import '@ionic/react/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+import Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+ return (
+
+
+ );
+}
+```
diff --git a/static/usage/v9/theming/system-dark-mode/react/main_css.md b/static/usage/v9/theming/system-dark-mode/react/main_css.md
new file mode 100644
index 00000000000..ac28ad28a5f
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */
+ion-item {
+ --transition: none;
+}
+```
diff --git a/static/usage/v9/theming/system-dark-mode/react/main_tsx.md b/static/usage/v9/theming/system-dark-mode/react/main_tsx.md
new file mode 100644
index 00000000000..58d10fa6a6b
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/react/main_tsx.md
@@ -0,0 +1,78 @@
+```tsx
+import React from 'react';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/react';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+
+ Night Shift
+
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/theming/system-dark-mode/theme/variables_css.md b/static/usage/v9/theming/system-dark-mode/theme/variables_css.md
new file mode 100644
index 00000000000..30ae365e2f5
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/theme/variables_css.md
@@ -0,0 +1,35 @@
+```css
+/* Ionic Variables and Theming
+ * ---------------------------------------------------------------
+ * Any overrides to theme variables should be placed in this file.
+ * For more information, please see:
+ * http://ionicframework.com/docs/theming/
+ */
+
+/* This sets a different item border color for the default theme on ios and md */
+:root {
+ --ion-item-border-color: var(--ion-background-color-step-200);
+}
+
+/* This sets a different background and item background for the default theme on ios */
+:root.ios {
+ --ion-background-color: var(--ion-background-color-step-50, #f2f2f6);
+ --ion-toolbar-background: var(--ion-background-color);
+ --ion-item-background: #fff;
+}
+
+/* This sets a different background and item background for the default theme on md */
+:root.md {
+ --ion-background-color: var(--ion-background-color-step-100, #f9f9f9);
+ --ion-toolbar-background: var(--ion-background-color);
+ --ion-item-background: #fff;
+}
+
+/* This sets a different item background when dark mode is enabled on ios and md */
+@media (prefers-color-scheme: dark) {
+ :root.ios,
+ :root.md {
+ --ion-item-background: #1c1c1d;
+ }
+}
+```
diff --git a/static/usage/v9/theming/system-dark-mode/vue/example_vue.md b/static/usage/v9/theming/system-dark-mode/vue/example_vue.md
new file mode 100644
index 00000000000..0ac295631b5
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/vue/example_vue.md
@@ -0,0 +1,74 @@
+```html
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/system-dark-mode/vue/main_ts.md b/static/usage/v9/theming/system-dark-mode/vue/main_ts.md
new file mode 100644
index 00000000000..1203416fbe6
--- /dev/null
+++ b/static/usage/v9/theming/system-dark-mode/vue/main_ts.md
@@ -0,0 +1,38 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/vue/css/palettes/dark.always.css';
+// import '@ionic/vue/css/palettes/dark.class.css';
+import '@ionic/vue/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+createApp(App).use(IonicVue).mount('#app');
+```
diff --git a/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_html.md b/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_html.md
new file mode 100644
index 00000000000..8eb041af7cf
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_html.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+```
diff --git a/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_ts.md b/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_ts.md
new file mode 100644
index 00000000000..9e62ea5b762
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_ts.md
@@ -0,0 +1,56 @@
+```ts
+import { Component } from '@angular/core';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+ ],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+ }
+}
+```
diff --git a/static/usage/v9/theming/system-high-contrast-mode/angular/styles_css.md b/static/usage/v9/theming/system-high-contrast-mode/angular/styles_css.md
new file mode 100644
index 00000000000..33b94c8d260
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/angular/styles_css.md
@@ -0,0 +1,40 @@
+```css
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import '@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/display.css';
+
+/**
+ * Ionic Dark and High Contrast Palettes
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+@import '@ionic/angular/css/palettes/dark.system.css';
+@import '@ionic/angular/css/palettes/high-contrast.system.css';
+@import '@ionic/angular/css/palettes/high-contrast-dark.system.css';
+```
diff --git a/static/usage/v9/theming/system-high-contrast-mode/demo.html b/static/usage/v9/theming/system-high-contrast-mode/demo.html
new file mode 100644
index 00000000000..e2d9b99b627
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/demo.html
@@ -0,0 +1,69 @@
+
+
+
+ Theming
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
diff --git a/static/usage/v9/theming/system-high-contrast-mode/index.md b/static/usage/v9/theming/system-high-contrast-mode/index.md
new file mode 100644
index 00000000000..40218c312a0
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/index.md
@@ -0,0 +1,48 @@
+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_app_tsx from './react/app_tsx.md';
+import react_main_tsx from './react/main_tsx.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_styles_css from './angular/styles_css.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_main_ts from './vue/main_ts.md';
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+```
diff --git a/static/usage/v9/theming/system-high-contrast-mode/javascript/index_ts.md b/static/usage/v9/theming/system-high-contrast-mode/javascript/index_ts.md
new file mode 100644
index 00000000000..c972f09c334
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/javascript/index_ts.md
@@ -0,0 +1,48 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark and High Contrast Palettes
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+import '@ionic/core/css/palettes/dark.system.css';
+import '@ionic/core/css/palettes/high-contrast.system.css';
+import '@ionic/core/css/palettes/high-contrast-dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline,
+ * 'sunny': sunny, 'sunny-outline': sunnyOutline });
+ */
+addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/theming/system-high-contrast-mode/react/app_tsx.md b/static/usage/v9/theming/system-high-contrast-mode/react/app_tsx.md
new file mode 100644
index 00000000000..c3bebd5e0f1
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/react/app_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { setupIonicReact, IonApp } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark and High Contrast Palettes
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+import '@ionic/react/css/palettes/dark.system.css';
+import '@ionic/react/css/palettes/high-contrast.system.css';
+import '@ionic/react/css/palettes/high-contrast-dark.system.css';
+
+import Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+ return (
+
+
+ );
+}
+```
diff --git a/static/usage/v9/theming/system-high-contrast-mode/react/main_tsx.md b/static/usage/v9/theming/system-high-contrast-mode/react/main_tsx.md
new file mode 100644
index 00000000000..ac9c82c6119
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/react/main_tsx.md
@@ -0,0 +1,76 @@
+```tsx
+import React from 'react';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonRange,
+ IonText,
+ IonTitle,
+ IonToggle,
+ IonToolbar,
+} from '@ionic/react';
+import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+
+ Night Shift
+
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/theming/system-high-contrast-mode/vue/example_vue.md b/static/usage/v9/theming/system-high-contrast-mode/vue/example_vue.md
new file mode 100644
index 00000000000..8e0e6616e96
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/vue/example_vue.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+
+
+ Display
+
+
+
+
+
+
+
+
+ Appearance
+
+ Text Size
+
+ Bold Text
+
+
+
+ Brightness
+
+
+
+
+
+
+ True Tone
+
+
+
+
+
+ Night Shift
+ 9:00 PM to 8:00 AM
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/theming/system-high-contrast-mode/vue/main_ts.md b/static/usage/v9/theming/system-high-contrast-mode/vue/main_ts.md
new file mode 100644
index 00000000000..bd1dd2efe0d
--- /dev/null
+++ b/static/usage/v9/theming/system-high-contrast-mode/vue/main_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic Dark and High Contrast Palettes
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ * https://ionicframework.com/docs/theming/high-contrast-mode
+ */
+
+import '@ionic/vue/css/palettes/dark.system.css';
+import '@ionic/vue/css/palettes/high-contrast.system.css';
+import '@ionic/vue/css/palettes/high-contrast-dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+createApp(App).use(IonicVue).mount('#app');
+```
diff --git a/static/usage/v9/thumbnail/basic/angular/example_component_html.md b/static/usage/v9/thumbnail/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..119cfb8ee9c
--- /dev/null
+++ b/static/usage/v9/thumbnail/basic/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+
+```
diff --git a/static/usage/v9/thumbnail/basic/angular/example_component_ts.md b/static/usage/v9/thumbnail/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..a78aaa5094d
--- /dev/null
+++ b/static/usage/v9/thumbnail/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonThumbnail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/thumbnail/basic/demo.html b/static/usage/v9/thumbnail/basic/demo.html
new file mode 100644
index 00000000000..2439ff95144
--- /dev/null
+++ b/static/usage/v9/thumbnail/basic/demo.html
@@ -0,0 +1,24 @@
+
+
+
+ Thumbnail
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/thumbnail/basic/index.md b/static/usage/v9/thumbnail/basic/index.md
new file mode 100644
index 00000000000..8b52a5c7477
--- /dev/null
+++ b/static/usage/v9/thumbnail/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+```
diff --git a/static/usage/v9/thumbnail/basic/react.md b/static/usage/v9/thumbnail/basic/react.md
new file mode 100644
index 00000000000..3813690a7a4
--- /dev/null
+++ b/static/usage/v9/thumbnail/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonThumbnail } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/thumbnail/basic/vue.md b/static/usage/v9/thumbnail/basic/vue.md
new file mode 100644
index 00000000000..86f3517b6fc
--- /dev/null
+++ b/static/usage/v9/thumbnail/basic/vue.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/thumbnail/item/angular/example_component_html.md b/static/usage/v9/thumbnail/item/angular/example_component_html.md
new file mode 100644
index 00000000000..a83cb82e78c
--- /dev/null
+++ b/static/usage/v9/thumbnail/item/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+
+
+ Item Thumbnail
+
+```
diff --git a/static/usage/v9/thumbnail/item/angular/example_component_ts.md b/static/usage/v9/thumbnail/item/angular/example_component_ts.md
new file mode 100644
index 00000000000..5a5a6be6a6e
--- /dev/null
+++ b/static/usage/v9/thumbnail/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonThumbnail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonLabel, IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/thumbnail/item/demo.html b/static/usage/v9/thumbnail/item/demo.html
new file mode 100644
index 00000000000..f12b63f1305
--- /dev/null
+++ b/static/usage/v9/thumbnail/item/demo.html
@@ -0,0 +1,27 @@
+
+
+
+ Thumbnail
+
+
+
+
+
+
+ Item Thumbnail
+
+
+
+
+
diff --git a/static/usage/v9/thumbnail/item/index.md b/static/usage/v9/thumbnail/item/index.md
new file mode 100644
index 00000000000..04dd5474424
--- /dev/null
+++ b/static/usage/v9/thumbnail/item/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+ Item Thumbnail
+
+```
diff --git a/static/usage/v9/thumbnail/item/react.md b/static/usage/v9/thumbnail/item/react.md
new file mode 100644
index 00000000000..29630ebf819
--- /dev/null
+++ b/static/usage/v9/thumbnail/item/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonThumbnail } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Item Thumbnail
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/thumbnail/item/vue.md b/static/usage/v9/thumbnail/item/vue.md
new file mode 100644
index 00000000000..e58ea0c89ae
--- /dev/null
+++ b/static/usage/v9/thumbnail/item/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+ Item Thumbnail
+
+
+
+
+```
diff --git a/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..74742dfe9f0
--- /dev/null
+++ b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-thumbnail {
+ --size: 140px;
+ --border-radius: 14px;
+}
+```
diff --git a/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..119cfb8ee9c
--- /dev/null
+++ b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+
+```
diff --git a/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..a78aaa5094d
--- /dev/null
+++ b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonThumbnail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/thumbnail/theming/css-properties/demo.html b/static/usage/v9/thumbnail/theming/css-properties/demo.html
new file mode 100644
index 00000000000..98292371a3c
--- /dev/null
+++ b/static/usage/v9/thumbnail/theming/css-properties/demo.html
@@ -0,0 +1,31 @@
+
+
+
+ Thumbnail
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/thumbnail/theming/css-properties/index.md b/static/usage/v9/thumbnail/theming/css-properties/index.md
new file mode 100644
index 00000000000..013f9aab199
--- /dev/null
+++ b/static/usage/v9/thumbnail/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_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';
+
+
+
+```
diff --git a/static/usage/v9/thumbnail/theming/css-properties/react/main_css.md b/static/usage/v9/thumbnail/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..74742dfe9f0
--- /dev/null
+++ b/static/usage/v9/thumbnail/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-thumbnail {
+ --size: 140px;
+ --border-radius: 14px;
+}
+```
diff --git a/static/usage/v9/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v9/thumbnail/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..1d0f352383f
--- /dev/null
+++ b/static/usage/v9/thumbnail/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonThumbnail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/thumbnail/theming/css-properties/vue.md b/static/usage/v9/thumbnail/theming/css-properties/vue.md
new file mode 100644
index 00000000000..7f462aa835b
--- /dev/null
+++ b/static/usage/v9/thumbnail/theming/css-properties/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/title/basic/angular/example_component_html.md b/static/usage/v9/title/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..59a304dbeec
--- /dev/null
+++ b/static/usage/v9/title/basic/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+
+ Title
+
+
+```
diff --git a/static/usage/v9/title/basic/angular/example_component_ts.md b/static/usage/v9/title/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..db3bc9e4add
--- /dev/null
+++ b/static/usage/v9/title/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/title/basic/demo.html b/static/usage/v9/title/basic/demo.html
new file mode 100644
index 00000000000..4aaf479ec67
--- /dev/null
+++ b/static/usage/v9/title/basic/demo.html
@@ -0,0 +1,22 @@
+
+
+
+ Title
+
+
+
+ Title
+
+
+
+
+
diff --git a/static/usage/v9/title/basic/index.md b/static/usage/v9/title/basic/index.md
new file mode 100644
index 00000000000..c2f37ba6c6e
--- /dev/null
+++ b/static/usage/v9/title/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Title
+
+
+```
diff --git a/static/usage/v9/title/basic/react.md b/static/usage/v9/title/basic/react.md
new file mode 100644
index 00000000000..efef42efdcc
--- /dev/null
+++ b/static/usage/v9/title/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonToolbar, IonTitle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Title
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/title/basic/vue.md b/static/usage/v9/title/basic/vue.md
new file mode 100644
index 00000000000..8dcdf94e9a4
--- /dev/null
+++ b/static/usage/v9/title/basic/vue.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+ Title
+
+
+
+
+
+```
diff --git a/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_html.md b/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..727d9ba1e3a
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_ts.md b/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..cc420051e5c
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/title/collapsible-large-title/basic/demo.html b/static/usage/v9/title/collapsible-large-title/basic/demo.html
new file mode 100644
index 00000000000..69ad58b121d
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/basic/demo.html
@@ -0,0 +1,54 @@
+
+
+
+ Title
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
diff --git a/static/usage/v9/title/collapsible-large-title/basic/index.md b/static/usage/v9/title/collapsible-large-title/basic/index.md
new file mode 100644
index 00000000000..e14b1cc0f21
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/basic/index.md
@@ -0,0 +1,28 @@
+import Playground from '@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';
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v9/title/collapsible-large-title/basic/react.md b/static/usage/v9/title/collapsible-large-title/basic/react.md
new file mode 100644
index 00000000000..cdcbdc557b6
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/basic/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/title/collapsible-large-title/basic/vue.md b/static/usage/v9/title/collapsible-large-title/basic/vue.md
new file mode 100644
index 00000000000..eaed784e824
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/basic/vue.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+```
diff --git a/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_html.md b/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..6f253b16cd4
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_html.md
@@ -0,0 +1,45 @@
+```html
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_ts.md b/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..23df2f652ab
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonButtons, IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/title/collapsible-large-title/buttons/demo.html b/static/usage/v9/title/collapsible-large-title/buttons/demo.html
new file mode 100644
index 00000000000..b7056cc806c
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/buttons/demo.html
@@ -0,0 +1,60 @@
+
+
+
+ Title
+
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
diff --git a/static/usage/v9/title/collapsible-large-title/buttons/index.md b/static/usage/v9/title/collapsible-large-title/buttons/index.md
new file mode 100644
index 00000000000..bfe40f421e1
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/buttons/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';
+
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v9/title/collapsible-large-title/buttons/react.md b/static/usage/v9/title/collapsible-large-title/buttons/react.md
new file mode 100644
index 00000000000..deca52428ce
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/buttons/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/title/collapsible-large-title/buttons/vue.md b/static/usage/v9/title/collapsible-large-title/buttons/vue.md
new file mode 100644
index 00000000000..ee775370d61
--- /dev/null
+++ b/static/usage/v9/title/collapsible-large-title/buttons/vue.md
@@ -0,0 +1,51 @@
+```html
+
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+```
diff --git a/static/usage/v9/title/theming/css-properties/angular/example_component_html.md b/static/usage/v9/title/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31c40bb2ef7
--- /dev/null
+++ b/static/usage/v9/title/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v9/title/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/title/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..cc420051e5c
--- /dev/null
+++ b/static/usage/v9/title/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/title/theming/css-properties/angular/global_css.md b/static/usage/v9/title/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/v9/title/theming/css-properties/angular/global_css.md
@@ -0,0 +1,14 @@
+```css
+ion-title.title-large {
+ color: #c897d8;
+ font-size: 30px;
+}
+
+ion-title {
+ --color: #000;
+}
+
+ion-toolbar {
+ --background: #c897d8;
+}
+```
diff --git a/static/usage/v9/title/theming/css-properties/demo.html b/static/usage/v9/title/theming/css-properties/demo.html
new file mode 100644
index 00000000000..8ac5b24b4dc
--- /dev/null
+++ b/static/usage/v9/title/theming/css-properties/demo.html
@@ -0,0 +1,67 @@
+
+
+
+ Title
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
diff --git a/static/usage/v9/title/theming/css-properties/index.md b/static/usage/v9/title/theming/css-properties/index.md
new file mode 100644
index 00000000000..f6a522ead1a
--- /dev/null
+++ b/static/usage/v9/title/theming/css-properties/index.md
@@ -0,0 +1,36 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v9/title/theming/css-properties/react/main_css.md b/static/usage/v9/title/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/v9/title/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-title.title-large {
+ color: #c897d8;
+ font-size: 30px;
+}
+
+ion-title {
+ --color: #000;
+}
+
+ion-toolbar {
+ --background: #c897d8;
+}
+```
diff --git a/static/usage/v9/title/theming/css-properties/react/main_tsx.md b/static/usage/v9/title/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..5dc5b9d993b
--- /dev/null
+++ b/static/usage/v9/title/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/title/theming/css-properties/vue.md b/static/usage/v9/title/theming/css-properties/vue.md
new file mode 100644
index 00000000000..2fb3aee914c
--- /dev/null
+++ b/static/usage/v9/title/theming/css-properties/vue.md
@@ -0,0 +1,57 @@
+```html
+
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+```
diff --git a/static/usage/v9/toast/buttons/angular/example_component_html.md b/static/usage/v9/toast/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..15ced1fb702
--- /dev/null
+++ b/static/usage/v9/toast/buttons/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Open Toast
+Toast
+
+
+
+ Toast
+
+
+
+
+ Open Toast
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toast/buttons/index.md b/static/usage/v9/toast/buttons/index.md
new file mode 100644
index 00000000000..c10192c9d54
--- /dev/null
+++ b/static/usage/v9/toast/buttons/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';
+
+Open Toast
+Open Toast
+ {
+ console.log('More Info clicked');
+ },
+ },
+ {
+ text: 'Dismiss',
+ role: 'cancel',
+ handler: () => {
+ console.log('Dismiss clicked');
+ },
+ },
+ ]}
+ onDidDismiss={(e: CustomEvent) => console.log(`Dismissed with role: ${e.detail.role}`)}
+ >
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toast/buttons/vue.md b/static/usage/v9/toast/buttons/vue.md
new file mode 100644
index 00000000000..b5dd11510b5
--- /dev/null
+++ b/static/usage/v9/toast/buttons/vue.md
@@ -0,0 +1,38 @@
+```html
+
+ Open Toast
+
+
+
+```
diff --git a/static/usage/v9/toast/icon/angular/example_component_html.md b/static/usage/v9/toast/icon/angular/example_component_html.md
new file mode 100644
index 00000000000..819a72c342f
--- /dev/null
+++ b/static/usage/v9/toast/icon/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Open Toast
+Toast
+
+
+
+ Toast
+
+
+
+
+ Open Toast
+
+
+
+
+
diff --git a/static/usage/v9/toast/icon/index.md b/static/usage/v9/toast/icon/index.md
new file mode 100644
index 00000000000..395275244ab
--- /dev/null
+++ b/static/usage/v9/toast/icon/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Open Toast
+Open Toast
+
+ Open Toast
+
+
+
+```
diff --git a/static/usage/v9/toast/inline/basic/angular/example_component_html.md b/static/usage/v9/toast/inline/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..5756e5c7891
--- /dev/null
+++ b/static/usage/v9/toast/inline/basic/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Inline Toast
+
+
+
+ Open
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+```
diff --git a/static/usage/v9/toast/inline/basic/angular/example_component_ts.md b/static/usage/v9/toast/inline/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..5d46979d73c
--- /dev/null
+++ b/static/usage/v9/toast/inline/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toast/inline/basic/demo.html b/static/usage/v9/toast/inline/basic/demo.html
new file mode 100644
index 00000000000..2b0d1a341e9
--- /dev/null
+++ b/static/usage/v9/toast/inline/basic/demo.html
@@ -0,0 +1,27 @@
+
+
+
+ Toast | Inline
+
+
+
+ Inline Toast
+
+
+
+ Open
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+
+
+
diff --git a/static/usage/v9/toast/inline/basic/index.md b/static/usage/v9/toast/inline/basic/index.md
new file mode 100644
index 00000000000..61a4444acee
--- /dev/null
+++ b/static/usage/v9/toast/inline/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Inline Toast
+
+
+
+ Open
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+```
diff --git a/static/usage/v9/toast/inline/basic/react.md b/static/usage/v9/toast/inline/basic/react.md
new file mode 100644
index 00000000000..0def9d5e178
--- /dev/null
+++ b/static/usage/v9/toast/inline/basic/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Inline Toast
+
+
+
+
+ Open
+
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/toast/inline/basic/vue.md b/static/usage/v9/toast/inline/basic/vue.md
new file mode 100644
index 00000000000..8b0024f1729
--- /dev/null
+++ b/static/usage/v9/toast/inline/basic/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Inline Toast
+
+
+
+ Open
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+
+
+
+```
diff --git a/static/usage/v9/toast/inline/is-open/angular/example_component_html.md b/static/usage/v9/toast/inline/is-open/angular/example_component_html.md
new file mode 100644
index 00000000000..96014213ad0
--- /dev/null
+++ b/static/usage/v9/toast/inline/is-open/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+
+
+ Inline Toast
+
+
+
+ Open
+
+```
diff --git a/static/usage/v9/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v9/toast/inline/is-open/angular/example_component_ts.md
new file mode 100644
index 00000000000..f962179b670
--- /dev/null
+++ b/static/usage/v9/toast/inline/is-open/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {
+ isToastOpen = false;
+
+ setOpen(isOpen: boolean) {
+ this.isToastOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v9/toast/inline/is-open/demo.html b/static/usage/v9/toast/inline/is-open/demo.html
new file mode 100644
index 00000000000..2b27059edd0
--- /dev/null
+++ b/static/usage/v9/toast/inline/is-open/demo.html
@@ -0,0 +1,33 @@
+
+
+
+ Toast | Inline
+
+
+
+ Inline Toast
+
+
+
+ Open
+
+
+
+
+
+
diff --git a/static/usage/v9/toast/inline/is-open/index.md b/static/usage/v9/toast/inline/is-open/index.md
new file mode 100644
index 00000000000..86c4accac2f
--- /dev/null
+++ b/static/usage/v9/toast/inline/is-open/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Inline Toast
+
+
+
+ Open
+
+
+
+```
diff --git a/static/usage/v9/toast/inline/is-open/react.md b/static/usage/v9/toast/inline/is-open/react.md
new file mode 100644
index 00000000000..ed32e64ea70
--- /dev/null
+++ b/static/usage/v9/toast/inline/is-open/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react';
+
+function Example() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+
+ Inline Toast
+
+
+
+ setIsOpen(true)}>
+ Open
+
+ setIsOpen(false)}
+ duration={5000}
+ >
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/toast/inline/is-open/vue.md b/static/usage/v9/toast/inline/is-open/vue.md
new file mode 100644
index 00000000000..2f0f8ca0421
--- /dev/null
+++ b/static/usage/v9/toast/inline/is-open/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ Inline Toast
+
+
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v9/toast/layout/angular/example_component_html.md b/static/usage/v9/toast/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..2efa0572c4b
--- /dev/null
+++ b/static/usage/v9/toast/layout/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+Open Baseline Layout Toast
+Open Stacked Layout Toast
+Toast
+
+
+
+ Toast
+
+
+
+ Open Baseline Layout Toast
+ Open Stacked Layout Toast
+
+
+
+
+
+
diff --git a/static/usage/v9/toast/layout/index.md b/static/usage/v9/toast/layout/index.md
new file mode 100644
index 00000000000..630ad894829
--- /dev/null
+++ b/static/usage/v9/toast/layout/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Open Baseline Layout Toast
+Open Stacked Layout Toast
+Open Stacked Layout Toast
+ Open Baseline Layout Toast
+
+ Open Baseline Layout Toast
+ Open Stacked Layout Toast
+
+
+
+```
diff --git a/static/usage/v9/toast/position-anchor/angular/example_component_html.md b/static/usage/v9/toast/position-anchor/angular/example_component_html.md
new file mode 100644
index 00000000000..f27b09cf057
--- /dev/null
+++ b/static/usage/v9/toast/position-anchor/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/toast/position-anchor/angular/example_component_ts.md b/static/usage/v9/toast/position-anchor/angular/example_component_ts.md
new file mode 100644
index 00000000000..de775406154
--- /dev/null
+++ b/static/usage/v9/toast/position-anchor/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toast/position-anchor/demo.html b/static/usage/v9/toast/position-anchor/demo.html
new file mode 100644
index 00000000000..5ff69598002
--- /dev/null
+++ b/static/usage/v9/toast/position-anchor/demo.html
@@ -0,0 +1,57 @@
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toast/position-anchor/index.md b/static/usage/v9/toast/position-anchor/index.md
new file mode 100644
index 00000000000..4d652d7f761
--- /dev/null
+++ b/static/usage/v9/toast/position-anchor/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';
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/toast/position-anchor/react.md b/static/usage/v9/toast/position-anchor/react.md
new file mode 100644
index 00000000000..14149bff4d8
--- /dev/null
+++ b/static/usage/v9/toast/position-anchor/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toast/position-anchor/vue.md b/static/usage/v9/toast/position-anchor/vue.md
new file mode 100644
index 00000000000..9d4c5020691
--- /dev/null
+++ b/static/usage/v9/toast/position-anchor/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/toast/presenting/controller/angular/example_component_html.md b/static/usage/v9/toast/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..2ed1eea0254
--- /dev/null
+++ b/static/usage/v9/toast/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+Present Toast At the Top
+Present Toast At the Middle
+Present Toast At the Bottom
+```
diff --git a/static/usage/v9/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v9/toast/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..5ea44ab25b1
--- /dev/null
+++ b/static/usage/v9/toast/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, ToastController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton],
+})
+export class ExampleComponent {
+ constructor(private toastController: ToastController) {}
+
+ async presentToast(position: 'top' | 'middle' | 'bottom') {
+ const toast = await this.toastController.create({
+ message: 'Hello World!',
+ duration: 1500,
+ position: position,
+ });
+
+ await toast.present();
+ }
+}
+```
diff --git a/static/usage/v9/toast/presenting/controller/demo.html b/static/usage/v9/toast/presenting/controller/demo.html
new file mode 100644
index 00000000000..a1acf67c4e5
--- /dev/null
+++ b/static/usage/v9/toast/presenting/controller/demo.html
@@ -0,0 +1,52 @@
+
+
+
+ Toast
+
+
+
+ Toast
+
+
+
+
+ Present Toast At the Top
+ Present Toast At the Middle
+ Present Toast At the Bottom
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toast/presenting/controller/index.md b/static/usage/v9/toast/presenting/controller/index.md
new file mode 100644
index 00000000000..3346fece81e
--- /dev/null
+++ b/static/usage/v9/toast/presenting/controller/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Present Toast At the Top
+Present Toast At the Middle
+Present Toast At the Bottom
+
+
+```
diff --git a/static/usage/v9/toast/presenting/controller/react.md b/static/usage/v9/toast/presenting/controller/react.md
new file mode 100644
index 00000000000..b4e8d0913ca
--- /dev/null
+++ b/static/usage/v9/toast/presenting/controller/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+ const [present] = useIonToast();
+
+ const presentToast = (position: 'top' | 'middle' | 'bottom') => {
+ present({
+ message: 'Hello World!',
+ duration: 1500,
+ position: position,
+ });
+ };
+
+ return (
+ <>
+ presentToast('top')}>
+ Present Toast At the Top
+
+ presentToast('middle')}>
+ Present Toast At the Middle
+
+ presentToast('bottom')}>
+ Present Toast At the Bottom
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toast/presenting/controller/vue.md b/static/usage/v9/toast/presenting/controller/vue.md
new file mode 100644
index 00000000000..e180abc18ea
--- /dev/null
+++ b/static/usage/v9/toast/presenting/controller/vue.md
@@ -0,0 +1,21 @@
+```html
+
+ Present Toast At the Top
+ Present Toast At the Middle
+ Present Toast At the Bottom
+
+
+
+```
diff --git a/static/usage/v9/toast/swipe-gesture/angular/example_component_html.md b/static/usage/v9/toast/swipe-gesture/angular/example_component_html.md
new file mode 100644
index 00000000000..146007d0391
--- /dev/null
+++ b/static/usage/v9/toast/swipe-gesture/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+ Open Toast
+
+
+```
diff --git a/static/usage/v9/toast/swipe-gesture/angular/example_component_ts.md b/static/usage/v9/toast/swipe-gesture/angular/example_component_ts.md
new file mode 100644
index 00000000000..143a25ef0cc
--- /dev/null
+++ b/static/usage/v9/toast/swipe-gesture/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toast/swipe-gesture/demo.html b/static/usage/v9/toast/swipe-gesture/demo.html
new file mode 100644
index 00000000000..cdead06dd5c
--- /dev/null
+++ b/static/usage/v9/toast/swipe-gesture/demo.html
@@ -0,0 +1,35 @@
+
+
+
+ Toast
+
+
+
+ Open Toast
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toast/swipe-gesture/index.md b/static/usage/v9/toast/swipe-gesture/index.md
new file mode 100644
index 00000000000..87f3cf8e5c1
--- /dev/null
+++ b/static/usage/v9/toast/swipe-gesture/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';
+
+
+ Open Toast
+
+
+```
diff --git a/static/usage/v9/toast/swipe-gesture/react.md b/static/usage/v9/toast/swipe-gesture/react.md
new file mode 100644
index 00000000000..09bbd89e3fd
--- /dev/null
+++ b/static/usage/v9/toast/swipe-gesture/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Open Toast
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toast/swipe-gesture/vue.md b/static/usage/v9/toast/swipe-gesture/vue.md
new file mode 100644
index 00000000000..8aaf3583a98
--- /dev/null
+++ b/static/usage/v9/toast/swipe-gesture/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Open Toast
+
+
+
+
+
+```
diff --git a/static/usage/v9/toast/theming/angular/example_component_html.md b/static/usage/v9/toast/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..b51350a3b63
--- /dev/null
+++ b/static/usage/v9/toast/theming/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Open Toast
+Toast
+
+
+
+ Toast
+
+
+
+
+ Open Toast
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toast/theming/index.md b/static/usage/v9/toast/theming/index.md
new file mode 100644
index 00000000000..3a720384291
--- /dev/null
+++ b/static/usage/v9/toast/theming/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+Open Toast
+Open Toast
+
+ Open Toast
+
+
+
+
+
+```
diff --git a/static/usage/v9/toggle/alignment/angular/example_component_html.md b/static/usage/v9/toggle/alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..2395fa81f6a
--- /dev/null
+++ b/static/usage/v9/toggle/alignment/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Aligned to the Start Aligned to the Center
+```
diff --git a/static/usage/v9/toggle/alignment/angular/example_component_ts.md b/static/usage/v9/toggle/alignment/angular/example_component_ts.md
new file mode 100644
index 00000000000..cfaa88043cf
--- /dev/null
+++ b/static/usage/v9/toggle/alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toggle/alignment/demo.html b/static/usage/v9/toggle/alignment/demo.html
new file mode 100644
index 00000000000..2f6eec49277
--- /dev/null
+++ b/static/usage/v9/toggle/alignment/demo.html
@@ -0,0 +1,25 @@
+
+
+
+ Toggle
+
+
+
+
+ Aligned to the Start Aligned to the Center
+
+
+
+
diff --git a/static/usage/v9/toggle/alignment/index.md b/static/usage/v9/toggle/alignment/index.md
new file mode 100644
index 00000000000..a606221c4c2
--- /dev/null
+++ b/static/usage/v9/toggle/alignment/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Aligned to the Start Aligned to the Center
+```
diff --git a/static/usage/v9/toggle/alignment/react.md b/static/usage/v9/toggle/alignment/react.md
new file mode 100644
index 00000000000..6af4a181100
--- /dev/null
+++ b/static/usage/v9/toggle/alignment/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Aligned to the Start
+
+
+ Aligned to the Center
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toggle/alignment/vue.md b/static/usage/v9/toggle/alignment/vue.md
new file mode 100644
index 00000000000..6fc033875f6
--- /dev/null
+++ b/static/usage/v9/toggle/alignment/vue.md
@@ -0,0 +1,10 @@
+```html
+
+ Aligned to the Start Aligned to the Center
+
+
+
+```
diff --git a/static/usage/v9/toggle/basic/angular/example_component_html.md b/static/usage/v9/toggle/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f6f9fd2bb1d
--- /dev/null
+++ b/static/usage/v9/toggle/basic/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+Default Toggle Checked Toggle Disabled Toggle Disabled Checked Toggle
+```
diff --git a/static/usage/v9/toggle/basic/angular/example_component_ts.md b/static/usage/v9/toggle/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..cfaa88043cf
--- /dev/null
+++ b/static/usage/v9/toggle/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toggle/basic/demo.html b/static/usage/v9/toggle/basic/demo.html
new file mode 100644
index 00000000000..660a809a31c
--- /dev/null
+++ b/static/usage/v9/toggle/basic/demo.html
@@ -0,0 +1,27 @@
+
+
+
+ Toggle
+
+
+
+
+ Default Toggle Checked Toggle Disabled Toggle Disabled Checked Toggle
+
+
+
+
+
diff --git a/static/usage/v9/toggle/basic/index.md b/static/usage/v9/toggle/basic/index.md
new file mode 100644
index 00000000000..d1dc266c16f
--- /dev/null
+++ b/static/usage/v9/toggle/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Default Toggle Checked Toggle Disabled Toggle Disabled Checked Toggle
+```
diff --git a/static/usage/v9/toggle/basic/react.md b/static/usage/v9/toggle/basic/react.md
new file mode 100644
index 00000000000..7783c45d747
--- /dev/null
+++ b/static/usage/v9/toggle/basic/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default Toggle
+ Checked Toggle
+ Disabled Toggle
+
+ Disabled Checked Toggle
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toggle/basic/vue.md b/static/usage/v9/toggle/basic/vue.md
new file mode 100644
index 00000000000..47042597850
--- /dev/null
+++ b/static/usage/v9/toggle/basic/vue.md
@@ -0,0 +1,12 @@
+```html
+
+ Default Toggle Checked Toggle Disabled Toggle Disabled Checked Toggle
+
+
+
+```
diff --git a/static/usage/v9/toggle/helper-error/angular/example_component_html.md b/static/usage/v9/toggle/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..d5d477aa14a
--- /dev/null
+++ b/static/usage/v9/toggle/helper-error/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+```
diff --git a/static/usage/v9/toggle/helper-error/angular/example_component_ts.md b/static/usage/v9/toggle/helper-error/angular/example_component_ts.md
new file mode 100644
index 00000000000..d1e09d6812b
--- /dev/null
+++ b/static/usage/v9/toggle/helper-error/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { IonToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ imports: [IonToggle, ReactiveFormsModule],
+ templateUrl: './example.component.html',
+ styleUrl: './example.component.css',
+})
+export class ExampleComponent {
+ myForm: FormGroup;
+
+ constructor(private fb: FormBuilder) {
+ this.myForm = this.fb.group({
+ wifi: [true, Validators.requiredTrue],
+ });
+ }
+
+ onChange() {
+ // Mark the control as touched to trigger the error message
+ // without requiring the toggle to be blurred first
+ this.myForm.get('wifi')!.markAsTouched();
+ }
+}
+```
diff --git a/static/usage/v9/toggle/helper-error/demo.html b/static/usage/v9/toggle/helper-error/demo.html
new file mode 100644
index 00000000000..7e7cf7b2034
--- /dev/null
+++ b/static/usage/v9/toggle/helper-error/demo.html
@@ -0,0 +1,48 @@
+
+
+
+ Input
+
+
+ Wi-Fi
+
+
+
+
+
+
diff --git a/static/usage/v9/toggle/helper-error/index.md b/static/usage/v9/toggle/helper-error/index.md
new file mode 100644
index 00000000000..8c1cf5f4282
--- /dev/null
+++ b/static/usage/v9/toggle/helper-error/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+ Wi-Fi
+
+
+
+```
diff --git a/static/usage/v9/toggle/helper-error/react.md b/static/usage/v9/toggle/helper-error/react.md
new file mode 100644
index 00000000000..926a0bd0d2e
--- /dev/null
+++ b/static/usage/v9/toggle/helper-error/react.md
@@ -0,0 +1,38 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonToggle, ToggleCustomEvent } from '@ionic/react';
+
+function Example() {
+ const wifiRef = useRef(null);
+
+ const [isTouched, setIsTouched] = useState(false);
+ const [isValid, setIsValid] = useState();
+ const [isChecked, setIsChecked] = useState(true);
+
+ const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
+ setIsTouched(true);
+ setIsChecked(event.detail.checked);
+ setIsValid(event.detail.checked);
+ };
+
+ return (
+ <>
+ validateToggle(event)}
+ >
+ Wi-Fi
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v9/toggle/helper-error/vue.md b/static/usage/v9/toggle/helper-error/vue.md
new file mode 100644
index 00000000000..100a8f05d5b
--- /dev/null
+++ b/static/usage/v9/toggle/helper-error/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+ Wi-Fi
+
+
+
+
+```
diff --git a/static/usage/v9/toggle/justify/angular/example_component_html.md b/static/usage/v9/toggle/justify/angular/example_component_html.md
new file mode 100644
index 00000000000..0dbb0ebc9ad
--- /dev/null
+++ b/static/usage/v9/toggle/justify/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+```
diff --git a/static/usage/v9/toggle/justify/angular/example_component_ts.md b/static/usage/v9/toggle/justify/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1813a7004f
--- /dev/null
+++ b/static/usage/v9/toggle/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toggle/justify/demo.html b/static/usage/v9/toggle/justify/demo.html
new file mode 100644
index 00000000000..844488ea58d
--- /dev/null
+++ b/static/usage/v9/toggle/justify/demo.html
@@ -0,0 +1,38 @@
+
+
+
+ Toggle
+
+
+
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toggle/justify/index.md b/static/usage/v9/toggle/justify/index.md
new file mode 100644
index 00000000000..b27f82706d3
--- /dev/null
+++ b/static/usage/v9/toggle/justify/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+```
diff --git a/static/usage/v9/toggle/justify/react.md b/static/usage/v9/toggle/justify/react.md
new file mode 100644
index 00000000000..ffe66a13f8f
--- /dev/null
+++ b/static/usage/v9/toggle/justify/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toggle/justify/vue.md b/static/usage/v9/toggle/justify/vue.md
new file mode 100644
index 00000000000..31973dbab52
--- /dev/null
+++ b/static/usage/v9/toggle/justify/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+
+
+
+```
diff --git a/static/usage/v9/toggle/label-placement/angular/example_component_html.md b/static/usage/v9/toggle/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..390ea7bda37
--- /dev/null
+++ b/static/usage/v9/toggle/label-placement/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+Label at the Start Label at the End Fixed Width Label Stacked Label
+```
diff --git a/static/usage/v9/toggle/label-placement/angular/example_component_ts.md b/static/usage/v9/toggle/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..cfaa88043cf
--- /dev/null
+++ b/static/usage/v9/toggle/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toggle/label-placement/demo.html b/static/usage/v9/toggle/label-placement/demo.html
new file mode 100644
index 00000000000..805a7bacfd2
--- /dev/null
+++ b/static/usage/v9/toggle/label-placement/demo.html
@@ -0,0 +1,27 @@
+
+
+
+ Toggle
+
+
+
+
+ Label at the Start Label at the End Fixed Width Label Stacked Label
+
+
+
+
diff --git a/static/usage/v9/toggle/label-placement/index.md b/static/usage/v9/toggle/label-placement/index.md
new file mode 100644
index 00000000000..517c753d847
--- /dev/null
+++ b/static/usage/v9/toggle/label-placement/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';
+
+Label at the Start Label at the End Fixed Width Label Stacked Label
+```
diff --git a/static/usage/v9/toggle/label-placement/react.md b/static/usage/v9/toggle/label-placement/react.md
new file mode 100644
index 00000000000..a6fe77d7a02
--- /dev/null
+++ b/static/usage/v9/toggle/label-placement/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Label at the Start
+ Label at the End
+ Fixed Width Label
+ Stacked Label
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toggle/label-placement/vue.md b/static/usage/v9/toggle/label-placement/vue.md
new file mode 100644
index 00000000000..ab46fe9fc9f
--- /dev/null
+++ b/static/usage/v9/toggle/label-placement/vue.md
@@ -0,0 +1,12 @@
+```html
+
+ Label at the Start Label at the End Fixed Width Label Stacked Label
+
+
+
+```
diff --git a/static/usage/v9/toggle/list/angular/example_component_html.md b/static/usage/v9/toggle/list/angular/example_component_html.md
new file mode 100644
index 00000000000..5a731705335
--- /dev/null
+++ b/static/usage/v9/toggle/list/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+```
diff --git a/static/usage/v9/toggle/list/angular/example_component_ts.md b/static/usage/v9/toggle/list/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1813a7004f
--- /dev/null
+++ b/static/usage/v9/toggle/list/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toggle/list/demo.html b/static/usage/v9/toggle/list/demo.html
new file mode 100644
index 00000000000..5dd70b2ff21
--- /dev/null
+++ b/static/usage/v9/toggle/list/demo.html
@@ -0,0 +1,32 @@
+
+
+
+ Toggle
+
+
+
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toggle/list/index.md b/static/usage/v9/toggle/list/index.md
new file mode 100644
index 00000000000..31d785347b7
--- /dev/null
+++ b/static/usage/v9/toggle/list/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+```
diff --git a/static/usage/v9/toggle/list/react.md b/static/usage/v9/toggle/list/react.md
new file mode 100644
index 00000000000..f32920305ee
--- /dev/null
+++ b/static/usage/v9/toggle/list/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toggle/list/vue.md b/static/usage/v9/toggle/list/vue.md
new file mode 100644
index 00000000000..d93e0118f01
--- /dev/null
+++ b/static/usage/v9/toggle/list/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+
+
+
+```
diff --git a/static/usage/v9/toggle/on-off/angular/example_component_html.md b/static/usage/v9/toggle/on-off/angular/example_component_html.md
new file mode 100644
index 00000000000..2b2d75bcc3c
--- /dev/null
+++ b/static/usage/v9/toggle/on-off/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Enable Notifications
+```
diff --git a/static/usage/v9/toggle/on-off/angular/example_component_ts.md b/static/usage/v9/toggle/on-off/angular/example_component_ts.md
new file mode 100644
index 00000000000..cfaa88043cf
--- /dev/null
+++ b/static/usage/v9/toggle/on-off/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toggle/on-off/demo.html b/static/usage/v9/toggle/on-off/demo.html
new file mode 100644
index 00000000000..60cde1df7e9
--- /dev/null
+++ b/static/usage/v9/toggle/on-off/demo.html
@@ -0,0 +1,22 @@
+
+
+
+ Toggle
+
+
+
+ Enable Notifications
+
+
+
+
+
diff --git a/static/usage/v9/toggle/on-off/index.md b/static/usage/v9/toggle/on-off/index.md
new file mode 100644
index 00000000000..0ddf576daa8
--- /dev/null
+++ b/static/usage/v9/toggle/on-off/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+Enable Notifications
+```
diff --git a/static/usage/v9/toggle/on-off/react.md b/static/usage/v9/toggle/on-off/react.md
new file mode 100644
index 00000000000..321e55187d5
--- /dev/null
+++ b/static/usage/v9/toggle/on-off/react.md
@@ -0,0 +1,9 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return Enable Notifications ;
+}
+export default Example;
+```
diff --git a/static/usage/v9/toggle/on-off/vue.md b/static/usage/v9/toggle/on-off/vue.md
new file mode 100644
index 00000000000..5b5ba3aea20
--- /dev/null
+++ b/static/usage/v9/toggle/on-off/vue.md
@@ -0,0 +1,9 @@
+```html
+
+ Enable Notifications
+
+
+
+```
diff --git a/static/usage/v9/toggle/theming/colors/angular/example_component_html.md b/static/usage/v9/toggle/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..20e1b2f0d19
--- /dev/null
+++ b/static/usage/v9/toggle/theming/colors/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Toggle
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toggle/theming/colors/index.md b/static/usage/v9/toggle/theming/colors/index.md
new file mode 100644
index 00000000000..76ecfdf76d5
--- /dev/null
+++ b/static/usage/v9/toggle/theming/colors/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+```
diff --git a/static/usage/v9/toggle/theming/css-properties/angular/example_component_css.md b/static/usage/v9/toggle/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a8e62a4d3e9
--- /dev/null
+++ b/static/usage/v9/toggle/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,27 @@
+```css
+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/v9/toggle/theming/css-properties/angular/example_component_html.md b/static/usage/v9/toggle/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..de598209eaa
--- /dev/null
+++ b/static/usage/v9/toggle/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Item
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toggle/theming/css-properties/index.md b/static/usage/v9/toggle/theming/css-properties/index.md
new file mode 100644
index 00000000000..8dbeb8ef31c
--- /dev/null
+++ b/static/usage/v9/toggle/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..0df6def7beb
--- /dev/null
+++ b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,34 @@
+```css
+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;
+}
+```
diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..de598209eaa
--- /dev/null
+++ b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Item
+
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/index.md b/static/usage/v9/toggle/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..68f972d0338
--- /dev/null
+++ b/static/usage/v9/toggle/theming/css-shadow-parts/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_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_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/basic/angular/example_component_html.md b/static/usage/v9/toolbar/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/v9/toolbar/basic/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+```
diff --git a/static/usage/v9/toolbar/basic/angular/example_component_ts.md b/static/usage/v9/toolbar/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..981da434e36
--- /dev/null
+++ b/static/usage/v9/toolbar/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonFooter, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toolbar/basic/demo.html b/static/usage/v9/toolbar/basic/demo.html
new file mode 100644
index 00000000000..344095d39e9
--- /dev/null
+++ b/static/usage/v9/toolbar/basic/demo.html
@@ -0,0 +1,28 @@
+
+
+
+ Toolbar
+
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+
+
+
diff --git a/static/usage/v9/toolbar/basic/index.md b/static/usage/v9/toolbar/basic/index.md
new file mode 100644
index 00000000000..e2c48320975
--- /dev/null
+++ b/static/usage/v9/toolbar/basic/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+```
diff --git a/static/usage/v9/toolbar/basic/react.md b/static/usage/v9/toolbar/basic/react.md
new file mode 100644
index 00000000000..42b46929d3f
--- /dev/null
+++ b/static/usage/v9/toolbar/basic/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toolbar/basic/vue.md b/static/usage/v9/toolbar/basic/vue.md
new file mode 100644
index 00000000000..130b4e692e8
--- /dev/null
+++ b/static/usage/v9/toolbar/basic/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/buttons/angular/example_component_html.md b/static/usage/v9/toolbar/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..18a54554a1b
--- /dev/null
+++ b/static/usage/v9/toolbar/buttons/angular/example_component_html.md
@@ -0,0 +1,84 @@
+```html
+
+
+ Start
+
+ Start / End Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+
+ Primary
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+
+
+
+ Help
+
+
+ Solid Buttons
+
+
+
+
+
+
+
+
+
+ Edit
+
+
+ Outline Buttons
+
+
+
+
+
+ Back Button
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v9/toolbar/buttons/angular/example_component_ts.md b/static/usage/v9/toolbar/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..08f95df3d3c
--- /dev/null
+++ b/static/usage/v9/toolbar/buttons/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star });
+ }
+}
+```
diff --git a/static/usage/v9/toolbar/buttons/demo.html b/static/usage/v9/toolbar/buttons/demo.html
new file mode 100644
index 00000000000..eb78f943d2f
--- /dev/null
+++ b/static/usage/v9/toolbar/buttons/demo.html
@@ -0,0 +1,110 @@
+
+
+
+ Toolbar
+
+
+
+
+
+ Start
+
+ Start / End Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+
+ Primary
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+
+
+
+ Help
+
+
+ Solid Buttons
+
+
+
+
+
+
+
+
+
+ Edit
+
+
+ Outline Buttons
+
+
+
+
+
+ Back Button
+
+
+
+
+
+ Menu Button
+
+
+
+
+
+
diff --git a/static/usage/v9/toolbar/buttons/index.md b/static/usage/v9/toolbar/buttons/index.md
new file mode 100644
index 00000000000..1d8b43ce001
--- /dev/null
+++ b/static/usage/v9/toolbar/buttons/index.md
@@ -0,0 +1,32 @@
+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 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';
+
+
+
+ Start
+
+ Start / End Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+
+ Primary
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+
+
+
+ Help
+
+
+ Solid Buttons
+
+
+
+
+
+
+
+
+
+ Edit
+
+
+ Outline Buttons
+
+
+
+
+
+ Back Button
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v9/toolbar/buttons/javascript/index_ts.md b/static/usage/v9/toolbar/buttons/javascript/index_ts.md
new file mode 100644
index 00000000000..32e0670badf
--- /dev/null
+++ b/static/usage/v9/toolbar/buttons/javascript/index_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
+
+/* 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';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'create': create, 'ellipsis-horizontal': ellipsisHorizontal, 'ellipsis-vertical': ellipsisVertical,
+ * 'help-circle': helpCircle, 'person-circle': personCircle, 'search': search, 'star': star });
+ */
+addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/toolbar/buttons/react.md b/static/usage/v9/toolbar/buttons/react.md
new file mode 100644
index 00000000000..a8ed785db82
--- /dev/null
+++ b/static/usage/v9/toolbar/buttons/react.md
@@ -0,0 +1,95 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
+import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Start
+
+ Start / End Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+
+ Primary
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+
+
+
+ Help
+
+
+ Solid Buttons
+
+
+
+
+
+
+
+
+
+ Edit
+
+
+ Outline Buttons
+
+
+
+
+
+ Back Button
+
+
+
+
+
+ Menu Button
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toolbar/buttons/vue.md b/static/usage/v9/toolbar/buttons/vue.md
new file mode 100644
index 00000000000..7a841ba2737
--- /dev/null
+++ b/static/usage/v9/toolbar/buttons/vue.md
@@ -0,0 +1,91 @@
+```html
+
+
+
+ Start
+
+ Start / End Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+
+ Primary
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+
+
+
+ Help
+
+
+ Solid Buttons
+
+
+
+
+
+
+
+
+
+ Edit
+
+
+ Outline Buttons
+
+
+
+
+
+ Back Button
+
+
+
+
+
+ Menu Button
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/progress-bars/angular/example_component_html.md b/static/usage/v9/toolbar/progress-bars/angular/example_component_html.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/v9/toolbar/progress-bars/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Toolbar
+
+
+```
diff --git a/static/usage/v9/toolbar/progress-bars/angular/example_component_ts.md b/static/usage/v9/toolbar/progress-bars/angular/example_component_ts.md
new file mode 100644
index 00000000000..68b20a165cf
--- /dev/null
+++ b/static/usage/v9/toolbar/progress-bars/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toolbar/progress-bars/demo.html b/static/usage/v9/toolbar/progress-bars/demo.html
new file mode 100644
index 00000000000..f30ccd42ca2
--- /dev/null
+++ b/static/usage/v9/toolbar/progress-bars/demo.html
@@ -0,0 +1,23 @@
+
+
+
+ Toolbar
+
+
+
+ Toolbar
+
+
+
+
+
diff --git a/static/usage/v9/toolbar/progress-bars/index.md b/static/usage/v9/toolbar/progress-bars/index.md
new file mode 100644
index 00000000000..21f33518501
--- /dev/null
+++ b/static/usage/v9/toolbar/progress-bars/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';
+
+
+
+ Toolbar
+
+
+```
diff --git a/static/usage/v9/toolbar/progress-bars/react.md b/static/usage/v9/toolbar/progress-bars/react.md
new file mode 100644
index 00000000000..52720f12b14
--- /dev/null
+++ b/static/usage/v9/toolbar/progress-bars/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Toolbar
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toolbar/progress-bars/vue.md b/static/usage/v9/toolbar/progress-bars/vue.md
new file mode 100644
index 00000000000..4cc4a0d2d8b
--- /dev/null
+++ b/static/usage/v9/toolbar/progress-bars/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+ Toolbar
+
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/searchbars/angular/example_component_html.md b/static/usage/v9/toolbar/searchbars/angular/example_component_html.md
new file mode 100644
index 00000000000..9016e1e04cf
--- /dev/null
+++ b/static/usage/v9/toolbar/searchbars/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Toolbar
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/searchbars/angular/example_component_ts.md b/static/usage/v9/toolbar/searchbars/angular/example_component_ts.md
new file mode 100644
index 00000000000..fc531acd063
--- /dev/null
+++ b/static/usage/v9/toolbar/searchbars/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toolbar/searchbars/demo.html b/static/usage/v9/toolbar/searchbars/demo.html
new file mode 100644
index 00000000000..565d6b68c6b
--- /dev/null
+++ b/static/usage/v9/toolbar/searchbars/demo.html
@@ -0,0 +1,25 @@
+
+
+
+ Toolbar
+
+
+
+ Toolbar
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toolbar/searchbars/index.md b/static/usage/v9/toolbar/searchbars/index.md
new file mode 100644
index 00000000000..39ee4dc05c3
--- /dev/null
+++ b/static/usage/v9/toolbar/searchbars/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';
+
+
+
+ Toolbar
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/searchbars/react.md b/static/usage/v9/toolbar/searchbars/react.md
new file mode 100644
index 00000000000..dcf4fc644f3
--- /dev/null
+++ b/static/usage/v9/toolbar/searchbars/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Toolbar
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toolbar/searchbars/vue.md b/static/usage/v9/toolbar/searchbars/vue.md
new file mode 100644
index 00000000000..c5a1d953a39
--- /dev/null
+++ b/static/usage/v9/toolbar/searchbars/vue.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/segments/angular/example_component_html.md b/static/usage/v9/toolbar/segments/angular/example_component_html.md
new file mode 100644
index 00000000000..e7cce4323dc
--- /dev/null
+++ b/static/usage/v9/toolbar/segments/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/segments/angular/example_component_ts.md b/static/usage/v9/toolbar/segments/angular/example_component_ts.md
new file mode 100644
index 00000000000..258ca62e392
--- /dev/null
+++ b/static/usage/v9/toolbar/segments/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toolbar/segments/demo.html b/static/usage/v9/toolbar/segments/demo.html
new file mode 100644
index 00000000000..7580bf51736
--- /dev/null
+++ b/static/usage/v9/toolbar/segments/demo.html
@@ -0,0 +1,29 @@
+
+
+
+ Toolbar
+
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+
+
+
diff --git a/static/usage/v9/toolbar/segments/index.md b/static/usage/v9/toolbar/segments/index.md
new file mode 100644
index 00000000000..1f430290037
--- /dev/null
+++ b/static/usage/v9/toolbar/segments/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';
+
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/segments/react.md b/static/usage/v9/toolbar/segments/react.md
new file mode 100644
index 00000000000..f2fad4d0ec5
--- /dev/null
+++ b/static/usage/v9/toolbar/segments/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toolbar/segments/vue.md b/static/usage/v9/toolbar/segments/vue.md
new file mode 100644
index 00000000000..84704bc878c
--- /dev/null
+++ b/static/usage/v9/toolbar/segments/vue.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/theming/colors/angular/example_component_html.md b/static/usage/v9/toolbar/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/colors/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+```
diff --git a/static/usage/v9/toolbar/theming/colors/angular/example_component_ts.md b/static/usage/v9/toolbar/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..c4c55b1383a
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toolbar/theming/colors/demo.html b/static/usage/v9/toolbar/theming/colors/demo.html
new file mode 100644
index 00000000000..daab82e33e7
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/colors/demo.html
@@ -0,0 +1,58 @@
+
+
+
+ Toolbar
+
+
+
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+
+
+
+
+
diff --git a/static/usage/v9/toolbar/theming/colors/index.md b/static/usage/v9/toolbar/theming/colors/index.md
new file mode 100644
index 00000000000..5972e823421
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/colors/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';
+
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+```
diff --git a/static/usage/v9/toolbar/theming/colors/react.md b/static/usage/v9/toolbar/theming/colors/react.md
new file mode 100644
index 00000000000..ba6fd010f23
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toolbar/theming/colors/vue.md b/static/usage/v9/toolbar/theming/colors/vue.md
new file mode 100644
index 00000000000..e9f4ab0ffa0
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/colors/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+
+
+
+```
diff --git a/static/usage/v9/toolbar/theming/css-properties/angular/example_component_css.md b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,14 @@
+```css
+ion-toolbar {
+ --background: #19422d;
+ --color: white;
+
+ --border-color: #f24aec;
+ --border-width: 4px 0;
+ --border-style: double;
+
+ --min-height: 80px;
+ --padding-top: 20px;
+ --padding-bottom: 20px;
+}
+```
diff --git a/static/usage/v9/toolbar/theming/css-properties/angular/example_component_html.md b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..8f21356a707
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Custom Toolbar
+
+```
diff --git a/static/usage/v9/toolbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..c4c55b1383a
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/toolbar/theming/css-properties/demo.html b/static/usage/v9/toolbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..fdb73e31a9b
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/css-properties/demo.html
@@ -0,0 +1,44 @@
+
+
+
+ Toolbar
+
+
+
+
+ Custom Toolbar
+
+
+
+
+
+
diff --git a/static/usage/v9/toolbar/theming/css-properties/index.md b/static/usage/v9/toolbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..2cb1c621523
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_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';
+
+
+ Custom Toolbar
+
+
+
+```
diff --git a/static/usage/v9/toolbar/theming/css-properties/react/main_css.md b/static/usage/v9/toolbar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-toolbar {
+ --background: #19422d;
+ --color: white;
+
+ --border-color: #f24aec;
+ --border-width: 4px 0;
+ --border-style: double;
+
+ --min-height: 80px;
+ --padding-top: 20px;
+ --padding-bottom: 20px;
+}
+```
diff --git a/static/usage/v9/toolbar/theming/css-properties/react/main_tsx.md b/static/usage/v9/toolbar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8e8f663cd98
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Custom Toolbar
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/toolbar/theming/css-properties/vue.md b/static/usage/v9/toolbar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..b38a6cbc7cd
--- /dev/null
+++ b/static/usage/v9/toolbar/theming/css-properties/vue.md
@@ -0,0 +1,26 @@
+```html
+
+
+ Custom Toolbar
+
+
+
+
+
+
+```
diff --git a/vercel.json b/vercel.json
index 8c7509aaf63..ea4a0e6d7de 100644
--- a/vercel.json
+++ b/vercel.json
@@ -41,13 +41,13 @@
"source": "/docs/ja/",
"destination": "/docs/ja"
},
- { "source": "/docs/ja/v8/:match*", "destination": "/docs/ja/:match*" },
+ { "source": "/docs/ja/v9/:match*", "destination": "/docs/ja/:match*" },
{
"source": "/docs/(v5|next)?/developer-resources/:path*",
"destination": "https://ionic.io/resources"
},
{ "source": "/docs/next/:match*", "destination": "/docs/:match*" },
- { "source": "/docs/v8/:match*", "destination": "/docs/:match*" },
+ { "source": "/docs/v9/:match*", "destination": "/docs/:match*" },
{
"source": "/docs/react",
"destination": "/docs/react/overview"
diff --git a/versioned_docs/version-v5/reference/support.md b/versioned_docs/version-v5/reference/support.md
index 1a420876b28..663ddaed953 100644
--- a/versioned_docs/version-v5/reference/support.md
+++ b/versioned_docs/version-v5/reference/support.md
@@ -19,7 +19,7 @@ The current status of each Ionic Framework version is:
| 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).
+- **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available.
## Compatibility Recommendations
diff --git a/versioned_docs/version-v6/angular/overview.md b/versioned_docs/version-v6/angular/overview.md
index dbf23bba513..bde8adb5221 100644
--- a/versioned_docs/version-v6/angular/overview.md
+++ b/versioned_docs/version-v6/angular/overview.md
@@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards';
## Angular Version Support
-Ionic Angular v6 supports Angular versions 12 through 15. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular).
+Ionic Angular v6 supports Angular versions 12 through 15. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular).
## Angular Tooling
diff --git a/versioned_docs/version-v6/reference/support.md b/versioned_docs/version-v6/reference/support.md
index ea86dd944c8..d5d2297823c 100644
--- a/versioned_docs/version-v6/reference/support.md
+++ b/versioned_docs/version-v6/reference/support.md
@@ -30,7 +30,7 @@ The current status of each Ionic Framework version is:
| 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).
+- **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available.
## Compatibility Recommendations
diff --git a/versioned_docs/version-v7/angular/overview.md b/versioned_docs/version-v7/angular/overview.md
index cdef82fdf48..edae3e6e2ca 100644
--- a/versioned_docs/version-v7/angular/overview.md
+++ b/versioned_docs/version-v7/angular/overview.md
@@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards';
## Angular Version Support
-Ionic Angular v7 supports Angular versions 14 through 17. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular).
+Ionic Angular v7 supports Angular versions 14 through 17. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular).
## Angular Tooling
diff --git a/versioned_docs/version-v7/api/datetime-button.md b/versioned_docs/version-v7/api/datetime-button.md
index 536c4616935..6e19182974a 100644
--- a/versioned_docs/version-v7/api/datetime-button.md
+++ b/versioned_docs/version-v7/api/datetime-button.md
@@ -27,7 +27,7 @@ Datetime Button links with a [Datetime](./datetime) component to display the for
Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
-When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
+When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#prop-keep-contents-mounted) or the [keepContentsMounted property on ion-popover](./popover#prop-keep-contents-mounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
## Basic Usage
diff --git a/versioned_docs/version-v7/api/loading.md b/versioned_docs/version-v7/api/loading.md
index 64e115c95bb..35cf73fc394 100644
--- a/versioned_docs/version-v7/api/loading.md
+++ b/versioned_docs/version-v7/api/loading.md
@@ -45,7 +45,7 @@ import Controller from '@site/static/usage/v7/loading/controller/index.md';
### Spinners
-The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#spinner) for a full list of options.
+The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#prop-spinner) for a full list of options.
import Spinners from '@site/static/usage/v7/loading/spinners/index.md';
diff --git a/versioned_docs/version-v7/api/router.md b/versioned_docs/version-v7/api/router.md
index 122a3f17445..c574f982389 100644
--- a/versioned_docs/version-v7/api/router.md
+++ b/versioned_docs/version-v7/api/router.md
@@ -13,7 +13,7 @@ import Slots from '@ionic-internal/component-api/v7/router/slots.md';
ion-router: Router Component to Coordinate URL Navigation
Add Ionic Angular to Existing Project: Integration Guide
+ Button
+
+```
+
+Then, update `src/app/app.ts` to include the component imports:
+
+```ts title="src/app/app.ts"
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-root',
+ imports: [IonApp, IonRouterOutlet],
+ templateUrl: './app.html',
+ styleUrl: './app.css',
+})
+export class App {}
+```
+
+#### 4. Create a Home Page
+
+Start by adding a template at `src/app/home/home.html`:
+
+```html title="src/app/home/home.html"
+
+
+ Home
+
+
+
+
+
+
+ Home
+
+
+
+
+
Ready to create an app?
+
+ Start with Ionic
+ UI Components
+
+
+```
+
+Then, create `src/app/home/home.ts` with the following:
+
+```ts title="src/app/home/home.ts"
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-home',
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+ templateUrl: './home.html',
+ styleUrl: './home.css',
+})
+export class HomePage {}
+```
+
+Finally, add a `src/app/home/home.css` file:
+
+```css title="src/app/home/home.css"
+#container {
+ text-align: center;
+
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+#container strong {
+ font-size: 20px;
+ line-height: 26px;
+}
+
+#container p {
+ font-size: 16px;
+ line-height: 22px;
+
+ color: #8c8c8c;
+
+ margin: 0;
+}
+
+#container a {
+ text-decoration: none;
+}
+```
+
+#### 5. Set up Routing
+
+Update `src/app/app.routes.ts` to add a `home` route:
+
+```ts title="src/app/app.routes.ts"
+import { Routes } from '@angular/router';
+import { HomePage } from './home/home';
+
+export const routes: Routes = [
+ {
+ path: '',
+ redirectTo: 'home',
+ pathMatch: 'full',
+ },
+ {
+ path: 'home',
+ component: HomePage,
+ },
+];
+```
+
+You're all set! Your Ionic Angular app is now configured with full Ionic page support. Run `ng serve` to start your development server and view your app.
+
+## Next Steps
+
+Now that you have Ionic Angular integrated into your project, check out:
+
+
+
+
+ Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.
+
+
+
+ Explore Ionic's rich library of UI components for building beautiful apps.
+
+
+
+ Learn how to customize the look and feel of your app with Ionic's powerful theming system.
+
+
+
+ Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.
+
+
+
diff --git a/versioned_docs/version-v8/angular/build-options.md b/versioned_docs/version-v8/angular/build-options.md
new file mode 100644
index 00000000000..857bc28a3cb
--- /dev/null
+++ b/versioned_docs/version-v8/angular/build-options.md
@@ -0,0 +1,700 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Build Options
+
+Developers have two options for using Ionic components: Standalone or Modules. This guide covers both options as well as the benefits and downsides of each approach.
+
+While the Standalone approach is newer and makes use of more modern Angular APIs, the Modules approach will continue to be supported in Ionic. Most of the Angular examples on this documentation website use the Modules approach.
+
+## Standalone
+
+:::info
+Ionic UI components as Angular standalone components is supported starting in Ionic v7.5.
+:::
+
+### Overview
+
+Developers can use Ionic components as standalone components to take advantage of treeshaking and newer Angular features. This option involves importing specific Ionic components in the Angular components you want to use them in. Developers can use Ionic standalone components even if their Angular application is NgModule-based.
+
+Refer to the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for instructions on how to update your Ionic app to make use of Ionic standalone components.
+
+**Benefits**
+
+1. Enables treeshaking so the final build output only includes the code necessary to run your app which reduces overall build size.
+2. Avoids the use of NgModules to streamline the development experience and make your code easier to understand.
+3. Allows developers to also use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild).
+
+**Drawbacks**
+
+1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up.
+
+### Usage with Standalone-based Applications
+
+:::warning
+All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking.
+:::
+
+**Bootstrapping and Configuration**
+
+Ionic Angular needs to be configured when the Angular application calls `bootstrapApplication` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed.
+
+```typescript title="main.ts"
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter } from '@angular/router';
+import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
+
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+ providers: [
+ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+ provideIonicAngular({ mode: 'ios' }),
+ provideRouter(routes),
+ ],
+});
+```
+
+**Components**
+
+In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array.
+
+```typescript title="home.page.ts"
+import { Component } from '@angular/core';
+import { IonButton, IonContent } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss'],
+ standalone: true,
+ imports: [IonButton, IonContent],
+})
+export class HomePage {
+ constructor() {}
+}
+```
+
+**Icons**
+
+The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`.
+
+We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used.
+
+For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated.
+
+```typescript title="home.page.ts"
+import { Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss'],
+ standalone: true,
+ imports: [IonIcon],
+})
+export class HomePage {
+ constructor() {
+ /**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to a "logo-ionic" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'logo-ionic': logoIonic });
+ */
+ addIcons({ logoIonic });
+ }
+}
+```
+
+Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal.
+
+```typescript title="app.component.ts"
+import { Component } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.scss'],
+ standalone: true,
+})
+export class AppComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ logoIonic });
+ }
+}
+```
+
+Icons registered in an application entry point can then be referenced by name anywhere in the application.
+
+```html title="home.page.html"
+
+`) elements should import `IonRouterLinkWithHref` instead.
+
+```typescript title="home.page.ts"
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { IonButton, IonRouterLink } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss'],
+ standalone: true,
+ imports: [
+ IonButton,
+ RouterLink, // required to get base routerLink behavior for @angular/router
+ IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead
+ ],
+})
+export class HomePage {}
+```
+
+```html title="home.page.html"
+Go to Foo Page
+```
+
+**Testing**
+
+Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config:
+
+
+
+
+```json
+
+"transformIgnorePatterns": ["/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
+```
+
+
+
+
+```json
+
+"transformIgnorePatterns": ["/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
+```
+
+
+
+
+### Usage with NgModule-based Applications
+
+:::warning
+All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking.
+:::
+
+**Bootstrapping and Configuration**
+
+Ionic Angular needs to be configured in the `providers` array of `app.module.ts` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed.
+
+```typescript title="app.module.ts"
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+ declarations: [AppComponent],
+ imports: [BrowserModule, AppRoutingModule],
+ providers: [provideIonicAngular(), { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+**Components**
+
+In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array.
+
+```typescript title="home.module.ts"
+import { NgModule } from '@angular/core';
+import { IonButton, IonContent } from '@ionic/angular/standalone';
+import { HomePage } from './home.page';
+
+import { HomePageRoutingModule } from './home-routing.module';
+
+@NgModule({
+ imports: [IonButton, IonContent, HomePageRoutingModule],
+ declarations: [HomePage],
+})
+export class HomePageModule {}
+```
+
+**Icons**
+
+The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`. The `IonIcon` component should be added in `app.module.ts` just like the other Ionic components.
+
+We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used.
+
+For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated.
+
+```typescript title="home.page.ts"
+import { Component } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+ constructor() {
+ /**
+ * On Ionicons 7.2+ this icon
+ * gets mapped to a "logo-ionic" key.
+ * Alternatively, developers can do:
+ * addIcons({ 'logo-ionic': logoIonic });
+ */
+ addIcons({ logoIonic });
+ }
+}
+```
+
+Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal.
+
+```typescript title="app.component.ts"
+import { Component } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.scss'],
+})
+export class AppComponent {
+ constructor() {
+ /**
+ * Any icons you want to use in your application
+ * can be registered in app.component.ts and then
+ * referenced by name anywhere in your application.
+ */
+ addIcons({ logoIonic });
+ }
+}
+```
+
+Icons registered in an application entry point can then be referenced by name anywhere in the application.
+
+```html title="home.page.html"
+
+ `) elements should import `IonRouterLinkWithHref` instead.
+
+```typescript title="home.module.ts"
+import { NgModule } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { IonButton, IonRouterLink } from '@ionic/angular/standalone';
+import { HomePage } from './home.page';
+
+import { HomePageRoutingModule } from './home-routing.module';
+
+@NgModule({
+ imports: [
+ IonButton,
+ RouterLink, // required to get base routerLink behavior for @angular/router
+ IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead
+ HomePageRoutingModule,
+ ],
+ declarations: [HomePage],
+})
+export class HomePageModule {}
+```
+
+```html title="home.page.html"
+Go to Foo Page
+```
+
+**Testing**
+
+Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config:
+
+
+
+
+```json
+
+"transformIgnorePatterns": ["/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
+```
+
+
+
+
+```json
+
+"transformIgnorePatterns": ["/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
+```
+
+
+
+
+## Modules
+
+### Overview
+
+Developers can also use the Modules approach by importing `IonicModule` and calling `IonicModule.forRoot()` in the `imports` array in `app.module.ts`. This registers a version of Ionic where Ionic components will be lazily loaded at runtime.
+
+**Benefits**
+
+1. Since components are lazily loaded as needed, developers do not need to spend time manually importing and registering each Ionic component.
+
+**Drawbacks**
+
+1. Lazily loading Ionic components means that the compiler does not know which components are needed at build time. This means your final application bundle may be much larger than it needs to be.
+2. Developers are unable to use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild).
+
+### Usage
+
+In the example below, we are using `IonicModule` to create a lazily loaded version of Ionic. We can then reference any Ionic component without needing to explicitly import it.
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ declarations: [AppComponent],
+ imports: [BrowserModule, IonicModule.forRoot()],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+## Migrating from Modules to Standalone
+
+:::tip
+Try our automated utility for migrating to standalone!
+
+See https://github.com/ionic-team/ionic-angular-standalone-codemods for instructions on how to get started. All issues related to the migration utility should be filed on the linked repo.
+:::
+
+The Standalone option is newer than the Modules option, so developers may wish to switch during the development of their application. This guide details the steps needed to migrate.
+
+Migrating to Ionic standalone components must be done all at the same time and cannot be done gradually. The Modules and Standalone approaches use two different build systems of Ionic that cannot be used at the same time.
+
+Developers are encouraged to try the [automated migration utility](https://github.com/ionic-team/ionic-angular-standalone-codemods), though they can also follow the steps below if they would like to manually migrate their applications.
+
+### Standalone-based Applications
+
+Follow these steps if your Angular application is already using the standalone architecture, and you want to use Ionic UI components as standalone components too.
+
+1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer.
+
+2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components.
+
+3. Remove the `IonicModule` call in `main.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function.
+
+```diff title="main.ts"
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter } from '@angular/router';
+- import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
+
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+ providers: [
+ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+ /**
+ * The custom config serves as an example
+ * of how to pass a config to provideIonicAngular.
+ * You do not need to set "mode: 'ios'" to
+ * use Ionic standalone components.
+ */
+- importProvidersFrom(IonicModule.forRoot({ mode: 'ios' })),
++ provideIonicAngular({ mode: 'ios' }),
+ provideRouter(routes),
+ ],
+});
+```
+
+4. Remove any references to `IonicModule` found elsewhere in your application.
+
+5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead.
+
+```diff
+- import { Platform } from '@ionic/angular';
++ import { Platform } from '@ionic/angular/standalone';
+```
+
+6. Add imports for each Ionic component in the Angular component where they are used. Be sure to pass the imports to the `imports` array on your Angular component.
+
+```diff title="app.component.ts"
+import { Component } from '@angular/core';
++ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.scss'],
+ standalone: true,
++ imports: [IonApp, IonRouterOutlet],
+})
+export class AppComponent {
+ constructor() {}
+}
+```
+
+7. If you are using Ionicons, define the icon SVG data used in each Angular component using `addIcons`. This allows you to continue referencing icons by string name in your component template. Note that you will need to do this for any additional icons added.
+
+```diff title="test.component.ts"
+import { Component } from '@angular/core';
++ import { IonIcon } from '@ionic/angular/standalone';
++ import { addIcons } from 'ionicons';
++ import { alarm, logoIonic } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.scss'],
+ standalone: true,
++ imports: [IonIcon],
+})
+export class TestComponent {
+ constructor() {
++ addIcons({ alarm, logoIonic });
+ }
+}
+```
+
+8. Remove the following code from your `angular.json` file if present. Note that it may appear multiple times.
+
+```diff title="angular.json"
+- {
+- "glob": "**/*.svg",
+- "input": "node_modules/ionicons/dist/ionicons/svg",
+- "output": "./svg"
+- }
+```
+
+9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for ` ` elements.
+
+```diff title="test.component.ts"
+import { Component } from '@angular/core';
+- import { IonButton } from '@ionic/angular/standalone';
++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.scss'],
+ standalone: true,
+ imports: [
+ IonButton,
++ IonRouterLink
+ ],
+})
+export class TestComponent {}
+```
+
+10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations.
+
+```json title=".vscode/settings.json"
+{
+ "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"]
+}
+```
+
+### NgModule-based Applications
+
+Follow these steps if your Angular application is still using the NgModule architecture, but you want to adopt Ionic UI components as standalone components now.
+
+1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer.
+
+2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components.
+
+3. Remove the `IonicModule` call in `app.module.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function.
+
+```diff title="app.module.ts"
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter } from '@angular/router';
+- import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
+
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
+
+@NgModule({
+ declarations: [AppComponent],
+- imports: [BrowserModule, IonicModule.forRoot({ mode: 'ios' }), AppRoutingModule],
++ imports: [BrowserModule, AppRoutingModule],
+ providers: [
+ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+ /**
+ * The custom config serves as an example
+ * of how to pass a config to provideIonicAngular.
+ * You do not need to set "mode: 'ios'" to
+ * use Ionic standalone components.
+ */
++ provideIonicAngular({ mode: 'ios' }),
+ ],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+4. Remove any references to `IonicModule` found elsewhere in your application.
+
+5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead.
+
+```diff
+- import { Platform } from '@ionic/angular';
++ import { Platform } from '@ionic/angular/standalone';
+```
+
+6. Add imports for each Ionic component in the NgModule for the Angular component where they are used. Be sure to pass the components to the `imports` array on the module.
+
+```diff title="app.module.ts"
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter } from '@angular/router';
+- import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
++ import { provideIonicAngular, IonicRouteStrategy, IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
+
+@NgModule({
+ declarations: [AppComponent],
+- imports: [BrowserModule, AppRoutingModule],
++ imports: [BrowserModule, AppRoutingModule, IonApp, IonRouterOutlet],
+ providers: [
+ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+ provideIonicAngular({ mode: 'ios' })
+ ],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+For example, all modules that are using Ionic components need to have the Ionic components imported in their component module.
+
+```diff title="home.module.ts"
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HomePage } from './home.page';
+
+import { HomePageRoutingModule } from './home-routing.module';
+
++ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ HomePageRoutingModule,
++ IonContent,
++ IonHeader,
++ IonTitle,
++ IonToolbar
+ ],
+ declarations: [HomePage]
+})
+export class HomePageModule {}
+```
+
+7. If you are using Ionicons, define the icon SVG data used in each Angular component using `addIcons`. This allows you to continue referencing icons by string name in your component template. Note that you will need to do this for any additional icons added. The `IonIcon` component should still be provided in the NgModule.
+
+```diff title="test.component.ts"
+import { Component } from '@angular/core';
++ import { addIcons } from 'ionicons';
++ import { alarm, logoIonic } from 'ionicons/icons';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.scss'],
+})
+export class TestComponent {
+ constructor() {
++ addIcons({ alarm, logoIonic });
+ }
+}
+```
+
+```diff title="test.module.ts"
+import { NgModule } from '@angular/core';
+import { TestComponent } from './test.component';
++ import { IonIcon } from '@ionic/angular/standalone';
+
+@NgModule({
+ imports: [
++ IonIcon,
+ ],
+ declarations: [TestComponent]
+})
+export class TestComponentModule {}
+```
+
+8. Remove the following code from your `angular.json` file if present. Note that it may appear multiple times.
+
+```diff title="angular.json"
+- {
+- "glob": "**/*.svg",
+- "input": "node_modules/ionicons/dist/ionicons/svg",
+- "output": "./svg"
+- }
+```
+
+9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for ` ` elements.
+
+```diff title="test.module.ts"
+import { NgModule } from '@angular/core';
+import { TestComponent } from './test.component';
+- import { IonButton } from '@ionic/angular/standalone';
++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone';
+
+@NgModule({
+ imports: [
+ IonButton,
++ IonRouterLink,
+ ],
+ declarations: [TestComponent]
+})
+```
+
+10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations.
+
+```json title=".vscode/settings.json"
+{
+ "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"]
+}
+```
diff --git a/versioned_docs/version-v8/angular/injection-tokens.md b/versioned_docs/version-v8/angular/injection-tokens.md
new file mode 100644
index 00000000000..c7c775fd69c
--- /dev/null
+++ b/versioned_docs/version-v8/angular/injection-tokens.md
@@ -0,0 +1,177 @@
+---
+title: Angular Injection Tokens
+sidebar_label: Injection Tokens
+---
+
+
+ Angular Injection Tokens | Access Ionic Elements via Dependency Injection
+
+
+ Modal Content
+
+
+
+ This is modal content
+ Close Modal
+
+ `,
+ imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
+})
+export class ModalComponent {
+ private modalToken = inject(IonModalToken);
+
+ closeModal() {
+ this.modalToken.dismiss();
+ }
+}
+```
+
+### Listening to Modal Events
+
+You can use the injected modal reference to listen to modal lifecycle events:
+
+```tsx
+import { Component, inject, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-modal',
+ template: `
+
+
+ Modal with Events
+
+
+
+ Check the console for modal events
+ Close
+
+ `,
+ imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
+})
+export class ModalComponent implements OnInit {
+ private modalToken = inject(IonModalToken);
+
+ ngOnInit() {
+ this.modalToken.addEventListener('ionModalWillDismiss', (event) => {
+ console.log('Modal will dismiss:', event.detail);
+ });
+
+ this.modalToken.addEventListener('ionModalDidDismiss', (event) => {
+ console.log('Modal did dismiss:', event.detail);
+ });
+ }
+
+ closeModal() {
+ this.modalToken.dismiss({ result: 'closed by button' });
+ }
+}
+```
+
+### Accessing Modal Properties
+
+The injected modal reference provides access to all modal properties and methods:
+
+```tsx
+import { Component, inject, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-modal',
+ template: `
+
+
+ Modal Properties
+
+
+
+ Modal ID: {{ modalId }}
+ Toggle Backdrop Dismiss: {{ backdropDismiss }}
+
+ `,
+ imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
+})
+export class ModalComponent implements OnInit {
+ private modalToken = inject(IonModalToken);
+
+ modalId = '';
+ backdropDismiss = true;
+
+ ngOnInit() {
+ this.modalId = this.modalToken.id || 'No ID';
+ this.backdropDismiss = this.modalToken.backdropDismiss;
+ }
+
+ toggleBackdropDismiss() {
+ this.backdropDismiss = !this.backdropDismiss;
+ this.modalToken.backdropDismiss = this.backdropDismiss;
+ }
+}
+```
+
+### Opening a Modal with Injection Token Content
+
+When opening a modal that uses the injection token, you can pass the component directly to the modal controller:
+
+```tsx
+import { Component, inject } from '@angular/core';
+import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone';
+import { ModalComponent } from './modal.component';
+
+@Component({
+ selector: 'app-home',
+ template: `
+
+ Open Modal
+
+ `,
+})
+export class HomePage {
+ private modalController = inject(ModalController);
+
+ async openModal() {
+ const myModal = await this.modalController.create({
+ component: ModalComponent,
+ componentProps: {
+ // Any props you want to pass to the modal content
+ },
+ });
+
+ await myModal.present();
+ }
+}
+```
diff --git a/versioned_docs/version-v8/angular/lifecycle.md b/versioned_docs/version-v8/angular/lifecycle.md
new file mode 100644
index 00000000000..e56f65dbbf0
--- /dev/null
+++ b/versioned_docs/version-v8/angular/lifecycle.md
@@ -0,0 +1,103 @@
+---
+title: Ionic Page Life Cycle
+sidebar_label: Lifecycle
+---
+
+
+ Angular Page Component Life Cycle - App Events Documentation
+ Angular Navigation: How Routing & Redirects Work in Angular Apps
+
+
+ Login
+
+
+
+
+ Go to detail
+
+```
+
+The important part here is the `ion-button` and `routerLink` directive. RouterLink works on a similar idea as typical `href`s, but instead of building out the URL as a string, it can be built as an array, which can provide more complicated paths.
+
+We also can programmatically navigate in our app by using the router API.
+
+```tsx
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+ ...
+})
+export class LoginComponent {
+
+ constructor(private router: Router){}
+
+ navigate(){
+ this.router.navigate(['/detail'])
+ }
+}
+```
+
+Both options provide the same navigation mechanism, just fitting different use cases.
+
+### 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 walk through an example.
+
+Say you have the following application history:
+
+`/pageA` --> `/pageB` --> `/pageC`
+
+If you were to call `LocationStrategy.historyGo(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `LocationStrategy.historyGo(2)`, you would be brought to `/pageC`.
+
+An key characteristic of `LocationStrategy.historyGo()` is that it expects your application history to be linear. This means that `LocationStrategy.historyGo()` should not be used in applications that make use of non-linear routing. Refer to [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information.
+
+## Lazy loading routes
+
+Now the current way our routes are setup makes it so they are included in the same chunk as the root app.module, which is not ideal. Instead, the router has a setup that allows the components to be isolated to their own chunks.
+
+```tsx
+
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+ imports: [
+ ...
+ RouterModule.forRoot([
+ { path: '', redirectTo: 'login', pathMatch: 'full' },
+ { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
+ { path: 'detail', loadChildren: () => import('./detail/detail.module').then(m => m.DetailModule) }
+ ])
+ ],
+})
+```
+
+While similar, the `loadChildren` property is a way to reference a module by using native import instead of a component directly. In order to do this though, we need to create a module for each of the components.
+
+```tsx
+...
+import { RouterModule } from '@angular/router';
+import { LoginComponent } from './login.component';
+
+@NgModule({
+ imports: [
+ ...
+ RouterModule.forChild([
+ { path: '', component: LoginComponent },
+ ])
+ ],
+})
+```
+
+:::note
+We're excluding some additional content and only including the necessary parts.
+:::
+
+Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component.
+
+## Standalone Components
+
+Standalone components allow developers to lazy load a component on a route without having to declare the component to an Angular module.
+
+Developers can use the existing syntax for standalone component routing from Angular:
+
+```ts
+@NgModule({
+ imports: [
+ RouterModule.forRoot([
+ {
+ path: 'standalone-route',
+ loadComponent: () => import('./path/to/my-component.component').then((c) => c.MyComponent),
+ },
+ ]),
+ ],
+})
+export class AppRoutingModule {}
+```
+
+:::tip
+If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for ` ` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone).
+:::
+
+To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components).
+
+## Live Example
+
+If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz.
+
+## Linear Routing versus Non-Linear Routing
+
+### Linear Routing
+
+If you have built a web app that uses routing, you likely have used linear routing before. Linear routing means that you can move forward or backward through the application history by pushing and popping pages.
+
+The following is an example of linear routing in a mobile app:
+
+
+
+
+ Tab One
+
+
+
+```
+
+If you've built apps with Ionic before, this should feel familiar. We create a `ion-tabs` component, and provide a `ion-tab-bar`. The `ion-tab-bar` provides a `ion-tab-button` with a `tab` property that is associated with the tab "outlet" in the router config. Note that the latest version of `@ionic/angular` no longer requires ``, but instead allows developers to fully customize the tab bar, and the single source of truth lives within the router configuration.
+
+### How Tabs in Ionic Work
+
+Each tab in Ionic is treated as an individual navigation stack. This means if you have three tabs in your application, each tab has its own navigation stack. Within each stack you can navigate forwards (push a view) and backwards (pop a view).
+
+This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack.
+
+Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations in other UI libraries. Read on to learn more about some of these differences.
+
+### Child Routes within Tabs
+
+When adding additional routes to tabs you should write them as sibling routes with the parent tab as the path prefix. The example below defines the `/tabs/tab1/view` route as a sibling of the `/tabs/tab1` route. Since this new route has the `tab1` prefix, it will be rendered inside of the `Tabs` component, and Tab 1 will still be selected in the `ion-tab-bar`.
+
+```ts
+const routes: Routes = [
+ {
+ path: 'tabs',
+ component: TabsPage,
+ children: [
+ {
+ path: 'tab1',
+ children: [
+ {
+ path: '',
+ loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule),
+ },
+ ],
+ },
+ {
+ path: 'tab1/view',
+ children: [
+ {
+ path: '',
+ loadChildren: () => import('../tab1/tab1view.module').then((m) => m.Tab1ViewPageModule),
+ },
+ ],
+ },
+ {
+ path: 'tab2',
+ children: [
+ {
+ path: '',
+ loadChildren: () => import('../tab2/tab2.module').then((m) => m.Tab2PageModule),
+ },
+ ],
+ },
+ {
+ path: 'tab3',
+ children: [
+ {
+ path: '',
+ loadChildren: () => import('../tab3/tab3.module').then((m) => m.Tab3PageModule),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ path: '',
+ redirectTo: '/tabs/tab1',
+ pathMatch: 'full',
+ },
+];
+```
+
+### Switching Between Tabs
+
+Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar.
+
+A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa.
+
+Let's go over a couple common mistakes that are made with tabs.
+
+**A Settings Tab That Multiple Tabs Reference**
+
+A common practice is to create a Settings view as its own tab. This is great if developers need to present several nested settings menus. However, other tabs should never try to route to the Settings tab. As we mentioned above, the only way that the Settings tab should be activated is by a user tapping the appropriate tab button.
+
+If you find that your tabs need to reference the Settings tab, we recommend making the Settings view a modal by using `ion-modal`. This is a practice found in the iOS App Store app. With this approach, any tab can present the modal without breaking the mobile tabs pattern of each tab being its own stack.
+
+The example below shows how the iOS App Store app handles presenting an "Account" view from multiple tabs. By presenting the "Account" view in a modal, the app can work within the mobile tabs best practices to show the same view across multiple tabs.
+
+Angular Overlay Components: Modals, Popovers with Custom Injectors
+ Ionic Angular Overview | Angular Version Support and Tooling
+
+
+
+ Quickly set up your first Ionic Angular app and learn the basics of the framework and CLI.
+
+
+
+ Learn more about Angular's core concepts, tools, and best practices from the official Angular documentation.
+
+
+
+ Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.
+
+
+
+ Explore Ionic's rich library of UI components for building beautiful apps.
+
+
+
+ Learn how to customize the look and feel of your app with Ionic's powerful theming system.
+
+
+
+ Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.
+
+
+
diff --git a/versioned_docs/version-v8/angular/performance.md b/versioned_docs/version-v8/angular/performance.md
new file mode 100644
index 00000000000..de83b3af578
--- /dev/null
+++ b/versioned_docs/version-v8/angular/performance.md
@@ -0,0 +1,73 @@
+---
+title: Angular Performance
+sidebar_label: Performance
+---
+
+
+ Angular Performance: Manage App Component Change with ngFor
+
+ {{ item.value }}
+
+```
+
+**home.component.ts**
+
+```tsx
+
+items = [
+ { id: 0, value: 'Item 0' },
+ { id: 1, value: 'Item 1' },
+ ...
+]
+
+trackItems(index: number, itemObject: any) {
+ return itemObject.id;
+}
+```
+
+In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element.
+
+For more information, refer to the [Angular NgForOf change propagation documentation](https://angular.io/api/common/NgForOf#change-propagation).
+
+## From the Ionic Team
+
+[How to Lazy Load in Ionic Angular](https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/)
+
+[Improved Perceived Performance with Skeleton Screens](https://ionicframework.com/blog/improved-perceived-performance-with-skeleton-screens/)
+
+## From the Angular Team
+
+[Build performant and progressive Angular apps](https://web.dev/angular) - web.dev
+
+## From the Community
+
+{/* cspell:disable */}
+
+[High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony
+
+[High Performance List Filtering in Ionic](https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/) - Josh Morony
+
+[Increasing Performance with Efficient DOM Writes in Ionic](https://www.joshmorony.com/increasing-performance-with-efficient-dom-writes-in-ionic-2/) - Josh Morony
+
+[Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony
+
+{/* cspell:enable */}
+
+:::note
+Do you have a guide you'd like to share? Click the _Edit this page_ button below.
+:::
diff --git a/versioned_docs/version-v8/angular/platform.md b/versioned_docs/version-v8/angular/platform.md
new file mode 100644
index 00000000000..3cd0d7833f3
--- /dev/null
+++ b/versioned_docs/version-v8/angular/platform.md
@@ -0,0 +1,246 @@
+---
+title: Platform
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+ Platform | Ionic Platform to Customize Apps to Fit Any Device
+
+
+
+```tsx
+import { Platform } from '@ionic/angular';
+
+@Component({...})
+export class MyPage {
+ constructor(public platform: Platform) {
+
+ }
+}
+```
+
+
+
+
+```tsx
+import { Platform } from '@ionic/angular/standalone';
+
+@Component({...})
+export class MyPage {
+ constructor(public platform: Platform) {
+
+ }
+}
+```
+
+
+
+
+## Methods
+
+### `is`
+
+| | |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Depending on the platform the user is on, `is(platformName)` will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: `mobile`, `ios`, `ipad`, and `tablet`. Additionally, if the app was running from Cordova then `cordova` would be true. |
+| **Signature** | `is(platformName: Platforms) => boolean` |
+
+#### Parameters
+
+| Name | Type | Description |
+| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `platformName` | `Platforms` | Name of the platform. Available options are android, capacitor, cordova, desktop, electron, hybrid, ios, ipad, iphone, mobile, phablet, pwa, tablet |
+
+#### Platforms
+
+Below is a table listing all the possible platform values along with corresponding descriptions.
+
+| Platform Name | Description |
+| ------------- | ---------------------------------------- |
+| android | a device running Android |
+| capacitor | a device running Capacitor |
+| cordova | a device running Cordova |
+| desktop | a desktop device |
+| electron | a desktop device running Electron |
+| hybrid | a device running Capacitor or Cordova |
+| ios | a device running iOS |
+| ipad | an iPad device |
+| iphone | an iPhone device |
+| mobile | a mobile device |
+| mobileweb | a web browser running in a mobile device |
+| phablet | a phablet device |
+| pwa | a PWA app |
+| tablet | a tablet device |
+
+#### Customizing Platform Detection Functions
+
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean.
+
+```tsx
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ ...
+ imports: [
+ BrowserModule,
+ IonicModule.forRoot({
+ platform: {
+ /** The default `desktop` function returns false for devices with a touchscreen.
+ * This is not always wanted, so this function tests the User Agent instead.
+ **/
+ 'desktop': (win) => {
+ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent);
+ return !isMobile;
+ }
+ },
+ }),
+ AppRoutingModule
+ ],
+ ...
+})
+```
+
+```ts
+type PlatformConfig = {
+ android?: ((win: Window) => boolean) | undefined;
+ capacitor?: ((win: Window) => boolean) | undefined;
+ cordova?: ((win: Window) => boolean) | undefined;
+ desktop?: ((win: Window) => boolean) | undefined;
+ electron?: ((win: Window) => boolean) | undefined;
+ hybrid?: ((win: Window) => boolean) | undefined;
+ ios?: ((win: Window) => boolean) | undefined;
+ ipad?: ((win: Window) => boolean) | undefined;
+ iphone?: ((win: Window) => boolean) | undefined;
+ mobile?: ((win: Window) => boolean) | undefined;
+ mobileweb?: ((win: Window) => boolean) | undefined;
+ phablet?: ((win: Window) => boolean) | undefined;
+ pwa?: ((win: Window) => boolean) | undefined;
+ tablet?: ((win: Window) => boolean) | undefined;
+};
+```
+
+### `platforms`
+
+| | |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Depending on what device you are on, `platforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return `mobile`, `ios`, and `iphone`. |
+| **Signature** | `platforms() => string[]` |
+
+### `ready`
+
+| | |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Returns a promise when the platform is ready and native functionality can be called. If the app is running from within a web browser, then the promise will resolve when the DOM is ready. When the app is running from an application engine such as Cordova, then the promise will resolve when Cordova triggers the `deviceready` event. The resolved value is the `readySource`, which states the platform that was used. ` |
+
+### `isRTL`
+
+| | |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Returns if this app is using right-to-left language direction or not. We recommend the app's `index.html` file already has the correct `dir` attribute value set, such as `` or ``. [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir) |
+| **Signature** | `isRTL() => boolean` |
+
+### `isLandscape`
+
+| | |
+| --------------- | ----------------------------------------------- |
+| **Description** | Returns `true` if the app is in landscape mode. |
+| **Signature** | `isLandscape() => boolean` |
+
+### `isPortrait`
+
+| | |
+| --------------- | ---------------------------------------------- |
+| **Description** | Returns `true` if the app is in portrait mode. |
+| **Signature** | `isPortrait() => boolean` |
+
+### `width`
+
+| | |
+| --------------- | -------------------------------------------------------------------- |
+| **Description** | Gets the width of the platform's viewport using `window.innerWidth`. |
+| **Signature** | `width() => number` |
+
+### `height`
+
+| | |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Gets the height of the platform's viewport using `window.innerHeight`. |
+| **Signature** | `height() => number` |
+
+### `url`
+
+| | |
+| --------------- | -------------------- |
+| **Description** | Get the current url. |
+| **Signature** | `url() => string` |
+
+### `testUserAgent`
+
+| | |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Returns `true` if the expression is included in the user agent string. |
+| **Signature** | `testUserAgent(expression: string) => boolean` |
+
+#### Parameters
+
+| Name | Type | Description |
+| ---------- | ------ | ------------------------------------- |
+| expression | string | The string to check in the user agent |
+
+## Events
+
+### `pause`
+
+The `pause` event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event emits when a Cordova/Capacitor app is put into the background but doesn't fire in a standard web browser.
+
+#### Examples
+
+```tsx
+this.platform.pause.subscribe(async () => {
+ alert('Pause event detected');
+});
+```
+
+### `resize`
+
+The `resize` event emits when the browser window has changed dimensions. This could be from a browser window being physically resized, or from a device changing orientation.
+
+#### Examples
+
+```tsx
+this.platform.resize.subscribe(async () => {
+ alert('Resize event detected');
+});
+```
+
+### `resume`
+
+The `resume` event fires when the native platform pulls the application out from the background. This event emits when a Cordova/Capacitor app comes out from the background but doesn't fire in a standard web browser.
+
+#### Examples
+
+```tsx
+this.platform.resume.subscribe(async () => {
+ alert('Resume event detected');
+});
+```
diff --git a/versioned_docs/version-v8/angular/pwa.md b/versioned_docs/version-v8/angular/pwa.md
new file mode 100644
index 00000000000..47666c70309
--- /dev/null
+++ b/versioned_docs/version-v8/angular/pwa.md
@@ -0,0 +1,166 @@
+---
+title: Progressive Web Apps in Angular
+sidebar_label: Progressive Web Apps
+---
+
+
+ Make Progressive Web Apps (PWA) in Angular - Ionic Tutorial
+ Service Worker and a Web Manifest . While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this.
+
+The `@angular/pwa` package will automatically add a service worker and an app manifest to the app.
+To add this package to the app, run:
+
+```shell
+ng add @angular/pwa
+```
+
+Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA.
+
+:::note
+By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.
+:::
+
+:::note
+Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.
+:::
+
+## Service Worker configuration
+
+After `@angular/pwa` has been added, a new `ngsw-config.json` file will be created at the root of the project. This file is responsible for configuring how Angular's service worker mechanism will handle caching assets. By default, the following will be provided:
+
+```json
+{
+ "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+ "index": "/index.html",
+ "assetGroups": [
+ {
+ "name": "app",
+ "installMode": "prefetch",
+ "resources": {
+ "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
+ }
+ },
+ {
+ "name": "assets",
+ "installMode": "lazy",
+ "updateMode": "prefetch",
+ "resources": {
+ "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
+ }
+ }
+ ]
+}
+```
+
+There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team](https://angular.io/guide/service-worker-config).
+
+## Deploying
+
+### Firebase
+
+Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html).
+
+First, if not already available, [create the project](https://console.firebase.google.com) in Firebase.
+
+Next, in a Terminal, install the Firebase CLI:
+
+```shell
+npm install -g firebase-tools
+```
+
+:::note
+If it's the first time you use firebase-tools, login to your Google account with `firebase login` command.
+:::
+
+With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts:
+
+**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure 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 this next question will ensure that routing, hard reload, and deep linking work in the app:
+:::
+
+**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes".
+
+**"File build/index.html already exists. Overwrite?"** Enter "No".
+
+**Set up automatic builds and deploys with Github?** Enter "Yes".
+
+**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name.
+
+**Set up the workflow to run a build script before every deploy?** Enter "Yes".
+
+**What script should be run before every deploy?** Enter `npm ci && npm run build`.
+
+**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes".
+
+**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name.
+
+A `firebase.json` config file is generated, configuring the app for deployment.
+
+The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like:
+
+```json
+{
+ "hosting": {
+ "public": "www",
+ "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+ "rewrites": [
+ {
+ "source": "**",
+ "destination": "/index.html"
+ }
+ ],
+ "headers": [
+ {
+ "source": "/build/app/**",
+ "headers": [
+ {
+ "key": "Cache-Control",
+ "value": "public, max-age=31536000"
+ }
+ ]
+ },
+ {
+ "source": "ngsw-worker.js",
+ "headers": [
+ {
+ "key": "Cache-Control",
+ "value": "no-cache"
+ }
+ ]
+ }
+ ]
+ }
+}
+```
+
+For more information about the `firebase.json` properties, refer to the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json).
+
+Next, build an optimized version of the app by running:
+
+```shell
+ionic build --prod
+```
+
+Last, deploy the app by running:
+
+```shell
+firebase deploy
+```
+
+After this completes, the app will be live.
diff --git a/versioned_docs/version-v8/angular/quickstart.md b/versioned_docs/version-v8/angular/quickstart.md
new file mode 100644
index 00000000000..f937ed99ee6
--- /dev/null
+++ b/versioned_docs/version-v8/angular/quickstart.md
@@ -0,0 +1,441 @@
+---
+title: Ionic Angular Quickstart
+sidebar_label: Quickstart
+---
+
+
+ Ionic Angular Quickstart Using Ionic CLI: Angular Basics
+
+
+```
+
+This sets up the root of your application, using Ionic's `ion-app` and `ion-router-outlet` components. The router outlet is where your pages will be displayed.
+
+## View Routes
+
+Routes are defined in `app.routes.ts`:
+
+```ts title="src/app/app.routes.ts"
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+ {
+ path: 'home',
+ loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
+ },
+ {
+ path: '',
+ redirectTo: 'home',
+ pathMatch: 'full',
+ },
+];
+```
+
+When you visit the root URL (`/`), the `HomePage` component will be loaded.
+
+## View the Home Page
+
+The Home page component, defined in `home.page.ts`, imports the Ionic components it uses:
+
+```ts title="src/app/home/home.page.ts"
+import { Component } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss'],
+ imports: [IonHeader, IonToolbar, IonTitle, IonContent],
+})
+export class HomePage {
+ constructor() {}
+}
+```
+
+And the template, in the `home.page.html` file, uses those components:
+
+```html title="src/app/home/home.page.html"
+
+
+ Blank
+
+
+
+
+
+
+ Blank
+
+
+
+
+
Ready to create an app?
+
+ Start with Ionic
+ UI Components
+
+
+```
+
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+
+:::tip[Learn More]
+For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+:::
+
+## Add an Ionic Component
+
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`:
+
+```html title="src/app/home/home.page.html"
+
+
+
+ Navigate
+
+```
+
+Then, import the `IonButton` component in `home.page.ts`:
+
+```ts title="src/app/home/home.page.ts"
+import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+ // ...existing config...
+ imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+```
+
+## Add a New Page
+
+To add a new page, generate it with the CLI:
+
+```shell
+ionic generate page new
+```
+
+A route will be automatically added to `app.routes.ts`.
+
+In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md):
+
+```html title="src/app/new/new.page.html"
+
+
+
+
+ new
+
+
+```
+
+And import `IonBackButton` and `IonButtons` in `new.page.ts`:
+
+```ts title="src/app/new/new.page.ts"
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+ // ...existing config...
+ imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+```
+
+The `ion-back-button` will automatically handle navigation back to the previous page, or to `/` if there is no history.
+
+## Navigate to the New Page
+
+To navigate to the new page, update the button in `home.page.html`:
+
+```html title="src/app/home/home.page.html"
+Navigate
+```
+
+Then, import `RouterLink` in `home.page.ts`:
+
+```ts title="src/app/home/home.page.ts"
+import { RouterLink } from '@angular/router';
+
+@Component({
+ // ...existing config...
+ imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar, RouterLink],
+})
+```
+
+:::info
+Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
+:::
+
+## Add Icons to the New Page
+
+Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new.page.html`:
+
+```html title="src/app/new/new.page.html"
+
+
+
+
+```
+
+You'll also need to import and register these icons in `new.page.ts`:
+
+```ts title="src/app/new/new.page.ts"
+// ...existing imports...
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { heart, logoIonic } from 'ionicons/icons';
+
+@Component({
+ // ...existing config...
+ imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar],
+})
+```
+
+Then, update the constructor of the page to use `addIcons`:
+
+```ts title="src/app/new/new.page.ts"
+export class NewPage implements OnInit {
+ constructor() {
+ addIcons({ heart, logoIonic });
+ }
+
+ ngOnInit() {}
+}
+```
+
+Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
+
+For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+
+## Call Component Methods
+
+Let's add a button that can scroll the content area to the bottom.
+
+Update the `ion-content` in your `new.page.html` to include a button and some items after the existing icons:
+
+```html title="src/app/new/new.page.html"
+
+
+
+ new
+
+
+
+ Scroll to Bottom
+
+
+ @for (item of items; track $index; let i = $index) {
+
+ Item {{ i + 1 }}
+
+ }
+
+```
+
+In the component, add the `ViewChild` import, the new component imports and define the `scrollToBottom` function:
+
+```ts title="src/app/new/new.page.ts"
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { heart, logoIonic } from 'ionicons/icons';
+
+@Component({
+ // ...existing config...
+ imports: [
+ IonBackButton,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonTitle,
+ IonToolbar,
+ ],
+})
+export class NewPage implements OnInit {
+ @ViewChild(IonContent) content!: IonContent;
+
+ items = Array.from({ length: 50 }, (_, i) => i);
+
+ constructor() {
+ addIcons({ heart, logoIonic });
+ }
+
+ ngOnInit() {}
+
+ scrollToBottom = () => {
+ this.content.scrollToBottom(300);
+ };
+}
+```
+
+To call methods on Ionic components:
+
+1. Create a `ViewChild` reference for the component
+2. Call the method directly on the component instance
+
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+
+## Run on a Device
+
+Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, use [Capacitor](https://capacitorjs.com):
+
+```shell
+ionic build
+ionic cap add ios
+ionic cap add android
+```
+
+Open the native projects in their IDEs:
+
+```shell
+ionic cap open ios
+ionic cap open android
+```
+
+Refer to [Capacitor's Getting Started guide](https://capacitorjs.com/docs/getting-started/with-ionic) for more.
+
+## Explore More
+
+This guide covered the basics of creating an Ionic Angular app, adding navigation, and introducing Capacitor for native builds. To dive deeper, check out:
+
+
+
+
+ Build a real Photo Gallery app with Ionic Angular and native device features.
+
+
+
+ Learn more about Angular's core concepts, tools, and best practices from the official Angular documentation.
+
+
+
+ Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.
+
+
+
+ Explore Ionic's rich library of UI components for building beautiful apps.
+
+
+
+ Learn how to customize the look and feel of your app with Ionic's powerful theming system.
+
+
+
+ Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.
+
+
+
diff --git a/versioned_docs/version-v8/angular/slides.md b/versioned_docs/version-v8/angular/slides.md
new file mode 100644
index 00000000000..5ce50aa09d9
--- /dev/null
+++ b/versioned_docs/version-v8/angular/slides.md
@@ -0,0 +1,366 @@
+---
+title: Migrating from ion-slides to Swiper.js
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+ Set Up Swiper.js for Angular Slides [Example] | Ionic
+ Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element.
+
+## Getting Started
+
+First, update to the latest version of Ionic:
+
+```shell
+npm install @ionic/angular@latest
+```
+
+Once that is done, install the Swiper dependency in your project:
+
+```shell
+npm install swiper@latest
+```
+
+Next, we need to add the `CUSTOM_ELEMENTS_SCHEMA`, which tells Angular that we will be using custom elements. This can be done in either `app.module.ts`, or the module file for the component where you will be using Swiper.
+
+```typescript
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@NgModule({
+ schemas: [..., CUSTOM_ELEMENTS_SCHEMA]
+});
+...
+```
+
+Finally, we need to call Swiper's `register` function to globally register Swiper's custom elements. This should only be done once, so place it in `app.component.ts`.
+
+```typescript
+import { register } from 'swiper/element/bundle';
+
+register();
+
+@Component({
+ ...
+})
+...
+```
+
+From there, we just have to replace `ion-slides` elements with `swiper-container` and `ion-slide` elements with `swiper-slide`. Note that these custom elements do not need to be imported, as calling `register` tells Angular about them on its own.
+
+```html
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+```
+
+## Bundled vs. Core Versions
+
+By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features.
+
+If you would like to use the Core version instead, which does not include additional modules automatically, refer to Swiper's core version and modules documentation . The rest of this migration guide will assume you are using the bundled version.
+
+## Swiping with Style
+
+To migrate over your CSS, first update your selectors to target the new custom elements instead:
+
+| ion-slides Selector | Swiper Selector |
+| ------------------- | ------------------ |
+| `ion-slides` | `swiper-container` |
+| `ion-slide` | `swiper-slide` |
+
+If you were using the CSS custom properties found on `ion-slides`, below is a list of corresponding properties used in Swiper.
+
+| `ion-slides` CSS property | `swiper-container` CSS property |
+| ---------------------------------- | ------------------------------------------- |
+| `--bullet-background` | `--swiper-pagination-bullet-inactive-color` |
+| `--bullet-background-active` | `--swiper-pagination-color` |
+| `--progress-bar-background` | `--swiper-pagination-progressbar-bg-color` |
+| `--progress-bar-background-active` | `--swiper-pagination-color` |
+| `--scroll-bar-background` | `--swiper-scrollbar-bg-color` |
+| `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` |
+
+For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. Refer to Swiper's guide on injecting styles for instructions.
+
+### Additional `ion-slides` Styles
+
+The `ion-slides` component had additional styling that helped create a native look and feel. These styles are **not** required to use Swiper.js with Ionic, but if you would like to maintain the look of `ion-slides` as closely as possible, add the following CSS to your `global.scss`:
+
+```css
+swiper-container {
+ --swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc);
+ --swiper-pagination-color: var(--ion-color-primary, #0054e9);
+ --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
+ --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+ --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
+}
+
+swiper-slide {
+ display: flex;
+ position: relative;
+
+ flex-direction: column;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+ height: 100%;
+
+ font-size: 18px;
+
+ text-align: center;
+ box-sizing: border-box;
+}
+
+swiper-slide img {
+ width: auto;
+ max-width: 100%;
+ height: auto;
+ max-height: 100%;
+}
+```
+
+## The IonicSlides Module
+
+With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
+
+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 and passing it to the `modules` property of `swiper-container` as an array:
+
+
+
+
+```typescript
+// home.page.ts
+
+import { IonicSlides } from '@ionic/angular';
+
+@Component({
+ ...
+})
+export class HomePage {
+ swiperModules = [IonicSlides];
+}
+```
+
+
+
+
+```typescript
+// home.page.ts
+
+import { IonicSlides } from '@ionic/angular/standalone';
+
+@Component({
+ ...
+})
+export class HomePage {
+ swiperModules = [IonicSlides];
+}
+```
+
+
+
+
+```html
+
+
+ ...
+```
+
+:::note
+If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more.
+:::
+
+## Properties
+
+Swiper options should be provided as individual properties directly on the `` component.
+
+Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set:
+
+```html
+
+ Slide 1
+ Slide 3
+ Slide 3
+
+```
+
+To set these options as properties directly on `` we would do the following:
+
+```html
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+```
+
+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 `` 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 in the Swiper API parameters documentation .
+:::
+
+## Events
+
+Since the `swiper-container` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them. Additionally, all event names should be lowercase instead of camelCase.
+
+Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
+
+```html
+
+ Slide 1
+ Slide 3
+ Slide 3
+
+```
+
+To migrate, we would change the name of the event to `swiperslidechange`:
+
+```html
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+```
+
+Below is a full list of event name changes when going from `ion-slides` to Swiper Angular:
+
+| ion-slides Event | Swiper Event |
+| ------------------------- | ---------------------------------- |
+| `ionSlideWillChange` | `swiperslidechangetransitionstart` |
+| `ionSlideDidChange` | `swiperslidechange` |
+| `ionSlideDoubleTap` | `swiperdoubletap` |
+| `ionSlideDrag` | `swiperslidermove` |
+| `ionSlideNextStart` | `swiperslidenexttransitionstart` |
+| `ionSlideNextEnd` | `swiperslidenexttransitionend` |
+| `ionSlidePrevStart` | `swiperslideprevtransitionstart` |
+| `ionSlidePrevEnd` | `swiperslideprevtransitionend` |
+| `ionSlideReachStart` | `swiperreachbeginning` |
+| `ionSlideReachEnd` | `swiperreachend` |
+| `ionSlideTap` | `swipertap` |
+| `ionSlideTouchStart` | `swipertouchstart` |
+| `ionSlideTouchEnd` | `swipertouchend` |
+| `ionSlideTransitionStart` | `swipertransitionstart` |
+| `ionSlideTransitionEnd` | `swipertransitionend` |
+| `ionSlidesDidLoad` | `swiperinit` |
+
+:::note
+All events available in Swiper Element can be found in the Swiper API events documentation and should be lowercased and prefixed with the word `swiper`.
+:::
+
+## Methods
+
+Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `` element (such as through `ViewChild`), then access its `swiper` prop:
+
+```html
+
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+```
+
+```typescript
+// slides.component.ts
+
+import { ..., ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+ ...
+})
+export class SlidesExample {
+ @ViewChild('swiper')
+ swiperRef: ElementRef | undefined;
+
+ logActiveIndex() {
+ console.log(this.swiperRef?.nativeElement.swiper.activeIndex);
+ }
+}
+```
+
+Below is a full list of method changes when going from `ion-slides` to Swiper Element:
+
+| ion-slides Method | Notes |
+| -------------------- | ------------------------------------------------------------------------------------ |
+| `getActiveIndex()` | Use the `activeIndex` property instead. |
+| `getPreviousIndex()` | Use the `previousIndex` property instead. |
+| `getSwiper()` | Get a reference to the Swiper instance using the `swiper` prop. See example above. |
+| `isBeginning()` | Use the `isBeginning` property instead. |
+| `isEnd()` | Use the `isEnd` property instead. |
+| `length()` | Use the `slides` property instead. (i.e swiper.slides.length) |
+| `lockSwipeToNext()` | Use the `allowSlidesNext` property instead. |
+| `lockSwipeToPrev()` | Use the `allowSlidePrev` property instead. |
+| `lockSwipes()` | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. |
+| `startAutoplay()` | Use the `autoplay` property instead. |
+| `stopAutoplay()` | Use the `autoplay` property instead. |
+
+:::note
+All methods and properties available on the Swiper instance can be found in the Swiper API methods and properties documentation .
+:::
+
+## Effects
+
+Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
+
+```html
+ ...
+```
+
+:::note
+For more information on effects in Swiper, please refer to the Swiper API fade effect documentation .
+:::
+
+## Wrap Up
+
+Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Element documentation and then referencing the Swiper API docs .
+
+## FAQ
+
+### Where can I find an example of this migration?
+
+You can find a sample app with `ion-slides` and the equivalent Swiper usage at https://github.com/ionic-team/slides-migration-samples.
+
+### Where can I get help with this migration?
+
+If you are running into issues with the migration, please create a post on the [Ionic Forum](https://forum.ionicframework.com/).
+
+### Where do I file bug reports?
+
+Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to check if your issue can be resolved by the community.
+
+If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker .
+
+If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker .
diff --git a/versioned_docs/version-v8/angular/storage.md b/versioned_docs/version-v8/angular/storage.md
new file mode 100644
index 00000000000..b7774589e80
--- /dev/null
+++ b/versioned_docs/version-v8/angular/storage.md
@@ -0,0 +1,50 @@
+---
+title: Data Storage
+sidebar_label: Storage
+---
+
+
+ Angular App Data Storage Options - Ionic Documentation
+ Angular Unit and End-to-End Testing for Ionic App Components
+ Angular Testing Guide for detailed information on testing Angular applications.
+
+## Testing Principles
+
+When testing an application, it is best to keep in mind that testing can show if defects are present in a system. However, it is impossible to prove that any non-trivial system is completely free of defects. For this reason, the goal of testing is not to verify that the code is correct but to find problems within the code. This is a subtle but important distinction.
+
+If we set out to prove that the code is correct, we are more likely to stick to the happy path through the code. If we set out to find problems, we are more likely to more fully exercise the code and find the bugs that are lurking there.
+
+It is also best to begin testing an application from the very start. This allows defects to be found early in the process when they are easier to fix. This also allows code to be refactored with confidence as new features are added to the system.
+
+## Unit Testing
+
+Unit tests exercise a single unit of code (component, page, service, pipe, etc) in isolation from the rest of the system. Isolation is achieved through the injection of mock objects in place of the code's dependencies. The mock objects allow the test to have fine-grained control of the outputs of the dependencies. The mocks also allow the test to determine which dependencies have been called and what has been passed to them.
+
+Well-written unit tests are structured such that the unit of code and the features it contains are described via `describe()` callbacks. The requirements for the unit of code and its features are tested via `it()` callbacks. When the descriptions for the `describe()` and `it()` callbacks are read, they make sense as a phrase. When the descriptions for nested `describe()`s and a final `it()` are concatenated together, they form a sentence that fully describes the test case.
+
+Since unit tests exercise the code in isolation, they are fast, robust, and allow for a high degree of code coverage.
+
+### Using Mocks
+
+Unit tests exercise a code module in isolation. To facilitate this, we recommend using Jasmine (https://jasmine.github.io/). Jasmine creates mock objects (which Jasmine calls "spies") to take the place of dependencies while testing. When a mock object is used, the test can control the values returned by calls to that dependency, making the current test independent of changes made to the dependency. This also makes the test setup easier, allowing the test to only be concerned with the code within the module under test.
+
+Using mocks also allows the test to query the mock to determine if it was called and how it was called via the `toHaveBeenCalled*` set of functions. Tests should be as specific as possible with these functions, favoring calls to `toHaveBeenCalledTimes` over calls to `toHaveBeenCalled` when testing that a method has been called. That is `expect(mock.foo).toHaveBeenCalledTimes(1)` is better than `expect(mock.foo).toHaveBeenCalled()`. The opposite advice should be followed when testing that something has not been called (`expect(mock.foo).not.toHaveBeenCalled()`).
+
+There are two common ways to create mock objects in Jasmine. Mock objects can be constructed from scratch using `jasmine.createSpy` and `jasmine.createSpyObj` or spies can be installed onto existing objects using `spyOn()` and `spyOnProperty()`.
+
+#### Using `jasmine.createSpy` and `jasmine.createSpyObj`
+
+`jasmine.createSpyObj` creates a full mock object from scratch with a set of mock methods defined on creation. This is useful in that it is very simple. Nothing needs to be constructed or injected into the test. The disadvantage of using this function is that it allows the creation of objects that may not match the real objects.
+
+`jasmine.createSpy` is similar but it creates a stand-alone mock function.
+
+#### Using `spyOn()` and `spyOnProperty()`
+
+`spyOn()` installs the spy on an existing object. The advantage of using this technique is that if an attempt is made to spy on a method that does not exist on the object, an exception is raised. This prevents the test from mocking methods that do not exist. The disadvantage is that the test needs a fully formed object to begin with, which may increase the amount of test setup required.
+
+`spyOnProperty()` is similar with the difference being that it spies on a property and not a method.
+
+### General Testing Structure
+
+Unit tests are contained in `spec` files with one `spec` file per entity (component, page, service, pipe, etc.). The `spec` files live side-by-side with and are named after the source that they are testing. For example, if the project has a service called WeatherService, the code for it is in a file named `weather.service.ts` with the tests in a file named `weather.service.spec.ts`. Both of those files are in the same folder.
+
+The `spec` files themselves contain a single `describe` call that defines that overall test. Nested within it are other `describe` calls that define major areas of functionality. Each `describe` call can contain setup and teardown code (generally handled via `beforeEach` and `afterEach` calls), more `describe` calls forming a hierarchical breakdown of functionality, and `it` calls which define individual test cases.
+
+The `describe` and `it` calls also contain a descriptive text label. In well-formed tests, the `describe` and `it` calls combine with their labels to perform proper phrases and the full label for each test case, formed by combining the `describe` and `it` labels, creates a full sentence.
+
+For example:
+
+```tsx
+describe('Calculation', () => {
+ describe('divide', () => {
+ it('calculates 4 / 2 properly' () => {});
+ it('cowardly refuses to divide by zero' () => {});
+ ...
+ });
+
+ describe('multiply', () => {
+ ...
+ });
+});
+```
+
+The outer `describe` call states that the `Calculation` service is being tested, the inner `describe` calls state exactly what functionality is being tested, and the `it` calls state what the test cases are. When run the full label for each test case is a sentence that makes sense (Calculation divide cowardly refuses to divide by zero).
+
+### Pages and Components
+
+Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines.
+
+Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this:
+
+```tsx
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabsPage } from './tabs.page';
+
+describe('TabsPage', () => {
+ let component: TabsPage;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [TabsPage],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TabsPage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
+```
+
+When doing component class testing, the component object is accessed using the component object defined via `component = fixture.componentInstance;`. This is an instance of the component class. When doing DOM testing, the `fixture.nativeElement` property is used. This is the actual `HTMLElement` for the component, which allows the test to use standard HTML API methods such as `HTMLElement.querySelector` in order to examine the DOM.
+
+### Waiting for Components
+
+When testing Ionic components, use the `componentOnReady` helper exported from `@ionic/core` rather than calling `el.componentOnReady()` directly. The `el.componentOnReady()` method only exists on lazy-loaded elements and calling it directly throws an error on custom-element builds, which is what standalone projects use. The helper handles both. It awaits the element's own `componentOnReady()` promise when that exists. Otherwise it waits one animation frame, giving the component's inner contents a chance to render. Wait for the callback before asserting against the rendered DOM or running accessibility tests.
+
+```tsx
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { componentOnReady } from '@ionic/core';
+import { HomePage } from './home.page';
+
+describe('HomePage', () => {
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [HomePage],
+ }).compileComponents();
+ fixture = TestBed.createComponent(HomePage);
+ fixture.detectChanges();
+ });
+
+ it('renders the submit button', async () => {
+ const button = fixture.nativeElement.querySelector('ion-button');
+ await new Promise((resolve) => componentOnReady(button, () => resolve()));
+ expect(button.textContent).toContain('Submit');
+ });
+});
+```
+
+## Services
+
+Services often fall into one of two broad categories: utility services that perform calculations and other operations, and data services that perform primarily HTTP operations and data manipulation.
+
+### Basic Service Testing
+
+The suggested way to test most services is to instantiate the service and manually inject mocks for any dependency the service has. This way, the code can be tested in isolation.
+
+Let's say that there is a service with a method that takes an array of timecards and calculates net pay. Let's also assume that the tax calculations are handled via another service that the current service depends on. This payroll service could be tested as such:
+
+```tsx
+import { PayrollService } from './payroll.service';
+
+describe('PayrollService', () => {
+ let service: PayrollService;
+ let taxServiceSpy;
+
+ beforeEach(() => {
+ taxServiceSpy = jasmine.createSpyObj('TaxService', {
+ federalIncomeTax: 0,
+ stateIncomeTax: 0,
+ socialSecurity: 0,
+ medicare: 0
+ });
+ service = new PayrollService(taxServiceSpy);
+ });
+
+ describe('net pay calculations', () => {
+ ...
+ });
+});
+```
+
+This allows the test to control the values returned by the various tax calculations via mock setup such as `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)`. This allows the "net pay" tests to be independent of the tax calculation logic. When the tax codes change, only the tax service related code and tests need to change. The tests for the net pay can continue to operate as they are since these tests do not care how the tax is calculated, just that the value is applied properly.
+
+The scaffolding that is used when a service is generated via `ionic g service name` uses Angular's testing utilities and sets up a testing module. Doing so is not strictly necessary. That code may be left in, however, allowing the service to be built manually or injected as such:
+
+```tsx
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PayrollService } from './payroll.service';
+import { TaxService } from './tax.service';
+
+describe('PayrolService', () => {
+ let taxServiceSpy;
+
+ beforeEach(() => {
+ taxServiceSpy = jasmine.createSpyObj('TaxService', {
+ federalIncomeTax: 0,
+ stateIncomeTax: 0,
+ socialSecurity: 0,
+ medicare: 0,
+ });
+ TestBed.configureTestingModule({
+ providers: [PayrollService, { provide: TaxService, useValue: taxServiceSpy }],
+ });
+ });
+
+ it('does some test where it is injected', inject([PayrollService], (service: PayrollService) => {
+ expect(service).toBeTruthy();
+ }));
+
+ it('does some test where it is manually built', () => {
+ const service = new PayrollService(taxServiceSpy);
+ expect(service).toBeTruthy();
+ });
+});
+```
+
+#### Testing HTTP Data Services
+
+Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please refer to Angular's Angular's Testing HTTP requests guide.
+
+This basic setup for such a test looks like this:
+
+```tsx
+import { HttpBackend, HttpClient } from '@angular/common/http';
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBed, inject } from '@angular/core/testing';
+
+import { IssTrackingDataService } from './iss-tracking-data.service';
+
+describe('IssTrackingDataService', () => {
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+ let issTrackingDataService: IssTrackingDataService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule],
+ providers: [IssTrackingDataService],
+ });
+
+ httpClient = TestBed.get(HttpClient);
+ httpTestingController = TestBed.get(HttpTestingController);
+ issTrackingDataService = new IssTrackingDataService(httpClient);
+ });
+
+ it('exists', inject([IssTrackingDataService], (service: IssTrackingDataService) => {
+ expect(service).toBeTruthy();
+ }));
+
+ describe('location', () => {
+ it('gets the location of the ISS now', () => {
+ issTrackingDataService.location().subscribe((x) => {
+ expect(x).toEqual({ longitude: -138.1719, latitude: 44.4423 });
+ });
+ const req = httpTestingController.expectOne('http://api.open-notify.org/iss-now.json');
+ expect(req.request.method).toEqual('GET');
+ req.flush({
+ iss_position: { longitude: '-138.1719', latitude: '44.4423' },
+ timestamp: 1525950644,
+ message: 'success',
+ });
+ httpTestingController.verify();
+ });
+ });
+});
+```
+
+### Pipes
+
+A pipe is like a service with a specifically defined interface. It is a class that contains one public method, `transform`, which manipulates the input value (and other optional arguments) in order to create the output that is rendered on the page. To test a pipe: instantiate the pipe, call the transform method, and verify the results.
+
+As a simple example, let's consider a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this:
+
+```tsx
+import { NamePipe } from './name.pipe';
+
+import { Person } from '../../models/person';
+
+describe('NamePipe', () => {
+ let pipe: NamePipe;
+ let testPerson: Person;
+
+ beforeEach(() => {
+ pipe = new NamePipe();
+ testPerson = {
+ id: 42,
+ firstName: 'Douglas',
+ lastName: 'Adams',
+ middleInitial: 'N',
+ };
+ });
+
+ it('exists', () => {
+ expect(pipe).toBeTruthy();
+ });
+
+ it('formats a full name properly', () => {
+ expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas N.');
+ });
+
+ it('handles having no middle initial', () => {
+ delete testPerson.middleInitial;
+ expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas');
+ });
+
+ it('handles having no first name', () => {
+ delete testPerson.firstName;
+ expect(pipe.transform(testPerson)).toBeEqual('Adams N.');
+ });
+
+ it('handles having no last name', () => {
+ delete testPerson.lastName;
+ expect(pipe.transform(testPerson)).toBeEqual('Douglas N.');
+ });
+});
+```
+
+It is also beneficial to exercise the pipe via DOM testing in the components and pages that utilize the pipe.
+
+## End-to-end Testing
+
+End-to-end testing is used to verify that an application works as a whole and often includes a connection to live data. Whereas unit tests focus on code units in isolation and thus allow for low-level testing of the application logic, end-to-end tests focus on various user stories or usage scenarios, providing high-level testing of the overall flow of data through the application. Whereas unit tests try to uncover problems with an application's logic, end-to-end tests try to uncover problems that occur when those individual units are used together. End-to-end tests uncover problems with the overall architecture of the application.
+
+Since end-to-end tests exercise user stories and cover the application as a whole rather than individual code modules, end-to-end tests exist in their own application in the project apart from the code for the main application itself. Most end-to-end tests operate by automating common user interactions with the application and examining the DOM to determine the results of those interactions.
+
+### Test Structure
+
+When an `@ionic/angular` application is generated, a default end-to-end test application is generated in the `e2e` folder. This application uses Protractor to control the browser and Jasmine to structure and execute the tests. The application initially consists of four files:
+
+- `protractor.conf.js` - the Protractor configuration file
+- `tsconfig.e2e.json` - specific TypeScript configuration for the testing application
+- `src/app.po.ts` - a page object containing methods that navigate the application, query elements in the DOM, and manipulate elements on the page
+- `src/app.e2e-spec.ts` - a testing script
+
+#### Page Objects
+
+End-to-end tests operate by automating common user interactions with the application, waiting for the application to respond, and examining the DOM to determine the results of the interaction. This involves a lot of DOM manipulation and examination. If this were all done manually, the tests would be very brittle and difficult to read and maintain.
+
+Page objects encapsulate the HTML for a single page in a TypeScript class, providing an API that the test scripts use to interact with the application. The encapsulation of the DOM manipulation logic in page objects makes the tests more readable and far easier to reason about, lowering the maintenance costs of the test. Creating well-crafted page objects is the key to creating high quality and maintainable end-to-end tests.
+
+##### Base Page Object
+
+A lot of tests rely on actions such as waiting for a page to be visible, entering text into an input, and clicking a button. The methods used to do this remain consistent with only the CSS selectors used to get the appropriate DOM element changing. Therefore it makes sense to abstract this logic into a base class that can be used by the other page objects.
+
+Here is an example that implements a few basic methods that all page objects will need to support.
+
+```tsx
+import { browser, by, element, ExpectedConditions } from 'protractor';
+
+export class PageObjectBase {
+ private path: string;
+ protected tag: string;
+
+ constructor(tag: string, path: string) {
+ this.tag = tag;
+ this.path = path;
+ }
+
+ load() {
+ return browser.get(this.path);
+ }
+
+ rootElement() {
+ return element(by.css(this.tag));
+ }
+
+ waitUntilInvisible() {
+ browser.wait(ExpectedConditions.invisibilityOf(this.rootElement()), 3000);
+ }
+
+ waitUntilPresent() {
+ browser.wait(ExpectedConditions.presenceOf(this.rootElement()), 3000);
+ }
+
+ waitUntilNotPresent() {
+ browser.wait(ExpectedConditions.not(ExpectedConditions.presenceOf(this.rootElement())), 3000);
+ }
+
+ waitUntilVisible() {
+ browser.wait(ExpectedConditions.visibilityOf(this.rootElement()), 3000);
+ }
+
+ getTitle() {
+ return element(by.css(`${this.tag} ion-title`)).getText();
+ }
+
+ protected enterInputText(sel: string, text: string) {
+ const el = element(by.css(`${this.tag} ${sel}`));
+ const inp = el.element(by.css('input'));
+ inp.sendKeys(text);
+ }
+
+ protected enterTextareaText(sel: string, text: string) {
+ const el = element(by.css(`${this.tag} ${sel}`));
+ const inp = el.element(by.css('textarea'));
+ inp.sendKeys(text);
+ }
+
+ protected clickButton(sel: string) {
+ const el = element(by.css(`${this.tag} ${sel}`));
+ browser.wait(ExpectedConditions.elementToBeClickable(el));
+ el.click();
+ }
+}
+```
+
+##### Per-Page Abstractions
+
+Each page in the application will have its own page object class that abstracts the elements on that page. If a base page object class is used, creating the page object involves mostly creating custom methods for elements that are specific to that page. Often, these custom elements take advantage of methods in the base class in order to perform the work that is required.
+
+Here is an example page object for a simple but typical login page. Notice that many of the methods, such as `enterEMail()`, call methods in the base class that perform the bulk of the work.
+
+```tsx
+import { browser, by, element, ExpectedConditions } from 'protractor';
+import { PageObjectBase } from './base.po';
+
+export class LoginPage extends PageObjectBase {
+ constructor() {
+ super('app-login', '/login');
+ }
+
+ waitForError() {
+ browser.wait(ExpectedConditions.presenceOf(element(by.css('.error'))), 3000);
+ }
+
+ getErrorMessage() {
+ return element(by.css('.error')).getText();
+ }
+
+ enterEMail(email: string) {
+ this.enterInputText('#email-input', email);
+ }
+
+ enterPassword(password: string) {
+ this.enterInputText('#password-input', password);
+ }
+
+ clickSignIn() {
+ this.clickButton('#signin-button');
+ }
+}
+```
+
+#### Testing Scripts
+
+Similar to unit tests, end-to-end test scripts consist of nested `describe()` and `it()` functions. In the case of end-to-end tests, the `describe()` functions generally denote specific scenarios with the `it()` functions denoting specific behaviors that should be exhibited by the application as actions are performed within that scenario.
+
+Also similar to unit tests, the labels used in the `describe()` and `it()` functions should make sense both with the "describe" or "it" and when concatenated together to form the complete test case.
+
+Here is a sample end-to-end test script that exercises some typical login scenarios.
+
+```tsx
+import { AppPage } from '../page-objects/pages/app.po';
+import { AboutPage } from '../page-objects/pages/about.po';
+import { CustomersPage } from '../page-objects/pages/customers.po';
+import { LoginPage } from '../page-objects/pages/login.po';
+import { MenuPage } from '../page-objects/pages/menu.po';
+import { TasksPage } from '../page-objects/pages/tasks.po';
+
+describe('Login', () => {
+ const about = new AboutPage();
+ const app = new AppPage();
+ const customers = new CustomersPage();
+ const login = new LoginPage();
+ const menu = new MenuPage();
+ const tasks = new TasksPage();
+
+ beforeEach(() => {
+ app.load();
+ });
+
+ describe('before logged in', () => {
+ it('displays the login screen', () => {
+ expect(login.rootElement().isDisplayed()).toEqual(true);
+ });
+
+ it('allows in-app navigation to about', () => {
+ menu.clickAbout();
+ about.waitUntilVisible();
+ login.waitUntilInvisible();
+ });
+
+ it('does not allow in-app navigation to tasks', () => {
+ menu.clickTasks();
+ app.waitForPageNavigation();
+ expect(login.rootElement().isDisplayed()).toEqual(true);
+ });
+
+ it('does not allow in-app navigation to customers', () => {
+ menu.clickCustomers();
+ app.waitForPageNavigation();
+ expect(login.rootElement().isDisplayed()).toEqual(true);
+ });
+
+ it('displays an error message if the login fails', () => {
+ login.enterEMail('test@test.com');
+ login.enterPassword('bogus');
+ login.clickSignIn();
+ login.waitForError();
+ expect(login.getErrorMessage()).toEqual('The password is invalid or the user does not have a password.');
+ });
+
+ it('navigates to the tasks page if the login succeeds', () => {
+ login.enterEMail('test@test.com');
+ login.enterPassword('testtest');
+ login.clickSignIn();
+ tasks.waitUntilVisible();
+ });
+ });
+
+ describe('once logged in', () => {
+ beforeEach(() => {
+ tasks.waitUntilVisible();
+ });
+
+ it('allows navigation to the customers page', () => {
+ menu.clickCustomers();
+ customers.waitUntilVisible();
+ tasks.waitUntilInvisible();
+ });
+
+ it('allows navigation to the about page', () => {
+ menu.clickAbout();
+ about.waitUntilVisible();
+ tasks.waitUntilInvisible();
+ });
+
+ it('allows navigation back to the tasks page', () => {
+ menu.clickAbout();
+ tasks.waitUntilInvisible();
+ menu.clickTasks();
+ tasks.waitUntilVisible();
+ });
+ });
+});
+```
+
+### Configuration
+
+The default configuration uses the same `environment.ts` file that is used for development. In order to provide better control over the data used by the end-to-end tests, it is often useful to create a specific environment for testing and use that environment for the tests. This section shows one possible way to create this configuration.
+
+#### Testing Environment
+
+Setting up a testing environment involves creating a new environment file that uses a dedicated testing backend, updating the `angular.json` file to use that environment, and modifying the `e2e` script in the `package.json` to specify the `test` environment.
+
+##### Create the `environment.e2e.ts` File
+
+The Angular `environment.ts` and `environment.prod.ts` files are often used to store information such as the base URL for the application's backend data services. Create an `environment.e2e.ts` that provides the same information, only connecting to backend services that are dedicated to testing rather than the development or production backend services. Here is an example:
+
+```tsx
+export const environment = {
+ production: false,
+ databaseURL: 'https://e2e-test-api.my-great-app.com',
+ projectId: 'my-great-app-e2e',
+};
+```
+
+##### Modify the `angular.json` File
+
+The `angular.json` file needs to be modified to use this file. This is a layered process. Follow the XPaths listed below to add the configuration that is required.
+
+Add a configuration at `/projects/app/architect/build/configurations` called `test` that does the file replacement:
+
+```json
+"test": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.e2e.ts"
+ }
+ ]
+}
+```
+
+Add a configuration at `/projects/app/architect/serve/configurations` called `test` that points the browser target at the `test` build configuration that was defined above.
+
+```json
+"test": {
+ "browserTarget": "app:build:test"
+}
+```
+
+Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called `test` that does points the dev server target at the `test` serve configuration defined above.
+
+```json
+"test": {
+ "devServerTarget": "app:serve:test"
+}
+```
+
+##### Modify the `package.json` File
+
+Modify the `package.json` file so that `npm run e2e` uses the `test` configuration.
+
+```json
+"scripts": {
+ "e2e": "ng e2e --configuration=test",
+ "lint": "ng lint",
+ "ng": "ng",
+ "start": "ng serve",
+ "test": "ng test",
+ "test:dev": "ng test --browsers=ChromeHeadlessCI",
+ "test:ci": "ng test --no-watch --browsers=ChromeHeadlessCI"
+},
+```
+
+#### Test Cleanup
+
+If the end-to-end tests modify data in any way it is helpful to reset the data to a known state once the test completes. One way to do that is to:
+
+1. Create an endpoint that performs the cleanup.
+1. Add a `onCleanUp()` function to the `config` object exported by the `protractor.conf.js` file.
+
+Here is an example:
+
+```javascript
+onCleanUp() {
+ const axios = require('axios');
+ return axios
+ .post(
+ 'https://e2e-test-api.my-great-app.com/purgeDatabase',
+ {}
+ )
+ .then(res => {
+ console.log(res.data);
+ })
+ .catch(err => console.log(err));
+}
+```
diff --git a/versioned_docs/version-v8/angular/virtual-scroll.md b/versioned_docs/version-v8/angular/virtual-scroll.md
new file mode 100644
index 00000000000..77e73ae36a1
--- /dev/null
+++ b/versioned_docs/version-v8/angular/virtual-scroll.md
@@ -0,0 +1,133 @@
+# Virtual Scroll
+
+:::warning[Looking for `ion-virtual-scroll`?]
+
+`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below.
+
+:::
+
+## Installation
+
+To setup the CDK Scroller, first install `@angular/cdk`:
+
+```shell
+npm add @angular/cdk
+```
+
+This provides a collection of different utilities, but we'll focus on `ScrollingModule` for now.
+
+When we want to use the CDK Scroller, we'll need to import the module in our component. For example, in a tabs starter project, we can add our import to the `tabs1.module.ts` file.
+
+```diff
+ import { IonicModule } from '@ionic/angular';
+ import { NgModule } from '@angular/core';
+ import { CommonModule } from '@angular/common';
+ import { FormsModule } from '@angular/forms';
+ import { Tab1Page } from './tab1.page';
+ import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
++ import { ScrollingModule } from '@angular/cdk/scrolling';
+ import { Tab1PageRoutingModule } from './tab1-routing.module';
+ @NgModule({
+ imports: [
+ IonicModule,
+ CommonModule,
+ FormsModule,
+ ExploreContainerComponentModule,
+ Tab1PageRoutingModule,
++ ScrollingModule
+ ],
+ declarations: [Tab1Page]
+ })
+ export class Tab1PageModule {}
+```
+
+With this added, we have access to the Virtual Scroller in the Tab1Page component.
+
+## Usage
+
+The CDK Virtual Scroller can be added to a component by adding the `cdk-virtual-scroll-viewport` to a component's template.
+
+```html
+
+
+
+```
+
+`cdk-virtual-scroll-viewport` becomes the root of our scrollable content and is responsible for recycling DOM nodes as they scroll out of view.
+
+The DOM nodes at this point can be any content needed for an app. The difference is that when we want to iterate over a collection, `*cdkVirtualFor` is used instead of `*ngFor`.
+
+```html
+
+
+
+
+
+
+ {{item }}
+
+
+
+
+```
+
+Here, `items` is an array, but it can be an array, `Observable`, or `DataSource`. `DataSource` is an abstract class that can provide the data needed as well as utility methods. For more details, check out the [CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview).
+
+The component is not complete yet as the `cdk-virtual-scroll-viewport` needs to know how big each node will be as well as the min/max buffer sizes.
+
+At the moment, CDK Virtual Scroller only supports fixed sized elements, but dynamic sized elements are planned for the future. For the `Tab1Page` component, since it is only rendering an item, it can be hard-coded to a fixed size.
+
+The min/max buffer size tells the scroller "render as many nodes as it takes to meet this minimum height, but not over this".
+
+```html
+
+
+
+
+
+
+ {{item }}
+
+
+
+
+```
+
+The last piece needed is a some CSS to size the viewport correctly. In the `tab1.page.scss` file, add the following
+
+```scss
+cdk-virtual-scroll-viewport {
+ height: 100%;
+ width: 100%;
+}
+```
+
+Since the viewport is built to fit various use cases, the default sizing is not set and is up to developers to set.
+
+## Usage with Ionic Components
+
+Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport.
+
+For example:
+
+```html
+
+
+
+
+
+```
+
+## Further Reading
+
+This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please refer to the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview).
diff --git a/versioned_docs/version-v8/angular/your-first-app.md b/versioned_docs/version-v8/angular/your-first-app.md
new file mode 100644
index 00000000000..f445e23054b
--- /dev/null
+++ b/versioned_docs/version-v8/angular/your-first-app.md
@@ -0,0 +1,238 @@
+---
+title: 'Your First Ionic App: Angular'
+sidebar_label: Build Your First App
+---
+
+
+ Build Your First Ionic Mobile App with Angular | Ionic Capacitor Camera
+ VIDEO
+
+:::note
+Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.md).
+:::
+
+## What We'll Build
+
+We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.
+
+Highlights include:
+
+- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
+- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
+- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
+
+Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-angular) referenced in this guide on GitHub.
+
+## Download Required Tools
+
+Download and install these right away to ensure an optimal Ionic development experience:
+
+- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version](https://nodejs.org/en/).
+- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
+- **Command-line interface/terminal (CLI)**:
+ - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.
+ - **Mac/Linux** users: virtually any terminal will work.
+
+## Install Ionic Tooling
+
+Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
+
+:::note
+To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
+:::
+
+```shell
+npm install -g @ionic/cli native-run cordova-res
+```
+
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+
+Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+:::
+
+## Create an App
+
+Next, create an Ionic Angular app that uses the "Tabs" starter template and adds Capacitor for native functionality:
+
+```shell
+ionic start photo-gallery tabs --type=angular
+```
+
+:::note
+
+When prompted to choose between `NgModules` and `Standalone`, opt for `NgModules` as this tutorial follows the `NgModules` approach.
+
+:::
+
+This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
+
+Next, change into the app folder:
+
+```shell
+cd photo-gallery
+```
+
+Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
+
+```shell
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
+```
+
+### PWA Elements
+
+Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
+
+It's a separate dependency, so install it next:
+
+```shell
+npm install @ionic/pwa-elements
+```
+
+Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
+
+```ts
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+// CHANGE: Add the following import
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
+// CHANGE: Call the element loader before the `bootstrapModule` call
+defineCustomElements(window);
+
+platformBrowserDynamic()
+ .bootstrapModule(AppModule)
+ .catch((err) => console.log(err));
+```
+
+That’s it! Now for the fun part - let’s run the app.
+
+## Run the App
+
+Run this command next:
+
+```shell
+ionic serve
+```
+
+And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
+
+## Photo Gallery
+
+There are three tabs. Click on the "Tab2" tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
+
+
+
+Open `/src/app/tab2/tab2.page.html`. It contains:
+
+```html
+
+
+ Tab 2
+
+
+
+
+
+
+ Tab 2
+
+
+
+
+```
+
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
+
+```html
+
+
+
+ Photo Gallery
+
+
+
+
+
+
+
+ Photo Gallery
+
+
+
+
+```
+
+We put the visual aspects of our app into ``. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
+
+```html
+
+
+ Photo Gallery
+
+
+
+
+
+
+ Photo Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Next, open `src/app/tabs/tabs.page.html`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
+
+```html
+
+
+
+ Tab 1
+
+
+
+
+ Photos
+
+
+
+ Tab 3
+
+
+
+```
+
+That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.
diff --git a/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.md
new file mode 100644
index 00000000000..5d3b3dec862
--- /dev/null
+++ b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.md
@@ -0,0 +1,236 @@
+---
+title: Taking Photos with the Camera
+sidebar_label: Taking Photos
+---
+
+
+ Take Photos with Camera API for iOS, Android & Web with Angular | Ionic Capacitor Camera
+
+
+ Photo Gallery
+
+
+
+
+
+
+ Photo Gallery
+
+
+
+
+
+
+
+
+
+```
+
+If it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
+
+
+
+_(Your selfie is probably much better than mine)_
+
+After taking a photo, it disappears right away. We need to display it within our app and save it for future access.
+
+## Displaying Photos
+
+To define the data structure for our photo metadata, create a new interface named `UserPhoto`. Add this interface at the very bottom of the `photo.service.ts` file, immediately after the `PhotoService` class definition:
+
+```ts
+export class PhotoService {
+ // ...existing code...
+}
+
+// CHANGE: Add the `UserPhoto` interface
+export interface UserPhoto {
+ filepath: string;
+ webviewPath?: string;
+}
+```
+
+Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will contain a reference to each photo captured with the Camera.
+
+```ts
+export class PhotoService {
+ // CHANGE: Add the `photos` array
+ public photos: UserPhoto[] = [];
+
+ public async addNewToGallery() {
+ // ...existing code...
+ }
+}
+```
+
+Over in the `addNewToGallery` method, add the newly captured photo to the beginning of the `photos` array.
+
+```ts
+// CHANGE: Update `addNewToGallery()` method
+public async addNewToGallery() {
+ // Take a photo
+ const capturedPhoto = await Camera.getPhoto({
+ resultType: CameraResultType.Uri,
+ source: CameraSource.Camera,
+ quality: 100
+ });
+
+ // CHANGE: Add the new photo to the photos array
+ this.photos.unshift({
+ filepath: "soon...",
+ webviewPath: capturedPhoto.webPath!
+ });
+}
+```
+
+`photo.service.ts` should now look like this:
+
+```ts
+import { Injectable } from '@angular/core';
+import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class PhotoService {
+ public photos: UserPhoto[] = [];
+
+ public async addNewToGallery() {
+ // Take a photo
+ const capturedPhoto = await Camera.getPhoto({
+ resultType: CameraResultType.Uri,
+ source: CameraSource.Camera,
+ quality: 100,
+ });
+
+ this.photos.unshift({
+ filepath: 'soon...',
+ webviewPath: capturedPhoto.webPath!,
+ });
+ }
+}
+
+export interface UserPhoto {
+ filepath: string;
+ webviewPath?: string;
+}
+```
+
+Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path.
+
+```html
+
+
+ Photo Gallery
+
+
+
+
+
+
+ Photo Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Within the web browser, click the camera button and take another photo. This time, the photo is displayed in the Photo Gallery!
+
+Up next, we’ll add support for saving the photos to the filesystem, so they can be retrieved and displayed in our app at a later time.
diff --git a/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.md
new file mode 100644
index 00000000000..4212757730d
--- /dev/null
+++ b/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.md
@@ -0,0 +1,220 @@
+---
+title: Saving Photos to the Filesystem
+sidebar_label: Saving Photos
+---
+
+
+ Saving Photos to the Filesystem with Angular | Ionic Capacitor Camera
+ Loading Photos from the Filesystem with Angular | Ionic Capacitor Camera
+ Adding Mobile Support with Angular | Ionic Capacitor Camera
+ Adding Mobile Support with Angular | Ionic Capacitor Camera
+ Rapid App Development with Live Reload with Angular | Ionic Capacitor Camera
+ ` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+
+```html
+
+
+ Photo Gallery
+
+
+
+
+
+
+ Photo Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪
+
+:::note
+Remember, you can find the [complete source code for this app](https://github.com/ionic-team/photo-gallery-capacitor-ng) on GitHub.
+:::
+
+In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices.
diff --git a/versioned_docs/version-v8/angular/your-first-app/8-distribute.md b/versioned_docs/version-v8/angular/your-first-app/8-distribute.md
new file mode 100644
index 00000000000..6c221cc4b42
--- /dev/null
+++ b/versioned_docs/version-v8/angular/your-first-app/8-distribute.md
@@ -0,0 +1,107 @@
+---
+title: Build and Distribute your App
+sidebar_label: Distribute
+---
+
+
+ Build and Deploy your App with Angular | Ionic Capacitor Camera
+ API Index | Ionic Docs API Index for all API Custom Elements
+ {
+ value: T;
+}
+```
+
+### AccordionGroupCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface AccordionGroupCustomEvent extends CustomEvent {
+ detail: AccordionGroupChangeEventDetail;
+ target: HTMLIonAccordionGroupElement;
+}
+```
+
+## Properties
+
+ion-accordion: Accordion Components: How to Build & Examples
+ Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
+| Tab | Moves focus to the next focusable element. |
+| Shift + Tab | Moves focus to the previous focusable element. |
+| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header. Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header. Home | When focus is on an accordion header, moves focus to the first accordion header. |
+| End | When focus is on an accordion header, moves focus to the last accordion header. |
+
+## Performance
+
+### Animations
+
+The accordion animation works by knowing the height of the `content` slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation.
+
+For example, using [ion-img](./img) may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this:
+
+1. Use an `img` element without any lazy loading. `ion-img` always uses lazy loading, but `img` does not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading.
+
+2. Set a minimum width and height on `ion-img`. If you need to use lazy loading and know the dimensions of the images ahead of time (such as if you are loading icons of the same size), you can set the `ion-img` to have a minimum width or height using CSS. This gives developers the benefit of lazy loading while avoiding layout shifts. This works when using an `img` element with `loading="lazy"` too!
+
+3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group).
+
+## Properties
+
+ion-action-sheet: Action Sheet Dialog for iOS and Android
+
+
+
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+ htmlAttributes: {
+ 'aria-label': 'action sheet dialog',
+ },
+});
+```
+
+
+
+
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+ htmlAttributes: {
+ 'aria-label': 'action sheet dialog',
+ },
+});
+```
+
+
+
+
+
+```javascript
+useIonActionSheet({
+ htmlAttributes: {
+ 'aria-label': 'action sheet dialog',
+ },
+});
+```
+
+
+
+
+
+```javascript
+const actionSheet = await actionSheetController.create({
+ htmlAttributes: {
+ 'aria-label': 'action sheet dialog',
+ },
+});
+```
+
+
+
+
+
+#### Action Sheet Buttons Description
+
+Buttons containing text will be read by a screen reader. If a button contains only an icon, or a description other than the existing text is desired, a label should be assigned to the button by passing `aria-label` to the `htmlAttributes` property on the button.
+
+
+
+
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+ header: 'Header',
+ buttons: [
+ {
+ icon: 'close',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+ header: 'Header',
+ buttons: [
+ {
+ icon: 'close',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+```javascript
+useIonActionSheet({
+ header: 'Header',
+ buttons: [
+ {
+ icon: 'close',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+```javascript
+const actionSheet = await actionSheetController.create({
+ header: 'Header',
+ buttons: [
+ {
+ icon: 'close',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+## Interfaces
+
+### ActionSheetButton
+
+```typescript
+interface ActionSheetButton {
+ text?: string;
+ role?: 'cancel' | 'destructive' | 'selected' | string;
+ icon?: string;
+ cssClass?: string | string[];
+ id?: string;
+ htmlAttributes?: { [key: string]: any };
+ handler?: () => boolean | void | Promise;
+ data?: T;
+}
+```
+
+### ActionSheetOptions
+
+```typescript
+interface ActionSheetOptions {
+ header?: string;
+ subHeader?: string;
+ cssClass?: string | string[];
+ buttons: (ActionSheetButton | string)[];
+ backdropDismiss?: boolean;
+ translucent?: boolean;
+ animated?: boolean;
+ mode?: Mode;
+ keyboardClose?: boolean;
+ id?: string;
+ htmlAttributes?: { [key: string]: any };
+
+ enterAnimation?: AnimationBuilder;
+ leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Properties
+
+ion-alert: Ionic Alert Buttons with Custom Message Prompts
+
+
+
+
+```javascript
+const alert = await this.alertController.create({
+ message: 'This is an alert with custom aria attributes.',
+ htmlAttributes: {
+ 'aria-label': 'alert dialog',
+ },
+});
+```
+
+
+
+
+
+```javascript
+const alert = await this.alertController.create({
+ message: 'This is an alert with custom aria attributes.',
+ htmlAttributes: {
+ 'aria-label': 'alert dialog',
+ },
+});
+```
+
+
+
+
+
+```javascript
+useIonAlert({
+ message: 'This is an alert with custom aria attributes.',
+ htmlAttributes: {
+ 'aria-label': 'alert dialog',
+ },
+});
+```
+
+
+
+
+
+```javascript
+const alert = await alertController.create({
+ message: 'This is an alert with custom aria attributes.',
+ htmlAttributes: {
+ 'aria-label': 'alert dialog',
+ },
+});
+```
+
+
+
+
+
+All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.
+
+#### Alert Buttons Description
+
+Buttons containing text will be read by a screen reader. If a description other than the existing text is desired, a label can be set on the button by passing `aria-label` to the `htmlAttributes` property on the button.
+
+
+
+
+
+```javascript
+const alert = await this.alertController.create({
+ header: 'Header',
+ buttons: [
+ {
+ text: 'Exit',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+```javascript
+const alert = await this.alertController.create({
+ header: 'Header',
+ buttons: [
+ {
+ text: 'Exit',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+```javascript
+useIonAlert({
+ header: 'Header',
+ buttons: [
+ {
+ text: 'Exit',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+```javascript
+const alert = await alertController.create({
+ header: 'Header',
+ buttons: [
+ {
+ text: 'Exit',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+## Interfaces
+
+### AlertButton
+
+```typescript
+type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
+
+interface AlertButton {
+ text: string;
+ role?: 'cancel' | 'destructive' | string;
+ cssClass?: string | string[];
+ id?: string;
+ htmlAttributes?: { [key: string]: any };
+ handler?: (value: any) => AlertButtonOverlayHandler | Promise;
+}
+```
+
+### AlertInput
+
+```typescript
+interface AlertInput {
+ type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
+ name?: string;
+ placeholder?: string;
+ value?: any;
+ /**
+ * The label text to display next to the input, if the input type is `radio` or `checkbox`.
+ */
+ label?: string;
+ checked?: boolean;
+ disabled?: boolean;
+ id?: string;
+ handler?: (input: AlertInput) => void;
+ min?: string | number;
+ max?: string | number;
+ cssClass?: string | string[];
+ attributes?: { [key: string]: any };
+ tabindex?: number;
+}
+```
+
+### AlertOptions
+
+```typescript
+interface AlertOptions {
+ header?: string;
+ subHeader?: string;
+ message?: string | IonicSafeString;
+ cssClass?: string | string[];
+ inputs?: AlertInput[];
+ buttons?: (AlertButton | string)[];
+ backdropDismiss?: boolean;
+ translucent?: boolean;
+ animated?: boolean;
+ htmlAttributes?: { [key: string]: any };
+
+ mode?: Mode;
+ keyboardClose?: boolean;
+ id?: string;
+
+ enterAnimation?: AnimationBuilder;
+ leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Properties
+
+ion-app: Container Element for an Ionic Application
+ ` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented.
+
+Using `ion-app` enables the following behaviors:
+
+- [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins
+- [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices
+- Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar
+- Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard
+- [Ripple effect](./ripple-effect) when activating buttons on Material Design mode
+- Other tap and focus utilities which make the experience of using an Ionic app feel more native
+
+## Programmatic Focus
+
+Ionic offers focus utilities for components with the `ion-focusable` class. These utilities automatically manage focus for components when certain keyboard keys, like Tab , are pressed. Components can also be programmatically focused in response to user actions using the `setFocus` method from `ion-app`.
+
+import SetFocus from '@site/static/usage/v8/app/set-focus/index.md';
+
+ion-avatar: Circular Application Avatar Icon Component
+ ion-back-button: Custom Menu Back Button for Applications
+ ion-badge: iOS & Android App Notification Badge Icons
+ ion-button: Style Buttons with Custom CSS Properties
+ ion-buttons: Toolbar Element with Named Slots for Buttons
+ ion-card-title: Ionic App Card Title Component
+ ion-card: Card UI Components for Ionic Framework API
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v8/card/theming/colors/index.md';
+
+ion-checkbox: Ionic App Checkbox to Select Multiple Options
+ {
+ value: T;
+ checked: boolean;
+}
+```
+
+### CheckboxCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface CheckboxCustomEvent extends CustomEvent {
+ detail: CheckboxChangeEventDetail;
+ target: HTMLIonCheckboxElement;
+}
+```
+
+## Properties
+
+ion-chip: Text, Icon and Avatar for Ionic Framework Apps
+ ion-col: Column Component Padding and Other Properties
+ ion-content: Scrollable Component for Ionic App Content
+ ion-datetime-button: Ionic Input for Datetime Picker
+ ion-datetime: Ionic API Input for Datetime Format Picker
+ Tab | Moves focus to the next focusable element. |
+| Shift + Tab | Moves focus to the previous focusable element. |
+| Space or Enter | Clicks the focusable element. |
+
+#### Date Grid
+
+| Key | Description |
+| -------------------------------------- | ------------------------------------------------- |
+| ArrowUp | Moves focus to the same day of the previous week. |
+| ArrowDown | Moves focus to the same day of the next week. |
+| ArrowRight | Moves focus to the next day. |
+| ArrowLeft | Moves focus to the previous day. |
+| Home | Moves focus to the first day of the current week. |
+| End | Moves focus to the last day of the current week. |
+| PageUp | Changes the grid of dates to the previous month. |
+| PageDown | Changes the grid of dates to the next month. |
+| Shift + PageUp | Changes the grid of dates to the previous year. |
+| Shift + PageDown | Changes the grid of dates to the next year. |
+
+#### Time, Month, and Year Wheels
+
+The wheel picker in Datetime uses [Picker](./picker) internally. Refer to [Picker Accessibility](./picker#accessibility) for more information on accessibility features with the wheel picker.
+
+## Interfaces
+
+### DatetimeChangeEventDetail
+
+```typescript
+interface DatetimeChangeEventDetail {
+ value?: string | null;
+}
+```
+
+### DatetimeCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface DatetimeCustomEvent extends CustomEvent {
+ detail: DatetimeChangeEventDetail;
+ target: HTMLIonDatetimeElement;
+}
+```
+
+## Properties
+
+ion-fab-button: Ionic FAB Button Icon for Primary Action
+ ion-fab: Ionic Floating Action Button for Android and iOS
+ ion-footer: Page Footer | Ionic App Footer Root Component
+ ion-grid: Display Grids for Mobile-First Custom App Layout
+ ion-header: Header Parent Component for Ionic Framework Apps
+ ion-icon: Icon Component for Ionic Framework Apps
+ Ionicons library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.
+
+For a list of all available icons, refer to ionic.io/ionicons . For more information including styling and custom SVG usage, refer to the Usage page .
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v8/icon/basic/index.md';
+
+aria-hidden="true". This will not visually hide the icon, but it will hide the element from assistive technology.
+
+```html
+aria-label.
+
+```html
+aria-label added to it, and the icon should be hidden using aria-hidden.
+
+```html
+
+
+```
diff --git a/versioned_docs/version-v8/api/img.md b/versioned_docs/version-v8/api/img.md
new file mode 100644
index 00000000000..bf6a23948cb
--- /dev/null
+++ b/versioned_docs/version-v8/api/img.md
@@ -0,0 +1,54 @@
+---
+title: 'ion-img'
+---
+
+import Props from '@ionic-internal/component-api/v8/img/props.md';
+import Events from '@ionic-internal/component-api/v8/img/events.md';
+import Methods from '@ionic-internal/component-api/v8/img/methods.md';
+import Parts from '@ionic-internal/component-api/v8/img/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/img/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/img/slots.md';
+
+
+ ion-img: Img Tag to Lazy Load Images in Viewport
+ ion-infinite-scroll: Infinite Scroller Action Component
+
+
+
+
+
+
+
+```
+
+:::note
+
+`virtual-scroll-element` refers to the scroll container responsible for scrolling the content. This may be a component provided directly by the virtual scroll solution you are using.
+
+:::
+
+## Accessibility
+
+Developers should assign the `role="feed"` attribute to the scrollable list of items that are added to or removed from as the user scrolls.
+
+Individual list items should either have `role="article"` or use the `` element directly.
+
+For example, when rendering a collection of items in an `ion-list`:
+
+```html
+
+
+ First item
+ Second item
+ ...
+
+
+
+
+
+```
+
+Please refer to the [ARIA: feed role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role) documentation for additional information.
+
+## Interfaces
+
+### InfiniteScrollCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface InfiniteScrollCustomEvent extends CustomEvent {
+ target: HTMLIonInfiniteScrollElement;
+}
+```
+
+## Properties
+
+ion-input-otp: One-Time Password Input Component
+ Tab | When first tabbing into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, tabbing moves to the next focusable element on the page. |
+| Shift + Tab | When tabbing backwards into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, shift tabbing focus moves to the previous focusable element on the page. |
+| ArrowRight | Moves focus to the next input box, stopping at the first empty box. In RTL mode, moves focus back to any previous box that contains a value. |
+| ArrowLeft | Moves focus back to any previous box that contains a value. In RTL mode, moves focus to the next input box, stopping at the first empty box. |
+| Any character matching the `pattern` property | Fills the current box and automatically moves focus to the next empty box. If all boxes are filled, focus remains on the last box. If the current box has a value, override the value with the entered character. In RTL mode, input fills boxes from right to left. |
+| Backspace | In an empty box: moves focus back one box and clears its value. Ctrl + V Cmd + V | Pastes content starting from the first box, regardless of which box is currently focused. All existing values are cleared before pasting. For example, if you have "1234" in all boxes and paste "56", the result will be "56" in the first two boxes with the remaining boxes empty. If the pasted content is longer than the available boxes, the extra characters are ignored. |
+
+## Properties
+
+ion-input-password-toggle: Toggle the visibility of a password in Input
+ ion-input: Custom Input With Styling and CSS Properties
+ ion-item-divider: Item Divider Block Element for Ionic Apps
+ ion-item-group: Group Items to Divide into Multiple Sections
+ ion-item-option: Option Button for Sliding Item in Ionic
+ ion-item-options: Option Button Components for Ionic Apps
+ ion-item-sliding: Slide Buttons | Slide Right to Left
+ ion-item: Input, Edit, or Delete iOS and Android Item Elements
+
+ If you find that you need a few more sentences to clarify the item's purpose, consider moving the additional
+ sentences to a Note at the bottom of the list. Adding the item to its own
+ list makes it clear which item the text is associated with.
+
+ }
+ doText="Move long text outside of the list"
+ doNotText="Don't try to fit long text in an item"
+ doImage={
+ nested interactives which can break the user experience with screen readers. For example, developers should avoid adding a button inside the main content of the Item if the `button` property is set to `true`.
+
+
+ Actions can be added by using the Item Sliding component. Actions can
+ also be placed directly inside of the Item without the use of Item Sliding, but this should be limited to no more
+ than 2 actions.
+
+ }
+ doText={
+ <>
+ Use an Item Sliding to reveal multiple actions by swiping on the
+ Item.
+
+ }
+ doNotText="Don't put more than 2 actions within an Item."
+ doImage={
+
+ Metadata such as helper text or character counts should not be used on form controls in list views. If such
+ metadata is needed, the form control should be placed outside of a list.{' '}
+ Filled Inputs are a great way of visually defining the input
+ container outside of a list.
+
+ }
+ doText="Place inputs with metadata outside of the list."
+ doNotText="Don't put metadata for inputs in the list."
+ doImage={
+
+ Alternatively, the metadata can be placed in a Note at the bottom of the
+ list.
+
+ }
+ doText="Place metadata for inputs at the end of a list."
+ doNotText="Don't put metadata for inputs in the list."
+ doImage={
+
+ Items should typically have no more than two controls. If you need more controls, consider adding the additional
+ controls in a Modal that is accessible from the item.
+
+ }
+ doText="Move additional controls to a submenu accessible from the item."
+ doNotText="Don't use more than two controls within an item."
+ doImage={
+ ` has the following keyboard interactions when any of these conditions are met:
+
+- The `button` property is set to `"true"`, rendering a native `` element.
+- The `href` property is set, rendering a native `` element.
+- The `routerLink` property is set, rendering a native ` ` element.
+
+| Key | Description |
+| --------------------------------- | ---------------------------------------------- |
+| Tab | Moves focus to the next focusable element. |
+| Shift + Tab | Moves focus to the previous focusable element. |
+
+#### Button
+
+When an `` renders a native `` element, the keyboard interactions follow the same pattern as the [button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#keyboard_interactions):
+
+| Key | Description |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| Enter | Activates the item, triggering its `click` event. If the item is within a form and has `type` set to `"submit"`, it submits the form. |
+| Space | Activates the item, triggering its `click` event. Does not submit the form, even if the item `type` is `"submit"`. |
+
+#### Anchor
+
+When an `` renders a native `` element, the keyboard interactions follow the same pattern as the [link role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role):
+
+| Key | Description |
+| ---------------- | ---------------------------------------------------------------------------------------- |
+| Enter | Activates the item, navigating to the linked page or moving focus to the in-page target. |
+
+## Properties
+
+ion-label: Item Label Color and Properties for Applications
+ ion-list: Item List View Component for iOS and Android Apps
+ ion-loading: Loading | Application Loading Indicator Overlay
+ ion-menu-button: Menu Button to Open an App Menu on a Page
+ ion-menu-toggle: MenuToggle Component to Open/Close Menus
+ ion-menu: API Framework Docs for Types of Menu Components
+ extends CustomEvent {
+ detail: T;
+ target: HTMLIonMenuElement;
+}
+```
+
+## Properties
+
+