merge release-8.6.4

.github/workflows/conventional-commit.yml

@@ -9,24 +9,35 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Validate PR title
-        uses:  amannn/action-semantic-pull-request@v5
+        if: |
+          !contains(github.event.pull_request.title, 'release') &&
+          !contains(github.event.pull_request.title, 'chore')
+        uses: amannn/action-semantic-pull-request@v5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           # Configure that a scope must always be provided.
           requireScope: true
+          # Configure allowed commit types
+          types: |
+            feat
+            fix
+            docs
+            style
+            refactor
+            perf
+            test
+            build
+            ci
+            revert
+            release
+            chore
           # Configure additional validation for the subject based on a regex.
           # This example ensures the subject doesn't start with an uppercase character.
           subjectPattern: ^(?![A-Z]).+$
-          # If `subjectPattern` is configured, you can use this property to 
-          # override the default error message that is shown when the pattern 
-          # doesn't match. The variables `subject` and `title` can be used 
+          # If `subjectPattern` is configured, you can use this property to
+          # override the default error message that is shown when the pattern
+          # doesn't match. The variables `subject` and `title` can be used
           # within the message.
           subjectPatternError: |
             The subject "{subject}" found in the pull request title "{title}" didn't match the configured pattern. Please ensure that the subject doesn't start with an uppercase character.
-          # If the PR contains one of these newline-delimited labels, the
-          # validation is skipped. If you want to rerun the validation when
-          # labels change, you might want to use the `labeled` and `unlabeled`
-          # event triggers in your workflow.
-          ignoreLabels: |
-            release

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.
 
+## [8.6.4](https://github.com/ionic-team/ionic-framework/compare/v8.6.3...v8.6.4) (2025-07-09)
+
+
+### Bug Fixes
+
+* **modal:** support iOS card view transitions for viewport changes ([#30520](https://github.com/ionic-team/ionic-framework/issues/30520)) ([0fd9e82](https://github.com/ionic-team/ionic-framework/commit/0fd9e824508333a53175d7da5f681fc3126a2394)), closes [#30296](https://github.com/ionic-team/ionic-framework/issues/30296)
+
+
+
+
+
 ## [8.6.3](https://github.com/ionic-team/ionic-framework/compare/v8.6.2...v8.6.3) (2025-07-02)
 
 

core/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.
 
+## [8.6.4](https://github.com/ionic-team/ionic-framework/compare/v8.6.3...v8.6.4) (2025-07-09)
+
+
+### Bug Fixes
+
+* **modal:** support iOS card view transitions for viewport changes ([#30520](https://github.com/ionic-team/ionic-framework/issues/30520)) ([0fd9e82](https://github.com/ionic-team/ionic-framework/commit/0fd9e824508333a53175d7da5f681fc3126a2394)), closes [#30296](https://github.com/ionic-team/ionic-framework/issues/30296)
+
+
+
+
+
 ## [8.6.3](https://github.com/ionic-team/ionic-framework/compare/v8.6.2...v8.6.3) (2025-07-02)
 
 

core/package.json

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

core/src/components/item-sliding/test/async/item-sliding.e2e.ts

@@ -1,6 +1,9 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
+/**
+ * This behavior does not vary across modes/directions
+ */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('item-sliding: async'), () => {
     test.beforeEach(async ({ page }) => {
@@ -35,5 +38,85 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await expect(itemSlidingEl).toHaveClass(/item-sliding-active-slide/);
     });
+
+    // NOTE: This test uses the CDN version of Ionic.
+    // If this test fails, it is likely due to a regression in the published package.
+    test('should not throw errors when adding multiple items with side="end" using the Ionic CDN', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29499',
+      });
+
+      const errors: string[] = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') {
+          errors.push(msg.text());
+        }
+      });
+      page.on('pageerror', (error) => {
+        errors.push(error.message);
+      });
+
+      // This issue only happens when using a CDN version of Ionic
+      // so we need to use the CDN by passing the `importIonicFromCDN` option
+      // to setContent.
+      await page.setContent(
+        `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Item Sliding</ion-title>
+            <ion-buttons slot="end">
+              <ion-button id="addItem" onclick="addItem()">ADD ITEM</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list id="list"></ion-list>
+        </ion-content>
+
+        <script>
+          let itemList = [];
+          function generateItem() {
+            const currentItem = itemList.length + 1;
+            const item = \`
+              <ion-item-sliding>
+                <ion-item>
+                  <ion-label>Sliding Item \${currentItem}</ion-label>
+                </ion-item>
+                <ion-item-options side="end">
+                  <ion-item-option>Delete</ion-item-option>
+                </ion-item-options>
+              </ion-item-sliding>
+            \`;
+            itemList.push(item);
+            return item;
+          }
+          function addItem() {
+            const list = document.getElementById('list');
+            list.innerHTML += generateItem();
+            const currentItem = itemList.length;
+          }
+        </script>
+      `,
+        { ...config, importIonicFromCDN: true }
+      );
+
+      // Click the button enough times to reproduce the issue
+      const addButton = page.locator('#addItem');
+      await addButton.click();
+      await addButton.click();
+      await addButton.click();
+
+      await page.waitForChanges();
+
+      // Check that the items have been added
+      const items = page.locator('ion-item-sliding');
+      expect(await items.count()).toBe(3);
+
+      // Check that no errors have been logged
+      expect(errors.length).toBe(0);
+    });
   });
 });

core/src/components/modal/animations/ios.enter.ts

@@ -48,7 +48,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
   }
 
   if (presentingEl) {
-    const isMobile = window.innerWidth < 768;
+    const isPortrait = window.innerWidth < 768;
     const hasCardModal =
       presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined;
     const presentingElRoot = getElementRoot(presentingEl);
@@ -61,7 +61,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
 
     const bodyEl = document.body;
 
-    if (isMobile) {
+    if (isPortrait) {
       /**
        * Fallback for browsers that does not support `max()` (ex: Firefox)
        * No need to worry about statusbar padding since engines like Gecko

core/src/components/modal/animations/ios.leave.ts

@@ -35,7 +35,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
     .addAnimation(wrapperAnimation);
 
   if (presentingEl) {
-    const isMobile = window.innerWidth < 768;
+    const isPortrait = window.innerWidth < 768;
     const hasCardModal =
       presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined;
     const presentingElRoot = getElementRoot(presentingEl);
@@ -61,7 +61,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
 
     const bodyEl = document.body;
 
-    if (isMobile) {
+    if (isPortrait) {
       const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
       const modalTransform = hasCardModal ? '-10px' : transformOffset;
       const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;