chore(): sync with main

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

@@ -43,8 +43,3 @@ runs:
         name: ionic-core
         output: core/CoreBuild.zip
         paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
-    - uses: ./.github/workflows/actions/upload-archive
-      with:
-        name: ionic-core-src
-        output: core/CoreSrc.zip
-        paths: core/src

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

@@ -23,8 +23,3 @@ runs:
         name: ionic-core
         output: core/CoreBuild.zip
         paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
-    - uses: ./.github/workflows/actions/upload-archive
-      with:
-        name: ionic-core-src
-        output: core/CoreSrc.zip
-        paths: core/src

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

@@ -18,11 +18,6 @@ runs:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core-src
-        path: ./core
-        filename: CoreSrc.zip
     - name: Install Playwright Dependencies
       run: npm install && npx playwright install && npx playwright install-deps
       shell: bash

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.4.1](https://github.com/ionic-team/ionic-framework/compare/v6.4.0...v6.4.1) (2022-12-14)
+
+
+### Bug Fixes
+
+* **breadcrumbs:** breadcrumbs are reactive ([#26427](https://github.com/ionic-team/ionic-framework/issues/26427)) ([0d8625b](https://github.com/ionic-team/ionic-framework/commit/0d8625b95537208c188b32a1707fa66050953281)), closes [#24041](https://github.com/ionic-team/ionic-framework/issues/24041)
+* **datetime:** keyboard can select hour 00 ([#26423](https://github.com/ionic-team/ionic-framework/issues/26423)) ([2fc96b7](https://github.com/ionic-team/ionic-framework/commit/2fc96b771412d2deac6d19883bfc5abc74d0bdbd)), closes [#26409](https://github.com/ionic-team/ionic-framework/issues/26409)
+* **modal:** compatibility with stencil libraries/apps ([#26448](https://github.com/ionic-team/ionic-framework/issues/26448)) ([1aa1068](https://github.com/ionic-team/ionic-framework/commit/1aa1068df7867a8b8a203052635da018014f5f1c))
+* **normalize:** remove normalize styles for outdated browsers ([#26465](https://github.com/ionic-team/ionic-framework/issues/26465)) ([82d1d94](https://github.com/ionic-team/ionic-framework/commit/82d1d948ecd7725772eb1ffee495e7a5dcadb30b)), closes [#26464](https://github.com/ionic-team/ionic-framework/issues/26464)
+
+
+
+
+
 # [6.4.0](https://github.com/ionic-team/ionic-framework/compare/v6.3.10...v6.4.0) (2022-12-07)
 
 

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.4.1](https://github.com/ionic-team/ionic/compare/v6.4.0...v6.4.1) (2022-12-14)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 # [6.4.0](https://github.com/ionic-team/ionic/compare/v6.3.10...v6.4.0) (2022-12-07)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.4.0",
+      "version": "6.4.1",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.4.0",
+        "@ionic/core": "^6.4.1",
         "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.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.4.0.tgz",
-      "integrity": "sha512-rWqXX67bWDD5r5Kleacy4dTBIXcB1gX+2Q5AK7LAtmtHUUuJPqGw/bAWE8hGKlF7ehJTyzb5CYV9XDzb8/00Zw==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.4.1.tgz",
+      "integrity": "sha512-l1Z2sA9VjkO5rFhQMlNkqWQaSRyV1mcb6nYvLgi1cyDegcSDqLLJjZeyKVKYxTuc2qCaZhRlBe+c2155W8hmsw==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",
@@ -7940,9 +7940,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.4.0.tgz",
-      "integrity": "sha512-rWqXX67bWDD5r5Kleacy4dTBIXcB1gX+2Q5AK7LAtmtHUUuJPqGw/bAWE8hGKlF7ehJTyzb5CYV9XDzb8/00Zw==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.4.1.tgz",
+      "integrity": "sha512-l1Z2sA9VjkO5rFhQMlNkqWQaSRyV1mcb6nYvLgi1cyDegcSDqLLJjZeyKVKYxTuc2qCaZhRlBe+c2155W8hmsw==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.4",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "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.4.0",
+    "@ionic/core": "^6.4.1",
     "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.4.1](https://github.com/ionic-team/ionic/compare/v6.4.0...v6.4.1) (2022-12-14)
+
+
+### Bug Fixes
+
+* **breadcrumbs:** breadcrumbs are reactive ([#26427](https://github.com/ionic-team/ionic/issues/26427)) ([0d8625b](https://github.com/ionic-team/ionic/commit/0d8625b95537208c188b32a1707fa66050953281)), closes [#24041](https://github.com/ionic-team/ionic/issues/24041)
+* **datetime:** keyboard can select hour 00 ([#26423](https://github.com/ionic-team/ionic/issues/26423)) ([2fc96b7](https://github.com/ionic-team/ionic/commit/2fc96b771412d2deac6d19883bfc5abc74d0bdbd)), closes [#26409](https://github.com/ionic-team/ionic/issues/26409)
+* **modal:** compatibility with stencil libraries/apps ([#26448](https://github.com/ionic-team/ionic/issues/26448)) ([1aa1068](https://github.com/ionic-team/ionic/commit/1aa1068df7867a8b8a203052635da018014f5f1c))
+* **normalize:** remove normalize styles for outdated browsers ([#26465](https://github.com/ionic-team/ionic/issues/26465)) ([82d1d94](https://github.com/ionic-team/ionic/commit/82d1d948ecd7725772eb1ffee495e7a5dcadb30b)), closes [#26464](https://github.com/ionic-team/ionic/issues/26464)
+
+
+
+
+
 # [6.4.0](https://github.com/ionic-team/ionic/compare/v6.3.10...v6.4.0) (2022-12-07)
 
 

core/package-lock.json

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

core/package.json

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

core/src/components/breadcrumbs/breadcrumbs.tsx

@@ -162,6 +162,11 @@ export class Breadcrumbs implements ComponentInterface {
     return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
   };
 
+  private slotChanged = () => {
+    this.resetActiveBreadcrumb();
+    this.breadcrumbsInit();
+  };
+
   render() {
     const { color, collapsed } = this;
     const mode = getIonMode(this);
@@ -175,7 +180,7 @@ export class Breadcrumbs implements ComponentInterface {
           'breadcrumbs-collapsed': collapsed,
         })}
       >
-        <slot></slot>
+        <slot onSlotchange={this.slotChanged}></slot>
       </Host>
     );
   }

core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts

@@ -0,0 +1,75 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('breadcrumbs: reactive', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+
+    await page.goto(`/src/components/breadcrumbs/test/reactive`);
+  });
+
+  test.describe('adding a breadcrumb item', () => {
+    test('should update the active item', async ({ page }) => {
+      const breadcrumbItems = page.locator('ion-breadcrumb');
+
+      const addItemButton = page.locator('ion-button#add-btn');
+
+      await expect(breadcrumbItems).toHaveCount(4);
+
+      await addItemButton.click();
+      await page.waitForChanges();
+
+      await expect(breadcrumbItems).toHaveCount(5);
+
+      const previousActiveItem = breadcrumbItems.nth(3);
+      const lastBreadcrumbItem = breadcrumbItems.nth(4);
+
+      await expect(previousActiveItem).not.toHaveClass(/breadcrumb-active/);
+      await expect(lastBreadcrumbItem).toHaveClass(/breadcrumb-active/);
+    });
+
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setIonViewport();
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await page.click('#add-btn');
+      await page.waitForChanges();
+
+      expect(await breadcrumbs.screenshot()).toMatchSnapshot(
+        `breadcrumbs-reactive-add-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+
+  test.describe('removing a breadcrumb item', () => {
+    test('should update the active item', async ({ page }) => {
+      const breadcrumbItems = page.locator('ion-breadcrumb');
+
+      await expect(breadcrumbItems).toHaveCount(4);
+
+      await page.click('#remove-btn');
+      await page.waitForChanges();
+
+      await expect(breadcrumbItems).toHaveCount(3);
+
+      const lastBreadcrumbItem = breadcrumbItems.nth(2);
+
+      await expect(lastBreadcrumbItem).toHaveClass(/breadcrumb-active/);
+    });
+
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setIonViewport();
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await page.click('#remove-btn');
+      await page.waitForChanges();
+
+      expect(await breadcrumbs.screenshot()).toMatchSnapshot(
+        `breadcrumbs-reactive-remove-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+});

core/src/components/breadcrumbs/test/reactive/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Breadcrumbs - Reactive</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>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Breadcrumbs - Reactive</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-breadcrumbs max-items="4" items-before-collapse="0" items-after-collapse="4">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#"> Trips </ion-breadcrumb>
+          <ion-breadcrumb href="#"> Tokyo 2021 </ion-breadcrumb>
+          <ion-breadcrumb href="#"> Photos </ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <ion-button id="add-btn" onclick="addItem()">Add Item</ion-button>
+        <ion-button id="remove-btn" onclick="removeItem()">Remove Item</ion-button>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const breadcrumbs = document.querySelector('ion-breadcrumbs');
+
+      const addItem = () => {
+        const breadcrumb = document.createElement('ion-breadcrumb');
+        const count = breadcrumbs.querySelectorAll('ion-breadcrumb').length;
+        breadcrumb.href = '#';
+        breadcrumb.textContent = `Item ${count}`;
+        breadcrumbs.appendChild(breadcrumb);
+      };
+
+      const removeItem = () => {
+        const breadcrumb = breadcrumbs.querySelector('ion-breadcrumb:last-child');
+        breadcrumbs.removeChild(breadcrumb);
+      };
+    </script>
+  </body>
+</html>

core/src/components/datetime/test/color/datetime.e2e.ts

@@ -2,42 +2,19 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('datetime: color', () => {
-  test('should not have visual regressions', async ({ page }) => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl();
+
     await page.goto('/src/components/datetime/test/color');
 
+    const darkModeToggle = page.locator('ion-checkbox');
     const datetime = page.locator('ion-datetime');
 
-    await page.evaluate(() => document.body.classList.toggle('dark'));
-    await page.waitForChanges();
-
-    expect(await datetime.first().screenshot()).toMatchSnapshot(
-      `datetime-color-default-dark-${page.getSnapshotSettings()}.png`
-    );
-    expect(await datetime.last().screenshot()).toMatchSnapshot(
-      `datetime-color-custom-dark-${page.getSnapshotSettings()}.png`
-    );
-
-    await page.evaluate(() => document.body.classList.toggle('dark'));
-    await datetime.evaluateAll((els: HTMLIonDatetimeElement[]) => {
-      els.forEach((el) => (el.color = 'danger'));
-    });
-    await page.waitForChanges();
-
-    expect(await datetime.first().screenshot()).toMatchSnapshot(
-      `datetime-color-default-light-color-${page.getSnapshotSettings()}.png`
-    );
-    expect(await datetime.last().screenshot()).toMatchSnapshot(
-      `datetime-color-custom-light-color-${page.getSnapshotSettings()}.png`
-    );
+    expect(await datetime.screenshot()).toMatchSnapshot(`datetime-color-${page.getSnapshotSettings()}.png`);
 
     await page.evaluate(() => document.body.classList.toggle('dark'));
     await page.waitForChanges();
 
-    expect(await datetime.first().screenshot()).toMatchSnapshot(
-      `datetime-color-default-dark-color-${page.getSnapshotSettings()}.png`
-    );
-    expect(await datetime.last().screenshot()).toMatchSnapshot(
-      `datetime-color-custom-dark-color-${page.getSnapshotSettings()}.png`
-    );
+    expect(await datetime.screenshot()).toMatchSnapshot(`datetime-color-dark-${page.getSnapshotSettings()}.png`);
   });
 });