feat: version playground examples and docs

docs/api/accordion.md

@@ -22,31 +22,31 @@ Accordions provide collapsible sections in your content to reduce vertical space
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/accordion/basic/index.md';
+import Basic from '@site/static/usage/v7/accordion/basic/index.md';
 
 <Basic />
 
 ## 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/accordion/toggle/index.md';
+import Toggle from '@site/static/usage/v7/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/accordion/listen-changes/index.md';
+import ListenChanges from '@site/static/usage/v7/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/accordion/multiple/index.md';
+import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
 
 <Multiple />
 
@@ -56,15 +56,15 @@ import Multiple from '@site/static/usage/accordion/multiple/index.md';
 
 Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
 
-import DisableIndividual from '@site/static/usage/accordion/disable/individual/index.md';
+import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md';
 
 <DisableIndividual />
 
 ### Accordion Group
 
 The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
 
-import DisableGroup from '@site/static/usage/accordion/disable/group/index.md';
+import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md';
 
 <DisableGroup />
 
@@ -74,15 +74,15 @@ import DisableGroup from '@site/static/usage/accordion/disable/group/index.md';
 
 Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
 
-import ReadonlyIndividual from '@site/static/usage/accordion/readonly/individual/index.md';
+import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md';
 
 <ReadonlyIndividual />
 
 ### Accordion Group
 
 The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
 
-import ReadonlyGroup from '@site/static/usage/accordion/readonly/group/index.md';
+import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md';
 
 <ReadonlyGroup />
 
@@ -106,7 +106,7 @@ There are two built in expansion styles: `compact` and `inset`. This expansion s
 
 When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened.
 
-import ExpansionStyles from '@site/static/usage/accordion/customization/expansion-styles/index.md';
+import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
 
 <ExpansionStyles />
 
@@ -130,7 +130,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
 }
 ```
 
-import AdvancedExpansionStyles from '@site/static/usage/accordion/customization/advanced-expansion-styles/index.md';
+import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md';
 
 <AdvancedExpansionStyles />
 
@@ -142,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/accordion/customization/icons/index.md';
+import Icons from '@site/static/usage/v7/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/accordion/customization/theming/index.md';
+import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
 
 <Theming />
 
@@ -160,7 +160,7 @@ import Theming from '@site/static/usage/accordion/customization/theming/index.md
 
 By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app.
 
-import AccessibilityAnimations from '@site/static/usage/accordion/accessibility/animations/index.md';
+import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
 
 <AccessibilityAnimations />
 

docs/api/action-sheet.md

@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
 
-import Basic from '@site/static/usage/action-sheet/basic/index.md';
+import Basic from '@site/static/usage/v7/action-sheet/basic/index.md';
 
 <Basic />
 
@@ -50,15 +50,15 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
 }
 ```
 
-import Styling from '@site/static/usage/action-sheet/theming/styling/index.md';
+import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md';
 
 <Styling />
 
 ### CSS Custom Properties
 
 Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements.
 
-import CssCustomProperties from '@site/static/usage/action-sheet/theming/css-properties/index.md';
+import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
 
 <CssCustomProperties />
 

docs/api/alert.md

@@ -28,7 +28,7 @@ An Alert is a dialog that presents users with information or collects informatio
 
 ### Controller
 
-import Controller from '@site/static/usage/alert/presenting/controller/index.md';
+import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
 
 <Controller />
 
@@ -105,7 +105,7 @@ In the array of `buttons`, each button includes properties for its `text`, and o
 
 Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
 
-import Buttons from '@site/static/usage/alert/buttons/index.md';
+import Buttons from '@site/static/usage/v7/alert/buttons/index.md';
 
 <Buttons />
 
@@ -116,13 +116,13 @@ Alerts can also include several different inputs whose data can be passed back t
 
 ### Text Inputs Example
 
-import TextInputs from '@site/static/usage/alert/inputs/text-inputs/index.md';
+import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.md';
 
 <TextInputs />
 
 ### Radio Example
 
-import Radios from '@site/static/usage/alert/inputs/radios/index.md';
+import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md';
 
 <Radios />
 
@@ -152,7 +152,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
 }
 ```
 
-import Customization from '@site/static/usage/alert/customization/index.md';
+import Customization from '@site/static/usage/v7/alert/customization/index.md';
 
 <Customization />
 

docs/api/avatar.md

@@ -24,27 +24,27 @@ Avatars can be used by themselves or inside of any element. If placed inside of
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/avatar/basic/index.md';
+import Basic from '@site/static/usage/v7/avatar/basic/index.md';
 
 <Basic />
 
 ## Chip Avatar
 
-import Chip from '@site/static/usage/avatar/chip/index.md';
+import Chip from '@site/static/usage/v7/avatar/chip/index.md';
 
 <Chip />
 
 ## Item Avatar
 
-import Item from '@site/static/usage/avatar/item/index.md';
+import Item from '@site/static/usage/v7/avatar/item/index.md';
 
 <Item />
 
 ## Theming
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/avatar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md';
 
 <CSSProps />
 

docs/api/backdrop.md

@@ -18,7 +18,7 @@ Backdrops are full screen components that overlay other components. They are use
 
 The backdrop is transparent by default. The backdrop will prevent clicking or tapping on the content behind it.
 
-import Basic from '@site/static/usage/backdrop/basic/index.md';
+import Basic from '@site/static/usage/v7/backdrop/basic/index.md';
 
 <Basic />
 
@@ -28,7 +28,7 @@ The backdrop can be customized by assigning CSS properties directly to the backd
 
 Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`).
 
-import Styling from '@site/static/usage/backdrop/styling/index.md';
+import Styling from '@site/static/usage/v7/backdrop/styling/index.md';
 
 <Styling />
 

docs/api/badge.md

@@ -21,21 +21,21 @@ Badges are inline block elements that usually appear near another element. Typic
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/badge/basic/index.md';
+import Basic from '@site/static/usage/v7/badge/basic/index.md';
 
 <Basic />
 
 ## Theming
 
 ### Colors
 
-import Colors from '@site/static/usage/badge/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/badge/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Properties
 
-import CSSProps from '@site/static/usage/badge/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.md';
 
 <CSSProps />
 

docs/api/breadcrumbs.md

@@ -18,21 +18,21 @@ Breadcrumbs are navigation items that are used to indicate where a user is on an
 
 ## Basic Usage
 
-import Basic from '@site/static/usage/breadcrumbs/basic/index.md';
+import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md';
 
 <Basic />
 
 ## Using Icons
 
 ### Icons on Items
 
-import IconsOnItems from '@site/static/usage/breadcrumbs/icons/icons-on-items/index.md';
+import IconsOnItems from '@site/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md';
 
 <IconsOnItems />
 
 ### Custom Separators
 
-import CustomSeparators from '@site/static/usage/breadcrumbs/icons/custom-separators/index.md';
+import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-separators/index.md';
 
 <CustomSeparators />
 
@@ -42,45 +42,45 @@ import CustomSeparators from '@site/static/usage/breadcrumbs/icons/custom-separa
 
 If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown.
 
-import MaxItems from '@site/static/usage/breadcrumbs/collapsing-items/max-items/index.md';
+import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md';
 
 <MaxItems />
 
 ### Items Before or After Collapse
 
 Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties.
 
-import ItemsBeforeAfter from '@site/static/usage/breadcrumbs/collapsing-items/items-before-after/index.md';
+import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md';
 
 <ItemsBeforeAfter />
 
 ### Collapsed Indicator Click -- Expand Breadcrumbs
 
 Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs.
 
-import ExpandOnClick from '@site/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md';
+import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md';
 
 <ExpandOnClick />
 
 ### Collapsed Indicator Click -- Present Popover
 
 The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs.
 
-import PopoverOnClick from '@site/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md';
+import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md';
 
 <PopoverOnClick />
 
 ## Theming
 
 ### Colors
 
-import Colors from '@site/static/usage/breadcrumbs/theming/colors/index.md';
+import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md';
 
 <Colors />
 
 ### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/breadcrumbs/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md';
 
 <CSSProps />