merge release-8.8.4

CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.4](https://github.com/ionic-team/ionic-framework/compare/v8.8.3...v8.8.4) (2026-04-15)
+
+
+### Bug Fixes
+
+* **checkbox:** show labels after page navigation ([#31062](https://github.com/ionic-team/ionic-framework/issues/31062)) ([f4ac445](https://github.com/ionic-team/ionic-framework/commit/f4ac4459f8317bd5eeff7d4809f9cb0991c8efd9)), closes [#31052](https://github.com/ionic-team/ionic-framework/issues/31052)
+* **datetime:** multiple month selected and flakiness display ([#31053](https://github.com/ionic-team/ionic-framework/issues/31053)) ([308aef5](https://github.com/ionic-team/ionic-framework/commit/308aef569d8c6ebc3ad2186bca6969da8e4b2a8d))
+* **tab-button:** update dark palette focused background color ([#31050](https://github.com/ionic-team/ionic-framework/issues/31050)) ([dec46b5](https://github.com/ionic-team/ionic-framework/commit/dec46b5d317080dd5d97dc056f0d8e6d4c8c45ac))
+
+
+
+
+
 ## [8.8.3](https://github.com/ionic-team/ionic-framework/compare/v8.8.2...v8.8.3) (2026-04-01)
 
 

core/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.4](https://github.com/ionic-team/ionic-framework/compare/v8.8.3...v8.8.4) (2026-04-15)
+
+
+### Bug Fixes
+
+* **checkbox:** show labels after page navigation ([#31062](https://github.com/ionic-team/ionic-framework/issues/31062)) ([f4ac445](https://github.com/ionic-team/ionic-framework/commit/f4ac4459f8317bd5eeff7d4809f9cb0991c8efd9)), closes [#31052](https://github.com/ionic-team/ionic-framework/issues/31052)
+* **datetime:** multiple month selected and flakiness display ([#31053](https://github.com/ionic-team/ionic-framework/issues/31053)) ([308aef5](https://github.com/ionic-team/ionic-framework/commit/308aef569d8c6ebc3ad2186bca6969da8e4b2a8d))
+* **tab-button:** update dark palette focused background color ([#31050](https://github.com/ionic-team/ionic-framework/issues/31050)) ([dec46b5](https://github.com/ionic-team/ionic-framework/commit/dec46b5d317080dd5d97dc056f0d8e6d4c8c45ac))
+
+
+
+
+
 ## [8.8.3](https://github.com/ionic-team/ionic-framework/compare/v8.8.2...v8.8.3) (2026-04-01)
 
 

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.3",
+  "version": "8.8.4",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"

core/src/components/checkbox/checkbox.tsx

@@ -151,44 +151,54 @@ export class Checkbox implements ComponentInterface {
   connectedCallback() {
     const { el } = this;
 
-    // Watch for class changes to update validation state.
     if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
-      this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = checkInvalidState(el);
-        if (this.isInvalid !== newIsInvalid) {
-          this.isInvalid = newIsInvalid;
-          /**
-           * Screen readers tend to announce changes
-           * to `aria-describedby` when the attribute
-           * is changed during a blur event for a
-           * native form control.
-           * However, the announcement can be spotty
-           * when using a non-native form control
-           * and `forceUpdate()`.
-           * This is due to `forceUpdate()` internally
-           * rescheduling the DOM update to a lower
-           * priority queue regardless if it's called
-           * inside a Promise or not, thus causing
-           * the screen reader to potentially miss the
-           * change.
-           * By using a State variable inside a Promise,
-           * it guarantees a re-render immediately at
-           * a higher priority.
-           */
-          Promise.resolve().then(() => {
-            this.hintTextId = this.getHintTextId();
-          });
+      this.validationObserver = new MutationObserver((mutations) => {
+        // Watch for label content changes
+        if (mutations.some((mutation) => mutation.type === 'characterData' || mutation.type === 'childList')) {
+          this.hasLabelContent = this.el.textContent !== '';
+        }
+        // Watch for class changes to update validation state.
+        if (mutations.some((mutation) => mutation.type === 'attributes' && mutation.target === el)) {
+          const newIsInvalid = checkInvalidState(el);
+          if (this.isInvalid !== newIsInvalid) {
+            this.isInvalid = newIsInvalid;
+            /**
+             * Screen readers tend to announce changes
+             * to `aria-describedby` when the attribute
+             * is changed during a blur event for a
+             * native form control.
+             * However, the announcement can be spotty
+             * when using a non-native form control
+             * and `forceUpdate()`.
+             * This is due to `forceUpdate()` internally
+             * rescheduling the DOM update to a lower
+             * priority queue regardless if it's called
+             * inside a Promise or not, thus causing
+             * the screen reader to potentially miss the
+             * change.
+             * By using a State variable inside a Promise,
+             * it guarantees a re-render immediately at
+             * a higher priority.
+             */
+            Promise.resolve().then(() => {
+              this.hintTextId = this.getHintTextId();
+            });
+          }
         }
       });
 
       this.validationObserver.observe(el, {
         attributes: true,
         attributeFilter: ['class'],
+        characterData: true,
+        childList: true,
+        subtree: true,
       });
     }
 
     // Always set initial state
     this.isInvalid = checkInvalidState(el);
+    this.hasLabelContent = this.el.textContent !== '';
   }
 
   componentWillLoad() {
@@ -267,10 +277,6 @@ export class Checkbox implements ComponentInterface {
     ev.stopPropagation();
   };
 
-  private onSlotChange = () => {
-    this.hasLabelContent = this.el.textContent !== '';
-  };
-
   private getHintTextId(): string | undefined {
     const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
 
@@ -387,7 +393,7 @@ export class Checkbox implements ComponentInterface {
             id={this.inputLabelId}
             onClick={this.onDivLabelClick}
           >
-            <slot onSlotchange={this.onSlotChange}></slot>
+            <slot></slot>
             {this.renderHintText()}
           </div>
           <div class="native-wrapper">

core/src/components/datetime/datetime.tsx

@@ -1086,16 +1086,17 @@ export class Datetime implements ComponentInterface {
 
   connectedCallback() {
     this.clearFocusVisible = startFocusVisible(this.el).destroy;
+    this.loadTimeout = setTimeout(() => {
+      this.ensureReadyIfVisible();
+    }, 100);
   }
 
   disconnectedCallback() {
     if (this.clearFocusVisible) {
       this.clearFocusVisible();
       this.clearFocusVisible = undefined;
     }
-    if (this.loadTimeout) {
-      clearTimeout(this.loadTimeout);
-    }
+    this.loadTimeoutCleanup();
   }
 
   /**
@@ -1146,6 +1147,13 @@ export class Datetime implements ComponentInterface {
     });
   };
 
+  private loadTimeoutCleanup = () => {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+      this.loadTimeout = undefined;
+    }
+  };
+
   componentDidLoad() {
     const { el, intersectionTrackerRef } = this;
 
@@ -1193,7 +1201,10 @@ export class Datetime implements ComponentInterface {
      * we still initialize listeners and mark the component as ready.
      *
      * We schedule this after everything has had a chance to run.
+     *
+     * We also clean up the load timeout to ensure that we don't have multiple timeouts running.
      */
+    this.loadTimeoutCleanup();
     this.loadTimeout = setTimeout(() => {
       this.ensureReadyIfVisible();
     }, 100);

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

@@ -349,6 +349,43 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   });
 });
 
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: month picker selection'), () => {
+    test('datetime: month picker selection', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-05-03"></ion-datetime>
+      `,
+        config
+      );
+
+      await page.locator('.datetime-ready').waitFor();
+
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button').nth(1);
+      const monthYearButton = page.locator('ion-datetime .calendar-month-year');
+
+      await expect(monthYearButton).toHaveText(/May 2022/);
+
+      await nextMonthButton.click();
+      await expect(monthYearButton).toHaveText(/June 2022/);
+
+      await nextMonthButton.click();
+      await expect(monthYearButton).toHaveText(/July 2022/);
+
+      await monthYearButton.click();
+      await page.waitForChanges();
+
+      const selectedMonthOptions = page.locator('.month-column ion-picker-column-option.option-active');
+      await expect(selectedMonthOptions).toHaveCount(1);
+    });
+  });
+});
+
 /**
  * This behavior does not differ across
  * modes/directions.
@@ -403,7 +440,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
  */
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('datetime: IO fallback'), () => {
-    test('should become ready even if IntersectionObserver never reports visible', async ({ page }, testInfo) => {
+    test('should become ready even if IntersectionObserver never reports visible', async ({ page, skip }, testInfo) => {
+      // TODO(FW-7284): Re-enable on WebKit after determining why it fails
+      skip.browser('webkit', 'Wheel is not available in WebKit');
+
       testInfo.annotations.push({
         type: 'issue',
         description: 'https://github.com/ionic-team/ionic-framework/issues/30706',

core/src/components/picker-column/picker-column.tsx

@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 import { doc } from '@utils/browser';
-import { getElementRoot, raf } from '@utils/helpers';
+import { raf } from '@utils/helpers';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic';
 import { isPlatform } from '@utils/platform';
 import { createColorClasses } from '@utils/theme';
@@ -122,9 +122,7 @@ export class PickerColumn implements ComponentInterface {
          * Because this initial call to scrollActiveItemIntoView has to fire before
          * the scroll listener is set up, we need to manage the active class manually.
          */
-        const oldActive = getElementRoot(el).querySelector<HTMLIonPickerColumnOptionElement>(
-          `.${PICKER_ITEM_ACTIVE_CLASS}`
-        );
+        const oldActive = el.querySelector<HTMLIonPickerColumnOptionElement>(`.${PICKER_ITEM_ACTIVE_CLASS}`);
         if (oldActive) {
           this.setPickerItemActiveState(oldActive, false);
         }

core/src/components/tab-button/test/states/tab-button.e2e.ts

@@ -80,3 +80,25 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+configs({ palettes: ['dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-button: states in dark palette'), () => {
+    test.describe('focus', () => {
+      test('should render correct focus state in dark palette', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar style="width: 300px">
+            <ion-tab-button href="#" class="ion-focused">
+              <ion-label>Favorites</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus'));
+      });
+    });
+  });
+});

core/src/css/palettes/dark.scss

@@ -126,6 +126,7 @@ $colors:  (
     --ion-text-color-step-900: #1a1a1a;
     --ion-text-color-step-950: #0d0d0d;
     --ion-item-background: #000000;
+    --ion-tab-bar-background-focused: #252525;
     --ion-card-background: #1c1c1d;
   }
 
@@ -183,6 +184,7 @@ $colors:  (
     --ion-item-background: #1e1e1e;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;
+    --ion-tab-bar-background-focused: #353535;
     --ion-card-background: #1e1e1e;
   }
 }

core/src/css/palettes/high-contrast-dark.scss

@@ -119,6 +119,7 @@ $lightest-text-color: $text-color;
     --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
     --ion-item-background: #000000;
     --ion-card-background: #1c1c1d;
+    --ion-tab-bar-background-focused: #252525;
 
     /// Only the item borders should increase in contrast
     /// Borders for elements like toolbars should remain the same
@@ -185,6 +186,7 @@ $lightest-text-color: $text-color;
     --ion-item-background: #1e1e1e;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;
+    --ion-tab-bar-background-focused: #353535;
     --ion-card-background: #1e1e1e;
 
     /// Only the item borders should increase in contrast

lerna.json

@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.8.3"
+  "version": "8.8.4"
 }

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.
 
+## [8.8.4](https://github.com/ionic-team/ionic-framework/compare/v8.8.3...v8.8.4) (2026-04-15)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.8.3](https://github.com/ionic-team/ionic-framework/compare/v8.8.2...v8.8.3) (2026-04-01)
 
 **Note:** Version bump only for package @ionic/angular-server