ionic-team
diff --git a/‎_templates/playground/new/demo.html.ejs.t‎
Lines changed: 2 additions & 2 deletions b/‎_templates/playground/new/demo.html.ejs.t‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎cspell-wordlist.txt‎
Lines changed: 1 addition & 0 deletions b/‎cspell-wordlist.txt‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎docs/angular/slides.md‎
Lines changed: 1 addition & 1 deletion b/‎docs/angular/slides.md‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎docs/api/accordion-group.md‎
Lines changed: 6 additions & 6 deletions b/‎docs/api/accordion-group.md‎
Lines changed: 6 additions & 6 deletions
diff --git a/‎docs/api/accordion.md‎
Lines changed: 19 additions & 19 deletions b/‎docs/api/accordion.md‎
Lines changed: 19 additions & 19 deletions
diff --git a/‎docs/api/action-sheet.md‎
Lines changed: 12 additions & 12 deletions b/‎docs/api/action-sheet.md‎
Lines changed: 12 additions & 12 deletions
diff --git a/‎docs/api/alert.md‎
Lines changed: 13 additions & 13 deletions b/‎docs/api/alert.md‎
Lines changed: 13 additions & 13 deletions
diff --git a/‎docs/api/app.md‎
Lines changed: 6 additions & 6 deletions b/‎docs/api/app.md‎
Lines changed: 6 additions & 6 deletions
@@ -8,8 +8,8 @@ to: "<%= `static/usage/v${version}/${name}/${path}/demo.html` %>"
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= h.changeCase.titleCase(name) %></title>
-    <link rel="stylesheet" href="<%= directoryChanges %>../../../common.css" />
-    <script src="<%= directoryChanges %>../../../common.js"></script>
+    <link rel="stylesheet" href="<%= directoryChanges %>../../common.css" />
+    <script src="<%= directoryChanges %>../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/css/ionic.bundle.css" /><% if (css){ %>
 
 
@@ -12,6 +12,7 @@ Swiper
 Udemy
 Vetur
 Wistia
+WCAG
 
 actionsheet
 fabs
 
@@ -102,7 +102,7 @@ The `ion-slides` component had additional styling that helped create a native lo
 ```css
 swiper-container {
   --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
-  --swiper-pagination-color: var(--ion-color-primary, #3880ff);
+  --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);
 
@@ -1,12 +1,12 @@
 ---
 title: "ion-accordion-group"
 ---
-import Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
+import Props from '@ionic-internal/component-api/v8/accordion-group/props.md';
+import Events from '@ionic-internal/component-api/v8/accordion-group/events.md';
+import Methods from '@ionic-internal/component-api/v8/accordion-group/methods.md';
+import Parts from '@ionic-internal/component-api/v8/accordion-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/accordion-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v8/accordion-group/slots.md';
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
@@ -1,12 +1,12 @@
 ---
 title: "ion-accordion"
 ---
-import Props from '@ionic-internal/component-api/v7/accordion/props.md';
-import Events from '@ionic-internal/component-api/v7/accordion/events.md';
-import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
-import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
+import Props from '@ionic-internal/component-api/v8/accordion/props.md';
+import Events from '@ionic-internal/component-api/v8/accordion/events.md';
+import Methods from '@ionic-internal/component-api/v8/accordion/methods.md';
+import Parts from '@ionic-internal/component-api/v8/accordion/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/accordion/custom-props.md';
+import Slots from '@ionic-internal/component-api/v8/accordion/slots.md';
 
 <head>
   <title>ion-accordion: Accordion Components: How to Build & Examples</title>
@@ -22,31 +22,31 @@ Accordions provide collapsible sections in your content to reduce vertical space
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/v7/accordion/basic/index.md';
+import Basic from '@site/static/usage/v8/accordion/basic/index.md';
 
 <Basic />
 
 ## Toggle Accordions
 
 Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions.
 
-import Toggle from '@site/static/usage/v7/accordion/toggle/index.md';
+import Toggle from '@site/static/usage/v8/accordion/toggle/index.md';
 
 <Toggle />
 
 ## Listen for Accordion State Changes
 
 Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
 
-import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';
+import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md';
 
 <ListenChanges />
 
 ## Multiple Accordions
 
 Developers can allow multiple accordions to be open at once with the `multiple` property.
 
-import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
+import Multiple from '@site/static/usage/v8/accordion/multiple/index.md';
 
 <Multiple />
 
@@ -56,15 +56,15 @@ import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
 
 Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
 
-import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md';
+import DisableIndividual from '@site/static/usage/v8/accordion/disable/individual/index.md';
 
 <DisableIndividual />
 
 ### Accordion Group
 
 The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
 
-import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md';
+import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md';
 
 <DisableGroup />
 
@@ -74,15 +74,15 @@ import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md
 
 Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
 
-import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md';
+import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individual/index.md';
 
 <ReadonlyIndividual />
 
 ### Accordion Group
 
 The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
 
-import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md';
+import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index.md';
 
 <ReadonlyGroup />
 
@@ -106,7 +106,7 @@ There are two built in expansion styles: `compact` and `inset`. This expansion s
 
 When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened.
 
-import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
+import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expansion-styles/index.md';
 
 <ExpansionStyles />
 
@@ -130,7 +130,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
 }
 ```
 
-import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md';
+import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md';
 
 <AdvancedExpansionStyles />
 
@@ -142,15 +142,15 @@ If you would like to manage the icon yourself or use an icon that is not an `ion
 
 Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
 
-import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md';
+import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md';
 
 <Icons />
 
 ### Theming
 
 Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot.
 
-import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
+import Theming from '@site/static/usage/v8/accordion/customization/theming/index.md';
 
 <Theming />
 
@@ -160,7 +160,7 @@ import Theming from '@site/static/usage/v7/accordion/customization/theming/index
 
 By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app.
 
-import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
+import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibility/animations/index.md';
 
 <AccessibilityAnimations />
 
 
@@ -4,12 +4,12 @@ title: "ion-action-sheet"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
-import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
-import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
-import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
+import Props from '@ionic-internal/component-api/v8/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v8/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v8/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v8/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/action-sheet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md';
 
 <head>
   <title>ion-action-sheet: Action Sheet Dialog for iOS and Android</title>
@@ -27,7 +27,7 @@ An Action Sheet is a dialog that displays a set of options. It appears on top of
 
 `ion-action-sheet` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Action Sheet.
 
-import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md';
+import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md';
 
 <Trigger />
 
@@ -37,15 +37,15 @@ The `isOpen` property on `ion-action-sheet` allows developers to control the pre
 
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
-import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
+import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md';
 
 <IsOpen />
 
 ## Controller Action Sheets
 
 The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed.
 
-import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
+import Controller from '@site/static/usage/v8/action-sheet/controller/index.md';
 
 <Controller />
 
@@ -59,7 +59,7 @@ A button can also be passed data via the `data` property on `ActionSheetButton`.
 
 When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed.
 
-import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md';
+import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/index.md';
 
 <RoleInfo />
 
@@ -83,15 +83,15 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
 }
 ```
 
-import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md';
+import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md';
 
 <Styling />
 
 ### CSS Custom Properties
 
 Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements.
 
-import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
+import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-properties/index.md';
 
 <CssCustomProperties />
 
 
@@ -4,12 +4,12 @@ title: "ion-alert"
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-import Props from '@ionic-internal/component-api/v7/alert/props.md';
-import Events from '@ionic-internal/component-api/v7/alert/events.md';
-import Methods from '@ionic-internal/component-api/v7/alert/methods.md';
-import Parts from '@ionic-internal/component-api/v7/alert/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
+import Props from '@ionic-internal/component-api/v8/alert/props.md';
+import Events from '@ionic-internal/component-api/v8/alert/events.md';
+import Methods from '@ionic-internal/component-api/v8/alert/methods.md';
+import Parts from '@ionic-internal/component-api/v8/alert/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/alert/custom-props.md';
+import Slots from '@ionic-internal/component-api/v8/alert/slots.md';
 
 <head>
   <title>ion-alert: Ionic Alert Buttons with Custom Message Prompts</title>
@@ -26,7 +26,7 @@ An Alert is a dialog that presents users with information or collects informatio
 
 `ion-alert` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Alert.
 
-import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md';
+import Trigger from '@site/static/usage/v8/alert/presenting/trigger/index.md';
 
 <Trigger />
 
@@ -36,15 +36,15 @@ The `isOpen` property on `ion-alert` allows developers to control the presentati
 
 `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
 
-import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md';
+import IsOpen from '@site/static/usage/v8/alert/presenting/isOpen/index.md';
 
 <IsOpen />
 
 ## Controller Alerts
 
 The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed.
 
-import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
+import Controller from '@site/static/usage/v8/alert/presenting/controller/index.md';
 
 <Controller />
 
@@ -54,7 +54,7 @@ In the array of `buttons`, each button includes properties for its `text`, and o
 
 Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
 
-import Buttons from '@site/static/usage/v7/alert/buttons/index.md';
+import Buttons from '@site/static/usage/v8/alert/buttons/index.md';
 
 <Buttons />
 
@@ -65,13 +65,13 @@ Alerts can also include several different inputs whose data can be passed back t
 
 ### Text Inputs Example
 
-import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.md';
+import TextInputs from '@site/static/usage/v8/alert/inputs/text-inputs/index.md';
 
 <TextInputs />
 
 ### Radio Example
 
-import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md';
+import Radios from '@site/static/usage/v8/alert/inputs/radios/index.md';
 
 <Radios />
 
@@ -101,7 +101,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
 }
 ```
 
-import Customization from '@site/static/usage/v7/alert/customization/index.md';
+import Customization from '@site/static/usage/v8/alert/customization/index.md';
 
 <Customization />
 
 
@@ -1,12 +1,12 @@
 ---
 title: "ion-app"
 ---
-import Props from '@ionic-internal/component-api/v7/app/props.md';
-import Events from '@ionic-internal/component-api/v7/app/events.md';
-import Methods from '@ionic-internal/component-api/v7/app/methods.md';
-import Parts from '@ionic-internal/component-api/v7/app/parts.md';
-import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.md';
-import Slots from '@ionic-internal/component-api/v7/app/slots.md';
+import Props from '@ionic-internal/component-api/v8/app/props.md';
+import Events from '@ionic-internal/component-api/v8/app/events.md';
+import Methods from '@ionic-internal/component-api/v8/app/methods.md';
+import Parts from '@ionic-internal/component-api/v8/app/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/app/custom-props.md';
+import Slots from '@ionic-internal/component-api/v8/app/slots.md';
 
 <head>
   <title>ion-app: Container Element for an Ionic Application</title>
-Original file line number
+Diff line change
 Udemy
 Vetur
 Wistia
 +WCAG
 actionsheet
 fabs