docs(playground): update new docs with playgrounds for consistent headings and folder names

docs/api/avatar.md

@@ -22,7 +22,7 @@ Avatars are circular components that usually wrap an image or icon. They can be
 
 Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
 
-## Basic
+## Basic Usage
 
 import Basic from '@site/static/usage/avatar/basic/index.md';
 
@@ -42,9 +42,11 @@ import Item from '@site/static/usage/avatar/item/index.md';
 
 ## Theming
 
-import Theming from '@site/static/usage/avatar/theming/index.md';
+### CSS Custom Properties
 
-<Theming />
+import CSSProps from '@site/static/usage/avatar/theming/css-properties/index.md';
+
+<CSSProps />
 
 ## Properties
 <Props />

docs/api/badge.md

@@ -22,23 +22,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.
 
-import BasicExample from '@site/static/usage/badge/basic/index.md';
+## Basic Usage
 
-<BasicExample />
+import Basic from '@site/static/usage/badge/basic/index.md';
 
-## Customization Examples
+<Basic />
 
-### Color
+## Theming
 
-import ColorExample from '@site/static/usage/badge/customization/color/index.md';
+### Colors
 
-<ColorExample />
+import Colors from '@site/static/usage/badge/theming/colors/index.md';
+
+<Colors />
 
 ### CSS Properties
 
-import CSSPropsExample from '@site/static/usage/badge/customization/css-properties/index.md';
+import CSSProps from '@site/static/usage/badge/theming/css-properties/index.md';
 
-<CSSPropsExample />
+<CSSProps />
 
 ## Properties
 <Props />
@@ -56,4 +58,4 @@ import CSSPropsExample from '@site/static/usage/badge/customization/css-properti
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />

docs/api/checkbox.md

@@ -22,7 +22,7 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
 
-## Basic
+## Basic Usage
 
 import Basic from '@site/static/usage/checkbox/basic/index.md';
 
@@ -36,9 +36,11 @@ import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
 
 ## Theming
 
-import Theming from '@site/static/usage/checkbox/theming/index.md';
+### CSS Custom Properties
 
-<Theming />
+import CSSProps from '@site/static/usage/checkbox/theming/css-properties/index.md';
+
+<CSSProps />
 
 ## Interfaces
 

docs/api/chip.md

@@ -19,30 +19,31 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.
 
-## Basic
+## Basic Usage
 
-import BasicExample from '@site/static/usage/chip/basic/index.md';
+import Basic from '@site/static/usage/chip/basic/index.md';
 
-<BasicExample />
+<Basic />
 
-## Colors
+## Slotting Components and Icons
 
-import ColorExample from '@site/static/usage/chip/color/index.md';
+import SlotExample from '@site/static/usage/chip/slots/index.md';
 
-<ColorExample />
+<SlotExample />
 
+## Theming
 
-## Slotting Components and Icons
+### Colors
 
-import SlotExample from '@site/static/usage/chip/slots/index.md';
+import Colors from '@site/static/usage/chip/theming/colors/index.md';
 
-<SlotExample />
+<Colors />
 
-## Styling
+### CSS Custom Properties
 
-import StylingExample from '@site/static/usage/chip/styling/index.md';
+import CSSProps from '@site/static/usage/chip/theming/css-properties/index.md';
 
-<StylingExample />
+<CSSProps />
 
 ## Properties
 <Props />
@@ -60,4 +61,4 @@ import StylingExample from '@site/static/usage/chip/styling/index.md';
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />

docs/api/range.md

@@ -25,6 +25,8 @@ The Range slider lets users select from a range of values by moving the slider k
 
 By default the Range slider has a minimum value of `0` and a maximum value of `100`. This can be configured with the `min` and `max` properties.
 
+## Basic Usage
+
 import Basic from '@site/static/usage/range/basic/index.md';
 
 <Basic />
@@ -57,9 +59,9 @@ import Pins from '@site/static/usage/range/pins/index.md';
 
 ## Snapping & Ticks
 
-Ticks show indications for each available value on the Range. In order to use ticks, developers must set both `snaps` and the `ticks` property to `true`. 
+Ticks show indications for each available value on the Range. In order to use ticks, developers must set both `snaps` and the `ticks` property to `true`.
 
-With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released. 
+With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released.
 
 import SnappingTicks from '@site/static/usage/range/snapping-ticks/index.md';
 
@@ -69,7 +71,7 @@ import SnappingTicks from '@site/static/usage/range/snapping-ticks/index.md';
 
 ### Using `ionChange`
 
-The `ionChange` event emits as the Range knob value changes. 
+The `ionChange` event emits as the Range knob value changes.
 
 import IonChangeEvent from '@site/static/usage/range/ion-change-event/index.md';
 
@@ -83,23 +85,23 @@ import IonKnobMoveEvent from '@site/static/usage/range/ion-knob-move-event/index
 
 <IonKnobMoveEvent />
 
-## Styling
+## Theming
 
-### Styling with CSS Variables
+### CSS Custom Properties
 
 Range includes [CSS Variables](#css-custom-properties) to quickly theme and customize the appearance of the Range component to match your application's design.
 
-import CssVariablesPlayground from '@site/static/usage/range/css-variables/index.md';
+import CSSProps from '@site/static/usage/range/theming/css-properties/index.md';
 
-<CssVariablesPlayground />
+<CSSProps />
 
-### Styling with CSS Shadow Parts
+### CSS Shadow Parts
 
 Range includes [CSS Shadow Parts](#css-shadow-parts) to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.
 
-import CssShadowPartsPlayground from '@site/static/usage/range/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/range/theming/css-shadow-parts/index.md';
 
-<CssShadowPartsPlayground />
+<CSSParts />
 
 ## Interfaces
 
@@ -163,4 +165,4 @@ type RangeValue = number | { lower: number, upper: number };
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />

docs/api/skeleton-text.md

@@ -30,13 +30,13 @@ import Basic from '@site/static/usage/skeleton-text/basic/index.md';
 
 <Basic />
 
-## Customization
+## Theming
 
-### Theming
+### CSS Custom Properties
 
-import Theming from '@site/static/usage/skeleton-text/theming/index.md';
+import CSSProps from '@site/static/usage/skeleton-text/theming/css-properties/index.md';
 
-<Theming />
+<CSSProps />
 
 ## Properties
 <Props />
@@ -54,4 +54,4 @@ import Theming from '@site/static/usage/skeleton-text/theming/index.md';
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />

docs/api/thumbnail.md

@@ -22,7 +22,7 @@ Thumbnails are square components that usually wrap an image or icon. They can be
 
 Thumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively.
 
-## Basic
+## Basic Usage
 
 import Basic from '@site/static/usage/thumbnail/basic/index.md';
 
@@ -36,9 +36,11 @@ import Item from '@site/static/usage/thumbnail/item/index.md';
 
 ## Theming
 
-import Theming from '@site/static/usage/thumbnail/theming/index.md';
+### CSS Custom Properties
 
-<Theming />
+import CSSProps from '@site/static/usage/thumbnail/theming/css-properties/index.md';
+
+<CSSProps />
 
 ## Properties
 <Props />

static/usage/avatar/theming/demo.html → static/usage/avatar/theming/css-properties/demo.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Avatar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 

static/usage/thumbnail/theming/index.md → static/usage/avatar/theming/css-properties/index.md

@@ -27,6 +27,6 @@ import angularCSS from './angular/example_component_css.md';
       }
     },
   }}
-  src="usage/thumbnail/theming/demo.html"
+  src="usage/avatar/theming/css-properties/demo.html"
   size="250px"
 />

static/usage/badge/customization/color/index.md → static/usage/badge/theming/colors/index.md

@@ -8,5 +8,5 @@ import angular from './angular.md';
 <Playground
   size="medium"
   code={{ javascript, react, vue, angular }}
-  src="usage/badge/customization/color/demo.html"
-/>
+  src="usage/badge/theming/colors/demo.html"
+/>

static/usage/badge/customization/css-properties/index.md → static/usage/badge/theming/css-properties/index.md

@@ -27,5 +27,5 @@ import angularCSS from './angular/angular-css.md';
       },
     },
   }}
-  src="usage/badge/customization/css-properties/demo.html"
+  src="usage/badge/theming/css-properties/demo.html"
 />

static/usage/checkbox/theming/demo.html → static/usage/checkbox/theming/css-properties/demo.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Checkbox</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
     <style>

static/usage/checkbox/theming/index.md → static/usage/checkbox/theming/css-properties/index.md

@@ -27,5 +27,5 @@ import angular_example_component_css from './angular/example_component_css.md';
       }
     }
   }}
-  src="usage/checkbox/theming/demo.html"
+  src="usage/checkbox/theming/css-properties/demo.html"
 />

static/usage/chip/color/demo.html → static/usage/chip/theming/colors/demo.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Chip</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 

static/usage/chip/color/index.md → static/usage/chip/theming/colors/index.md

@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/chip/color/demo.html" />
+<Playground code={{ javascript, react, vue, angular }} src="usage/chip/theming/colors/demo.html" />

static/usage/chip/styling/demo.html → static/usage/chip/theming/css-properties/demo.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Chip</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 

static/usage/chip/styling/index.md → static/usage/chip/theming/css-properties/index.md

@@ -27,5 +27,5 @@ import angular_example_component_html from './angular/example_component_html.md'
       },
     },
   }}
-  src="usage/chip/styling/demo.html"
+  src="usage/chip/theming/css-properties/demo.html"
 />

static/usage/range/css-variables/demo.html → static/usage/range/theming/css-properties/demo.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
   <style>

static/usage/range/css-shadow-parts/index.md → static/usage/range/theming/css-properties/index.md

@@ -27,5 +27,5 @@ import angular_example_component_css from './angular/example_component_css.md';
       },
     },
   }}
-  src="usage/range/css-shadow-parts/demo.html"
+  src="usage/range/theming/css-properties/demo.html"
 />

static/usage/range/css-shadow-parts/demo.html → static/usage/range/theming/css-shadow-parts/demo.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
   <style>

static/usage/range/css-variables/index.md → static/usage/range/theming/css-shadow-parts/index.md

@@ -27,5 +27,5 @@ import angular_example_component_css from './angular/example_component_css.md';
       },
     },
   }}
-  src="usage/range/css-variables/demo.html"
+  src="usage/range/theming/css-shadow-parts/demo.html"
 />