Merge remote-tracking branch 'origin/main' into sync-feat-74

.github/workflows/actions/build-angular-server/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
 
     - name: Install Angular Server Dependencies
       run: npm ci

.github/workflows/actions/build-angular/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -11,7 +11,7 @@ runs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
 
     - name: Install Dependencies
       run: npm ci

.github/workflows/actions/build-core/action.yml

@@ -6,7 +6,7 @@ runs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - name: Install Dependencies
       run: npm install
       working-directory: ./core

.github/workflows/actions/build-react-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-react/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-vue-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-vue/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -21,7 +21,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     # Provenance requires npm 9.5.0+
     - name: Install latest npm
       run: npm install -g npm@latest

.github/workflows/actions/test-core-clean-build/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
 
     - uses: ./.github/workflows/actions/download-archive
       with:

.github/workflows/actions/test-core-lint/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

.github/workflows/actions/test-core-screenshot/action.yml

@@ -13,7 +13,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-core-spec/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

.github/workflows/actions/test-react-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-vue-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/update-reference-screenshots/action.yml

@@ -9,7 +9,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: actions/download-artifact@v3
       with:
         path: ./artifacts
@@ -35,7 +35,16 @@ runs:
         git config user.name ionitron
         git config user.email hi@ionicframework.com
         git add src/\*.png --force
-        git commit -m "chore(): add updated snapshots"
-        git push
+
+        if git diff --exit-code; then
+          echo -e "\033[1;31m⚠️ Error: No new screenshots generated ⚠️\033[0m"
+          echo -e "\033[1;31mThis means that there were zero visual diffs when running screenshot tests.\033[0m"
+          echo -e "\033[1;31mMake sure you have pushed any code changes that would result in visual diffs.\033[0m"
+          exit 1
+        else
+          git commit -m "chore(): add updated snapshots"
+          git push
+        fi
+
       shell: bash
       working-directory: ./core

.stackblitz/codeflow.json

@@ -4,7 +4,7 @@
       "enabled": false
     },
     "pullRequests": {
-      "enabled": true
+      "enabled": false
     }
   }
 }

CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+
+### Bug Fixes
+
+* **modal:** swipe to dismiss resets status bar style ([#28110](https://github.com/ionic-team/ionic-framework/issues/28110)) ([176585f](https://github.com/ionic-team/ionic-framework/commit/176585f446b04a6a0cedab2e09417637dbfc78ee)), closes [#28105](https://github.com/ionic-team/ionic-framework/issues/28105)
+* **overlays:** prevent overlays from getting stuck open ([#28069](https://github.com/ionic-team/ionic-framework/issues/28069)) ([584e9d3](https://github.com/ionic-team/ionic-framework/commit/584e9d3be220343451c2d4b9bf90658ecd530de1)), closes [#27200](https://github.com/ionic-team/ionic-framework/issues/27200)
+* **popover:** dynamic width popover is positioned correctly ([#28072](https://github.com/ionic-team/ionic-framework/issues/28072)) ([2a80eb6](https://github.com/ionic-team/ionic-framework/commit/2a80eb6bd0b16a9dab9bea600bb7f935d25c0e1b)), closes [#27190](https://github.com/ionic-team/ionic-framework/issues/27190) [#24780](https://github.com/ionic-team/ionic-framework/issues/24780)
+* **react:** overlay content is shown with hook  ([#28109](https://github.com/ionic-team/ionic-framework/issues/28109)) ([7b551fd](https://github.com/ionic-team/ionic-framework/commit/7b551fd54b9e16a2538e5b82a13d72b3007fa045)), closes [#28102](https://github.com/ionic-team/ionic-framework/issues/28102)
+* **textarea:** cols property is respected ([#28081](https://github.com/ionic-team/ionic-framework/issues/28081)) ([6d4eabc](https://github.com/ionic-team/ionic-framework/commit/6d4eabcc1046c28c1abf69a8bda3e06f80cf3f8f)), closes [#22142](https://github.com/ionic-team/ionic-framework/issues/22142)
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 

core/.eslintrc.js

@@ -46,7 +46,8 @@ module.exports = {
     {
       "files": ["*.e2e.ts"],
       "rules": {
-        "custom-rules/await-playwright-promise-assertion": "error"
+        "custom-rules/await-playwright-promise-assertion": "error",
+        "custom-rules/no-playwright-to-match-snapshot-assertion": "error"
       }
     }
   ]

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.
 
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+
+### Bug Fixes
+
+* **modal:** swipe to dismiss resets status bar style ([#28110](https://github.com/ionic-team/ionic-framework/issues/28110)) ([176585f](https://github.com/ionic-team/ionic-framework/commit/176585f446b04a6a0cedab2e09417637dbfc78ee)), closes [#28105](https://github.com/ionic-team/ionic-framework/issues/28105)
+* **overlays:** prevent overlays from getting stuck open ([#28069](https://github.com/ionic-team/ionic-framework/issues/28069)) ([584e9d3](https://github.com/ionic-team/ionic-framework/commit/584e9d3be220343451c2d4b9bf90658ecd530de1)), closes [#27200](https://github.com/ionic-team/ionic-framework/issues/27200)
+* **popover:** dynamic width popover is positioned correctly ([#28072](https://github.com/ionic-team/ionic-framework/issues/28072)) ([2a80eb6](https://github.com/ionic-team/ionic-framework/commit/2a80eb6bd0b16a9dab9bea600bb7f935d25c0e1b)), closes [#27190](https://github.com/ionic-team/ionic-framework/issues/27190) [#24780](https://github.com/ionic-team/ionic-framework/issues/24780)
+* **textarea:** cols property is respected ([#28081](https://github.com/ionic-team/ionic-framework/issues/28081)) ([6d4eabc](https://github.com/ionic-team/ionic-framework/commit/6d4eabcc1046c28c1abf69a8bda3e06f80cf3f8f)), closes [#22142](https://github.com/ionic-team/ionic-framework/issues/22142)
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 

core/api.txt

@@ -1370,7 +1370,7 @@ ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
 ion-textarea,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-textarea,prop,cols,number | undefined,undefined,false,false
+ion-textarea,prop,cols,number | undefined,undefined,false,true
 ion-textarea,prop,counter,boolean,false,false,false
 ion-textarea,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-textarea,prop,debounce,number | undefined,undefined,false,false

core/custom-rules/index.js

@@ -1,6 +1,7 @@
 module.exports = {
   rules: {
     'no-component-on-ready-method': require('./no-component-on-ready-method.js'),
-    'await-playwright-promise-assertion': require('./await-playwright-promise-assertion.js')
+    'await-playwright-promise-assertion': require('./await-playwright-promise-assertion.js'),
+    'no-playwright-to-match-snapshot-assertion': require('./no-playwright-to-match-snapshot-assertion.js')
   }
 }

core/custom-rules/no-playwright-to-match-snapshot-assertion.js

@@ -0,0 +1,29 @@
+module.exports = {
+  meta: {
+    messages: {
+      noPlaywrightToMatchSnapshotAssertion: '"toHaveScreenshot" assertions should be used in favor of "toMatchSnapshot". "toHaveScreenshot" brings file size reductions and anti-flake behaviors such as disabling animations by default.',
+    },
+  },
+  create(context) {
+    return {
+      ExpressionStatement(node) {
+        if (node.expression.callee === undefined) {
+          return;
+        }
+
+        const { property } = node.expression.callee;
+
+        /**
+         * Check to see if toMatchSnapshot is being used
+         */
+        if (
+          property !== undefined &&
+          property.type === 'Identifier' &&
+          property.name === 'toMatchSnapshot'
+        ) {
+          context.report({ node: node, messageId: 'noPlaywrightToMatchSnapshotAssertion' });
+        }
+      }
+    }
+  }
+};

core/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.3.2",
+      "version": "7.3.3",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.1.0",
+        "@stencil/core": "^4.2.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
@@ -1634,9 +1634,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz",
-      "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -11524,9 +11524,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz",
-      "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.1.0",
+    "@stencil/core": "^4.2.0",
     "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },

core/playwright.config.ts

@@ -55,9 +55,6 @@ const config: PlaywrightTestConfig = {
     timeout: 5000,
     toHaveScreenshot: {
       threshold: 0.1
-    },
-    toMatchSnapshot: {
-      threshold: 0.1
     }
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */

core/src/components/menu/menu.scss

@@ -59,15 +59,73 @@
 }
 
 :host(.menu-side-start) .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * LTR:
+    * The left side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The right side of the menu is not touching the screen edge. Padding is not
+    * applied to the right side of the menu. A value of 0 is set.
+    */
   --ion-safe-area-right: 0px;
 
   @include position(0, auto, 0, 0);
+
+  @include rtl() {
+    /**
+      * Menu does not cover the whole screen so we need to set the safe area for the
+      * side that touches the screen edge only. Since safe area is not logical, it
+      * needs to be applied to the correct side depending on the language direction.
+      * Otherwise, the content will have less space on both sides.
+      *
+      * RTL:
+      * The right side of the menu touches the screen edge. The safe area padding has
+      * already been set in the core styles, so there's no need to set it again.
+      * The left side of the menu is not touching the screen edge. Padding is not
+      * applied to the left side of the menu. A value of 0 is set.
+      */
+    --ion-safe-area-right: env(safe-area-inset-right);
+    --ion-safe-area-left: 0px;
+  }
 }
 
 :host(.menu-side-end) .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * LTR:
+    * The right side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The left side of the menu is not touching the screen edge. Padding is not
+    * applied to the left side of the menu. A value of 0 is set.
+    */
   --ion-safe-area-left: 0px;
 
   @include position(0, 0, 0, auto);
+
+  @include rtl() {
+    /**
+      * Menu does not cover the whole screen so we need to set the safe area for the
+      * side that touches the screen edge only. Since safe area is not logical, it
+      * needs to be applied to the correct side depending on the language direction.
+      * Otherwise, the content will have less space on both sides.
+      *
+      * RTL:
+      * The left side of the menu touches the screen edge. The safe area padding has
+      * already been set in the core styles, so there's no need to set it again.
+      * The right side of the menu is not touching the screen edge. Padding is not
+      * applied to the right side of the menu. A value of 0 is set.
+      */
+    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-right: 0px;
+  }
 }
 
 ion-backdrop {

core/src/components/modal/modal.tsx

@@ -473,6 +473,19 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     writeTask(() => this.el.classList.add('show-modal'));
 
+    const hasCardModal = presentingElement !== undefined;
+
+    /**
+     * We need to change the status bar at the
+     * start of the animation so that it completes
+     * by the time the card animation is done.
+     */
+    if (hasCardModal && getIonMode(this) === 'ios') {
+      // Cache the original status bar color before the modal is presented
+      this.statusBarStyle = await StatusBar.getStyle();
+      setCardStatusBarDark();
+    }
+
     await present<ModalPresentOptions>(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
       presentingEl: presentingElement,
       currentBreakpoint: this.initialBreakpoint,
@@ -511,19 +524,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
     }
 
-    const hasCardModal = presentingElement !== undefined;
-
-    /**
-     * We need to change the status bar at the
-     * start of the animation so that it completes
-     * by the time the card animation is done.
-     */
-    if (hasCardModal && getIonMode(this) === 'ios') {
-      // Cache the original status bar color before the modal is presented
-      this.statusBarStyle = await StatusBar.getStyle();
-      setCardStatusBarDark();
-    }
-
     if (this.isSheetModal) {
       this.initSheetGesture();
     } else if (hasCardModal) {
@@ -566,6 +566,16 @@ export class Modal implements ComponentInterface, OverlayInterface {
        * removed from the DOM.
        */
       this.gestureAnimationDismissing = true;
+
+      /**
+       * Reset the status bar style as the dismiss animation
+       * starts otherwise the status bar will be the wrong
+       * color for the duration of the dismiss animation.
+       * The dismiss method does this as well, but
+       * in this case it's only called once the animation
+       * has finished.
+       */
+      setCardStatusBarDefault(this.statusBarStyle);
       this.animation!.onFinish(async () => {
         await this.dismiss(undefined, GESTURE);
         this.gestureAnimationDismissing = false;

core/src/components/progress-bar/test/basic/index.html

@@ -79,18 +79,6 @@
           </ion-list-header>
           <ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
 
-          <ion-list-header>
-            <ion-label> Determinate (change progress with slider) </ion-label>
-          </ion-list-header>
-          <ion-progress-bar id="progressBar"></ion-progress-bar>
-
-          <ion-item>
-            <ion-range legacy="true" pin="true" value="0" id="progressValue">
-              <ion-label slot="start">0</ion-label>
-              <ion-label slot="end">100</ion-label>
-            </ion-range>
-          </ion-item>
-
           <ion-list-header>
             <ion-label> Buffer </ion-label>
           </ion-list-header>
@@ -105,39 +93,8 @@
             <ion-label> Buffer (without value) </ion-label>
           </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 legacy="true" 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');
-
-      progressValue.addEventListener('ionChange', function (ev) {
-        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>
 </html>

core/src/components/progress-bar/test/buffer/index.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Progress Bar - Buffer</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>
+      .custom-bar-background {
+        --buffer-background: red;
+      }
+
+      .no-bar-background {
+        --buffer-background: none;
+      }
+
+      ion-content ion-progress-bar {
+        margin: 10px 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Progress Bar - Buffer</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="outer-content">
+        <ion-list>
+          <ion-list-header>
+            <ion-label> Buffer </ion-label>
+          </ion-list-header>
+          <ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Buffer (reversed) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar color="secondary" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Buffer (without value) </ion-label>
+          </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 legacy="true" 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 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>
+</html>

core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('progress-bar: buffer'), () => {
+    test.describe('with a dynamic progress value', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
+        `,
+          config
+        );
+
+        await page.setIonViewport();
+
+        const progressBar = await page.locator('ion-progress-bar');
+
+        await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8));
+
+        await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
+      });
+    });
+  });
+});

core/src/components/progress-bar/test/determinate/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Progress Bar - Determinate</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>
+      .custom-bar-background {
+        --buffer-background: red;
+      }
+
+      .no-bar-background {
+        --buffer-background: none;
+      }
+
+      ion-content ion-progress-bar {
+        margin: 10px 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Progress Bar - Determinate</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="outer-content">
+        <ion-list>
+          <ion-list-header>
+            <ion-label> Determinate </ion-label>
+          </ion-list-header>
+          <ion-progress-bar value="0.50"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (reversed) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar reversed="true" value="0.50"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (secondary color) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar color="secondary" value="0.50"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (with no bar background) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar class="no-bar-background" value="0.75"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (with a custom background) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (change progress with slider) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar id="progressBar"></ion-progress-bar>
+
+          <ion-item>
+            <ion-range legacy="true" pin="true" value="0" id="progressValue">
+              <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');
+
+      progressValue.addEventListener('ionChange', function (ev) {
+        progressBar.value = ev.detail.value / 100;
+      });
+    </script>
+  </body>
+</html>

core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('progress-bar: determinate'), () => {
+    test.describe('with a dynamic progress value', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-progress-bar value="0.20"></ion-progress-bar>
+        `,
+          config
+        );
+
+        await page.setIonViewport();
+
+        const progressBar = await page.locator('ion-progress-bar');
+
+        await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8));
+
+        await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
+      });
+    });
+  });
+});

core/src/components/radio/test/item/radio.e2e.ts

@@ -17,7 +17,7 @@ configs().forEach(({ title, screenshot, config }) => {
         config
       );
       const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot(`toggle-list`));
+      await expect(list).toHaveScreenshot(screenshot(`radio-list`));
     });
     test('should render correctly in inset list', async ({ page }) => {
       await page.setContent(

core/src/components/textarea/test/cols/textarea.e2e.ts

@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: cols'), () => {
+    test('should respect cols when autogrow is not set', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-textarea {
+            border: 1px solid red;
+          }
+        </style>
+        <div id="container" style="width: 300px; margin: 20px;">
+          <ion-textarea label="Textarea" cols="5" value="Lorem Ipsum"></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot('textarea-cols'));
+    });
+    test('should ignore cols when autogrow is set', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-textarea {
+            border: 1px solid red;
+          }
+        </style>
+        <div id="container" style="width: 300px; margin: 20px;">
+          <ion-textarea label="Textarea" cols="5" auto-grow="true" value="Lorem Ipsum"></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot('textarea-cols-autogrow'));
+    });
+  });
+});

core/src/components/textarea/textarea.scss

@@ -67,6 +67,22 @@
   box-sizing: border-box;
 }
 
+/**
+ * When the cols property is set we should
+ * respect that width instead of defaulting
+ * to taking up the entire line.
+ * Requires both the cols and autoGrow
+ * properties to be reflected as attributes
+ * on the host.
+ *
+ * cols does not work with autoGrow because
+ * autoGrow would prevent line breaks from naturally
+ * occurring until the textarea takes up the entire line width.
+ */
+:host([cols]:not([auto-grow])) {
+  width: fit-content;
+}
+
 // TODO: FW-2876 - Remove this selector
 :host(.legacy-textarea) {
   flex: 1;

core/src/components/textarea/textarea.tsx

@@ -180,7 +180,7 @@ export class Textarea implements ComponentInterface {
   /**
    * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
    */
-  @Prop() cols?: number;
+  @Prop({ reflect: true }) cols?: number;
 
   /**
    * The number of visible text lines for the control.

core/src/components/toolbar/toolbar.scss

@@ -28,7 +28,6 @@
   --opacity-scale: 1;
 
   @include font-smoothing();
-  @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
 
   display: block;
 
@@ -36,6 +35,11 @@
 
   width: 100%;
 
+  // stylelint-disable-next-line property-disallowed-list
+  padding-right: var(--ion-safe-area-right);
+  // stylelint-disable-next-line property-disallowed-list
+  padding-left: var(--ion-safe-area-left);
+
   color: var(--color);
 
   font-family: $font-family-base;

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.
 
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 **Note:** Version bump only for package @ionic/docs

docs/package-lock.json

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

docs/package.json

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

lerna.json

@@ -4,5 +4,5 @@
     "docs",
     "packages/*"
   ],
-  "version": "7.3.2"
+  "version": "7.3.3"
 }

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.
 
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 **Note:** Version bump only for package @ionic/angular-server

packages/angular-server/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "7.3.2",
+      "version": "7.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.3.2"
+        "@ionic/core": "^7.3.3"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^14.0.0",
@@ -1060,9 +1060,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "dependencies": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",
@@ -7342,9 +7342,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "requires": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",

packages/angular-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -61,6 +61,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^7.3.2"
+    "@ionic/core": "^7.3.3"
   }
 }

packages/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.
 
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 **Note:** Version bump only for package @ionic/angular

packages/angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.3.2",
+      "version": "7.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.3.2",
+        "@ionic/core": "^7.3.3",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1227,9 +1227,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "dependencies": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",
@@ -8104,9 +8104,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "requires": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.3.2",
+    "@ionic/core": "^7.3.3",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.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.
 
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 **Note:** Version bump only for package @ionic/react-router

packages/react-router/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "7.3.2",
+      "version": "7.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^7.3.2",
+        "@ionic/react": "^7.3.3",
         "tslib": "*"
       },
       "devDependencies": {
@@ -205,9 +205,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "dependencies": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",
@@ -401,11 +401,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.2.tgz",
-      "integrity": "sha512-fJAZ0Ar3OG7BczaFwwx5BvxI0YZFPJBGdaBm0JmEZ7LoPlsnMfLOd02LbUz1l5BcV2E3ykI9bY0jevLVtFRjnQ==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.3.tgz",
+      "integrity": "sha512-2ubDuPYy816pUd3rRs+kRlvz3QClQWcjwt/N39IFoUG8AFT1yTa2OE5ZMOvUhgmdnknSxfBH/40JAowTUvdtxw==",
       "dependencies": {
-        "@ionic/core": "7.3.2",
+        "@ionic/core": "7.3.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -486,9 +486,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz",
-      "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3663,9 +3663,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "requires": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",
@@ -3786,11 +3786,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.2.tgz",
-      "integrity": "sha512-fJAZ0Ar3OG7BczaFwwx5BvxI0YZFPJBGdaBm0JmEZ7LoPlsnMfLOd02LbUz1l5BcV2E3ykI9bY0jevLVtFRjnQ==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.3.tgz",
+      "integrity": "sha512-2ubDuPYy816pUd3rRs+kRlvz3QClQWcjwt/N39IFoUG8AFT1yTa2OE5ZMOvUhgmdnknSxfBH/40JAowTUvdtxw==",
       "requires": {
-        "@ionic/core": "7.3.2",
+        "@ionic/core": "7.3.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
@@ -3844,9 +3844,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz",
-      "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA=="
     },
     "@types/estree": {
       "version": "0.0.39",

packages/react-router/package.json

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

packages/react/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+
+### Bug Fixes
+
+* **react:** overlay content is shown with hook  ([#28109](https://github.com/ionic-team/ionic-framework/issues/28109)) ([7b551fd](https://github.com/ionic-team/ionic-framework/commit/7b551fd54b9e16a2538e5b82a13d72b3007fa045)), closes [#28102](https://github.com/ionic-team/ionic-framework/issues/28102)
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 **Note:** Version bump only for package @ionic/react

packages/react/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "7.3.2",
+      "version": "7.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.3.2",
+        "@ionic/core": "^7.3.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -697,9 +697,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "dependencies": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",
@@ -11778,9 +11778,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "requires": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -41,7 +41,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^7.3.2",
+    "@ionic/core": "^7.3.3",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },

packages/react/src/components/IonOverlayManager.tsx

@@ -40,7 +40,6 @@ export const IonOverlayManager: React.FC<IonOverlayManagerProps> = ({ onAddOverl
    */
   const [overlays, setOverlays] = useState<OverlaysList>({});
   const overlaysRef = useRef<OverlaysList>({});
-  overlaysRef.current = overlays;
 
   useEffect(() => {
     /* Setup the callbacks that get called from <IonApp /> */
@@ -51,12 +50,50 @@ export const IonOverlayManager: React.FC<IonOverlayManagerProps> = ({ onAddOverl
   const addOverlay = (id: string, component: ReactComponentOrElement, containerElement: HTMLDivElement) => {
     const newOverlays = { ...overlaysRef.current };
     newOverlays[id] = { component, containerElement };
+
+    /**
+     * In order for this function to use the latest data
+     * we need to update the ref synchronously.
+     * However, updating a ref does not cause a re-render
+     * which is why we still update the state.
+     *
+     * Note that updating the ref in the body
+     * of IonOverlayManager is not sufficient
+     * because that relies on overlaysRef being
+     * updated as part of React's render loop. State updates
+     * are batched, so updating the state twice in quick succession does
+     * not necessarily result in 2 separate render calls.
+     * This means if two modals are added one after the other,
+     * the first modal will not have been added to
+     * overlaysRef since React has not re-rendered yet.
+     * More info: https://react.dev/reference/react/useState#setstate-caveats
+     */
+    overlaysRef.current = newOverlays;
     setOverlays(newOverlays);
   };
 
   const removeOverlay = (id: string) => {
     const newOverlays = { ...overlaysRef.current };
     delete newOverlays[id];
+
+    /**
+     * In order for this function to use the latest data
+     * we need to update the ref synchronously.
+     * However, updating a ref does not cause a re-render
+     * which is why we still update the state.
+     *
+     * Note that updating the ref in the body
+     * of IonOverlayManager is not sufficient
+     * because that relies on overlaysRef being
+     * updated as part of React's render loop. State updates
+     * are batched, so updating the state twice in quick succession does
+     * not necessarily result in 2 separate render calls.
+     * This means if two modals are added one after the other,
+     * the first modal will not have been added to
+     * overlaysRef since React has not re-rendered yet.
+     * More info: https://react.dev/reference/react/useState#setstate-caveats
+     */
+    overlaysRef.current = newOverlays;
     setOverlays(newOverlays);
   };
 

packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx

@@ -30,6 +30,8 @@ const Body: React.FC<{
       <IonButton expand="block" onClick={() => onDismiss({ test: true }, 'close')}>
         Close
       </IonButton>
+
+      <button onClick={onDismiss} id="show-secondary-modal">Show Secondary Modal</button>
     </IonContent>
   </IonPage>
 );
@@ -83,6 +85,14 @@ const ModalHook: React.FC = () => {
 
   const [presentModalWithContext] = useIonModal(ModalWithContext);
 
+  const [presentSecondaryModal] = useIonModal(ModalSecondary);
+  const [presentRootModal, dismissRootModal] = useIonModal(Body, {
+    onDismiss: () => {
+      dismissRootModal();
+      presentSecondaryModal();
+    }
+  });
+
   return (
     <MyContext.Provider value={{ value: 'overriden value' }}>
       <IonPage>
@@ -134,6 +144,16 @@ const ModalHook: React.FC = () => {
             Show Modal with Context
           </IonButton>
 
+          <IonButton
+            expand="block"
+            onClick={() => {
+              presentRootModal()
+            }}
+            id="show-root-modal"
+          >
+            Show Root Modal
+          </IonButton>
+
           <div>Count: {count}</div>
           <div>Dismissed with role: {dismissedRole}</div>
           <div>Data: {dismissedData && JSON.stringify(dismissedData)}</div>
@@ -143,6 +163,15 @@ const ModalHook: React.FC = () => {
   );
 };
 
+const ModalSecondary: React.FC = () => {
+  return (
+    <div className="ion-padding">
+      <h1>Secondary Modal</h1>
+      <p>This text should be visible</p>
+    </div>
+  )
+}
+
 const MyContext = React.createContext({
   value: 'default value',
 });

packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonModal.cy.ts

@@ -70,4 +70,16 @@ describe('useIonModal', () => {
     //verify context value is overriden value
     cy.get('div').contains('overriden value')
   });
+
+  it('should render nested modal when modals are added and removed at the same time', () => {
+    cy.get('#show-root-modal').click();
+
+    cy.get('ion-modal').should('have.length', 1);
+
+    cy.get('ion-modal #show-secondary-modal').click();
+
+    cy.get('ion-modal').should('have.length', 1);
+
+    cy.get('ion-modal').contains('This text should be visible');
+  });
 });

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.
 
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 **Note:** Version bump only for package @ionic/vue-router

packages/vue-router/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "7.3.2",
+      "version": "7.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^7.3.2"
+        "@ionic/vue": "^7.3.3"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -660,9 +660,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "dependencies": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",
@@ -871,11 +871,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.2.tgz",
-      "integrity": "sha512-Hjaa+k56cFdpeMBFRy3obUM5O8A5CP9pTaTae/kfbm/20RVlDAb/AU0cP3maDhLeAGiVpraDXnUutM55Ow2xrw==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.3.tgz",
+      "integrity": "sha512-QAScy1XMBwqX/5t4Iw6PSTE1kJMohnTuXSCqxk2v/K3V+wgmNA/A8SfqCkvj4jnmNXJwEP/AF/FlUm3+Fp0HJg==",
       "dependencies": {
-        "@ionic/core": "7.3.2",
+        "@ionic/core": "7.3.3",
         "ionicons": "^7.0.0"
       }
     },
@@ -1323,9 +1323,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz",
-      "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -7697,9 +7697,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "requires": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",
@@ -7829,11 +7829,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.2.tgz",
-      "integrity": "sha512-Hjaa+k56cFdpeMBFRy3obUM5O8A5CP9pTaTae/kfbm/20RVlDAb/AU0cP3maDhLeAGiVpraDXnUutM55Ow2xrw==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.3.tgz",
+      "integrity": "sha512-QAScy1XMBwqX/5t4Iw6PSTE1kJMohnTuXSCqxk2v/K3V+wgmNA/A8SfqCkvj4jnmNXJwEP/AF/FlUm3+Fp0HJg==",
       "requires": {
-        "@ionic/core": "7.3.2",
+        "@ionic/core": "7.3.3",
         "ionicons": "^7.0.0"
       }
     },
@@ -8192,9 +8192,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz",
-      "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA=="
     },
     "@tootallnate/once": {
       "version": "2.0.0",

packages/vue-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^7.3.2"
+    "@ionic/vue": "^7.3.3"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",

packages/vue/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.
 
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 **Note:** Version bump only for package @ionic/vue

packages/vue/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "7.3.2",
+      "version": "7.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.3.2",
+        "@ionic/core": "^7.3.3",
         "ionicons": "^7.0.0"
       },
       "devDependencies": {
@@ -207,9 +207,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "dependencies": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",
@@ -3746,9 +3746,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz",
+      "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==",
       "requires": {
         "@stencil/core": "^4.1.0",
         "ionicons": "7.1.0",

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -66,7 +66,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^7.3.2",
+    "@ionic/core": "^7.3.3",
     "ionicons": "^7.0.0"
   },
   "vetur": {