feat(item-sliding): add automatic full expand animation of items

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.2](https://github.com/ionic-team/ionic-framework/compare/v8.8.1...v8.8.2) (2026-03-25)
+
+
+### Bug Fixes
+
+* **angular:** forward generic type parameter on ModalOptions and PopoverOptions ([#31022](https://github.com/ionic-team/ionic-framework/issues/31022)) ([cbfe7cc](https://github.com/ionic-team/ionic-framework/commit/cbfe7cce3be345eacbf9fe29e74438a927c16679)), closes [#31012](https://github.com/ionic-team/ionic-framework/issues/31012)
+* **checkbox:** re-evaluate label visibility when label is updated ([#30980](https://github.com/ionic-team/ionic-framework/issues/30980)) ([ce83407](https://github.com/ionic-team/ionic-framework/commit/ce83407e1debbe74f20d2d6dc2535a0ef3f974a0))
+* **datetime:** days keep in focus after changing the month ([#31021](https://github.com/ionic-team/ionic-framework/issues/31021)) ([5fdaba2](https://github.com/ionic-team/ionic-framework/commit/5fdaba2b021fe8b2b43a49eae7c687544c97d502))
+
+
+
+
+
 ## [8.8.1](https://github.com/ionic-team/ionic-framework/compare/v8.8.0...v8.8.1) (2026-03-06)
 
 

core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.2](https://github.com/ionic-team/ionic-framework/compare/v8.8.1...v8.8.2) (2026-03-25)
+
+
+### Bug Fixes
+
+* **checkbox:** re-evaluate label visibility when label is updated ([#30980](https://github.com/ionic-team/ionic-framework/issues/30980)) ([ce83407](https://github.com/ionic-team/ionic-framework/commit/ce83407e1debbe74f20d2d6dc2535a0ef3f974a0))
+* **datetime:** days keep in focus after changing the month ([#31021](https://github.com/ionic-team/ionic-framework/issues/31021)) ([5fdaba2](https://github.com/ionic-team/ionic-framework/commit/5fdaba2b021fe8b2b43a49eae7c687544c97d502))
+
+
+
+
+
 ## [8.8.1](https://github.com/ionic-team/ionic-framework/compare/v8.8.0...v8.8.1) (2026-03-06)
 
 

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.56.1
+FROM mcr.microsoft.com/playwright:v1.58.2
 
 # Set the working directory
 WORKDIR /ionic

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.1",
+  "version": "8.8.2",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"
@@ -40,14 +40,14 @@
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.11.0",
+    "@axe-core/playwright": "^4.11.1",
     "@capacitor/core": "^8.0.0",
     "@capacitor/haptics": "^8.0.0",
     "@capacitor/keyboard": "^8.0.0",
     "@capacitor/status-bar": "^8.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.58.2",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",
@@ -69,7 +69,7 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "outsystems-design-tokens": "^1.3.7",
-    "playwright-core": "^1.56.1",
+    "playwright-core": "^1.58.2",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",

core/src/components/datetime/datetime.tsx

@@ -1550,9 +1550,11 @@ export class Datetime implements ComponentInterface {
       return;
     }
 
+    const left = (prevMonth as HTMLElement).offsetWidth * 2;
+
     calendarBodyRef.scrollTo({
       top: 0,
-      left: 0,
+      left: left * (isRTL(this.el) ? 1 : -1),
       behavior: 'smooth',
     });
   };

core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts

@@ -55,7 +55,11 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
       const datetime = page.locator('#display');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-display`));
     });
+  });
+});
 
+configs({ directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: show adjacent days'), () => {
     test('should return the same date format on current month days and on adjacent days', async ({ page }) => {
       await page.setContent(
         `
@@ -125,5 +129,51 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
         value: '2022-11-22T16:22:00',
       });
     });
+
+    test('should navigate to previous month via swipe and then select adjacent day from prior month', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-datetime show-adjacent-days="true" value="2026-02-14T16:22:00.000Z" presentation="date"></ion-datetime>
+      `,
+        config
+      );
+
+      // Wait for the datetime to be ready.
+      await page.locator('.datetime-ready').waitFor();
+      const ionChange = await page.spyOnEvent('ionChange');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('ion-datetime .calendar-body');
+
+      // Wait for the month to be visible.
+      await expect(calendarMonthYear).toHaveText('February 2026');
+
+      // Scroll to the previous month.
+      await calendarBody.evaluate((el: HTMLElement) => {
+        const rtl = document.documentElement.dir === 'rtl';
+        el.scrollLeft += rtl ? el.clientWidth * 2 : -el.clientWidth * 2;
+      });
+
+      // Wait for the month to change.
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('January 2026');
+
+      // Select the adjacent day from the prior month.
+      const dec31Adjacent = page.locator(
+        '.calendar-day-adjacent-day[data-month="12"][data-year="2025"][data-day="31"]'
+      );
+      await dec31Adjacent.click();
+
+      // Wait for the month to change.
+      await page.waitForChanges();
+
+      // Wait for the month to be visible.
+      await expect(calendarMonthYear).toHaveText('December 2025');
+      await ionChange.next();
+      await expect(ionChange).toHaveReceivedEventDetail({
+        value: '2025-12-31T16:22:00',
+      });
+    });
   });
 });

core/src/components/input-otp/input-otp.tsx

@@ -604,10 +604,21 @@ export class InputOTP implements ComponentInterface {
    * - Tab: Allows normal tab navigation between components
    */
   private onKeyDown = (index: number) => (event: KeyboardEvent) => {
-    const { length } = this;
+    const { disabled, length, readonly } = this;
     const rtl = isRTL(this.el);
     const input = event.target as HTMLInputElement;
 
+    if (disabled) {
+      return;
+    }
+
+    if (readonly) {
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        event.preventDefault();
+        return;
+      }
+    }
+
     // Meta shortcuts are used to copy, paste, and select text
     // We don't want to handle these keys here
     const metaShortcuts = ['a', 'c', 'v', 'x', 'r', 'z', 'y'];
@@ -672,11 +683,15 @@ export class InputOTP implements ComponentInterface {
    * 5. Single character replacement
    */
   private onInput = (index: number) => (event: InputEvent) => {
-    const { length, validKeyPattern } = this;
+    const { disabled, length, readonly, validKeyPattern } = this;
     const input = event.target as HTMLInputElement;
     const value = input.value;
     const previousValue = this.previousInputValues[index] || '';
 
+    if (disabled || readonly) {
+      return;
+    }
+
     // 1. Autofill handling
     // If the length of the value increases by more than 1 from the previous
     // value, treat this as autofill. This is to prevent the case where the
@@ -804,10 +819,14 @@ export class InputOTP implements ComponentInterface {
    * the next empty input after pasting.
    */
   private onPaste = (event: ClipboardEvent) => {
-    const { inputRefs, length, validKeyPattern } = this;
+    const { disabled, inputRefs, length, readonly, validKeyPattern } = this;
 
     event.preventDefault();
 
+    if (disabled || readonly) {
+      return;
+    }
+
     const pastedText = event.clipboardData?.getData('text');
 
     // If there is no pasted text, still emit the input change event