merge release-6.3.9

Release 6.3.9

.github/workflows/actions/publish-npm/action.yml

@@ -21,11 +21,11 @@ runs:
       with:
         node-version: 16.x
     - name: Install Dependencies
-      run: lerna bootstrap --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
+      run: lerna bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
       shell: bash
       working-directory: ${{ inputs.working-directory }}
     - name: Update Version
-      run: npm version ${{ inputs.version }}
+      run: lerna version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version
       shell: bash
       working-directory: ${{ inputs.working-directory }}
     - name: Run Build
@@ -39,6 +39,6 @@ runs:
       env:
         NPM_TOKEN: ${{ inputs.token }}
     - name: Publish to NPM
-      run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }}  --git-tag-version false
+      run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }}
       shell: bash
       working-directory: ${{ inputs.working-directory }}

.github/workflows/release-ionic.yml

@@ -140,6 +140,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+    - name: Restore @ionic/core built cache
+      uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
     - name: Restore @ionic/angular built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -160,6 +166,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+    - name: Restore @ionic/core built cache
+      uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
     - name: Restore @ionic/react built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -179,6 +191,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+    - name: Restore @ionic/core built cache
+      uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
     - name: Restore @ionic/vue built cache
       uses: ./.github/workflows/actions/download-archive
       with:

CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.9](https://github.com/ionic-team/ionic-framework/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+
+### Bug Fixes
+
+* **button:** fill can be set to undefined ([#26339](https://github.com/ionic-team/ionic-framework/issues/26339)) ([2fe23d9](https://github.com/ionic-team/ionic-framework/commit/2fe23d9d46c3593843c781c57340332e5a86fd64)), closes [#25886](https://github.com/ionic-team/ionic-framework/issues/25886)
+* **input:** clear icon can be styled ([#26354](https://github.com/ionic-team/ionic-framework/issues/26354)) ([ccaff8d](https://github.com/ionic-team/ionic-framework/commit/ccaff8d0dc66f8adc9cde838c084629391e4200d)), closes [#19178](https://github.com/ionic-team/ionic-framework/issues/19178) [#17168](https://github.com/ionic-team/ionic-framework/issues/17168)
+* **reorder:** items animate once in firefox ([#26326](https://github.com/ionic-team/ionic-framework/issues/26326)) ([7ae8117](https://github.com/ionic-team/ionic-framework/commit/7ae81172844659d7f4581956ce17e5324f73beef)), closes [#21182](https://github.com/ionic-team/ionic-framework/issues/21182)
+* **segment:** segment in toolbar uses correct contrast ([#26353](https://github.com/ionic-team/ionic-framework/issues/26353)) ([5a243cc](https://github.com/ionic-team/ionic-framework/commit/5a243ccebc8e27bef6eb1ed2f797a0c1166199bf)), closes [#26350](https://github.com/ionic-team/ionic-framework/issues/26350)
+
+
+
+
+
 ## [6.3.8](https://github.com/ionic-team/ionic-framework/compare/v6.3.7...v6.3.8) (2022-11-22)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.9](https://github.com/ionic-team/ionic/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.3.8](https://github.com/ionic-team/ionic/compare/v6.3.7...v6.3.8) (2022-11-22)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.3.8",
+      "version": "6.3.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.3.8",
+        "@ionic/core": "^6.3.9",
         "ionicons": "^6.0.4",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
@@ -1024,9 +1024,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",
@@ -7940,9 +7940,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "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": "^6.3.8",
+    "@ionic/core": "^6.3.9",
     "ionicons": "^6.0.4",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"

core/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.9](https://github.com/ionic-team/ionic/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+
+### Bug Fixes
+
+* **button:** fill can be set to undefined ([#26339](https://github.com/ionic-team/ionic/issues/26339)) ([2fe23d9](https://github.com/ionic-team/ionic/commit/2fe23d9d46c3593843c781c57340332e5a86fd64)), closes [#25886](https://github.com/ionic-team/ionic/issues/25886)
+* **input:** clear icon can be styled ([#26354](https://github.com/ionic-team/ionic/issues/26354)) ([ccaff8d](https://github.com/ionic-team/ionic/commit/ccaff8d0dc66f8adc9cde838c084629391e4200d)), closes [#19178](https://github.com/ionic-team/ionic/issues/19178) [#17168](https://github.com/ionic-team/ionic/issues/17168)
+* **reorder:** items animate once in firefox ([#26326](https://github.com/ionic-team/ionic/issues/26326)) ([7ae8117](https://github.com/ionic-team/ionic/commit/7ae81172844659d7f4581956ce17e5324f73beef)), closes [#21182](https://github.com/ionic-team/ionic/issues/21182)
+* **segment:** segment in toolbar uses correct contrast ([#26353](https://github.com/ionic-team/ionic/issues/26353)) ([5a243cc](https://github.com/ionic-team/ionic/commit/5a243ccebc8e27bef6eb1ed2f797a0c1166199bf)), closes [#26350](https://github.com/ionic-team/ionic/issues/26350)
+
+
+
+
+
 ## [6.3.8](https://github.com/ionic-team/ionic/compare/v6.3.7...v6.3.8) (2022-11-22)
 
 

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.3.8",
+      "version": "6.3.9",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.18.0",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/src/components/button/button.tsx

@@ -272,7 +272,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
             target,
           };
     let fill = this.fill;
-    if (fill === undefined) {
+    /**
+     * We check both undefined and null to
+     * work around https://github.com/ionic-team/stencil/issues/3586.
+     */
+    if (fill == null) {
       fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
     }
     return (

core/src/components/button/test/basic/button.e2e.ts

@@ -9,6 +9,25 @@ test.describe('button: basic', () => {
 
     expect(await page.screenshot()).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
   });
+  test('should correctly set fill to undefined', async ({ page, skip }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25886',
+    });
+    skip.rtl();
+    skip.mode('ios', 'This behavior does not differ across modes');
+    await page.setContent(`
+      <ion-button fill="outline"></ion-button>
+    `);
+
+    const button = page.locator('ion-button');
+    await expect(button).toHaveClass(/button-outline/);
+
+    await button.evaluate((el: HTMLIonButtonElement) => (el.fill = undefined));
+    await page.waitForChanges();
+
+    await expect(button).toHaveClass(/button-solid/);
+  });
 });
 
 test.describe('button: ripple effect', () => {

core/src/components/icon/test/basic/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('icon: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/icon/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/icon/test/basic/icon.e2e.ts

@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('icon: basic', () => {
+  test('should render icon when passed', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+
+    await page.setContent(`
+      <ion-icon name="star"></ion-icon>
+    `);
+
+    const icon = page.locator('ion-icon');
+    expect(await icon.screenshot()).toMatchSnapshot(`icon-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/icon/test/dir/e2e.ts

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('icon: dir', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/icon/test/dir?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('icon: dir, rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/icon/test/dir?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/icon/test/dir/icon.e2e.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('icon: rtl', () => {
+  test('should flip icon when rtl is active', async ({ page, skip }) => {
+    skip.mode('ios');
+
+    await page.setContent(`
+      <ion-icon name="cut" flip-rtl="true"></ion-icon>
+    `);
+
+    const icon = page.locator('ion-icon');
+    expect(await icon.screenshot()).toMatchSnapshot(`icon-flip-${page.getSnapshotSettings()}.png`);
+  });
+  test('should not flip icon when rtl is active', async ({ page, skip }) => {
+    skip.mode('ios');
+
+    await page.setContent(`
+      <ion-icon name="cut" flip-rtl="false"></ion-icon>
+    `);
+
+    const icon = page.locator('ion-icon');
+    expect(await icon.screenshot()).toMatchSnapshot(`icon-no-flip-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/icon/test/items/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('icon: items', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/icon/test/items?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/icon/test/items/index.html

@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Icon - Items</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <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>
-      profile-modal {
-        background: red;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Icon - Items</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-list>
-          <ion-item>
-            <ion-icon id="dynamicColor" name="home" slot="start"></ion-icon>
-            <code> dynamicColor name="home" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="home" is-active="true" slot="start"></ion-icon>
-            <code> name="home" is-active="true" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon id="dynamicProp" is-active="false" slot="start"></ion-icon>
-            <code> dynamicProp is-active="false" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon id="dynamicAttr" is-active="false" slot="start"></ion-icon>
-            <code> dynamicAttr is-active="false" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="home" is-active="true" slot="start"></ion-icon>
-            <code> name="home" is-active="true" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="home" color="primary" slot="start"></ion-icon>
-            <code> name="home" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="logo-twitter" color="secondary" slot="start"></ion-icon>
-            <code> name="logo-twitter" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon ios="logo-apple" md="logo-android" slot="start"></ion-icon>
-            <code> ios="logo-apple" md="logo-android" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon ios="logo-apple" md="logo-android" slot="start" id-active="false"></ion-icon>
-            <code> ios="logo-apple" md="logo-android" is-active="false" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon slot="start"></ion-icon>
-            <code> name="null" </code>
-          </ion-item>
-
-          <ion-item>
-            <ion-icon name="home" hidden="true" slot="start"></ion-icon>
-            <code> name="home" hidden="true" </code>
-          </ion-item>
-        </ion-list>
-
-        <script>
-          var dynamicColor = document.getElementById('dynamicColor');
-          var dynamicProp = document.getElementById('dynamicProp');
-          var dynamicAttr = document.getElementById('dynamicAttr');
-
-          dynamicColor.setAttribute('color', 'danger');
-
-          let interval = setInterval(function () {
-            if (dynamicProp.name === 'home') {
-              dynamicProp.name = 'ios-home';
-              dynamicAttr.setAttribute('name', 'ios-home');
-            } else if (dynamicProp.name === 'ios-home') {
-              dynamicProp.name = 'md-home';
-              dynamicAttr.setAttribute('name', 'md-home');
-            } else {
-              dynamicProp.name = 'home';
-              dynamicAttr.setAttribute('name', 'home');
-            }
-          }, 1000);
-
-          setTimeout(function () {
-            clearInterval(interval);
-          }, 4000);
-        </script>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>

core/src/components/icon/test/standalone/done-all.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/></svg>

core/src/components/icon/test/standalone/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('icon: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/icon/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/icon/test/standalone/index.html

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Icon - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <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>
-  </head>
-
-  <body>
-    <ion-icon name="logo-ionic" color="primary"></ion-icon>
-    <ion-icon name="logo-angular"></ion-icon>
-    <ion-icon name="heart" color="danger"></ion-icon>
-    <ion-icon name="logo-ionitron" color="primary"></ion-icon>
-
-    <ion-icon name="happy" color="warning"></ion-icon>
-    <ion-icon name="people"></ion-icon>
-    <ion-icon name="person" color="tertiary"></ion-icon>
-    <ion-icon name="person-circle"></ion-icon>
-
-    <ion-icon name="apps"></ion-icon>
-    <ion-icon name="lock-closed"></ion-icon>
-    <ion-icon name="key" color="success"></ion-icon>
-    <ion-icon name="lock-open"></ion-icon>
-
-    <ion-icon name="map" color="secondary"></ion-icon>
-    <ion-icon name="navigate"></ion-icon>
-    <ion-icon name="pin"></ion-icon>
-    <ion-icon name="locate"></ion-icon>
-
-    <ion-icon name="mic"></ion-icon>
-    <ion-icon name="musical-notes" color="warning"></ion-icon>
-    <ion-icon name="volume-high"></ion-icon>
-
-    <ion-icon name="cafe" color="success"></ion-icon>
-    <ion-icon name="calculator"></ion-icon>
-    <ion-icon name="bus"></ion-icon>
-    <ion-icon name="wine" color="danger"></ion-icon>
-
-    <ion-icon name="camera"></ion-icon>
-    <ion-icon name="image" color="secondary"></ion-icon>
-    <ion-icon name="star" color="success"></ion-icon>
-    <ion-icon name="pin"></ion-icon>
-
-    <ion-icon name="arrow-up-circle" color="warning"></ion-icon>
-    <ion-icon name="arrow-back"></ion-icon>
-    <ion-icon name="arrow-down-circle"></ion-icon>
-    <ion-icon name="arrow-forward"></ion-icon>
-
-    <ion-icon name="cloud"></ion-icon>
-    <ion-icon name="sunny" color="success"></ion-icon>
-    <ion-icon name="umbrella"></ion-icon>
-    <ion-icon name="rainy" color="primary"></ion-icon>
-
-    <!-- Custom Icon-->
-    <ion-icon src="./standalone/done-all.svg"></ion-icon>
-
-    <style>
-      ion-icon {
-        font-size: 50px;
-        margin: 9px;
-      }
-    </style>
-  </body>
-</html>

core/src/components/input/input.ios.scss

@@ -17,11 +17,7 @@
   --padding-start: 0px;
 }
 
-.input-clear-icon {
+.input-clear-icon ion-icon {
-  @include svg-background-image($input-ios-input-clear-icon-svg);
+  width: 18px;
-
+  height: 18px;
-  width: $input-ios-input-clear-icon-width;
-  height: $input-ios-input-clear-icon-width;
-
-  background-size: $input-ios-input-clear-icon-size;
 }

core/src/components/input/input.ios.vars.scss

@@ -49,15 +49,6 @@ $input-ios-inset-margin-start:            0 !default;
 /// @prop - Width of the icon used to clear the input
 $input-ios-input-clear-icon-width:        30px !default;
 
-/// @prop - Color of the icon used to clear the input
-$input-ios-input-clear-icon-color:        $text-color-step-400 !default;
-
-/// @prop - Icon used to clear the input
-$input-ios-input-clear-icon-svg:          "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
-
-/// @prop - Size of the icon used to clear the input
-$input-ios-input-clear-icon-size:         18px !default;
-
 /// @prop - Padding end of the input with clear input
 $input-ios-input-clear-padding-end:       ($input-ios-input-clear-icon-width + $item-ios-padding-end) !default;
 

core/src/components/input/input.md.scss

@@ -21,11 +21,7 @@
   --padding-start: 0;
 }
 
-.input-clear-icon {
+.input-clear-icon ion-icon {
-  @include svg-background-image($input-md-input-clear-icon-svg);
+  width: 22px;
-
+  height: 22px;
-  width: $input-md-input-clear-icon-width;
-  height: $input-md-input-clear-icon-width;
-
-  background-size: $input-md-input-clear-icon-size;
 }

core/src/components/input/input.md.vars.scss

@@ -22,15 +22,6 @@ $input-md-padding-start:                   ($item-md-padding-start * 0.5) !defau
 /// @prop - Width of the icon used to clear the input
 $input-md-input-clear-icon-width:         30px !default;
 
-/// @prop - Color of the icon used to clear the input
-$input-md-input-clear-icon-color:         $text-color-step-400 !default;
-
-/// @prop - Icon used to clear the input
-$input-md-input-clear-icon-svg:           "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
-
-/// @prop - Size of the icon used to clear the input
-$input-md-input-clear-icon-size:          22px !default;
-
 /// @prop - Placeholder Text color of the input
 $input-md-placeholder-color:              $placeholder-text-color !default;
 

core/src/components/input/input.scss

@@ -143,6 +143,14 @@
   @include padding(0);
   @include background-position(center);
 
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  width: 30px;
+  height: 30px;
+
   border: 0;
 
   outline: none;
@@ -154,6 +162,10 @@
   appearance: none;
 }
 
+.input-clear-icon ion-icon {
+  color: $text-color-step-400;
+}
+
 /**
  * Normally, we would not want to use :focus
  * here because that would mean tapping the button

core/src/components/input/input.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { closeCircle, closeSharp } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type {
@@ -499,7 +500,9 @@ export class Input implements ComponentInterface {
               ev.preventDefault();
             }}
             onClick={this.clearTextInput}
-          />
+          >
+            <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
+          </button>
         )}
       </Host>
     );

core/src/components/reorder-group/reorder-group.tsx

@@ -4,6 +4,7 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail, ItemReorderEventDetail } from '../../interface';
 import { findClosestIonContent, getScrollElement } from '../../utils/content';
+import { raf } from '../../utils/helpers';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
 
 const enum ReorderGroupState {
@@ -97,7 +98,7 @@ export class ReorderGroup implements ComponentInterface {
    */
   @Method()
   complete(listOrReorder?: boolean | any[]): Promise<any> {
-    return Promise.resolve(this.completeSync(listOrReorder));
+    return Promise.resolve(this.completeReorder(listOrReorder));
   }
 
   private canStart(ev: GestureDetail): boolean {
@@ -200,19 +201,19 @@ export class ReorderGroup implements ComponentInterface {
     const fromIndex = indexForItem(selectedItemEl);
 
     if (toIndex === fromIndex) {
-      this.completeSync();
+      this.completeReorder();
     } else {
       this.ionItemReorder.emit({
         from: fromIndex,
         to: toIndex,
-        complete: this.completeSync.bind(this),
+        complete: this.completeReorder.bind(this),
       });
     }
 
     hapticSelectionEnd();
   }
 
-  private completeSync(listOrReorder?: boolean | any[]): any {
+  private completeReorder(listOrReorder?: boolean | any[]): any {
     const selectedItemEl = this.selectedItemEl;
     if (selectedItemEl && this.state === ReorderGroupState.Complete) {
       const children = this.el.children as any;
@@ -220,20 +221,29 @@ export class ReorderGroup implements ComponentInterface {
       const toIndex = this.lastToIndex;
       const fromIndex = indexForItem(selectedItemEl);
 
-      if (toIndex !== fromIndex && (listOrReorder === undefined || listOrReorder === true)) {
+      /**
-        const ref = fromIndex < toIndex ? children[toIndex + 1] : children[toIndex];
+       * insertBefore and setting the transform
+       * needs to happen in the same frame otherwise
+       * there will be a duplicate transition. This primarily
+       * impacts Firefox where insertBefore and transform operations
+       * are happening in two separate frames.
+       */
+      raf(() => {
+        if (toIndex !== fromIndex && (listOrReorder === undefined || listOrReorder === true)) {
+          const ref = fromIndex < toIndex ? children[toIndex + 1] : children[toIndex];
 
-        this.el.insertBefore(selectedItemEl, ref);
+          this.el.insertBefore(selectedItemEl, ref);
-      }
+        }
+
+        for (let i = 0; i < len; i++) {
+          children[i].style['transform'] = '';
+        }
+      });
 
       if (Array.isArray(listOrReorder)) {
         listOrReorder = reorderArray(listOrReorder, fromIndex, toIndex);
       }
 
-      for (let i = 0; i < len; i++) {
-        children[i].style['transform'] = '';
-      }
-
       selectedItemEl.style.transition = '';
       selectedItemEl.classList.remove(ITEM_REORDER_SELECTED);
       this.selectedItemEl = undefined;

core/src/components/segment-button/segment-button.ios.scss

@@ -201,9 +201,15 @@
 // Segment Button: Toolbar w/ Color
 // --------------------------------------------------
 
-// Do not use the global or local CSS variable if the toolbar has a color
+// Toolbar with Color, Checked
+/**
+ * Use the contrast color as background since
+ * since the text color is the base color. Otherwise
+ * we will have contrast issues when using light/medium/dark
+ * palettes across light and dark mode.
+ */
 :host(.in-toolbar-color) .segment-button-indicator-background {
-  background: #fff;
+  background: #{current-color(contrast)};
 }
 
 // Toolbar with Color, Default Segment

core/src/components/segment/test/toolbar/segment.e2e.ts

@@ -31,6 +31,27 @@ test.describe('segment: toolbar', () => {
               <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
             </ion-segment>
           </ion-toolbar>
+          <ion-toolbar color="light">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
+          <ion-toolbar color="medium">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
+          <ion-toolbar color="dark">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
         </ion-header>
       `);
 

core/src/components/split-pane/test/basic/e2e.ts

@@ -1,32 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('split-pane: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/split-pane/test/basic?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-  const MIN_WIDTH = '#side-min-width';
-  const MAX_WIDTH = '#side-max-width';
-  const WIDTH = '#side-width';
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.click(MIN_WIDTH);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.click(MIN_WIDTH);
-  await page.click(MAX_WIDTH);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.click(MAX_WIDTH);
-  await page.click(WIDTH);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});

core/src/components/split-pane/test/basic/index.html

@@ -12,40 +12,24 @@
     <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>
+      ion-split-pane {
+        --side-width: 200px;
+        --side-min-width: 200px;
+      }
+    </style>
   </head>
-
   <body>
     <ion-app>
       <ion-split-pane id="splitPane" content-id="split-content">
         <ion-menu side="start" content-id="split-content">
           <ion-header>
             <ion-toolbar color="secondary">
-              <ion-title>Left Menu</ion-title>
+              <ion-title>Menu</ion-title>
             </ion-toolbar>
           </ion-header>
 
-          <ion-content>
+          <ion-content class="ion-padding"> Menu Content </ion-content>
-            <ion-list>
-              <ion-item>Open end Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-              <ion-item>Close Menu</ion-item>
-            </ion-list>
-          </ion-content>
-
-          <ion-footer>
-            <ion-toolbar color="secondary">
-              <ion-title>Footer</ion-title>
-            </ion-toolbar>
-          </ion-footer>
         </ion-menu>
 
         <div class="ion-page" id="split-content">
@@ -53,88 +37,15 @@
             <ion-toolbar>
               <ion-buttons slot="start">
                 <ion-menu-button></ion-menu-button>
-                <ion-menu-button auto-hide="false"></ion-menu-button>
               </ion-buttons>
 
-              <ion-title>Navigation</ion-title>
+              <ion-title>Content</ion-title>
             </ion-toolbar>
           </ion-header>
 
-          <ion-content class="ion-padding">
+          <ion-content class="ion-padding"> Main Content </ion-content>
-            <h1>Page 1</h1>
-            <ion-button onclick="menu()">Disable/enable menu</ion-button>
-            <f></f>
-            <f></f>
-            <f></f>
-            <f></f>
-
-            <ion-item>
-              <ion-label>Toggle Side Min Width</ion-label>
-              <ion-toggle id="side-min-width"></ion-toggle>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Toggle Side Max Width</ion-label>
-              <ion-toggle id="side-max-width"></ion-toggle>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Toggle Side Fixed Width</ion-label>
-              <ion-toggle id="side-width"></ion-toggle>
-            </ion-item>
-          </ion-content>
         </div>
       </ion-split-pane>
     </ion-app>
-    <ion-menu-controller></ion-menu-controller>
-
-    <script>
-      const sideMinWidth = document.querySelector('ion-toggle#side-min-width');
-      const sideMaxWidth = document.querySelector('ion-toggle#side-max-width');
-      const sideWidth = document.querySelector('ion-toggle#side-width');
-
-      const splitPane = document.querySelector('ion-split-pane');
-
-      sideMinWidth.addEventListener('ionChange', () => splitPane.classList.toggle('side-min-width'));
-      sideMaxWidth.addEventListener('ionChange', () => splitPane.classList.toggle('side-max-width'));
-      sideWidth.addEventListener('ionChange', () => splitPane.classList.toggle('side-width'));
-
-      const menuCtrl = document.querySelector('ion-menu-controller');
-      function openStart() {
-        menuCtrl.open('start');
-      }
-
-      async function menu() {
-        menuCtrl.enable(!(await menuCtrl.isEnabled()));
-      }
-    </script>
-
-    <style>
-      .side-width {
-        --side-width: 150px;
-        --side-min-width: 150px;
-      }
-
-      .side-min-width {
-        --side-min-width: 500px;
-      }
-
-      .side-max-width {
-        --side-max-width: 75px;
-        --side-min-width: 0px;
-      }
-
-      f {
-        display: block;
-        height: 150px;
-        width: 150px;
-        background-color: blue;
-        margin: 15px auto;
-      }
-
-      f:last-child {
-        background-color: red;
-      }
-    </style>
   </body>
 </html>

core/src/components/split-pane/test/basic/split-pane.e2e.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+import { test, Viewports } from '@utils/test/playwright';
+
+test.describe('split-pane: basic', () => {
+  test('should render on the correct side', async ({ page }) => {
+    await page.setViewportSize(Viewports.large);
+    await page.goto(`/src/components/split-pane/test/basic`);
+
+    expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `split-pane-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should collapse on smaller viewports', async ({ page, skip }) => {
+    skip.rtl();
+    await page.goto(`/src/components/split-pane/test/basic`);
+
+    const menu = page.locator('ion-menu');
+    await expect(menu).toBeHidden();
+  });
+  test('should expand on larger viewports', async ({ page, skip }) => {
+    skip.rtl();
+    await page.setViewportSize(Viewports.large);
+    await page.goto(`/src/components/split-pane/test/basic`);
+
+    const menu = page.locator('ion-menu');
+    await expect(menu).toBeVisible();
+  });
+});

core/src/utils/test/playwright/viewports/index.ts

@@ -5,4 +5,9 @@ export const Viewports = {
       height: 900,
     },
   },
+  // Based off https://github.com/ionic-team/ionic-framework/blob/2fe23d9d46c3593843c781c57340332e5a86fd64/core/src/components/split-pane/split-pane.tsx#L9-L13
+  large: {
+    width: 992,
+    height: 768,
+  },
 };

docs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.9](https://github.com/ionic-team/ionic-docs/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [6.3.8](https://github.com/ionic-team/ionic-docs/compare/v6.3.7...v6.3.8) (2022-11-22)
 
 **Note:** Version bump only for package @ionic/docs

docs/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "6.3.8",
+      "version": "6.3.9",
       "license": "MIT"
     }
   }

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",

lerna.json

@@ -5,5 +5,5 @@
     "angular",
     "packages/*"
   ],
-  "version": "6.3.8"
+  "version": "6.3.9"
 }

packages/angular-server/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.9](https://github.com/ionic-team/ionic/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [6.3.8](https://github.com/ionic-team/ionic/compare/v6.3.7...v6.3.8) (2022-11-22)
 
 **Note:** Version bump only for package @ionic/angular-server

packages/angular-server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "6.3.8",
+      "version": "6.3.9",
       "license": "MIT",
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^12.6.1",
@@ -18,7 +18,7 @@
         "@angular/platform-browser": "^12.0.0",
         "@angular/platform-browser-dynamic": "^12.2.10",
         "@angular/platform-server": "^12.0.0",
-        "@ionic/core": "^6.3.8",
+        "@ionic/core": "^6.3.9",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -786,9 +786,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "dev": true,
       "dependencies": {
         "@stencil/core": "^2.18.0",
@@ -7103,9 +7103,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "dev": true,
       "requires": {
         "@stencil/core": "^2.18.0",

packages/angular-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -55,7 +55,7 @@
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.2.10",
     "@angular/platform-server": "^12.0.0",
-    "@ionic/core": "^6.3.8",
+    "@ionic/core": "^6.3.9",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",

packages/react-router/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.9](https://github.com/ionic-team/ionic/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [6.3.8](https://github.com/ionic-team/ionic/compare/v6.3.7...v6.3.8) (2022-11-22)
 
 **Note:** Version bump only for package @ionic/react-router

packages/react-router/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "6.3.8",
+      "version": "6.3.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^6.3.8",
+        "@ionic/react": "^6.3.9",
         "tslib": "*"
       },
       "devDependencies": {
@@ -147,9 +147,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",
@@ -157,11 +157,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.9.tgz",
-      "integrity": "sha512-ARL8h/URDgBVeF3gOuWAwhHPbw1OPNww6HyHeLJBSpQeU4EnJ0252aKuod90Djo+cAhyHkwaE5XwEmp5IDK9YQ==",
+      "integrity": "sha512-a++eW44c7N2hb/dR7UOehQ/a/e+DuqnQOlMBEt1ScaYQMEVMWb2Qj0LKNFH48VV/XI8P5PeZq42981pJU7HjVw==",
       "dependencies": {
-        "@ionic/core": "^6.3.7",
+        "@ionic/core": "6.3.9",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -1145,9 +1145,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",
@@ -1155,11 +1155,11 @@
       }
     },
     "@ionic/react": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.9.tgz",
-      "integrity": "sha512-ARL8h/URDgBVeF3gOuWAwhHPbw1OPNww6HyHeLJBSpQeU4EnJ0252aKuod90Djo+cAhyHkwaE5XwEmp5IDK9YQ==",
+      "integrity": "sha512-a++eW44c7N2hb/dR7UOehQ/a/e+DuqnQOlMBEt1ScaYQMEVMWb2Qj0LKNFH48VV/XI8P5PeZq42981pJU7HjVw==",
       "requires": {
-        "@ionic/core": "^6.3.7",
+        "@ionic/core": "6.3.9",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }

packages/react-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^6.3.8",
+    "@ionic/react": "^6.3.9",
     "tslib": "*"
   },
   "peerDependencies": {

packages/react/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.9](https://github.com/ionic-team/ionic/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [6.3.8](https://github.com/ionic-team/ionic/compare/v6.3.7...v6.3.8) (2022-11-22)
 
 

packages/react/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "6.3.8",
+      "version": "6.3.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.3.8",
+        "@ionic/core": "^6.3.9",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -607,9 +607,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",
@@ -9522,9 +9522,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^6.3.8",
+    "@ionic/core": "^6.3.9",
     "ionicons": "^6.0.2",
     "tslib": "*"
   },

packages/vue-router/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.9](https://github.com/ionic-team/ionic/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [6.3.8](https://github.com/ionic-team/ionic/compare/v6.3.7...v6.3.8) (2022-11-22)
 
 **Note:** Version bump only for package @ionic/vue-router

packages/vue-router/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "6.3.8",
+      "version": "6.3.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^6.3.8"
+        "@ionic/vue": "^6.3.9"
       },
       "devDependencies": {
         "@types/jest": "^28.1.1",
@@ -578,9 +578,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",
@@ -588,11 +588,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.9.tgz",
-      "integrity": "sha512-l3vxlrwNroSpb0US/Yqoie67f4jAGb/jhN7J4kdb19/9EjEH4z5lPTEH/XgiYQ1dYokPlT2zZeP6SImgwozGoA==",
+      "integrity": "sha512-BuUHy6fgNcAUGgPmRA3wy+yOYUXh/AwDFBwSdUX1Hhud+oPRQuJK4xLrlO/9Jg+gaaTgFf9nm8X820b8HdfSSg==",
       "dependencies": {
-        "@ionic/core": "^6.3.7",
+        "@ionic/core": "6.3.9",
         "ionicons": "^6.0.2"
       }
     },
@@ -5221,9 +5221,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
-      "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+      "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",
@@ -5231,11 +5231,11 @@
       }
     },
     "@ionic/vue": {
-      "version": "6.3.8",
+      "version": "6.3.9",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.9.tgz",
-      "integrity": "sha512-l3vxlrwNroSpb0US/Yqoie67f4jAGb/jhN7J4kdb19/9EjEH4z5lPTEH/XgiYQ1dYokPlT2zZeP6SImgwozGoA==",
+      "integrity": "sha512-BuUHy6fgNcAUGgPmRA3wy+yOYUXh/AwDFBwSdUX1Hhud+oPRQuJK4xLrlO/9Jg+gaaTgFf9nm8X820b8HdfSSg==",
       "requires": {
-        "@ionic/core": "^6.3.7",
+        "@ionic/core": "6.3.9",
         "ionicons": "^6.0.2"
       }
     },

packages/vue-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -43,7 +43,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^6.3.8"
+    "@ionic/vue": "^6.3.9"
   },
   "devDependencies": {
     "@types/jest": "^28.1.1",