fix(): update to Stencil One 🎉🎊

core/src/components/ripple-effect/readme.md

@@ -37,13 +37,6 @@ The ripple effect component adds the [Material Design ink ripple interaction eff
 
 Adds the ripple effect to the parent element.
 
-#### Parameters
-
-| Name | Type     | Description                                                 |
-| ---- | -------- | ----------------------------------------------------------- |
-| `x`  | `number` | The horizontal coordinate of where the ripple should start. |
-| `y`  | `number` | The vertical coordinate of where the ripple should start.   |
-
 #### Returns
 
 Type: `Promise<() => void>`
@@ -51,6 +44,43 @@ Type: `Promise<() => void>`
 
 
 
+## Dependencies
+
+### Used by
+
+ - [ion-action-sheet](../action-sheet)
+ - [ion-alert](../alert)
+ - [ion-back-button](../back-button)
+ - [ion-button](../button)
+ - [ion-card](../card)
+ - [ion-chip](../chip)
+ - [ion-fab-button](../fab-button)
+ - [ion-item](../item)
+ - [ion-item-option](../item-option)
+ - [ion-menu-button](../menu-button)
+ - [ion-segment-button](../segment-button)
+ - [ion-tab-button](../tab-button)
+ - [ion-toast](../toast)
+
+### Graph
+```mermaid
+graph TD;
+  ion-action-sheet --> ion-ripple-effect
+  ion-alert --> ion-ripple-effect
+  ion-back-button --> ion-ripple-effect
+  ion-button --> ion-ripple-effect
+  ion-card --> ion-ripple-effect
+  ion-chip --> ion-ripple-effect
+  ion-fab-button --> ion-ripple-effect
+  ion-item --> ion-ripple-effect
+  ion-item-option --> ion-ripple-effect
+  ion-menu-button --> ion-ripple-effect
+  ion-segment-button --> ion-ripple-effect
+  ion-tab-button --> ion-ripple-effect
+  ion-toast --> ion-ripple-effect
+  style ion-ripple-effect fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/ripple-effect/ripple-effect.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Method, Prop, QueueApi } from '@stencil/core';
 
-import { Mode } from '../../interface';
+import { getIonMode } from '../../global/ionic-global';
 
 @Component({
   tag: 'ion-ripple-effect',
@@ -8,7 +8,6 @@ import { Mode } from '../../interface';
   shadow: true
 })
 export class RippleEffect implements ComponentInterface {
-  mode!: Mode;
 
   @Element() el!: HTMLElement;
 
@@ -82,10 +81,11 @@ export class RippleEffect implements ComponentInterface {
   }
 
   hostData() {
+    const mode = getIonMode(this);
     return {
       role: 'presentation',
       class: {
-        [`${this.mode}`]: true,
+        [`${mode}`]: true,
         'unbounded': this.unbounded
       }
     };

core/src/components/ripple-effect/test/basic/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script src="../../../../../dist/ionic.js"></script>
-
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   <style>
     .my-block {
       position: relative;

core/src/components/ripple-effect/test/preview/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script src="../../../../../dist/ionic.js"></script>
-
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   <style>
     .my-block {
       position: relative;