From 5300dcc693caf51a726f8c346cfc9a44474fd3d1 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 18 Feb 2021 08:53:49 -0500
Subject: [PATCH 01/12] fix(header): collapsed toolbar is no longer incorrectly
 shown when using ion-refresher (#22937)

resolves #22829
---
 core/src/components/header/header.tsx      |  2 +-
 core/src/components/header/header.utils.ts | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx
index eaee37f9ea..93f0e0c512 100644
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -120,7 +120,7 @@ export class Header implements ComponentInterface {
      * as well as progressively showing/hiding the main header
      * border as the top-most toolbar collapses or expands.
      */
-    const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); };
+    const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl!); };
 
     this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { root: contentEl, threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] });
     this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
diff --git a/core/src/components/header/header.utils.ts b/core/src/components/header/header.utils.ts
index dd6a66d208..2df31003b8 100644
--- a/core/src/components/header/header.utils.ts
+++ b/core/src/components/header/header.utils.ts
@@ -72,7 +72,7 @@ export const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity?: num
   }
 };
 
-const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex) => {
+const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollTop: number) => {
   if (!ev[0].isIntersecting) { return; }
 
   /**
@@ -80,8 +80,13 @@ const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex)
    * does not always reset the scrollTop position to 0 when letting go. It will
    * set to 1 once the rubber band effect has ended. This causes the background to
    * appear slightly on certain app setups.
+   *
+   * Additionally, we check if user is rubber banding (scrolling is negative)
+   * as this can mean they are using pull to refresh. Once the refresher starts,
+   * the content is transformed which can cause the intersection observer to erroneously
+   * fire here as well.
    */
-  const scale = (ev[0].intersectionRatio > 0.9) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
+  const scale = (ev[0].intersectionRatio > 0.9 || scrollTop <= 0) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
 
   mainHeaderIndex.toolbars.forEach(toolbar => {
     setToolbarBackgroundOpacity(toolbar, (scale === 1) ? undefined : scale);
@@ -93,9 +98,10 @@ const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex)
  * and show the primary toolbar content. If the toolbars are not intersecting,
  * hide the primary toolbar content and show the scrollable toolbar content
  */
-export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex) => {
+export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex, scrollEl: HTMLElement) => {
   writeTask(() => {
-    handleToolbarBorderIntersection(ev, mainHeaderIndex);
+    const scrollTop = scrollEl.scrollTop;
+    handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
 
     const event = ev[0];
 
@@ -127,7 +133,7 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
 
       const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
 
-      if (hasValidIntersection) {
+      if (hasValidIntersection && scrollTop > 0) {
         setHeaderActive(mainHeaderIndex);
         setHeaderActive(scrollHeaderIndex, false);
         setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0]);

From a4c38aca887a5cb36b55fb3622e0e852ec352031 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 23 Feb 2021 11:41:51 -0500
Subject: [PATCH 02/12] chore(): update package-lock to account for npm 7.5.3
 bug fix (#22963)

---
 core/package-lock.json | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index f1bcd8603c..23746d6997 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -906,7 +906,6 @@
         "jest-resolve": "^26.6.2",
         "jest-util": "^26.6.2",
         "jest-worker": "^26.6.2",
-        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -2582,7 +2581,6 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -4227,7 +4225,6 @@
       "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
       "dev": true,
       "dependencies": {
-        "@types/yauzl": "^2.9.1",
         "debug": "^4.1.1",
         "get-stream": "^5.1.0",
         "yauzl": "^2.10.0"
@@ -6724,7 +6721,6 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.6.2",
@@ -10977,9 +10973,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.35.1.tgz",
       "integrity": "sha512-q5KxEyWpprAIcainhVy6HfRttD9kutQpHbeqDTWnqAFNJotiojetK6uqmcydNMymBEtC4I8bCYR+J3mTMqeaUA==",
       "dev": true,
-      "dependencies": {
-        "fsevents": "~2.1.2"
-      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },

From 677d55ebe4eecd816fa5192efdc381eb5f4a06a6 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 23 Feb 2021 12:34:04 -0500
Subject: [PATCH 03/12] test(): update theming test with latest dark mode
 values (#22956)

---
 .../themes/test/css-variables/css/dark.css    |  1 +
 core/src/themes/test/css-variables/index.html | 22 +++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/core/src/themes/test/css-variables/css/dark.css b/core/src/themes/test/css-variables/css/dark.css
index ef0b5f8bc9..29d4c7cbbe 100644
--- a/core/src/themes/test/css-variables/css/dark.css
+++ b/core/src/themes/test/css-variables/css/dark.css
@@ -132,4 +132,5 @@ ion-modal.ios {
   --ion-background-color: var(--ion-color-step-100);
   --ion-toolbar-background: var(--ion-color-step-150);
   --ion-toolbar-border-color: var(--ion-color-step-250);
+  --ion-item-background: var(--ion-color-step-150);
 }
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index e3337995c0..5bcb3bbdba 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -924,6 +924,9 @@
       <ion-header translucent="true">
         <ion-toolbar>
           <ion-title>Super Modal</ion-title>
+          <ion-buttons slot="start">
+            <ion-button class="dismiss">Close</ion-button>
+          </ion-buttons>
         </ion-toolbar>
       </ion-header>
       <ion-content fullscreen="true">
@@ -932,10 +935,21 @@
             <ion-title size="large">Super Modal</ion-title>
           </ion-toolbar>
         </ion-header>
-        <div class="ion-padding">
-          <h1>Content of doom</h1>
-          <div>Here's some more content</div>
-          <ion-button class="dismiss">Dismiss Modal</ion-button>
+
+        <br />
+
+        <div>
+          <ion-list>
+            <ion-item>
+              <ion-label>Item A</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Item B</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Item C</ion-label>
+            </ion-item>
+          </ion-list>
         </div>
       </ion-content>
       `;

From 215eb5d4efbb9ade942dba1687469caf61da21e7 Mon Sep 17 00:00:00 2001
From: Hans Krywalsky <hanskrywaa@web.de>
Date: Tue, 23 Feb 2021 18:34:42 +0100
Subject: [PATCH 04/12] feat(searchbar): add showClearIcon property (#22759)

resolves #22738

Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>
---
 angular/src/directives/proxies.ts             |  4 +-
 core/api.txt                                  |  1 +
 core/src/components.d.ts                      |  8 ++++
 core/src/components/searchbar/readme.md       |  1 +
 core/src/components/searchbar/searchbar.scss  |  2 +-
 core/src/components/searchbar/searchbar.tsx   | 41 +++++++++++++++++--
 .../searchbar/test/basic/index.html           |  8 ++++
 packages/vue/src/proxies.ts                   |  1 +
 8 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 62888e0592..00a615791f 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -643,8 +643,8 @@ export class IonRow {
 }
 export declare interface IonSearchbar extends Components.IonSearchbar {
 }
-@ProxyCmp({ inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "spellcheck", "type", "value"], "methods": ["setFocus", "getInputElement"] })
-@Component({ selector: "ion-searchbar", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "spellcheck", "type", "value"] })
+@ProxyCmp({ inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"], "methods": ["setFocus", "getInputElement"] })
+@Component({ selector: "ion-searchbar", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] })
 export class IonSearchbar {
   ionInput!: EventEmitter<CustomEvent>;
   ionChange!: EventEmitter<CustomEvent>;
diff --git a/core/api.txt b/core/api.txt
index 19dfb8f108..77c6bf1bc5 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -987,6 +987,7 @@ ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false
 ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
+ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'focus',false,false
 ion-searchbar,prop,spellcheck,boolean,false,false,false
 ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
 ion-searchbar,prop,value,null | string | undefined,'',false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index c1459603ce..a91597b370 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2034,6 +2034,10 @@ export namespace Components {
           * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
          */
         "showCancelButton": 'never' | 'focus' | 'always';
+        /**
+          * Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.
+         */
+        "showClearButton": 'never' | 'focus' | 'always';
         /**
           * If `true`, enable spellcheck on the input.
          */
@@ -5336,6 +5340,10 @@ declare namespace LocalJSX {
           * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
          */
         "showCancelButton"?: 'never' | 'focus' | 'always';
+        /**
+          * Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.
+         */
+        "showClearButton"?: 'never' | 'focus' | 'always';
         /**
           * If `true`, enable spellcheck on the input.
          */
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index 444f5c7226..8b1bbfcb2b 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -328,6 +328,7 @@ export default defineComponent({
 | `placeholder`      | `placeholder`        | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'Search'`                                                   |
 | `searchIcon`       | `search-icon`        | The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode.                                                                                                                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined`                                                  |
 | `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.                                                                        | `"always" \| "focus" \| "never"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'never'`                                                    |
+| `showClearButton`  | `show-clear-button`  | Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.              | `"always" \| "focus" \| "never"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'focus'`                                                    |
 | `spellcheck`       | `spellcheck`         | If `true`, enable spellcheck on the input.                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `false`                                                      |
 | `type`             | `type`               | Set the type of the input.                                                                                                                                                                                                                                                                                           | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `'search'`                                                   |
 | `value`            | `value`              | the value of the searchbar.                                                                                                                                                                                                                                                                                          | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `''`                                                         |
diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss
index 0b102ff9ea..3e4b2c1ef2 100644
--- a/core/src/components/searchbar/searchbar.scss
+++ b/core/src/components/searchbar/searchbar.scss
@@ -145,7 +145,7 @@
   appearance: none;
 }
 
-:host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button {
+:host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button {
   display: block;
 }
 
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 57b5842340..20eb9ff56a 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -121,6 +121,16 @@ export class Searchbar implements ComponentInterface {
    */
   @Prop() showCancelButton: 'never' | 'focus' | 'always' = 'never';
 
+  /**
+   * Sets the behavior for the clear button. Defaults to `"focus"`.
+   * Setting to `"focus"` shows the clear button on focus if the
+   * input is not empty.
+   * Setting to `"never"` hides the clear button.
+   * Setting to `"always"` shows the clear button regardless
+   * of focus state, but only if the input is not empty.
+   */
+  @Prop() showClearButton: 'never' | 'focus' | 'always' = 'focus';
+
   /**
    * If `true`, enable spellcheck on the input.
    */
@@ -231,7 +241,7 @@ export class Searchbar implements ComponentInterface {
   /**
    * Clears the input field and triggers the control change.
    */
-  private onClearInput = (ev?: Event) => {
+  private onClearInput = (ev?: Event, shouldFocus?: boolean) => {
     this.ionClear.emit();
 
     if (ev) {
@@ -246,6 +256,16 @@ export class Searchbar implements ComponentInterface {
       if (value !== '') {
         this.value = '';
         this.ionInput.emit();
+
+        /**
+         * When tapping clear button
+         * ensure input is focused after
+         * clearing input so users
+         * can quickly start typing.
+         */
+        if (shouldFocus && !this.focused) {
+          this.setFocus();
+        }
       }
     }, 16 * 4);
   }
@@ -419,6 +439,20 @@ export class Searchbar implements ComponentInterface {
     return true;
   }
 
+  /**
+   * Determines whether or not the clear button should be visible onscreen.
+   * Clear button should be shown if one of two conditions applies:
+   * 1. `showClearButton` is set to `always`.
+   * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
+   */
+  private shouldShowClearButton(): boolean {
+    if ((this.showClearButton === 'never') || (this.showClearButton === 'focus' && !this.focused)) {
+      return false;
+    }
+
+    return true;
+  }
+
   render() {
     const { cancelButtonText } = this;
     const animated = this.animated && config.getBoolean('animated', true);
@@ -460,6 +494,7 @@ export class Searchbar implements ComponentInterface {
           'searchbar-has-value': this.hasValue(),
           'searchbar-left-aligned': this.shouldAlignLeft,
           'searchbar-has-focus': this.focused,
+          'searchbar-should-show-clear': this.shouldShowClearButton(),
           'searchbar-should-show-cancel': this.shouldShowCancelButton()
         })}
       >
@@ -492,8 +527,8 @@ export class Searchbar implements ComponentInterface {
             type="button"
             no-blur
             class="searchbar-clear-button"
-            onMouseDown={this.onClearInput}
-            onTouchStart={this.onClearInput}
+            onMouseDown={ev => this.onClearInput(ev, true)}
+            onTouchStart={ev => this.onClearInput(ev, true)}
           >
             <ion-icon aria-hidden="true" mode={mode} icon={clearIcon} lazy={false} class="searchbar-clear-icon"></ion-icon>
           </button>
diff --git a/core/src/components/searchbar/test/basic/index.html b/core/src/components/searchbar/test/basic/index.html
index aaf0a19870..b27558af8b 100644
--- a/core/src/components/searchbar/test/basic/index.html
+++ b/core/src/components/searchbar/test/basic/index.html
@@ -49,6 +49,14 @@
       <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="focus">
       </ion-searchbar>
 
+      <h5 class="ion-padding-start ion-padding-top"> Search - No Clear Button </h5>
+      <ion-searchbar id="noCancel" value="after view" type="text" show-clear-button="never">
+      </ion-searchbar>
+
+      <h5 class="ion-padding-start ion-padding-top"> Search - Always Show  Clear Button </h5>
+      <ion-searchbar id="noCancel" value="after view" type="text" show-clear-button="always">
+      </ion-searchbar>
+
       <h5 class="ion-padding-start ion-padding-top"> Search - Input mode set to numeric</h5>
       <ion-searchbar id="noCancel" value="after view" inputmode="numeric" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="focus">
       </ion-searchbar>
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index e8bda1f50a..a1f79c4db2 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -544,6 +544,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion
   'placeholder',
   'searchIcon',
   'showCancelButton',
+  'showClearButton',
   'spellcheck',
   'type',
   'value',

From 26285bbc9150cf618386dec3915f37b392ed8d53 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 23 Feb 2021 13:13:38 -0500
Subject: [PATCH 05/12] fix(progress-bar): use correct theme colors in dark
 mode (#22957)

resolves #20098

Co-authored-by: Dominik Geng <domske@users.noreply.github.com>
---
 .../components/progress-bar/progress-bar.scss | 39 ++++++++++++-------
 .../components/progress-bar/progress-bar.tsx  |  9 +++--
 .../progress-bar/test/basic/index.html        | 28 +++++++++++--
 core/src/themes/test/css-variables/index.html | 19 +++++++--
 4 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 2f70b8d665..5e1ff44614 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -10,7 +10,7 @@
   * @prop --progress-background: Color of the progress bar
   * @prop --buffer-background: Color of the buffer bar
   */
-  --background: #{ion-color(primary, base, 0.2)};
+  --background: #{ion-color(primary, base, 0.3)};
   --progress-background: #{ion-color(primary, base)};
   --buffer-background: var(--background);
   display: block;
@@ -27,7 +27,7 @@
 
 :host(.ion-color) {
   --progress-background: #{current-color(base)};
-  --buffer-background: #{current-color(base, 0.2)};
+  --buffer-background: #{current-color(base, 0.3)};
 }
 
 // indeterminate has no progress-buffer-bar, so it will be added to the host
@@ -72,17 +72,10 @@
 }
 
 .progress-buffer-bar {
-  // It's currently here because --buffer-background has an alpha
-  // Otherwise the buffer circles would be seen through
-  background: #fff;
+  background: var(--buffer-background);
 
-  z-index: 1; // Make it behind the progress
-
-  &:before {
-    background: var(--buffer-background);
-
-    content: "";
-  }
+  // Make it behind the progress
+  z-index: 1;
 }
 
 // MD based animation on indeterminate type
@@ -109,7 +102,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  left:  -54.888891%;
+  left: -54.888891%;
   /* stylelint-enable property-blacklist */
 
   animation: secondary-indeterminate-translate 2s infinite linear;
@@ -123,8 +116,26 @@
 // Buffer style
 // --------------------------------------------------
 
+.buffer-circles.buffer-circles-reversed {
+  /* stylelint-disable property-blacklist */
+  right: unset;
+  left: 2px;
+
+  background-position: right;
+  /* stylelint-enable property-blacklist */
+}
+
 .buffer-circles {
-  background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px center;
+  /* stylelint-disable property-blacklist */
+  right: -8px;
+
+  left: unset;
+  /* stylelint-enable property-blacklist */
+
+  background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px;
+
+  /* stylelint-disable-next-line property-blacklist */
+  background-position: left;
   background-size: 10px 10px;
 
   z-index: 0;
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index ee952e64ab..aeb9f70b87 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -54,6 +54,7 @@ export class ProgressBar implements ComponentInterface {
     const { color, type, reversed, value, buffer } = this;
     const paused = config.getBoolean('_testing');
     const mode = getIonMode(this);
+    const isReversed = document.dir === 'rtl' ? !reversed : reversed;
     return (
       <Host
         role="progressbar"
@@ -64,12 +65,12 @@ export class ProgressBar implements ComponentInterface {
           [mode]: true,
           [`progress-bar-${type}`]: true,
           'progress-paused': paused,
-          'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
+          'progress-bar-reversed': isReversed
         })}
       >
         {type === 'indeterminate'
           ? renderIndeterminate()
-          : renderProgress(value, buffer)
+          : renderProgress(value, buffer, isReversed)
         }
       </Host>
     );
@@ -83,13 +84,13 @@ const renderIndeterminate = () => {
   ];
 };
 
-const renderProgress = (value: number, buffer: number) => {
+const renderProgress = (value: number, buffer: number, reversed: boolean) => {
   const finalValue = clamp(0, value, 1);
   const finalBuffer = clamp(0, buffer, 1);
 
   return [
     <div class="progress" style={{ transform: `scaleX(${finalValue})` }}></div>,
-    finalBuffer !== 1 && <div class="buffer-circles"></div>,
+    finalBuffer !== 1 && <div class={{ 'buffer-circles': true, 'buffer-circles-reversed': reversed }} style={{ width: `calc(${(1 - finalBuffer) * 100}%)` }}></div>,
     <div class="progress-buffer-bar" style={{ transform: `scaleX(${finalBuffer})` }}></div>,
   ];
 };
diff --git a/core/src/components/progress-bar/test/basic/index.html b/core/src/components/progress-bar/test/basic/index.html
index 688296cf98..b428a315c6 100644
--- a/core/src/components/progress-bar/test/basic/index.html
+++ b/core/src/components/progress-bar/test/basic/index.html
@@ -9,7 +9,9 @@
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>  <style>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+  <style>
     .custom-bar-background {
       --buffer-background: red;
     }
@@ -126,13 +128,26 @@
         </ion-list-header>
         <ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
 
+        <ion-list-header>
+          <ion-label>
+            Buffer (change buffer with slider)
+          </ion-label>
+        </ion-list-header>
+        <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
+        <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
+
+        <ion-item>
+          <ion-range pin="true" value="0" id="progressValueBuffer">
+            <ion-label slot="start">0</ion-label>
+            <ion-label slot="end">100</ion-label>
+          </ion-range>
+        </ion-item>
       </ion-list>
-
     </ion-content>
-
   </ion-app>
 
   <script>
+    // Progress Bar Value
     const progressValue = document.getElementById('progressValue');
     const progressBar = document.getElementById('progressBar');
 
@@ -140,6 +155,13 @@
       progressBar.value = ev.detail.value / 100;
     });
 
+    // Progress Bar Buffer
+    const progressValueBuffer = document.getElementById('progressValueBuffer');
+    const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
+
+    progressValueBuffer.addEventListener('ionChange', function (ev) {
+      progressBarBuffer.forEach(ele => ele.buffer = ev.detail.value / 100);
+    });
   </script>
 </body>
 
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 5bcb3bbdba..ccbc4c1dcc 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -52,6 +52,9 @@
       font-size: 48px;
     }
 
+    ion-progress-bar {
+      margin-bottom: 10px;
+    }
   </style>
 </head>
 
@@ -619,10 +622,6 @@
 
             <section>
               <p>
-                <ion-toolbar>
-                  <ion-title>Default</ion-title>
-                </ion-toolbar>
-
                 <ion-toolbar>
                   <ion-buttons slot="start">
                     <ion-button color="danger">
@@ -759,6 +758,18 @@
                   <ion-title>Dark</ion-title>
                 </ion-toolbar>
               </p>
+
+              <p>
+                <ion-progress-bar value="0.5"></ion-progress-bar>
+                <ion-progress-bar value="0.5" color="secondary"></ion-progress-bar>
+                <ion-progress-bar value="0.5" color="tertiary"></ion-progress-bar>
+                <ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar>
+                <ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar>
+                <ion-progress-bar value="0.2" buffer="0.3" color="success"></ion-progress-bar>
+                <ion-progress-bar value="0.5" color="light"></ion-progress-bar>
+                <ion-progress-bar value="0.5" color="medium"></ion-progress-bar>
+                <ion-progress-bar value="0.2" buffer="0.3" color="dark"></ion-progress-bar>
+              </p>
             </section>
           </div>
         </ion-content>

From 68a9b800532f9c0b308a3b74ed18a7068a942301 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 23 Feb 2021 14:42:38 -0500
Subject: [PATCH 06/12] fix(vue): prevent race conditions when opening overlays
 (#22883)

resolves #22880
---
 .../vue/src/vue-component-lib/overlays.ts     | 52 +++++++++++++++----
 packages/vue/test-app/src/views/Overlays.vue  | 15 +++++-
 .../vue/test-app/tests/e2e/specs/overlays.js  | 14 +++--
 3 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/packages/vue/src/vue-component-lib/overlays.ts b/packages/vue/src/vue-component-lib/overlays.ts
index 12c661c9cf..c058edb06e 100644
--- a/packages/vue/src/vue-component-lib/overlays.ts
+++ b/packages/vue/src/vue-component-lib/overlays.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h, ref } from 'vue';
+import { defineComponent, h, ref, VNode } from 'vue';
 
 export interface OverlayProps {
   isOpen?: boolean;
@@ -21,28 +21,61 @@ export const defineOverlayContainer = <Props extends object>(name: string, compo
       isOpen && (await present(props))
     }
 
-    const onVnodeUpdated = async () => {
-      const isOpen = props.isOpen;
+    const onVnodeUpdated = async (node: VNode, prevNode: VNode) => {
+      const isOpen = node.props!.isOpen;
+      const prevIsOpen = prevNode.props!.isOpen;
+
+      /**
+       * Do not do anything if this prop
+       * did not change.
+       */
+      if (isOpen === prevIsOpen) return;
+
       if (isOpen) {
-        await overlay.value?.present() || present(props);
+        await present(props);
       } else {
-        await overlay.value?.dismiss();
-        overlay.value = undefined;
+        await dismiss();
       }
     }
 
     const onVnodeBeforeUnmount = async () => {
-      await overlay.value?.dismiss();
+      await dismiss();
+    }
+
+    const dismiss = async () => {
+      if (!overlay.value) return;
+
+      await overlay.value;
+
+      overlay.value = overlay.value.dismiss();
+
+      await overlay.value;
+
       overlay.value = undefined;
     }
 
     const present = async (props: Readonly<Props>) => {
+      /**
+       * Do not open another instance
+       * if one is already opened.
+       */
+      if (overlay.value) {
+        await overlay.value;
+      }
+
+      if (overlay.value?.present) {
+        await overlay.value.present();
+        return;
+      }
+
       const component = slots.default && slots.default()[0];
-      overlay.value = await controller.create({
+      overlay.value = controller.create({
         ...props,
         component
       });
 
+      overlay.value = await overlay.value;
+
       eventListeners.forEach(eventListener => {
         overlay.value.addEventListener(eventListener.componentEv, () => {
           emit(eventListener.frameworkEv);
@@ -59,7 +92,8 @@ export const defineOverlayContainer = <Props extends object>(name: string, compo
           style: { display: 'none' },
           onVnodeMounted,
           onVnodeUpdated,
-          onVnodeBeforeUnmount
+          onVnodeBeforeUnmount,
+          isOpen: props.isOpen
         }
       );
     }
diff --git a/packages/vue/test-app/src/views/Overlays.vue b/packages/vue/test-app/src/views/Overlays.vue
index b79df4df88..cdf5c0a445 100644
--- a/packages/vue/test-app/src/views/Overlays.vue
+++ b/packages/vue/test-app/src/views/Overlays.vue
@@ -62,7 +62,9 @@
 
       <br />
 
-      <ion-button expand="block" @click="present($event)" id="present-overlay">Present Overlay</ion-button>
+      <ion-button @click="present($event)" id="present-overlay">Present Overlay</ion-button>
+
+      <ion-button @click="changeLoadingProps()" id="change-loading-props">Quickly Change Loading Props</ion-button>
 
       <ion-action-sheet
         :is-open="isActionSheetOpen"
@@ -314,7 +316,18 @@ export default defineComponent({
       }
     }
 
+    const changeLoadingProps = () => {
+      setLoadingRef(true);
+      setTimeout(() => {
+        setLoadingRef(false);
+        setTimeout(() => {
+          setLoadingRef(true);
+        }, 10);
+      }, 10);
+    }
+
     return {
+      changeLoadingProps,
       overlayProps,
       present,
       componentType,
diff --git a/packages/vue/test-app/tests/e2e/specs/overlays.js b/packages/vue/test-app/tests/e2e/specs/overlays.js
index c0e7f0a058..e23186fd48 100644
--- a/packages/vue/test-app/tests/e2e/specs/overlays.js
+++ b/packages/vue/test-app/tests/e2e/specs/overlays.js
@@ -59,7 +59,7 @@ describe('Overlays', () => {
     cy.get('ion-toast').should('not.exist');
   });
 
-  it('it should pass props to modal via controller', () => {
+  it('should pass props to modal via controller', () => {
     cy.get('ion-radio#ion-modal').click();
     cy.get('ion-radio#controller').click();
 
@@ -69,7 +69,7 @@ describe('Overlays', () => {
     cy.get('ion-modal ion-content').should('have.text', 'Custom Title');
   });
 
-  it('it should pass props to modal via component', () => {
+  it('should pass props to modal via component', () => {
     cy.get('ion-radio#ion-modal').click();
     cy.get('ion-radio#component').click();
 
@@ -79,7 +79,7 @@ describe('Overlays', () => {
     cy.get('ion-modal ion-content').should('have.text', 'Custom Title');
   });
 
-  it('it should pass props to popover via controller', () => {
+  it('should pass props to popover via controller', () => {
     cy.get('ion-radio#ion-popover').click();
     cy.get('ion-radio#controller').click();
 
@@ -89,7 +89,7 @@ describe('Overlays', () => {
     cy.get('ion-popover ion-content').should('have.text', 'Custom Title');
   });
 
-  it('it should pass props to popover via component', () => {
+  it('should pass props to popover via component', () => {
     cy.get('ion-radio#ion-popover').click();
     cy.get('ion-radio#component').click();
 
@@ -98,4 +98,10 @@ describe('Overlays', () => {
 
     cy.get('ion-popover ion-content').should('have.text', 'Custom Title');
   });
+
+  it('should only open one instance at a time when props change quickly on component', () => {
+    cy.get('#change-loading-props').click();
+
+    cy.get('ion-loading').should('have.length', 1);
+  });
 })

From 8c1646a105aba24c426954103037bc51f4d0d430 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 24 Feb 2021 11:27:18 -0500
Subject: [PATCH 07/12] fix(progress-bar): add width transition (#22964)

---
 core/src/components/progress-bar/progress-bar.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 5e1ff44614..6e6f178100 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -130,6 +130,8 @@
   right: -8px;
 
   left: unset;
+
+  transition: width 150ms linear;
   /* stylelint-enable property-blacklist */
 
   background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px;

From b6b2714d70f71255315510c5e49708944875db72 Mon Sep 17 00:00:00 2001
From: Dominik Geng <domske@mailbox.org>
Date: Wed, 24 Feb 2021 22:40:40 +0100
Subject: [PATCH 08/12] fix(progress-bar): use correct theme colors in dark
 mode (#22965)

resolves #20098

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 .../components/progress-bar/progress-bar.scss | 62 +++++++------------
 .../components/progress-bar/progress-bar.tsx  | 20 ++++--
 2 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 6e6f178100..e9904e1d23 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -39,22 +39,34 @@
 .progress-indeterminate,
 .indeterminate-bar-primary,
 .indeterminate-bar-secondary,
-.progress-buffer-bar,
-.progress-buffer-bar:before,
-.buffer-circles {
+.progress-buffer-bar {
   @include position(0, 0, 0, 0);
-
   position: absolute;
 
   width: 100%;
   height: 100%;
 }
 
+.buffer-circles-container,
+.buffer-circles {
+  @include position(0, 0, 0, 0);
+  position: absolute;
+}
+
+// Extend a bit to overflow. The size of animated distance.
+.buffer-circles {
+  /* stylelint-disable property-blacklist */
+  right: -10px;
+  left: -10px;
+  /* stylelint-enable property-blacklist */
+}
+
 // Determinate progress bar
 // --------------------------------------------------
 
 .progress,
-.progress-buffer-bar {
+.progress-buffer-bar,
+.buffer-circles-container {
   /* stylelint-disable-next-line property-blacklist */
   transform-origin: left top;
 
@@ -74,10 +86,13 @@
 .progress-buffer-bar {
   background: var(--buffer-background);
 
-  // Make it behind the progress
   z-index: 1;
 }
 
+.buffer-circles-container {
+  overflow: hidden;
+}
+
 // MD based animation on indeterminate type
 // --------------------------------------------------
 
@@ -116,28 +131,8 @@
 // Buffer style
 // --------------------------------------------------
 
-.buffer-circles.buffer-circles-reversed {
-  /* stylelint-disable property-blacklist */
-  right: unset;
-  left: 2px;
-
-  background-position: right;
-  /* stylelint-enable property-blacklist */
-}
-
 .buffer-circles {
-  /* stylelint-disable property-blacklist */
-  right: -8px;
-
-  left: unset;
-
-  transition: width 150ms linear;
-  /* stylelint-enable property-blacklist */
-
-  background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px;
-
-  /* stylelint-disable-next-line property-blacklist */
-  background-position: left;
+  background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px center;
   background-size: 10px 10px;
 
   z-index: 0;
@@ -149,18 +144,7 @@
 // --------------------------------------------------
 
 :host(.progress-bar-reversed) {
-  .progress,
-  .progress-buffer-bar {
-    /* stylelint-disable-next-line property-blacklist */
-    transform-origin: right top;
-  }
-
-  .buffer-circles,
-  .indeterminate-bar-primary,
-  .indeterminate-bar-secondary,
-  .progress-indeterminate {
-    animation-direction: reverse;
-  }
+  transform: scaleX(-1);
 }
 
 // Progress paused
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index aeb9f70b87..20d05d0e66 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -54,7 +54,6 @@ export class ProgressBar implements ComponentInterface {
     const { color, type, reversed, value, buffer } = this;
     const paused = config.getBoolean('_testing');
     const mode = getIonMode(this);
-    const isReversed = document.dir === 'rtl' ? !reversed : reversed;
     return (
       <Host
         role="progressbar"
@@ -65,12 +64,12 @@ export class ProgressBar implements ComponentInterface {
           [mode]: true,
           [`progress-bar-${type}`]: true,
           'progress-paused': paused,
-          'progress-bar-reversed': isReversed
+          'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
         })}
       >
         {type === 'indeterminate'
           ? renderIndeterminate()
-          : renderProgress(value, buffer, isReversed)
+          : renderProgress(value, buffer)
         }
       </Host>
     );
@@ -84,13 +83,24 @@ const renderIndeterminate = () => {
   ];
 };
 
-const renderProgress = (value: number, buffer: number, reversed: boolean) => {
+const renderProgress = (value: number, buffer: number) => {
   const finalValue = clamp(0, value, 1);
   const finalBuffer = clamp(0, buffer, 1);
 
   return [
     <div class="progress" style={{ transform: `scaleX(${finalValue})` }}></div>,
-    finalBuffer !== 1 && <div class={{ 'buffer-circles': true, 'buffer-circles-reversed': reversed }} style={{ width: `calc(${(1 - finalBuffer) * 100}%)` }}></div>,
+    /**
+     * Buffer circles with two container to move
+     * the circles behind the buffer progress
+     * with respecting the animation.
+     * When finalBuffer === 1, we use display: none
+     * instead of removing the element to avoid flickering.
+     */
+    <div class={{ 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }} style={{ transform: `translateX(${finalBuffer * 100}%)` }}>
+      <div class="buffer-circles-container" style={{ transform: `translateX(-${finalBuffer * 100}%)` }}>
+        <div class="buffer-circles"></div>
+      </div>
+    </div>,
     <div class="progress-buffer-bar" style={{ transform: `scaleX(${finalBuffer})` }}></div>,
   ];
 };

From cd8ffd82a03ee69ef4cbd7922544bfc39680def9 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 25 Feb 2021 13:18:20 -0500
Subject: [PATCH 09/12] fix(react, vue): navigating using ion-back-button now
 selects correct page (#22974)

resolves #22830
---
 packages/react-router/src/ReactRouter/IonRouter.tsx | 2 +-
 packages/vue-router/src/router.ts                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-router/src/ReactRouter/IonRouter.tsx b/packages/react-router/src/ReactRouter/IonRouter.tsx
index 8be9490061..50794eafcc 100644
--- a/packages/react-router/src/ReactRouter/IonRouter.tsx
+++ b/packages/react-router/src/ReactRouter/IonRouter.tsx
@@ -241,7 +241,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
           routeDirection: 'back',
           routeAnimation: routeAnimation || routeInfo.routeAnimation,
         };
-        if (routeInfo.lastPathname === routeInfo.pushedByRoute) {
+        if (routeInfo.lastPathname === routeInfo.pushedByRoute || prevInfo.pathname === routeInfo.pushedByRoute) {
           this.props.history.goBack();
         } else {
           this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back');
diff --git a/packages/vue-router/src/router.ts b/packages/vue-router/src/router.ts
index a84ae558fe..76aea4c57a 100644
--- a/packages/vue-router/src/router.ts
+++ b/packages/vue-router/src/router.ts
@@ -88,7 +88,7 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
       const prevInfo = locationHistory.findLastLocation(routeInfo);
       if (prevInfo) {
         incomingRouteParams = { ...prevInfo, routerAction: 'pop', routerDirection: 'back', routerAnimation: routerAnimation || routeInfo.routerAnimation };
-        if (routeInfo.lastPathname === routeInfo.pushedByRoute) {
+        if (routeInfo.lastPathname === routeInfo.pushedByRoute || prevInfo.pathname === routeInfo.pushedByRoute) {
           router.back();
         } else {
           router.replace({ path: prevInfo.pathname, query: parseQuery(prevInfo.search) });

From 06d4c8e6f1897759b9edc921e453944c4c1d1dbf Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 26 Feb 2021 13:03:45 -0500
Subject: [PATCH 10/12] fix(vue): account for event name changes in vue 3.0.6+

---
 core/package-lock.json                      |  41 ++++-
 core/package.json                           |   2 +-
 core/stencil.config.ts                      |   6 +-
 packages/vue/package-lock.json              | 180 ++++++++++++--------
 packages/vue/package.json                   |   1 +
 packages/vue/src/ionic-vue.ts               |  39 +++--
 packages/vue/src/proxies.ts                 |  60 +++++--
 packages/vue/src/vue-component-lib/utils.ts |  29 ++--
 8 files changed, 239 insertions(+), 119 deletions(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index 23746d6997..177725af1d 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -18,7 +18,7 @@
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.3.0",
+        "@stencil/vue-output-target": "^0.4.1",
         "@types/jest": "^26.0.20",
         "@types/node": "^14.6.0",
         "@types/puppeteer": "5.4.3",
@@ -1013,10 +1013,37 @@
       "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==",
       "dev": true,
       "dependencies": {
+<<<<<<< HEAD
         "@jest/console": "^26.6.2",
         "@jest/types": "^26.6.2",
         "@types/istanbul-lib-coverage": "^2.0.0",
         "collect-v8-coverage": "^1.0.0"
+=======
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^26.3.0",
+        "@jest/test-result": "^26.3.0",
+        "@jest/transform": "^26.3.0",
+        "@jest/types": "^26.3.0",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.2",
+        "graceful-fs": "^4.2.4",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^4.0.3",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.0.2",
+        "jest-haste-map": "^26.3.0",
+        "jest-resolve": "^26.4.0",
+        "jest-util": "^26.3.0",
+        "jest-worker": "^26.3.0",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.0",
+        "string-length": "^4.0.1",
+        "terminal-link": "^2.0.0",
+        "v8-to-istanbul": "^5.0.1"
+>>>>>>> 594be7db7... fix(vue): account for event name changes in vue 3.0.6+ (#22980)
       },
       "engines": {
         "node": ">= 10.14.2"
@@ -1336,9 +1363,9 @@
       "dev": true
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.3.0.tgz",
-      "integrity": "sha512-uiBe+o7M+NU0gMRgJfrlepxLPBXK0lX4TL2jIPwhBfxYw++pbtg7BLRO2HxE69GR0nxw+7Uf3uJzOGbMsl+ZUQ==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.1.tgz",
+      "integrity": "sha512-B4urIlIb+I95NkKeCt3Ygpor1D0x5RMezuFyCFp6DYXshUaT1TbiJcW1FgA+gfwlquNzT1AMvEbi96YLnsOg3w==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=1.8.0"
@@ -14845,9 +14872,9 @@
       "dev": true
     },
     "@stencil/vue-output-target": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.3.0.tgz",
-      "integrity": "sha512-uiBe+o7M+NU0gMRgJfrlepxLPBXK0lX4TL2jIPwhBfxYw++pbtg7BLRO2HxE69GR0nxw+7Uf3uJzOGbMsl+ZUQ==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.1.tgz",
+      "integrity": "sha512-B4urIlIb+I95NkKeCt3Ygpor1D0x5RMezuFyCFp6DYXshUaT1TbiJcW1FgA+gfwlquNzT1AMvEbi96YLnsOg3w==",
       "dev": true
     },
     "@stylelint/postcss-css-in-js": {
diff --git a/core/package.json b/core/package.json
index 85bd531dd0..37bf8a346b 100644
--- a/core/package.json
+++ b/core/package.json
@@ -40,7 +40,7 @@
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/sass": "1.3.2",
-    "@stencil/vue-output-target": "0.3.0",
+    "@stencil/vue-output-target": "^0.4.1",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "5.4.3",
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index d0b5159a70..c44e94a3b9 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -91,13 +91,15 @@ export const config: Config = {
         {
           elements: ['ion-checkbox', 'ion-toggle'],
           targetAttr: 'checked',
-          event: 'v-ionChange',
+          // TODO Ionic v6 remove in favor of v-ion-change
+          event: ['v-ionChange', 'v-ion-change'],
           externalEvent: 'ionChange'
         },
         {
           elements: ['ion-datetime', 'ion-input', 'ion-radio-group', 'ion-radio', 'ion-range', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-textarea'],
           targetAttr: 'value',
-          event: 'v-ionChange',
+          // TODO Ionic v6 remove in favor of v-ion-change
+          event: ['v-ionChange', 'v-ion-change'],
           externalEvent: 'ionChange'
         }
       ],
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 17b7ef4d4b..dcf65638b0 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -9,12 +9,13 @@
       "version": "5.5.4",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "file:../../core",
+        "@ionic/core": "5.5.4",
         "ionicons": "^5.1.2"
       },
       "devDependencies": {
         "@stencil/core": "^1.17.0",
         "change-case": "^4.1.1",
+        "fs-extra": "^9.1.0",
         "rimraf": "^3.0.2",
         "rollup": "^2.32.1",
         "typescript": "^4.0.5",
@@ -22,43 +23,6 @@
         "vue-router": "^4.0.0-rc.4"
       }
     },
-    "../../core": {
-      "version": "5.5.3",
-      "license": "MIT",
-      "dependencies": {
-        "ionicons": "^5.1.2",
-        "tslib": "^1.10.0"
-      },
-      "devDependencies": {
-        "@rollup/plugin-node-resolve": "^8.4.0",
-        "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/core": "2.1.2",
-        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.3.0",
-        "@types/jest": "^26.0.10",
-        "@types/node": "^14.6.0",
-        "@types/puppeteer": "3.0.1",
-        "@types/swiper": "5.4.0",
-        "aws-sdk": "^2.738.0",
-        "clean-css-cli": "^4.1.11",
-        "domino": "^2.1.6",
-        "fs-extra": "^9.0.1",
-        "jest": "^26.4.1",
-        "jest-cli": "^26.4.1",
-        "np": "^6.4.0",
-        "pixelmatch": "4.0.2",
-        "puppeteer": "^5.2.1",
-        "rollup": "^2.26.4",
-        "sass": "^1.26.10",
-        "stylelint": "^13.6.1",
-        "stylelint-order": "^4.1.0",
-        "swiper": "5.4.1",
-        "tslint": "^6.1.3",
-        "tslint-ionic-rules": "0.0.21",
-        "tslint-react": "^5.0.0",
-        "typescript": "^4.0.5"
-      }
-    },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
@@ -89,8 +53,13 @@
       }
     },
     "node_modules/@ionic/core": {
-      "resolved": "../../core",
-      "link": true
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz",
+      "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==",
+      "dependencies": {
+        "ionicons": "^5.1.2",
+        "tslib": "^1.10.0"
+      }
     },
     "node_modules/@stencil/core": {
       "version": "1.17.3",
@@ -180,6 +149,15 @@
       "integrity": "sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==",
       "dev": true
     },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -276,6 +254,21 @@
       "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==",
       "dev": true
     },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -312,6 +305,12 @@
         "node": "*"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "dev": true
+    },
     "node_modules/header-case": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.3.tgz",
@@ -343,6 +342,19 @@
       "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.1.2.tgz",
       "integrity": "sha512-zO7ZgbBbXhpA7cXO2rDzTNdcCqErjg1Sprq/ossTvaiV0MriOjRE7JO3EGvYjDTPzF9YALGpvLXqCgsRT0tprA=="
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
@@ -500,8 +512,7 @@
     "node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/typescript": {
       "version": "4.0.5",
@@ -516,6 +527,15 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/upper-case": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.1.tgz",
@@ -583,37 +603,12 @@
       }
     },
     "@ionic/core": {
-      "version": "file:../../core",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz",
+      "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==",
       "requires": {
-        "@rollup/plugin-node-resolve": "^8.4.0",
-        "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/core": "2.1.2",
-        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.3.0",
-        "@types/jest": "^26.0.10",
-        "@types/node": "^14.6.0",
-        "@types/puppeteer": "3.0.1",
-        "@types/swiper": "5.4.0",
-        "aws-sdk": "^2.738.0",
-        "clean-css-cli": "^4.1.11",
-        "domino": "^2.1.6",
-        "fs-extra": "^9.0.1",
         "ionicons": "^5.1.2",
-        "jest": "^26.4.1",
-        "jest-cli": "^26.4.1",
-        "np": "^6.4.0",
-        "pixelmatch": "4.0.2",
-        "puppeteer": "^5.2.1",
-        "rollup": "^2.26.4",
-        "sass": "^1.26.10",
-        "stylelint": "^13.6.1",
-        "stylelint-order": "^4.1.0",
-        "swiper": "5.4.1",
-        "tslib": "^1.10.0",
-        "tslint": "^6.1.3",
-        "tslint-ionic-rules": "0.0.21",
-        "tslint-react": "^5.0.0",
-        "typescript": "^4.0.5"
+        "tslib": "^1.10.0"
       }
     },
     "@stencil/core": {
@@ -692,6 +687,12 @@
       "integrity": "sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==",
       "dev": true
     },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -788,6 +789,18 @@
       "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==",
       "dev": true
     },
+    "fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "requires": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -815,6 +828,12 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "dev": true
+    },
     "header-case": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.3.tgz",
@@ -846,6 +865,16 @@
       "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.1.2.tgz",
       "integrity": "sha512-zO7ZgbBbXhpA7cXO2rDzTNdcCqErjg1Sprq/ossTvaiV0MriOjRE7JO3EGvYjDTPzF9YALGpvLXqCgsRT0tprA=="
     },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
@@ -979,8 +1008,7 @@
     "tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "typescript": {
       "version": "4.0.5",
@@ -988,6 +1016,12 @@
       "integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==",
       "dev": true
     },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true
+    },
     "upper-case": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.1.tgz",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index a5e61748e5..e6ed0349df 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -49,6 +49,7 @@
   "devDependencies": {
     "@stencil/core": "^1.17.0",
     "change-case": "^4.1.1",
+    "fs-extra": "^9.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.32.1",
     "typescript": "^4.0.5",
diff --git a/packages/vue/src/ionic-vue.ts b/packages/vue/src/ionic-vue.ts
index 0e166d86fe..fd3d196d45 100644
--- a/packages/vue/src/ionic-vue.ts
+++ b/packages/vue/src/ionic-vue.ts
@@ -2,22 +2,39 @@ import { App, Plugin } from 'vue';
 import { IonicConfig, setupConfig } from '@ionic/core';
 import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
 
+const needsKebabCase = (version: string) => !['3.0.0', '3.0.1', '3.0.2', '3.0.3', '3.0.4', '3.0.5'].includes(version);
+
 /**
- * We need to make sure that the web component fires an event
- * that will not conflict with the user's @ionChange binding,
- * otherwise the binding's callback will fire before any
- * v-model values have been updated.
+* We need to make sure that the web component fires an event
+* that will not conflict with the user's @ionChange binding,
+* otherwise the binding's callback will fire before any
+* v-model values have been updated.
+*/
+const toLowerCase = (eventName: string) => eventName === 'ionChange' ? 'v-ionchange' : eventName.toLowerCase();
+const toKebabCase = (eventName: string) => eventName === 'ionChange' ? 'v-ion-change' : eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+
+/**
+ * Vue 3.0.6 fixed a bug where events on custom elements
+ * were always converted to lower case, so "ionRefresh"
+ * became "ionRefresh". We need to account for the old
+ * issue as well as the new behavior where "ionRefresh"
+ * is converted to "ion-refresh".
+ * See https://github.com/vuejs/vue-next/pull/2847
  */
-const transformEventName = (eventName: string) => {
-  return eventName === 'ionChange' ? 'v-ionchange' : eventName.toLowerCase();
-}
-const ael = (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(transformEventName(eventName), cb, opts);
-const rel = (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(transformEventName(eventName), cb, opts);
+const getHelperFunctions = (needsKebabCase: boolean = true) => {
+  const conversionFn = (needsKebabCase) ? toKebabCase : toLowerCase;
+  return {
+      ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(conversionFn(eventName), cb, opts),
+      rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(conversionFn(eventName), cb, opts),
+      ce: (eventName: string, opts: any) => new CustomEvent(conversionFn(eventName), opts)
+  };
+};
 
 export const IonicVue: Plugin = {
 
-  async install(_app: App, config: IonicConfig = {}) {
+  async install(app: App, config: IonicConfig = {}) {
     if (typeof (window as any) !== 'undefined') {
+      const { ael, rel, ce } = getHelperFunctions(needsKebabCase(app.version));
       setupConfig({
         ...config,
         _ael: ael,
@@ -26,7 +43,7 @@ export const IonicVue: Plugin = {
       await applyPolyfills();
       await defineCustomElements(window, {
         exclude: ['ion-tabs'],
-        ce: (eventName: string, opts: any) => new CustomEvent(transformEventName(eventName), opts),
+        ce,
         ael,
         rel
       } as any);
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index a1f79c4db2..bdcd674465 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -97,7 +97,10 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-c
 ],
 {
   "modelProp": "checked",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -181,7 +184,10 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-d
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -296,7 +302,10 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -448,7 +457,10 @@ export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio>('ion-radio',
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -461,7 +473,10 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup>('i
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -486,7 +501,10 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range',
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -558,7 +576,10 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -575,7 +596,10 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-seg
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -588,7 +612,10 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -613,7 +640,10 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-selec
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -706,7 +736,10 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-t
 ],
 {
   "modelProp": "value",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
@@ -734,7 +767,10 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggl
 ],
 {
   "modelProp": "checked",
-  "modelUpdateEvent": "v-ionChange",
+  "modelUpdateEvent": [
+    "v-ionChange",
+    "v-ion-change"
+  ],
   "externalModelUpdateEvent": "ionChange"
 });
 
diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts
index e9a994c9a4..cdd75367ab 100644
--- a/packages/vue/src/vue-component-lib/utils.ts
+++ b/packages/vue/src/vue-component-lib/utils.ts
@@ -16,7 +16,7 @@ interface NavManager<T = any> {
 
 interface ComponentOptions {
   modelProp?: string;
-  modelUpdateEvent?: string;
+  modelUpdateEvent?: string | string[];
   externalModelUpdateEvent?: string;
 }
 
@@ -55,19 +55,22 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
     const onVnodeBeforeMount = (vnode: VNode) => {
       // Add a listener to tell Vue to update the v-model
       if (vnode.el) {
-        vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
-          modelPropValue = (e?.target as any)[modelProp];
-          emit(UPDATE_VALUE_EVENT, modelPropValue);
+        const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+        eventsNames.forEach((eventName: string) => {
+          vnode.el.addEventListener(eventName.toLowerCase(), (e: Event) => {
+            modelPropValue = (e?.target as any)[modelProp];
+            emit(UPDATE_VALUE_EVENT, modelPropValue);
 
-          /**
-           * We need to emit the change event here
-           * rather than on the web component to ensure
-           * that any v-model bindings have been updated.
-           * Otherwise, the developer will listen on the
-           * native web component, but the v-model will
-           * not have been updated yet.
-           */
-          emit(externalModelUpdateEvent, e);
+            /**
+             * We need to emit the change event here
+             * rather than on the web component to ensure
+             * that any v-model bindings have been updated.
+             * Otherwise, the developer will listen on the
+             * native web component, but the v-model will
+             * not have been updated yet.
+             */
+            emit(externalModelUpdateEvent, e);
+          });
         });
       }
     };

From 0101a5fce205b26b429c25b8f928d3d25f646b70 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 26 Feb 2021 13:19:24 -0500
Subject: [PATCH 11/12] 5.5.5

---
 CHANGELOG.md                              |   9 ++
 angular/package-lock.json                 | 129 ++++++++-------------
 angular/package.json                      |   4 +-
 core/package-lock.json                    |   4 +-
 core/package.json                         |   2 +-
 docs/package.json                         |   2 +-
 packages/angular-server/package-lock.json | 132 +++++++++-------------
 packages/angular-server/package.json      |   4 +-
 packages/react-router/package.json        |  10 +-
 packages/react/package.json               |   4 +-
 packages/vue-router/package-lock.json     |  23 ++--
 packages/vue-router/package.json          |   2 +-
 packages/vue/package-lock.json            |   8 +-
 packages/vue/package.json                 |   4 +-
 14 files changed, 137 insertions(+), 200 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1cb51fe181..cb3f266c13 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## [5.5.5](https://github.com/ionic-team/ionic/compare/v5.5.4...v5.5.5) (2021-02-26)
+
+
+### Bug Fixes
+
+* **vue:** account for event name changes in vue 3.0.6+ ([#22980](https://github.com/ionic-team/ionic/issues/22980)) ([7dd2e6d](https://github.com/ionic-team/ionic/commit/7dd2e6d287b47cca758e1d4a71928dd3dc9ac24d)), closes [#22977](https://github.com/ionic-team/ionic/issues/22977)
+
+
+
 ## [5.5.4](https://github.com/ionic-team/ionic/compare/v5.5.3...v5.5.4) (2021-02-04)
 
 
diff --git a/angular/package-lock.json b/angular/package-lock.json
index 3a27f20ddb..99181eb548 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "5.5.4",
+      "version": "5.5.5",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "file:../core",
+        "@ionic/core": "5.5.4",
         "tslib": "^1.9.3"
       },
       "devDependencies": {
@@ -42,43 +42,6 @@
         "zone.js": ">=0.8.26"
       }
     },
-    "../core": {
-      "version": "5.5.3",
-      "license": "MIT",
-      "dependencies": {
-        "ionicons": "^5.1.2",
-        "tslib": "^1.10.0"
-      },
-      "devDependencies": {
-        "@rollup/plugin-node-resolve": "^8.4.0",
-        "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/core": "2.1.2",
-        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.3.0",
-        "@types/jest": "^26.0.10",
-        "@types/node": "^14.6.0",
-        "@types/puppeteer": "3.0.1",
-        "@types/swiper": "5.4.0",
-        "aws-sdk": "^2.738.0",
-        "clean-css-cli": "^4.1.11",
-        "domino": "^2.1.6",
-        "fs-extra": "^9.0.1",
-        "jest": "^26.4.1",
-        "jest-cli": "^26.4.1",
-        "np": "^6.4.0",
-        "pixelmatch": "4.0.2",
-        "puppeteer": "^5.2.1",
-        "rollup": "^2.26.4",
-        "sass": "^1.26.10",
-        "stylelint": "^13.6.1",
-        "stylelint-order": "^4.1.0",
-        "swiper": "5.4.1",
-        "tslint": "^6.1.3",
-        "tslint-ionic-rules": "0.0.21",
-        "tslint-react": "^5.0.0",
-        "typescript": "^4.0.5"
-      }
-    },
     "node_modules/@angular-devkit/core": {
       "version": "8.3.17",
       "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.3.17.tgz",
@@ -241,8 +204,13 @@
       }
     },
     "node_modules/@ionic/core": {
-      "resolved": "../core",
-      "link": true
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz",
+      "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==",
+      "dependencies": {
+        "ionicons": "^5.1.2",
+        "tslib": "^1.10.0"
+      }
     },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "11.1.0",
@@ -322,6 +290,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/@stencil/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-gU6+Yyd6O0KrCSS/O6j8KKqmRo+/Dcs2fI0+APCpbAWK+nqhwDISpdnSEfGDCLMoAC08XOZCycBRk2K1VGnEcg==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -945,7 +925,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -2047,6 +2026,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/ionicons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.0.tgz",
+      "integrity": "sha512-0DUHTeoIrGSY+KNyNDaQW7v5+mDstjSkjx8dzT925kXKYBDrN3sGs8kUcSSQbTK132U4CbgDEZkn7FDUa9x8Qw==",
+      "dependencies": {
+        "@stencil/core": "^2.4.0"
+      }
+    },
     "node_modules/is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
@@ -2429,13 +2416,7 @@
       "integrity": "sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q==",
       "dev": true,
       "dependencies": {
-        "errno": "^0.1.1",
         "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "make-dir": "^2.1.0",
-        "mime": "^1.4.1",
-        "native-request": "^1.0.5",
-        "source-map": "~0.6.0",
         "tslib": "^1.10.0"
       },
       "bin": {
@@ -2818,7 +2799,6 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -2959,9 +2939,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.7.5.tgz",
       "integrity": "sha512-xQSM8uzhgtF6tTnTVEvOQThrcG3LPUP3T/4l4EukzDp0kbTY1QRDuXjiwtYzs9odKj9Bj/PccRG6viFfS7DmCQ==",
       "dev": true,
-      "dependencies": {
-        "fsevents": "~2.1.2"
-      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -5173,37 +5150,12 @@
       }
     },
     "@ionic/core": {
-      "version": "file:../core",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz",
+      "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==",
       "requires": {
-        "@rollup/plugin-node-resolve": "^8.4.0",
-        "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/core": "2.1.2",
-        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.3.0",
-        "@types/jest": "^26.0.10",
-        "@types/node": "^14.6.0",
-        "@types/puppeteer": "3.0.1",
-        "@types/swiper": "5.4.0",
-        "aws-sdk": "^2.738.0",
-        "clean-css-cli": "^4.1.11",
-        "domino": "^2.1.6",
-        "fs-extra": "^9.0.1",
         "ionicons": "^5.1.2",
-        "jest": "^26.4.1",
-        "jest-cli": "^26.4.1",
-        "np": "^6.4.0",
-        "pixelmatch": "4.0.2",
-        "puppeteer": "^5.2.1",
-        "rollup": "^2.26.4",
-        "sass": "^1.26.10",
-        "stylelint": "^13.6.1",
-        "stylelint-order": "^4.1.0",
-        "swiper": "5.4.1",
-        "tslib": "^1.10.0",
-        "tslint": "^6.1.3",
-        "tslint-ionic-rules": "0.0.21",
-        "tslint-react": "^5.0.0",
-        "typescript": "^4.0.5"
+        "tslib": "^1.10.0"
       }
     },
     "@rollup/plugin-commonjs": {
@@ -5276,6 +5228,11 @@
       "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
       "dev": true
     },
+    "@stencil/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-gU6+Yyd6O0KrCSS/O6j8KKqmRo+/Dcs2fI0+APCpbAWK+nqhwDISpdnSEfGDCLMoAC08XOZCycBRk2K1VGnEcg=="
+    },
     "@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -6690,6 +6647,14 @@
       "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
       "dev": true
     },
+    "ionicons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.0.tgz",
+      "integrity": "sha512-0DUHTeoIrGSY+KNyNDaQW7v5+mDstjSkjx8dzT925kXKYBDrN3sGs8kUcSSQbTK132U4CbgDEZkn7FDUa9x8Qw==",
+      "requires": {
+        "@stencil/core": "^2.4.0"
+      }
+    },
     "is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
diff --git a/angular/package.json b/angular/package.json
index c7a610b779..2cef7e5356 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -42,7 +42,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "5.5.4",
+    "@ionic/core": "5.5.5",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
diff --git a/core/package-lock.json b/core/package-lock.json
index 177725af1d..ee71247807 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "5.5.4",
+      "version": "5.5.5",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.4.0",
diff --git a/core/package.json b/core/package.json
index 37bf8a346b..d25db533e8 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
diff --git a/docs/package.json b/docs/package.json
index a8c22e1875..f936084359 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 6dcf1059af..609733b7cd 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/angular-server",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "5.5.4",
+      "version": "5.5.5",
       "license": "MIT",
       "devDependencies": {
         "@angular/animations": "8.2.13",
@@ -16,7 +16,7 @@
         "@angular/core": "8.2.13",
         "@angular/platform-browser": "8.2.13",
         "@angular/platform-server": "8.2.13",
-        "@ionic/core": "file:../../core",
+        "@ionic/core": "5.5.4",
         "ng-packagr": "5.7.1",
         "tslint": "^5.12.1",
         "tslint-ionic-rules": "0.0.21",
@@ -31,44 +31,6 @@
         "zone.js": ">=0.8.26"
       }
     },
-    "../../core": {
-      "version": "5.5.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ionicons": "^5.1.2",
-        "tslib": "^1.10.0"
-      },
-      "devDependencies": {
-        "@rollup/plugin-node-resolve": "^8.4.0",
-        "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/core": "2.1.2",
-        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.3.0",
-        "@types/jest": "^26.0.10",
-        "@types/node": "^14.6.0",
-        "@types/puppeteer": "3.0.1",
-        "@types/swiper": "5.4.0",
-        "aws-sdk": "^2.738.0",
-        "clean-css-cli": "^4.1.11",
-        "domino": "^2.1.6",
-        "fs-extra": "^9.0.1",
-        "jest": "^26.4.1",
-        "jest-cli": "^26.4.1",
-        "np": "^6.4.0",
-        "pixelmatch": "4.0.2",
-        "puppeteer": "^5.2.1",
-        "rollup": "^2.26.4",
-        "sass": "^1.26.10",
-        "stylelint": "^13.6.1",
-        "stylelint-order": "^4.1.0",
-        "swiper": "5.4.1",
-        "tslint": "^6.1.3",
-        "tslint-ionic-rules": "0.0.21",
-        "tslint-react": "^5.0.0",
-        "typescript": "^4.0.5"
-      }
-    },
     "node_modules/@angular/animations": {
       "version": "8.2.13",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.2.13.tgz",
@@ -175,8 +137,14 @@
       }
     },
     "node_modules/@ionic/core": {
-      "resolved": "../../core",
-      "link": true
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz",
+      "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==",
+      "dev": true,
+      "dependencies": {
+        "ionicons": "^5.1.2",
+        "tslib": "^1.10.0"
+      }
     },
     "node_modules/@sindresorhus/is": {
       "version": "0.14.0",
@@ -187,6 +155,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/@stencil/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-gU6+Yyd6O0KrCSS/O6j8KKqmRo+/Dcs2fI0+APCpbAWK+nqhwDISpdnSEfGDCLMoAC08XOZCycBRk2K1VGnEcg==",
+      "dev": true,
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -697,7 +678,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -2423,6 +2403,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/ionicons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.0.tgz",
+      "integrity": "sha512-0DUHTeoIrGSY+KNyNDaQW7v5+mDstjSkjx8dzT925kXKYBDrN3sGs8kUcSSQbTK132U4CbgDEZkn7FDUa9x8Qw==",
+      "dev": true,
+      "dependencies": {
+        "@stencil/core": "^2.4.0"
+      }
+    },
     "node_modules/is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
@@ -2808,12 +2797,7 @@
       "integrity": "sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q==",
       "dev": true,
       "dependencies": {
-        "errno": "^0.1.1",
         "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "make-dir": "^2.1.0",
-        "mime": "^1.4.1",
-        "native-request": "^1.0.5",
         "source-map": "~0.6.0",
         "tslib": "^1.10.0"
       },
@@ -3246,7 +3230,6 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -5434,37 +5417,13 @@
       }
     },
     "@ionic/core": {
-      "version": "file:../../core",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz",
+      "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==",
+      "dev": true,
       "requires": {
-        "@rollup/plugin-node-resolve": "^8.4.0",
-        "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/core": "2.1.2",
-        "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.3.0",
-        "@types/jest": "^26.0.10",
-        "@types/node": "^14.6.0",
-        "@types/puppeteer": "3.0.1",
-        "@types/swiper": "5.4.0",
-        "aws-sdk": "^2.738.0",
-        "clean-css-cli": "^4.1.11",
-        "domino": "^2.1.6",
-        "fs-extra": "^9.0.1",
         "ionicons": "^5.1.2",
-        "jest": "^26.4.1",
-        "jest-cli": "^26.4.1",
-        "np": "^6.4.0",
-        "pixelmatch": "4.0.2",
-        "puppeteer": "^5.2.1",
-        "rollup": "^2.26.4",
-        "sass": "^1.26.10",
-        "stylelint": "^13.6.1",
-        "stylelint-order": "^4.1.0",
-        "swiper": "5.4.1",
-        "tslib": "^1.10.0",
-        "tslint": "^6.1.3",
-        "tslint-ionic-rules": "0.0.21",
-        "tslint-react": "^5.0.0",
-        "typescript": "^4.0.5"
+        "tslib": "^1.10.0"
       }
     },
     "@sindresorhus/is": {
@@ -5473,6 +5432,12 @@
       "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
       "dev": true
     },
+    "@stencil/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-gU6+Yyd6O0KrCSS/O6j8KKqmRo+/Dcs2fI0+APCpbAWK+nqhwDISpdnSEfGDCLMoAC08XOZCycBRk2K1VGnEcg==",
+      "dev": true
+    },
     "@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -7357,6 +7322,15 @@
       "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
       "dev": true
     },
+    "ionicons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.0.tgz",
+      "integrity": "sha512-0DUHTeoIrGSY+KNyNDaQW7v5+mDstjSkjx8dzT925kXKYBDrN3sGs8kUcSSQbTK132U4CbgDEZkn7FDUa9x8Qw==",
+      "dev": true,
+      "requires": {
+        "@stencil/core": "^2.4.0"
+      }
+    },
     "is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 0134282494..874bb39bf4 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -49,7 +49,7 @@
     "@angular/core": "8.2.13",
     "@angular/platform-browser": "8.2.13",
     "@angular/platform-server": "8.2.13",
-    "@ionic/core": "5.5.4",
+    "@ionic/core": "5.5.5",
     "ng-packagr": "5.7.1",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index df46804d85..e8cb352827 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -39,16 +39,16 @@
     "tslib": "*"
   },
   "peerDependencies": {
-    "@ionic/core": "5.5.4",
-    "@ionic/react": "5.5.4",
+    "@ionic/core": "5.5.5",
+    "@ionic/react": "5.5.5",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
-    "@ionic/core": "5.5.4",
-    "@ionic/react": "5.5.4",
+    "@ionic/core": "5.5.5",
+    "@ionic/react": "5.5.5",
     "@rollup/plugin-node-resolve": "^8.1.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
diff --git a/packages/react/package.json b/packages/react/package.json
index b495b19eb4..8848fd6698 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,7 +39,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "5.5.4",
+    "@ionic/core": "5.5.5",
     "ionicons": "^5.1.2",
     "tslib": "*"
   },
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index d4377c0248..121a42168c 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,16 +1,13 @@
 {
   "name": "@ionic/vue-router",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "5.5.4",
+      "version": "5.5.5",
       "license": "MIT",
-      "dependencies": {
-        "@ionic/core": "file:../../core"
-      },
       "devDependencies": {
         "@ionic/vue": "5.4.1",
         "@types/jest": "^26.0.13",
@@ -25,7 +22,9 @@
       }
     },
     "../../core": {
-      "version": "5.4.1",
+      "name": "@ionic/core",
+      "version": "5.5.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ionicons": "^5.1.2",
@@ -36,7 +35,7 @@
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/core": "2.1.2",
         "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.1.8",
+        "@stencil/vue-output-target": "^0.4.1",
         "@types/jest": "^26.0.10",
         "@types/node": "^14.6.0",
         "@types/puppeteer": "3.0.1",
@@ -908,7 +907,6 @@
         "jest-resolve": "^26.6.2",
         "jest-util": "^26.6.2",
         "jest-worker": "^26.6.2",
-        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -2324,8 +2322,7 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
+        "optionator": "^0.8.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -3924,7 +3921,6 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.6.2",
@@ -6235,9 +6231,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.33.3.tgz",
       "integrity": "sha512-RpayhPTe4Gu/uFGCmk7Gp5Z9Qic2VsqZ040G+KZZvsZYdcuWaJg678JeDJJvJeEQXminu24a2au+y92CUWVd+w==",
       "dev": true,
-      "dependencies": {
-        "fsevents": "~2.1.2"
-      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -8251,7 +8244,7 @@
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/core": "2.1.2",
         "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "0.1.8",
+        "@stencil/vue-output-target": "^0.4.1",
         "@types/jest": "^26.0.10",
         "@types/node": "^14.6.0",
         "@types/puppeteer": "3.0.1",
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index d8443ee54e..1874cbe846 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index dcf65638b0..d2187be7a7 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/vue",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "5.5.4",
+      "version": "5.5.5",
       "license": "MIT",
       "dependencies": {
         "@ionic/core": "5.5.4",
@@ -348,7 +348,6 @@
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dev": true,
       "dependencies": {
-        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -457,9 +456,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.33.1.tgz",
       "integrity": "sha512-uY4O/IoL9oNW8MMcbA5hcOaz6tZTMIh7qJHx/tzIJm+n1wLoY38BLn6fuy7DhR57oNFLMbDQtDeJoFURt5933w==",
       "dev": true,
-      "dependencies": {
-        "fsevents": "~2.1.2"
-      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
diff --git a/packages/vue/package.json b/packages/vue/package.json
index e6ed0349df..be7a987320 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "lint": "echo add linter",
@@ -57,7 +57,7 @@
     "vue-router": "^4.0.0-rc.4"
   },
   "dependencies": {
-    "@ionic/core": "5.5.4",
+    "@ionic/core": "5.5.5",
     "ionicons": "^5.1.2"
   },
   "vetur": {

From fb631742af2bd71985dd89a1547f34bf01d1b534 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 26 Feb 2021 14:26:06 -0500
Subject: [PATCH 12/12] chore(): run build

---
 core/package-lock.json | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index ee71247807..af09a28e5f 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1013,17 +1013,12 @@
       "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==",
       "dev": true,
       "dependencies": {
-<<<<<<< HEAD
-        "@jest/console": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
-=======
         "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "^26.3.0",
+        "@jest/console": "^26.6.2",
         "@jest/test-result": "^26.3.0",
         "@jest/transform": "^26.3.0",
-        "@jest/types": "^26.3.0",
+        "@jest/types": "^26.6.2",
+        "@types/istanbul-lib-coverage": "^2.0.0",
         "chalk": "^4.0.0",
         "collect-v8-coverage": "^1.0.0",
         "exit": "^0.1.2",
@@ -1043,7 +1038,6 @@
         "string-length": "^4.0.1",
         "terminal-link": "^2.0.0",
         "v8-to-istanbul": "^5.0.1"
->>>>>>> 594be7db7... fix(vue): account for event name changes in vue 3.0.6+ (#22980)
       },
       "engines": {
         "node": ">= 10.14.2"
@@ -14616,10 +14610,31 @@
       "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==",
       "dev": true,
       "requires": {
+        "@bcoe/v8-coverage": "^0.2.3",
         "@jest/console": "^26.6.2",
+        "@jest/test-result": "^26.3.0",
+        "@jest/transform": "^26.3.0",
         "@jest/types": "^26.6.2",
         "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.2",
+        "graceful-fs": "^4.2.4",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^4.0.3",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.0.2",
+        "jest-haste-map": "^26.3.0",
+        "jest-resolve": "^26.4.0",
+        "jest-util": "^26.3.0",
+        "jest-worker": "^26.3.0",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.0",
+        "string-length": "^4.0.1",
+        "terminal-link": "^2.0.0",
+        "v8-to-istanbul": "^5.0.1"
       },
       "dependencies": {
         "@jest/types": {