v7.5.3-nightly.20231101

.github/CODEOWNERS

@@ -11,8 +11,6 @@
 # In each subsection folders are ordered first by depth, then alphabetically.
 # This should make it easy to add new rules without breaking existing ones.
 
-* @ionic-team/framework
-
 # Frameworks
 
 ## Angular

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

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

.github/workflows/build.yml

@@ -140,7 +140,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng14, ng15, ng16, ng17]
+        apps: [ng14, ng15, ng16]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -3,62 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
-
-
-### Bug Fixes
-
-* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
-* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
-
-
-
-
-
-## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
-
-
-### Bug Fixes
-
-* **alert:** match MD spec on tablet  ([#28501](https://github.com/ionic-team/ionic-framework/issues/28501)) ([6a2be9f](https://github.com/ionic-team/ionic-framework/commit/6a2be9fa3c12a893d98dc139a1575a6e7e3c7c26)), closes [#23977](https://github.com/ionic-team/ionic-framework/issues/23977)
-* **angular:** ng add @ionic/angular in standalone projects ([#28523](https://github.com/ionic-team/ionic-framework/issues/28523)) ([c07312e](https://github.com/ionic-team/ionic-framework/commit/c07312e5ed931f6f825ccf083c9dead9fa815843)), closes [#28514](https://github.com/ionic-team/ionic-framework/issues/28514)
-* **angular:** overlays are defined when using standalone controllers ([#28560](https://github.com/ionic-team/ionic-framework/issues/28560)) ([9453132](https://github.com/ionic-team/ionic-framework/commit/9453132aa8952b4adfa1326e61138b329e254f76)), closes [#28385](https://github.com/ionic-team/ionic-framework/issues/28385)
-* **datetime:** updating value with min scrolls to new value ([#28549](https://github.com/ionic-team/ionic-framework/issues/28549)) ([388d19e](https://github.com/ionic-team/ionic-framework/commit/388d19e04f83f85abd4602adb04cc71ac575764a)), closes [#28548](https://github.com/ionic-team/ionic-framework/issues/28548)
-
-
-
-
-
-## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
-
-
-### Bug Fixes
-
-* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
-* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
-* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
-* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
-* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
-* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
-
-
-
-
-
-## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
-
-
-### Bug Fixes
-
-* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
-* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
-* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
-
-
-
-
-
-## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
+## [7.5.3-nightly.20231101](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3-nightly.20231101) (2023-11-01)
 
 
 ### Bug Fixes

core/CHANGELOG.md

@@ -3,63 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
-
-
-### Bug Fixes
-
-* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
-* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
-
-
-
-
-
-## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
-
-
-### Bug Fixes
-
-* **alert:** match MD spec on tablet  ([#28501](https://github.com/ionic-team/ionic-framework/issues/28501)) ([6a2be9f](https://github.com/ionic-team/ionic-framework/commit/6a2be9fa3c12a893d98dc139a1575a6e7e3c7c26)), closes [#23977](https://github.com/ionic-team/ionic-framework/issues/23977)
-* **datetime:** updating value with min scrolls to new value ([#28549](https://github.com/ionic-team/ionic-framework/issues/28549)) ([388d19e](https://github.com/ionic-team/ionic-framework/commit/388d19e04f83f85abd4602adb04cc71ac575764a)), closes [#28548](https://github.com/ionic-team/ionic-framework/issues/28548)
-
-
-
-
-
-## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
-
-
-### Bug Fixes
-
-* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
-* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
-* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
-* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
-* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
-* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
-
-> [!NOTE]
-> Ionic Vue developers utilizing the `v-ion-change` or `v-ion-input` workaround for https://github.com/ionic-team/ionic-framework/issues/27292 should remove this workaround when updating to Ionic v7.5.5.
-
-
-
-
-
-## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
-
-
-### Bug Fixes
-
-* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
-* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
-* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
-
-
-
-
-
-## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
+## [7.5.3-nightly.20231101](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3-nightly.20231101) (2023-11-01)
 
 
 ### Bug Fixes

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.7",
+  "version": "7.5.3-nightly.20231101",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.7.2",
+    "@stencil/core": "^4.6.0",
     "ionicons": "^7.2.1",
     "tslib": "^2.1.0"
   },
@@ -43,14 +43,15 @@
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
+    "@jest/core": "^27.5.1",
     "@playwright/test": "^1.39.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.3",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.7",
-    "@stencil/vue-output-target": "^0.8.7",
-    "@types/jest": "^29.5.6",
+    "@stencil/vue-output-target": "^0.8.6",
+    "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
@@ -61,10 +62,9 @@
     "eslint-plugin-custom-rules": "file:custom-rules",
     "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
     "prettier": "^2.6.1",
-    "puppeteer": "21.1.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
     "serve": "^14.0.1",
@@ -86,11 +86,13 @@
     "lint.sass.fix": "npm run lint.sass -- --fix",
     "lint.ts": "npm run eslint",
     "lint.ts.fix": "npm run eslint -- --fix",
+    "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
     "prerender.e2e": "node scripts/testing/prerender.js",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
     "start": "npm run build.css && stencil build --dev --watch --serve",
     "test": "npm run test.spec && npm run test.e2e",
     "test.spec": "stencil test --spec --max-workers=2",
+    "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
     "test.e2e": "npx playwright test",
     "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
     "test.watch": "jest --watch --no-cache",

core/src/components.d.ts

@@ -2043,10 +2043,6 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the picker.
-         */
-        "disabled": boolean;
         /**
           * A list of options to be displayed in the picker
          */
@@ -6687,10 +6683,6 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the picker.
-         */
-        "disabled"?: boolean;
         /**
           * A list of options to be displayed in the picker
          */

core/src/components/accordion-group/accordion-group.tsx

@@ -180,16 +180,6 @@ export class AccordionGroup implements ComponentInterface {
     if (this.readonly) {
       this.readonlyChanged();
     }
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.valueChanged();
   }
 
   /**

core/src/components/accordion/test/accordion.spec.ts

@@ -1,8 +1,8 @@
 import { newSpecPage } from '@stencil/core/testing';
 
-import { AccordionGroup } from '../../accordion-group/accordion-group';
-import { Item } from '../../item/item';
-import { Accordion } from '../accordion';
+import { AccordionGroup } from '../../accordion-group/accordion-group.tsx';
+import { Item } from '../../item/item.tsx';
+import { Accordion } from '../accordion.tsx';
 
 it('should open correct accordions when accordion group value is set', async () => {
   const page = await newSpecPage({
@@ -25,7 +25,7 @@ it('should open correct accordions when accordion group value is set', async ()
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   accordions.forEach((accordion) => {
@@ -61,7 +61,7 @@ it('should open correct accordions when accordion value is set', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   accordions.forEach((accordion) => {
@@ -97,7 +97,7 @@ it('should open more than one accordion when multiple="true"', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   accordions.forEach((accordion) => {
@@ -133,7 +133,7 @@ it('should render with accordion open', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
@@ -162,7 +162,7 @@ it('should accept a string when multiple="true"', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
@@ -183,8 +183,8 @@ it('should set default values if not provided', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
-  const accordion = accordionGroup.querySelector('ion-accordion')!;
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordion = accordionGroup.querySelector('ion-accordion');
 
   /**
    * ID is determined via an auto incrementing counter

core/src/components/action-sheet/action-sheet.scss

@@ -128,8 +128,8 @@
   height: 100%;
 
   /* Fallback for browsers that do not support dvh */
-  max-height: calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
-  max-height: calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
+  max-height: 100vh;
+  max-height: 100dvh;
 }
 
 .action-sheet-group {

core/src/components/action-sheet/test/basic/action-sheet.e2e.ts

@@ -100,69 +100,3 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
     });
   });
 });
-
-/**
- * This behavior needs to be tested in both modes but does not vary
- * across directions due to the component only applying safe area
- * to the top and bottom
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('action-sheet: basic'), () => {
-    test.describe('safe area', () => {
-      test('should have padding added by the safe area', async ({ page }, testInfo) => {
-        testInfo.annotations.push({
-          type: 'issue',
-          description: 'https://github.com/ionic-team/ionic-framework/issues/27777',
-        });
-        await page.setContent(
-          `
-          <style>
-            :root {
-              --ion-safe-area-top: 60px;
-              --ion-safe-area-bottom: 40px;
-            }
-          </style>
-
-          <ion-action-sheet></ion-action-sheet>
-
-          <script>
-            const actionSheet = document.querySelector('ion-action-sheet');
-            actionSheet.header = 'Header';
-            actionSheet.subHeader = 'Sub Header';
-            actionSheet.buttons = [
-              'Add Reaction',
-              'Copy Text',
-              'Share Text',
-              'Copy Link to Message',
-              'Remind Me',
-              'Pin File',
-              'Star File',
-              'Mark Unread',
-              'Mark Read',
-              'Edit Title',
-              'Erase Title',
-              'Save Image',
-              'Copy Image',
-              'Erase Image',
-              'Delete File',
-              {
-                text: 'Cancel',
-                role: 'cancel'
-              },
-            ];
-          </script>
-        `,
-          config
-        );
-
-        const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-        const actionSheet = page.locator('ion-action-sheet');
-
-        await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
-        await ionActionSheetDidPresent.next();
-
-        await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-safe-area`));
-      });
-    });
-  });
-});

core/src/components/action-sheet/test/basic/action-sheet.spec.tsx

@@ -7,17 +7,10 @@ describe('action sheet: htmlAttributes inheritance', () => {
   it('should correctly inherit attributes on host', async () => {
     const page = await newSpecPage({
       components: [ActionSheet],
-      template: () => (
-        <ion-action-sheet
-          htmlAttributes={{
-            'data-testid': 'basic-action-sheet',
-          }}
-          overlayIndex={1}
-        ></ion-action-sheet>
-      ),
+      template: () => <ion-action-sheet htmlAttributes={{ 'data-testid': 'basic-action-sheet' }}></ion-action-sheet>,
     });
 
-    const actionSheet = page.body.querySelector('ion-action-sheet')!;
+    const actionSheet = page.body.querySelector('ion-action-sheet');
 
     await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet');
   });

core/src/components/alert/alert.ios.scss

@@ -105,17 +105,6 @@
   &::-ms-clear {
     display: none;
   }
-
-  &::-webkit-date-and-time-value {
-    /**
-     * The -webkit-date-and-time-value pseudo element is used 
-     * to style the date/time input on iOS/Mobile Safari.
-     * To avoid layout shift between an empty state and a selected state,
-     * we set the height `18px` to match the native input height for 
-     * date/time inputs on iOS/Mobile Safari.
-     */
-    height: 18px;
-  }
 }
 
 

core/src/components/alert/alert.md.scss

@@ -52,18 +52,9 @@
 }
 
 .alert-message {
-  font-size: $alert-md-message-font-size;
-}
+  max-height: $alert-md-content-max-height;
 
-/**
- * MD Alerts on tablets can expand vertically up to
- * a total maximum height. We only want to set a max-height
- * on mobile phones.
- */
-@include mobile-viewport() {
-  .alert-message {
-    max-height: $alert-md-content-max-height;
-  }
+  font-size: $alert-md-message-font-size;
 }
 
 .alert-message:empty {
@@ -111,24 +102,14 @@
 .alert-checkbox-group {
   position: relative;
 
+  max-height: $alert-md-content-max-height;
+
   border-top: $alert-md-list-border-top;
   border-bottom: $alert-md-list-border-bottom;
 
   overflow: auto;
 }
 
-/**
- * MD Alerts on tablets can expand vertically up to
- * a total maximum height. We only want to set a max-height
- * on mobile phones.
- */
-@include mobile-viewport() {
-  .alert-radio-group,
-  .alert-checkbox-group {
-    max-height: $alert-md-content-max-height;
-  }
-}
-
 .alert-tappable {
   position: relative;
 
@@ -301,14 +282,3 @@
 .alert-button-inner {
   justify-content: $alert-md-button-group-justify-content;
 }
-
-/**
- * MD alerts should scale up to 560px x 560px
- * on tablet dimensions.
- */
-@include tablet-viewport() {
-  :host {
-    --max-width: #{$alert-md-max-width-tablet};
-    --max-height: #{$alert-md-max-height-tablet};
-  }
-}

core/src/components/alert/alert.md.vars.scss

@@ -10,20 +10,6 @@ $alert-md-font-size:                          dynamic-font(14px) !default;
 /// @prop - Max width of the alert
 $alert-md-max-width:                          280px !default;
 
-/// @prop - Max width of the alert on a tablet
-/**
- * Large display requirements for MD Alert:
- * 1. Maintain a minimum of 48px distance from the leading and
- * trailing edges of the screen. (48px * 2 = 96px)
- * 2. The width can increase up to 560px.
- * 3. The height can increase up to 560px.
- * Source: https://m2.material.io/components/dialogs#behavior
- */
-$alert-md-max-width-tablet:                          min(calc(100vw - 96px), 560px) !default;
-
-/// @prop - Max width of the alert on a tablet
-$alert-md-max-height-tablet:                          min(calc(100vh - 96px), 560px) !default;
-
 /// @prop - Border radius of the alert
 $alert-md-border-radius:                      4px !default;
 

core/src/components/alert/alert.scss

@@ -84,15 +84,7 @@
   font-weight: normal;
 }
 
-/**
- * Alert has a maximum height in scenarios
- * such as the MD alert on tablet devices.
- * As a result, we need to make sure the inner
- * containers can scroll otherwise content
- * may be cut off.
- */
-.alert-message,
-.alert-input-group {
+.alert-message {
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;

core/src/components/alert/test/alert.spec.ts

@@ -1,7 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
-
-import { config } from '../../../global/config';
 import { Alert } from '../alert';
+import { config } from '../../../global/config';
 
 describe('alert: custom html', () => {
   it('should not allow for custom html by default', async () => {
@@ -10,7 +9,7 @@ describe('alert: custom html', () => {
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
     });
 
-    const content = page.body.querySelector('.alert-message')!;
+    const content = page.body.querySelector('.alert-message');
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).toBe(null);
   });
@@ -22,7 +21,7 @@ describe('alert: custom html', () => {
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
     });
 
-    const content = page.body.querySelector('.alert-message')!;
+    const content = page.body.querySelector('.alert-message');
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).not.toBe(null);
   });
@@ -34,7 +33,7 @@ describe('alert: custom html', () => {
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
     });
 
-    const content = page.body.querySelector('.alert-message')!;
+    const content = page.body.querySelector('.alert-message');
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).toBe(null);
   });

core/src/components/alert/test/basic/alert-tablet.e2e.ts

@@ -1,47 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test, Viewports } from '@utils/test/playwright';
-
-/**
- * This behavior does not vary across directions.
- */
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('alert: rendering - tablet'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setViewportSize(Viewports.tablet.portrait);
-      await page.goto('/src/components/alert/test/basic', config);
-    });
-
-    test('should expand width and height on larger displays with text', async ({ page }) => {
-      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
-      const button = page.locator('#longMessage');
-      const alert = page.locator('ion-alert');
-
-      await button.click();
-      await ionAlertDidPresent.next();
-
-      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-text'));
-    });
-
-    test('should expand width and height on larger displays with checkboxes', async ({ page }) => {
-      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
-      const button = page.locator('#checkbox');
-      const alert = page.locator('ion-alert');
-
-      await button.click();
-      await ionAlertDidPresent.next();
-
-      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-checkboxes'));
-    });
-
-    test('should expand width and height on larger displays with radios', async ({ page }) => {
-      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
-      const button = page.locator('#radio');
-      const alert = page.locator('ion-alert');
-
-      await button.click();
-      await ionAlertDidPresent.next();
-
-      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-radios'));
-    });
-  });
-});

core/src/components/breadcrumbs/test/breadcrumbs.spec.ts

@@ -1,7 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
 
-import { Breadcrumb } from '../../breadcrumb/breadcrumb';
-import { Breadcrumbs } from '../breadcrumbs';
+import { Breadcrumb } from '../../breadcrumb/breadcrumb.tsx';
+import { Breadcrumbs } from '../breadcrumbs.tsx';
 
 it('should correctly provide the collapsed breadcrumbs in the event payload', async () => {
   const page = await newSpecPage({
@@ -18,8 +18,8 @@ it('should correctly provide the collapsed breadcrumbs in the event payload', as
   });
 
   const onCollapsedClick = jest.fn((ev) => ev);
-  const breadcrumbs = page.body.querySelector('ion-breadcrumbs')!;
-  const breadcrumb = page.body.querySelectorAll('ion-breadcrumb')!;
+  const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
+  const breadcrumb = page.body.querySelectorAll('ion-breadcrumb');
 
   breadcrumbs.addEventListener('ionCollapsedClick', onCollapsedClick);
 
@@ -46,8 +46,8 @@ it('should exclude the separator from narrators', async () => {
     `,
   });
 
-  const firstBreadcrumb = page.body.querySelector('ion-breadcrumb:first-of-type')!;
-  const separator = firstBreadcrumb.shadowRoot!.querySelector('[part="separator"]')!;
+  const firstBreadcrumb = page.body.querySelector('ion-breadcrumb:first-of-type');
+  const separator = firstBreadcrumb.shadowRoot.querySelector('[part="separator"]');
 
   expect(separator.getAttribute('aria-hidden')).toBe('true');
 });
@@ -62,7 +62,7 @@ it('should have color attribute', async () => {
     `,
   });
 
-  const breadcrumbs = page.body.querySelector('ion-breadcrumbs')!;
+  const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
 
   expect(breadcrumbs.hasAttribute('color')).toBe(true);
 });

core/src/components/button/test/form-reference/button.spec.ts

@@ -1,5 +1,4 @@
 import { newSpecPage } from '@stencil/core/testing';
-
 import { Button } from '../../button';
 
 describe('Button: Hidden Form Button', () => {
@@ -16,7 +15,8 @@ describe('Button: Hidden Form Button', () => {
       return page.body.querySelectorAll('form button');
     };
 
-    const button = page.body.querySelector('ion-button')!;
+    const form = page.body.querySelectorAll('form');
+    const button = page.body.querySelector('ion-button');
 
     await page.waitForChanges();
 

core/src/components/checkbox/test/checkbox.spec.ts

@@ -11,7 +11,7 @@ describe('ion-checkbox: disabled', () => {
       `,
     });
 
-    const checkbox = page.body.querySelector('ion-checkbox')!;
+    const checkbox = page.body.querySelector('ion-checkbox');
 
     expect(checkbox.checked).toBe(false);
 

core/src/components/datetime/datetime.md.scss

@@ -136,3 +136,7 @@
 
   justify-content: flex-end;
 }
+
+:host .datetime-view-buttons ion-button {
+  color: $text-color-step-200;
+}

core/src/components/datetime/datetime.tsx

@@ -1132,7 +1132,7 @@ export class Datetime implements ComponentInterface {
    * so we need to re-init behavior with the new elements.
    */
   componentDidRender() {
-    const { presentation, prevPresentation, calendarBodyRef, minParts, preferWheel, forceRenderDate } = this;
+    const { presentation, prevPresentation, calendarBodyRef, minParts, preferWheel } = this;
 
     /**
      * TODO(FW-2165)
@@ -1150,20 +1150,7 @@ export class Datetime implements ComponentInterface {
     const hasCalendarGrid = !preferWheel && ['date-time', 'time-date', 'date'].includes(presentation);
     if (minParts !== undefined && hasCalendarGrid && calendarBodyRef) {
       const workingMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(1)');
-      /**
-       * We need to make sure the datetime is not in the process
-       * of scrolling to a new datetime value if the value
-       * is updated programmatically.
-       * Otherwise, the datetime will appear to not scroll at all because
-       * we are resetting the scroll position to the center of the view.
-       * Prior to the datetime's value being updated programmatically,
-       * the calendarBodyRef is scrolled such that the middle month is centered
-       * in the view. The below code updates the scroll position so the middle
-       * month is also centered in the view. Since the scroll position did not change,
-       * the scroll callback in this file does not fire,
-       * and the resolveForceDateScrolling promise never resolves.
-       */
-      if (workingMonth && forceRenderDate === undefined) {
+      if (workingMonth) {
         calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
       }
     }
@@ -1538,7 +1525,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderCombinedDatePickerColumn() {
-    const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
@@ -1617,7 +1604,6 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         class="date-column"
         color={this.color}
-        disabled={disabled}
         items={items}
         value={todayString}
         onIonChange={(ev: CustomEvent) => {
@@ -1729,7 +1715,7 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
@@ -1737,7 +1723,6 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         class="day-column"
         color={this.color}
-        disabled={disabled}
         items={days}
         value={(workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined}
         onIonChange={(ev: CustomEvent) => {
@@ -1774,7 +1759,7 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
@@ -1782,7 +1767,6 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         class="month-column"
         color={this.color}
-        disabled={disabled}
         items={months}
         value={workingParts.month}
         onIonChange={(ev: CustomEvent) => {
@@ -1818,7 +1802,7 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
@@ -1826,7 +1810,6 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         class="year-column"
         color={this.color}
-        disabled={disabled}
         items={years}
         value={workingParts.year}
         onIonChange={(ev: CustomEvent) => {
@@ -1892,7 +1875,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderHourPickerColumn(hoursData: PickerColumnItem[]) {
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
     if (hoursData.length === 0) return [];
 
     const activePart = this.getActivePartsWithFallback();
@@ -1900,7 +1883,6 @@ export class Datetime implements ComponentInterface {
     return (
       <ion-picker-column-internal
         color={this.color}
-        disabled={disabled}
         value={activePart.hour}
         items={hoursData}
         numericInput
@@ -1921,7 +1903,7 @@ export class Datetime implements ComponentInterface {
     );
   }
   private renderMinutePickerColumn(minutesData: PickerColumnItem[]) {
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
     if (minutesData.length === 0) return [];
 
     const activePart = this.getActivePartsWithFallback();
@@ -1929,7 +1911,6 @@ export class Datetime implements ComponentInterface {
     return (
       <ion-picker-column-internal
         color={this.color}
-        disabled={disabled}
         value={activePart.minute}
         items={minutesData}
         numericInput
@@ -1950,7 +1931,7 @@ export class Datetime implements ComponentInterface {
     );
   }
   private renderDayPeriodPickerColumn(dayPeriodData: PickerColumnItem[]) {
-    const { disabled, workingParts } = this;
+    const { workingParts } = this;
     if (dayPeriodData.length === 0) {
       return [];
     }
@@ -1962,7 +1943,6 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         style={isDayPeriodRTL ? { order: '-1' } : {}}
         color={this.color}
-        disabled={disabled}
         value={activePart.ampm}
         items={dayPeriodData}
         onIonChange={(ev: CustomEvent) => {

core/src/components/datetime/test/comparison.spec.ts

@@ -1,22 +1,21 @@
-import type { DatetimeParts } from '../datetime-interface';
 import { isSameDay, isBefore, isAfter } from '../utils/comparison';
 
 describe('isSameDay()', () => {
   it('should return correct results for month, day, and year', () => {
-    const reference: DatetimeParts = { month: 1, day: 1, year: 2021 };
+    const reference = { month: 1, day: 1, year: 2021 };
 
     expect(isSameDay(reference, { month: 1, day: 1, year: 2021 })).toEqual(true);
     expect(isSameDay(reference, { month: 2, day: 1, year: 2021 })).toEqual(false);
     expect(isSameDay(reference, { month: 1, day: 2, year: 2021 })).toEqual(false);
     expect(isSameDay(reference, { month: 1, day: 1, year: 2022 })).toEqual(false);
     expect(isSameDay(reference, { month: 0, day: 0, year: 0 })).toEqual(false);
-    expect(isSameDay(reference, { month: null, day: null, year: null } as any)).toEqual(false);
+    expect(isSameDay(reference, { month: null, day: null, year: null })).toEqual(false);
   });
 });
 
 describe('isBefore()', () => {
   it('should return correct results for month, day, and year', () => {
-    const reference: DatetimeParts = { month: 1, day: 1, year: 2021 };
+    const reference = { month: 1, day: 1, year: 2021 };
 
     expect(isBefore(reference, { month: 1, day: 1, year: 2021 })).toEqual(false);
     expect(isBefore(reference, { month: 2, day: 1, year: 2021 })).toEqual(true);
@@ -24,13 +23,13 @@ describe('isBefore()', () => {
     expect(isBefore(reference, { month: 1, day: 1, year: 2022 })).toEqual(true);
     expect(isBefore(reference, { month: 1, day: 1, year: 2020 })).toEqual(false);
     expect(isBefore(reference, { month: 0, day: 0, year: 0 })).toEqual(false);
-    expect(isBefore(reference, { month: null, day: null, year: null } as any)).toEqual(false);
+    expect(isBefore(reference, { month: null, day: null, year: null })).toEqual(false);
   });
 });
 
 describe('isAfter()', () => {
   it('should return correct results for month, day, and year', () => {
-    const reference: DatetimeParts = { month: 2, day: 2, year: 2021 };
+    const reference = { month: 2, day: 2, year: 2021 };
 
     expect(isAfter(reference, { month: 2, day: 2, year: 2021 })).toEqual(false);
     expect(isAfter(reference, { month: 2, day: 1, year: 2021 })).toEqual(true);
@@ -43,6 +42,6 @@ describe('isAfter()', () => {
      * 2021 > undefined === false
      * 2021 > null === true
      */
-    expect(isAfter(reference, { month: null, day: null, year: null } as any)).toEqual(true);
+    expect(isAfter(reference, { month: null, day: null, year: null })).toEqual(true);
   });
 });

core/src/components/datetime/test/data.spec.ts

@@ -1,4 +1,3 @@
-import type { DatetimeParts } from '../datetime-interface';
 import {
   generateMonths,
   getDaysOfWeek,
@@ -365,7 +364,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 19,
         minute: 50,
-      } as unknown as DatetimeParts;
+      };
 
       const minParts = {
         day: undefined,
@@ -373,7 +372,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 19,
         minute: 50,
-      } as unknown as DatetimeParts;
+      };
 
       const { hours } = generateTime('en-US', refValue, 'h23', minParts);
 
@@ -388,7 +387,7 @@ describe('generateTime()', () => {
           year: undefined,
           hour: 20,
           minute: 22,
-        } as unknown as DatetimeParts;
+        };
 
         const minParts = {
           day: undefined,
@@ -396,7 +395,7 @@ describe('generateTime()', () => {
           year: undefined,
           hour: 19,
           minute: 30,
-        } as unknown as DatetimeParts;
+        };
 
         const { hours, minutes } = generateTime('en-US', refValue, 'h23', minParts);
 
@@ -412,7 +411,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 20,
         minute: 30,
-      } as unknown as DatetimeParts;
+      };
 
       const minParts = {
         day: undefined,
@@ -420,7 +419,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 19,
         minute: 30,
-      } as unknown as DatetimeParts;
+      };
 
       const maxParts = {
         day: undefined,
@@ -428,7 +427,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 20,
         minute: 40,
-      } as unknown as DatetimeParts;
+      };
 
       const { hours } = generateTime('en-US', refValue, 'h23', minParts, maxParts);
 
@@ -442,7 +441,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 13,
         minute: 0,
-      } as unknown as DatetimeParts;
+      };
 
       const maxParts = {
         day: undefined,
@@ -450,7 +449,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 13,
         minute: 2,
-      } as unknown as DatetimeParts;
+      };
 
       const { minutes } = generateTime('en-US', refValue, 'h23', undefined, maxParts);
 
@@ -464,7 +463,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 12,
         minute: 0,
-      } as unknown as DatetimeParts;
+      };
 
       const maxParts = {
         day: undefined,
@@ -472,7 +471,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 13,
         minute: 2,
-      } as unknown as DatetimeParts;
+      };
 
       const { minutes } = generateTime('en-US', refValue, 'h23', undefined, maxParts);
 
@@ -483,7 +482,7 @@ describe('generateTime()', () => {
 
 describe('getToday', () => {
   beforeAll(() => {
-    jest.useFakeTimers();
+    jest.useFakeTimers('modern');
     // System time is zero based, 1 = February
     jest.setSystemTime(new Date(2022, 1, 21, 18, 30));
   });

core/src/components/datetime/test/disabled/datetime.spec.tsx

@@ -1,39 +0,0 @@
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Datetime } from '../../../datetime/datetime';
-import { PickerColumnInternal } from '../../../picker-column-internal/picker-column-internal';
-import { PickerInternal } from '../../../picker-internal/picker-internal';
-
-describe('ion-datetime disabled', () => {
-  beforeEach(() => {
-    // IntersectionObserver isn't available in test environment
-    const mockIntersectionObserver = jest.fn();
-    mockIntersectionObserver.mockReturnValue({
-      observe: () => null,
-      unobserve: () => null,
-      disconnect: () => null,
-    });
-    global.IntersectionObserver = mockIntersectionObserver;
-  });
-
-  it('picker should be disabled in prefer wheel mode', async () => {
-    const page = await newSpecPage({
-      components: [Datetime, PickerColumnInternal, PickerInternal],
-      template: () => (
-        <ion-datetime id="inline-datetime-wheel" disabled prefer-wheel value="2022-04-21T00:00:00"></ion-datetime>
-      ),
-    });
-
-    await page.waitForChanges();
-
-    const datetime = page.body.querySelector('ion-datetime')!;
-    const columns = datetime.shadowRoot!.querySelectorAll('ion-picker-column-internal');
-
-    await expect(columns.length).toEqual(4);
-
-    columns.forEach((column) => {
-      expect(column.disabled).toBe(true);
-    });
-  });
-});

core/src/components/datetime/test/disabled/index.html

@@ -66,11 +66,6 @@
             <h2>Inline - No Default Value</h2>
             <ion-datetime id="inline-datetime-no-value" disabled></ion-datetime>
           </div>
-
-          <div class="grid-item">
-            <h2>Inline - Prefer Wheel</h2>
-            <ion-datetime id="inline-datetime-wheel" disabled prefer-wheel value="2022-04-21T00:00:00"></ion-datetime>
-          </div>
         </div>
       </ion-content>
       <script>

core/src/components/datetime/test/format.spec.ts

@@ -1,4 +1,3 @@
-import type { DatetimeParts } from '../datetime-interface';
 import {
   generateDayAriaLabel,
   getMonthAndDay,
@@ -110,7 +109,7 @@ describe('getLocalizedDayPeriod', () => {
 
 describe('getLocalizedTime', () => {
   it('should localize the time to PM', () => {
-    const datetimeParts: DatetimeParts = {
+    const datetimeParts = {
       day: 1,
       month: 1,
       year: 2022,
@@ -122,7 +121,7 @@ describe('getLocalizedTime', () => {
   });
 
   it('should localize the time to AM', () => {
-    const datetimeParts: DatetimeParts = {
+    const datetimeParts = {
       day: 1,
       month: 1,
       year: 2022,
@@ -134,7 +133,7 @@ describe('getLocalizedTime', () => {
   });
 
   it('should avoid Chromium bug when using 12 hour time in a 24 hour locale', () => {
-    const datetimeParts: DatetimeParts = {
+    const datetimeParts = {
       day: 1,
       month: 1,
       year: 2022,
@@ -145,12 +144,12 @@ describe('getLocalizedTime', () => {
     expect(getLocalizedTime('en-GB', datetimeParts, 'h12')).toEqual('12:00 am');
   });
   it('should parse time-only values correctly', () => {
-    const datetimeParts: Partial<DatetimeParts> = {
+    const datetimeParts = {
       hour: 22,
       minute: 40,
     };
 
-    expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h12')).toEqual('10:40 PM');
-    expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h23')).toEqual('22:40');
+    expect(getLocalizedTime('en-US', datetimeParts, 'h12')).toEqual('10:40 PM');
+    expect(getLocalizedTime('en-US', datetimeParts, 'h23')).toEqual('22:40');
   });
 });

core/src/components/datetime/test/manipulation.spec.ts

@@ -1,4 +1,3 @@
-import type { DatetimeParts } from '../datetime-interface';
 import {
   getPreviousYear,
   getNextYear,
@@ -104,31 +103,31 @@ describe('getInternalHourValue()', () => {
 
 describe('calculateHourFromAMPM()', () => {
   it('should correctly convert from AM to PM', () => {
-    expect(calculateHourFromAMPM({ hour: 12, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(12);
-    expect(calculateHourFromAMPM({ hour: 1, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(13);
-    expect(calculateHourFromAMPM({ hour: 2, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(14);
-    expect(calculateHourFromAMPM({ hour: 3, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(15);
-    expect(calculateHourFromAMPM({ hour: 4, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(16);
-    expect(calculateHourFromAMPM({ hour: 5, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(17);
-    expect(calculateHourFromAMPM({ hour: 6, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(18);
-    expect(calculateHourFromAMPM({ hour: 7, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(19);
-    expect(calculateHourFromAMPM({ hour: 8, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(20);
-    expect(calculateHourFromAMPM({ hour: 9, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(21);
-    expect(calculateHourFromAMPM({ hour: 10, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(22);
-    expect(calculateHourFromAMPM({ hour: 11, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(23);
+    expect(calculateHourFromAMPM({ hour: 12, ampm: 'am' }, 'pm')).toEqual(12);
+    expect(calculateHourFromAMPM({ hour: 1, ampm: 'am' }, 'pm')).toEqual(13);
+    expect(calculateHourFromAMPM({ hour: 2, ampm: 'am' }, 'pm')).toEqual(14);
+    expect(calculateHourFromAMPM({ hour: 3, ampm: 'am' }, 'pm')).toEqual(15);
+    expect(calculateHourFromAMPM({ hour: 4, ampm: 'am' }, 'pm')).toEqual(16);
+    expect(calculateHourFromAMPM({ hour: 5, ampm: 'am' }, 'pm')).toEqual(17);
+    expect(calculateHourFromAMPM({ hour: 6, ampm: 'am' }, 'pm')).toEqual(18);
+    expect(calculateHourFromAMPM({ hour: 7, ampm: 'am' }, 'pm')).toEqual(19);
+    expect(calculateHourFromAMPM({ hour: 8, ampm: 'am' }, 'pm')).toEqual(20);
+    expect(calculateHourFromAMPM({ hour: 9, ampm: 'am' }, 'pm')).toEqual(21);
+    expect(calculateHourFromAMPM({ hour: 10, ampm: 'am' }, 'pm')).toEqual(22);
+    expect(calculateHourFromAMPM({ hour: 11, ampm: 'am' }, 'pm')).toEqual(23);
 
-    expect(calculateHourFromAMPM({ hour: 13, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(1);
-    expect(calculateHourFromAMPM({ hour: 14, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(2);
-    expect(calculateHourFromAMPM({ hour: 15, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(3);
-    expect(calculateHourFromAMPM({ hour: 16, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(4);
-    expect(calculateHourFromAMPM({ hour: 17, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(5);
-    expect(calculateHourFromAMPM({ hour: 18, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(6);
-    expect(calculateHourFromAMPM({ hour: 19, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(7);
-    expect(calculateHourFromAMPM({ hour: 20, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(8);
-    expect(calculateHourFromAMPM({ hour: 21, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(9);
-    expect(calculateHourFromAMPM({ hour: 22, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(10);
-    expect(calculateHourFromAMPM({ hour: 23, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(11);
-    expect(calculateHourFromAMPM({ hour: 0, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(12);
+    expect(calculateHourFromAMPM({ hour: 13, ampm: 'pm' }, 'am')).toEqual(1);
+    expect(calculateHourFromAMPM({ hour: 14, ampm: 'pm' }, 'am')).toEqual(2);
+    expect(calculateHourFromAMPM({ hour: 15, ampm: 'pm' }, 'am')).toEqual(3);
+    expect(calculateHourFromAMPM({ hour: 16, ampm: 'pm' }, 'am')).toEqual(4);
+    expect(calculateHourFromAMPM({ hour: 17, ampm: 'pm' }, 'am')).toEqual(5);
+    expect(calculateHourFromAMPM({ hour: 18, ampm: 'pm' }, 'am')).toEqual(6);
+    expect(calculateHourFromAMPM({ hour: 19, ampm: 'pm' }, 'am')).toEqual(7);
+    expect(calculateHourFromAMPM({ hour: 20, ampm: 'pm' }, 'am')).toEqual(8);
+    expect(calculateHourFromAMPM({ hour: 21, ampm: 'pm' }, 'am')).toEqual(9);
+    expect(calculateHourFromAMPM({ hour: 22, ampm: 'pm' }, 'am')).toEqual(10);
+    expect(calculateHourFromAMPM({ hour: 23, ampm: 'pm' }, 'am')).toEqual(11);
+    expect(calculateHourFromAMPM({ hour: 0, ampm: 'pm' }, 'am')).toEqual(12);
   });
 });
 

core/src/components/datetime/test/parse.spec.ts

@@ -42,8 +42,7 @@ describe('parseDate()', () => {
    * See https://github.com/ionic-team/ionic-framework/commit/3fb4caf21ffac12f765c4c80bf1850e05d211c6a
    */
   it('should return the correct time zone offset', () => {
-    // Casting as any since `tzOffset` does not exist on DatetimeParts
-    expect((parseDate('2022-12-15T13:47:30-02:00') as any)?.tzOffset).toEqual(undefined);
+    expect(parseDate('2022-12-15T13:47:30-02:00').tzOffset).toEqual(undefined);
   });
 
   it('should parse an array of dates', () => {
@@ -163,8 +162,8 @@ describe('parseMinParts()', () => {
       minute: 4,
       hour: 2,
     };
-    expect(parseMinParts(undefined as any, today)).toEqual(undefined);
-    expect(parseMinParts(null as any, today)).toEqual(undefined);
+    expect(parseMinParts(undefined, today)).toEqual(undefined);
+    expect(parseMinParts(null, today)).toEqual(undefined);
     expect(parseMinParts('foo', today)).toEqual(undefined);
   });
 });
@@ -226,8 +225,8 @@ describe('parseMaxParts()', () => {
       minute: 4,
       hour: 2,
     };
-    expect(parseMaxParts(undefined as any, today)).toEqual(undefined);
-    expect(parseMaxParts(null as any, today)).toEqual(undefined);
+    expect(parseMaxParts(undefined, today)).toEqual(undefined);
+    expect(parseMaxParts(null, today)).toEqual(undefined);
     expect(parseMaxParts('foo', today)).toEqual(undefined);
   });
 });

core/src/components/datetime/test/state.spec.ts

@@ -84,13 +84,13 @@ describe('isPrevMonthDisabled()', () => {
     // Date month and year is the same as min month and year
     expect(isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { month: 1, year: 2021, day: null })).toEqual(true);
     // Date year is the same as min year (month not provided)
-    expect(
-      isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { year: 2021, month: null, day: null } as any)
-    ).toEqual(true);
+    expect(isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(
+      true
+    );
     // Date year is less than the min year (month not provided)
-    expect(
-      isPrevMonthDisabled({ month: 5, year: 2021, day: null }, { year: 2022, month: null, day: null } as any)
-    ).toEqual(true);
+    expect(isPrevMonthDisabled({ month: 5, year: 2021, day: null }, { year: 2022, month: null, day: null })).toEqual(
+      true
+    );
 
     // Date is above the maximum bounds and the previous month does not does not fall within the
     // min-max range.
@@ -118,12 +118,12 @@ describe('isPrevMonthDisabled()', () => {
     expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null })).toEqual(false);
     // Date year is the same as min year,
     // but can navigate to a previous month without reducing the year.
-    expect(
-      isPrevMonthDisabled({ month: 12, year: 2021, day: null }, { year: 2021, month: null, day: null } as any)
-    ).toEqual(false);
-    expect(
-      isPrevMonthDisabled({ month: 2, year: 2021, day: null }, { year: 2021, month: null, day: null } as any)
-    ).toEqual(false);
+    expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(
+      false
+    );
+    expect(isPrevMonthDisabled({ month: 2, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(
+      false
+    );
   });
 });
 

core/src/components/header/header.ios.scss

@@ -130,10 +130,7 @@
  * 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
  *
  * We use opacity: 0 to avoid a layout shift.
- * We target both the attribute and the class in the event that the attribute
- * is not reflected on the host in some frameworks.
  */
-ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"], 
-~ ion-content ion-header.header-collapse-condense) {
+ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) {
   opacity: 0;
 }

core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts

@@ -1,7 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
-
-import { config } from '../../../global/config';
 import { InfiniteScrollContent } from '../infinite-scroll-content';
+import { config } from '../../../global/config';
 
 describe('infinite-scroll-content: custom html', () => {
   it('should not allow for custom html by default', async () => {
@@ -10,7 +9,7 @@ describe('infinite-scroll-content: custom html', () => {
       html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text</button>"></ion-infinite-scroll-content>`,
     });
 
-    const content = page.body.querySelector('.infinite-loading-text')!;
+    const content = page.body.querySelector('.infinite-loading-text');
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).toBe(null);
   });
@@ -22,7 +21,7 @@ describe('infinite-scroll-content: custom html', () => {
       html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text</button>"></ion-infinite-scroll-content>`,
     });
 
-    const content = page.body.querySelector('.infinite-loading-text')!;
+    const content = page.body.querySelector('.infinite-loading-text');
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).not.toBe(null);
   });
@@ -34,7 +33,7 @@ describe('infinite-scroll-content: custom html', () => {
       html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text2</button>"></ion-infinite-scroll-content>`,
     });
 
-    const content = page.body.querySelector('.infinite-loading-text')!;
+    const content = page.body.querySelector('.infinite-loading-text');
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).toBe(null);
   });

core/src/components/input/test/input.spec.ts

@@ -1,5 +1,4 @@
 import { newSpecPage } from '@stencil/core/testing';
-
 import { Input } from '../input';
 
 describe('input: rendering', () => {
@@ -9,7 +8,7 @@ describe('input: rendering', () => {
       html: '<ion-input title="my title" tabindex="-1" data-form-type="password"></ion-input>',
     });
 
-    const nativeEl = page.body.querySelector('ion-input input')!;
+    const nativeEl = page.body.querySelector('ion-input input');
     expect(nativeEl.getAttribute('title')).toBe('my title');
     expect(nativeEl.getAttribute('tabindex')).toBe('-1');
     expect(nativeEl.getAttribute('data-form-type')).toBe('password');
@@ -64,9 +63,9 @@ describe('input: label rendering', () => {
       `,
     });
 
-    const input = page.body.querySelector('ion-input')!;
+    const input = page.body.querySelector('ion-input');
 
-    const labelText = input.querySelector('.label-text-wrapper')!;
+    const labelText = input.querySelector('.label-text-wrapper');
 
     expect(labelText.textContent).toBe('Label Prop Text');
   });
@@ -78,9 +77,9 @@ describe('input: label rendering', () => {
       `,
     });
 
-    const input = page.body.querySelector('ion-input')!;
+    const input = page.body.querySelector('ion-input');
 
-    const labelText = input.querySelector('.label-text-wrapper')!;
+    const labelText = input.querySelector('.label-text-wrapper');
 
     expect(labelText.textContent).toBe('Label Slot Text');
   });
@@ -92,9 +91,9 @@ describe('input: label rendering', () => {
       `,
     });
 
-    const input = page.body.querySelector('ion-input')!;
+    const input = page.body.querySelector('ion-input');
 
-    const labelText = input.querySelector('.label-text-wrapper')!;
+    const labelText = input.querySelector('.label-text-wrapper');
 
     expect(labelText.textContent).toBe('Label Prop Text');
   });

core/src/components/input/test/item/input.spec.ts

@@ -1,7 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
-
-import { Item } from '../../../item/item';
 import { Input } from '../../input';
+import { Item } from '../../../item/item';
 
 it('should render as modern when label is set asynchronously', async () => {
   const page = await newSpecPage({
@@ -13,7 +12,7 @@ it('should render as modern when label is set asynchronously', async () => {
     `,
   });
 
-  const input = page.body.querySelector('ion-input')!;
+  const input = page.body.querySelector('ion-input');
 
   // Template should be modern
   expect(input.classList.contains('legacy-input')).toBe(false);

core/src/components/item-divider/item-divider.scss

@@ -31,19 +31,12 @@
 
   @include font-smoothing();
   @include margin(0);
-  @include padding(var(--padding-top), null, var(--padding-bottom), null);
-
-  /* stylelint-disable */
-  @include ltr() {
-    padding-right: var(--padding-end);
-    padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  }
-
-  @include rtl() {
-    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-    padding-left: var(--padding-end);
-  }
-  /* stylelint-enable */
+  @include padding(
+    var(--padding-top),
+    var(--padding-end),
+    var(--padding-bottom),
+    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
+  );
 
   display: flex;
 
@@ -74,19 +67,12 @@
 
 .item-divider-inner {
   @include margin(0);
-  @include padding(var(--inner-padding-top), null, var(--inner-padding-bottom), null);
-
-  /* stylelint-disable */
-  @include ltr() {
-    padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
-    padding-left: var(--inner-padding-start);
-  }
-
-  @include rtl() {
-    padding-right: var(--inner-padding-start);
-    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
-  }
-  /* stylelint-enable */
+  @include padding(
+    var(--inner-padding-top),
+    calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)),
+    var(--inner-padding-bottom),
+    var(--inner-padding-start)
+  );
 
   display: flex;
 

core/src/components/item-divider/test/basic/item-divider.e2e.ts

@@ -46,33 +46,5 @@ configs().forEach(({ title, screenshot, config }) => {
       const divider = page.locator('ion-item-divider');
       await expect(divider).toHaveScreenshot(screenshot(`item-divider-icon-start`));
     });
-
-    /**
-     * This behavior needs to be tested for all modes & directions
-     * Safe padding should stay on the same side when the direction changes
-     */
-    test('should have safe area padding', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          :root {
-            --ion-safe-area-left: 40px;
-            --ion-safe-area-right: 20px;
-          }
-        </style>
-        <ion-list>
-          <ion-item-divider>
-            <ion-label>Item Divider</ion-label>
-            <ion-button slot="end">Button</ion-button>
-          </ion-item-divider>
-        </ion-list>
-      `,
-        config
-      );
-
-      const list = page.locator('ion-list');
-
-      await expect(list).toHaveScreenshot(screenshot('item-divider-safe-area'));
-    });
   });
 });

core/src/components/item/item.scss

@@ -203,21 +203,14 @@
 .item-native {
   @include border-radius(var(--border-radius));
   @include margin(0);
-  @include padding(var(--padding-top), null, var(--padding-bottom));
+  @include padding(
+    var(--padding-top),
+    var(--padding-end),
+    var(--padding-bottom),
+    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
+  );
   @include text-inherit();
 
-  /* stylelint-disable */
-  @include ltr() {
-    padding-right: var(--padding-end);
-    padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  }
-
-  @include rtl() {
-    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-    padding-left: var(--padding-end);
-  }
-  /* stylelint-enable */
-
   display: flex;
   position: relative;
 
@@ -268,19 +261,12 @@ button, a {
 
 .item-inner {
   @include margin(0);
-  @include padding(var(--inner-padding-top), null, var(--inner-padding-bottom));
-
-  /* stylelint-disable */
-  @include ltr() {
-    padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
-    padding-left: var(--inner-padding-start);
-  }
-
-  @include rtl() {
-    padding-right: var(--inner-padding-start);
-    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
-  }
-  /* stylelint-enable */
+  @include padding(
+    var(--inner-padding-top),
+    calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)),
+    var(--inner-padding-bottom),
+    var(--inner-padding-start)
+  );
 
   display: flex;
 
@@ -309,19 +295,12 @@ button, a {
 
 .item-bottom {
   @include margin(0);
-  @include padding(0, null);
-
-  /* stylelint-disable */
-  @include ltr() {
-    padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-    padding-right: calc(var(--inner-padding-end) + var(--ion-safe-area-right, 0px));
-  }
-
-  @include rtl() {
-    padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
-    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-  }
-  /* stylelint-enable */
+  @include padding(
+    0,
+    var(--inner-padding-end),
+    0,
+    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
+  );
 
   display: flex;
 

core/src/components/item/test/a11y/item.spec.ts

@@ -1,10 +1,9 @@
+import { Radio } from '../../../radio/radio.tsx';
+import { RadioGroup } from '../../../radio-group/radio-group.tsx';
+import { Item } from '../../item.tsx';
+import { List } from '../../../list/list.tsx';
 import { newSpecPage } from '@stencil/core/testing';
 
-import { List } from '../../../list/list';
-import { RadioGroup } from '../../../radio-group/radio-group';
-import { Radio } from '../../../radio/radio';
-import { Item } from '../../item';
-
 describe('ion-item', () => {
   it('should not have a role when used without list', async () => {
     const page = await newSpecPage({
@@ -12,7 +11,7 @@ describe('ion-item', () => {
       html: `<ion-item>Hello World</ion-item>`,
     });
 
-    const item = page.body.querySelector('ion-item')!;
+    const item = page.body.querySelector('ion-item');
     expect(item.getAttribute('role')).toBe(null);
   });
 
@@ -28,7 +27,7 @@ describe('ion-item', () => {
       `,
     });
 
-    const item = page.body.querySelector('ion-item')!;
+    const item = page.body.querySelector('ion-item');
     expect(item.getAttribute('role')).toBe('listitem');
   });
 
@@ -46,7 +45,7 @@ describe('ion-item', () => {
       `,
     });
 
-    const item = page.body.querySelector('ion-item')!;
+    const item = page.body.querySelector('ion-item');
     expect(item.getAttribute('role')).toBe(null);
   });
 });

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

@@ -10,37 +10,5 @@ configs().forEach(({ title, screenshot, config }) => {
 
       await expect(page).toHaveScreenshot(screenshot(`item-diff`));
     });
-
-    /**
-     * This behavior needs to be tested for all modes & directions
-     * Safe padding should stay on the same side when the direction changes
-     */
-    test('should have safe area padding', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          :root {
-            --ion-safe-area-left: 40px;
-            --ion-safe-area-right: 20px;
-          }
-        </style>
-        <ion-list>
-          <ion-item>
-            <ion-label>Item with helper</ion-label>
-            <div slot="helper">Helper</div>
-          </ion-item>
-
-          <ion-item>
-            <ion-label> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
-          </ion-item>
-        </ion-list>
-      `,
-        config
-      );
-
-      const list = page.locator('ion-list');
-
-      await expect(list).toHaveScreenshot(screenshot('item-safe-area'));
-    });
   });
 });

core/src/components/list/list.ios.scss

@@ -19,25 +19,12 @@
   @include border-radius($list-inset-ios-border-radius);
 }
 
-/**
- * These selectors ensure the last item in the list
- * has the correct border.
- * We need to consider the following scenarios:
- 1. The only item in a list.
- 2. The last item in a list as long as it is not the only item.
- 3. The item in the last item-sliding in a list.
- * Note that we do not select ion-item:last-of-type
- * because that will cause the borders to disappear on
- * items in an item-sliding when the item is the last
- * element in the item-sliding container.
- */
-.list-ios.list-inset ion-item:only-child,
-.list-ios.list-inset ion-item:not(:only-of-type):last-of-type,
-.list-ios.list-inset ion-item-sliding:last-of-type ion-item {
+.list-ios.list-inset ion-item:last-child {
   --border-width: 0;
   --inner-border-width: 0;
 }
 
+
 .list-ios.list-inset + ion-list.list-inset {
   @include margin(0, null, null, null);
 }

core/src/components/list/list.md.scss

@@ -23,50 +23,12 @@
   @include border-radius($list-inset-md-border-radius);
 }
 
-/**
- * These selectors ensure the first item in the list
- * has the correct radius.
- * We need to consider the following scenarios:
- 1. The first item in a list as long as it is not the only item.
- 2. The item in the first item-sliding in a list.
- * Note that we do not select "ion-item-sliding ion-item:first-of-type"
- * because that will cause the borders to disappear on
- * items in an item-sliding when the item is the first
- * element in the item-sliding container.
- */
-.list-md.list-inset ion-item:not(:only-of-type):first-of-type,
-.list-md.list-inset ion-item-sliding:first-of-type ion-item {
+.list-md.list-inset ion-item:first-child {
   --border-radius: #{$list-inset-md-border-radius $list-inset-md-border-radius 0 0};
 }
 
-/**
- * These selectors ensure the last item in the list
- * has the correct radius and border.
- * We need to consider the following scenarios:
- 1. The last item in a list as long as it is not the only item.
- 2. The item in the last item-sliding in a list.
- * Note that we do not select "ion-item-sliding ion-item:last-of-type"
- * because that will cause the borders to disappear on
- * items in an item-sliding when the item is the last
- * element in the item-sliding container.
- */
-.list-md.list-inset ion-item:not(:only-of-type):last-of-type,
-.list-md.list-inset ion-item-sliding:last-of-type ion-item {
-  --border-radius: #{0 0 $list-inset-md-border-radius $list-inset-md-border-radius};
-  --border-width: 0;
-  --inner-border-width: 0;
-}
-
-/**
- * The only item in a list should have a border radius
- * on all corners.
- * We target :only-child instead of :only-of-type
- * otherwise borders will disappear on items inside of
- * ion-item-sliding because the item will be the only
- * one of its type inside of the ion-item-sliding group.
- */
-.list-md.list-inset ion-item:only-child {
-  --border-radius: #{$list-inset-md-border-radius};
+.list-md.list-inset ion-item:last-child {
+  --border-radius: #{0 0 $list-inset-md-border-radius, $list-inset-md-border-radius};
   --border-width: 0;
   --inner-border-width: 0;
 }

core/src/components/list/test/lines/list.e2e.ts

@@ -26,162 +26,3 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
-
-/**
- * Padding and border color ensures the bottom border can be easily seen if it regresses.
- * The background color ensures that any border radius values can be seen.
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('list: lines with children'), () => {
-    test('only item in inset list should not have line', async ({ page }) => {
-      test.info().annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/28435',
-      });
-      await page.setContent(
-        `
-        <style>
-          #container {
-            padding: 10px;
-            background: #0088cc;
-          }
-
-          ion-item {
-            --border-color: red;
-          }
-        </style>
-        <div id="container">
-          <ion-list inset="true">
-            <ion-item>
-              <ion-label>Item 0</ion-label>
-            </ion-item>
-          </ion-list>
-        </div>
-      `,
-        config
-      );
-
-      const container = page.locator('#container');
-
-      await expect(container).toHaveScreenshot(screenshot('inset-list-only-item-no-lines'));
-    });
-    test('last item in inset list with end options should not have line', async ({ page }) => {
-      test.info().annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/28435',
-      });
-      await page.setContent(
-        `
-        <style>
-          #container {
-            padding: 10px;
-            background: #0088cc;
-          }
-
-          ion-item {
-            --border-color: red;
-          }
-        </style>
-        <div id="container">
-          <ion-list inset="true">
-            <ion-item-sliding>
-              <ion-item>
-                <ion-label>Item 0</ion-label>
-              </ion-item>
-              <ion-item-options slot="end">
-                <ion-item-option color="warning">
-                  <ion-icon slot="icon-only" name="pin"></ion-icon>
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item-sliding>
-              <ion-item>
-                <ion-label>Item 1</ion-label>
-              </ion-item>
-              <ion-item-options slot="end">
-                <ion-item-option color="warning">
-                  <ion-icon slot="icon-only" name="pin"></ion-icon>
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item-sliding>
-              <ion-item>
-                <ion-label>Item 2</ion-label>
-              </ion-item>
-              <ion-item-options slot="end">
-                <ion-item-option color="warning">
-                  <ion-icon slot="icon-only" name="pin"></ion-icon>
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-          </ion-list>
-        </div>
-      `,
-        config
-      );
-
-      const container = page.locator('#container');
-
-      await expect(container).toHaveScreenshot(screenshot('inset-list-end-options-no-lines'));
-    });
-    test('last item in inset list with start options should not have line', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          #container {
-            padding: 10px;
-            background: #0088cc;
-          }
-
-          ion-item {
-            --border-color: red;
-          }
-        </style>
-        <div id="container">
-          <ion-list inset="true">
-            <ion-item-sliding>
-              <ion-item-options slot="start">
-                <ion-item-option color="warning">
-                  <ion-icon slot="icon-only" name="pin"></ion-icon>
-                </ion-item-option>
-              </ion-item-options>
-              <ion-item>
-                <ion-label>Item 0</ion-label>
-              </ion-item>
-            </ion-item-sliding>
-
-            <ion-item-sliding>
-              <ion-item-options slot="start">
-                <ion-item-option color="warning">
-                  <ion-icon slot="icon-only" name="pin"></ion-icon>
-                </ion-item-option>
-              </ion-item-options>
-              <ion-item>
-                <ion-label>Item 1</ion-label>
-              </ion-item>
-            </ion-item-sliding>
-
-            <ion-item-sliding>
-              <ion-item-options slot="start">
-                <ion-item-option color="warning">
-                  <ion-icon slot="icon-only" name="pin"></ion-icon>
-                </ion-item-option>
-              </ion-item-options>
-              <ion-item>
-                <ion-label>Item 2</ion-label>
-              </ion-item>
-            </ion-item-sliding>
-          </ion-list>
-        </div>
-      `,
-        config
-      );
-
-      const container = page.locator('#container');
-
-      await expect(container).toHaveScreenshot(screenshot('inset-list-start-options-no-lines'));
-    });
-  });
-});