@ionic/core 7.4.1-nightly.20230918 → 7.4.1-nightly.20230920

package/dist/cjs/{overlays-c78a0148.js → overlays-d3a13e61.js}

@@ -3,11 +3,12 @@
  */
 'use strict';
 
-const ionicGlobal = require('./ionic-global-6d5d27b5.js');
+const index = require('./index-306a7476.js');
+const ionicGlobal = require('./ionic-global-14a0604b.js');
 const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 const hardwareBackButton = require('./hardware-back-button-b67c8e75.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const index = require('./index-cc7dfb7c.js');
+const index$1 = require('./index-cc7dfb7c.js');
 
 let lastOverlayIndex = 0;
 let lastId = 0;
@@ -21,7 +22,7 @@ const createController = (tagName) => {
       return dismissOverlay(document, data, role, tagName, id);
     },
     async getTop() {
-      return getOverlay(document, tagName);
+      return getPresentedOverlay(document, tagName);
     },
   };
 };
@@ -138,7 +139,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-  const lastOverlay = getOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
+  const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
   const target = ev.target;
   /**
    * If no active overlay, ignore this event.
@@ -293,7 +294,7 @@ const connectListeners = (doc) => {
     }, true);
     // handle back-button click
     doc.addEventListener('ionBackButton', (ev) => {
-      const lastOverlay = getOverlay(doc);
+      const lastOverlay = getPresentedOverlay(doc);
       if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
         ev.detail.register(hardwareBackButton.OVERLAY_BACK_BUTTON_PRIORITY, () => {
           return lastOverlay.dismiss(undefined, BACKDROP);
@@ -303,7 +304,7 @@ const connectListeners = (doc) => {
     // handle ESC to close overlay
     doc.addEventListener('keydown', (ev) => {
       if (ev.key === 'Escape') {
-        const lastOverlay = getOverlay(doc);
+        const lastOverlay = getPresentedOverlay(doc);
         if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
           lastOverlay.dismiss(undefined, BACKDROP);
         }
@@ -312,12 +313,15 @@ const connectListeners = (doc) => {
   }
 };
 const dismissOverlay = (doc, data, role, overlayTag, id) => {
-  const overlay = getOverlay(doc, overlayTag, id);
+  const overlay = getPresentedOverlay(doc, overlayTag, id);
   if (!overlay) {
     return Promise.reject('overlay does not exist');
   }
   return overlay.dismiss(data, role);
 };
+/**
+ * Returns a list of all overlays in the DOM even if they are not presented.
+ */
 const getOverlays = (doc, selector) => {
   if (selector === undefined) {
     selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
@@ -325,14 +329,24 @@ const getOverlays = (doc, selector) => {
   return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
 /**
- * Returns an overlay element
+ * Returns a list of all presented overlays.
+ * Inline overlays can exist in the DOM but not be presented,
+ * so there are times when we want to exclude those.
+ * @param doc The document to find the element within.
+ * @param overlayTag The selector for the overlay, defaults to Ionic overlay components.
+ */
+const getPresentedOverlays = (doc, overlayTag) => {
+  return getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
+};
+/**
+ * Returns a presented overlay element.
  * @param doc The document to find the element within.
  * @param overlayTag The selector for the overlay, defaults to Ionic overlay components.
  * @param id The unique identifier for the overlay instance.
  * @returns The overlay element or `undefined` if no overlay element is found.
  */
-const getOverlay = (doc, overlayTag, id) => {
-  const overlays = getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
+const getPresentedOverlay = (doc, overlayTag, id) => {
+  const overlays = getPresentedOverlays(doc, overlayTag);
   return id === undefined ? overlays[overlays.length - 1] : overlays.find((o) => o.id === id);
 };
 /**
@@ -438,7 +452,13 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
   if (!overlay.presented) {
     return false;
   }
-  setRootAriaHidden(false);
+  /**
+   * If this is the last visible overlay then
+   * we want to re-add the root to the accessibility tree.
+   */
+  if (index.doc !== undefined && getPresentedOverlays(index.doc).length === 1) {
+    setRootAriaHidden(false);
+  }
   overlay.presented = false;
   try {
     // Overlay contents should not be clickable during dismiss
@@ -650,7 +670,7 @@ const createTriggerController = () => {
     removeClickListener();
     const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
     if (!triggerEl) {
-      index.printIonWarning(`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`, el);
+      index$1.printIonWarning(`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`, el);
       return;
     }
     const configureTriggerInteraction = (targetEl, overlayEl) => {
@@ -680,7 +700,7 @@ exports.createTriggerController = createTriggerController;
 exports.dismiss = dismiss;
 exports.eventMethod = eventMethod;
 exports.focusFirstDescendant = focusFirstDescendant;
-exports.getOverlay = getOverlay;
+exports.getPresentedOverlay = getPresentedOverlay;
 exports.isCancel = isCancel;
 exports.loadingController = loadingController;
 exports.modalController = modalController;

package/dist/cjs/{status-tap-cc4c6539.js → status-tap-e2e45ff8.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-184fdd62.js');
+const index = require('./index-6f887430.js');
 const index$1 = require('./index-10873539.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 require('./index-cc7dfb7c.js');

package/dist/collection/collection-manifest.json

@@ -94,7 +94,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.2.1",
+    "version": "4.3.0",
     "typescriptVersion": "5.1.6"
   },
   "collections": [

package/dist/collection/components/checkbox/checkbox.js

@@ -47,6 +47,9 @@ export class Checkbox {
     this.onBlur = () => {
       this.ionBlur.emit();
     };
+    this.onClick = (ev) => {
+      this.toggleChecked(ev);
+    };
     this.color = undefined;
     this.name = this.inputId;
     this.checked = false;
@@ -58,9 +61,8 @@ export class Checkbox {
     this.alignment = 'center';
     this.legacy = undefined;
   }
-  // TODO(FW-3100): remove this
   connectedCallback() {
-    this.legacyFormController = createLegacyFormController(this.el);
+    this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
   }
   componentWillLoad() {
     this.emitStyle();
@@ -107,7 +109,7 @@ export class Checkbox {
         [`checkbox-justify-${justify}`]: true,
         [`checkbox-alignment-${alignment}`]: true,
         [`checkbox-label-placement-${labelPlacement}`]: true,
-      }) }, h("label", { class: "checkbox-wrapper" }, h("input", Object.assign({ type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { class: {
+      }), onClick: this.onClick }, h("label", { class: "checkbox-wrapper" }, h("input", Object.assign({ type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { class: {
         'label-text-wrapper': true,
         'label-text-wrapper-hidden': el.textContent === '',
       } }, h("slot", null)), h("div", { class: "native-wrapper" }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
@@ -140,7 +142,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         'checkbox-indeterminate': indeterminate,
         'legacy-checkbox': true,
         interactive: true,
-      }) }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path), h("label", { htmlFor: inputId }, labelText), h("input", { type: "checkbox", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
+      }), onClick: this.onClick }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path), h("label", { htmlFor: inputId }, labelText), h("input", { type: "checkbox", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
   }
   getSVGPath(mode, indeterminate) {
     let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

package/dist/collection/components/checkbox/test/basic/checkbox.e2e.js

@@ -56,5 +56,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await checkbox.evaluate((el) => (el.checked = true));
       expect(ionChange).not.toHaveReceivedEvent();
     });
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(`
+        <ion-item>
+          <ion-checkbox>Size</ion-checkbox>
+        </ion-item>
+      `, config);
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });

package/dist/collection/components/checkbox/test/legacy/basic/checkbox.e2e.js

@@ -47,5 +47,22 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await checkbox.evaluate((el) => (el.checked = true));
       await expect(ionChange).not.toHaveReceivedEvent();
     });
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(`
+        <ion-item>
+          <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
+        </ion-item>
+      `, config);
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });

package/dist/collection/components/item/item.ios.css

@@ -134,6 +134,10 @@
     background: var(--ion-color-contrast);
   }
 }
+:host(.item-has-interactive-control) {
+  cursor: pointer;
+}
+
 :host(.item-interactive-disabled:not(.item-multiple-inputs)) {
   cursor: default;
   pointer-events: none;

package/dist/collection/components/item/item.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, forceUpdate, h } from "@stencil/core";
+import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { inheritAttributes, raf } from "../../utils/helpers";
 import { printIonError, printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -194,8 +194,21 @@ export class Item {
       this.el.classList.add('item-has-start-slot');
     }
   }
+  getFirstInteractive() {
+    if (Build.isTesting) {
+      /**
+       * Pseudo selectors can't be tested in unit tests.
+       * It will cause an error when running the tests.
+       *
+       * TODO: FW-5205 - Remove the build conditional when this is fixed in Stencil
+       */
+      return undefined;
+    }
+    const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])');
+    return controls[0];
+  }
   render() {
-    const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection, inheritedAriaAttributes, } = this;
+    const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
     const childStyles = {};
     const mode = getIonMode(this);
     const clickable = this.isClickable();
@@ -209,15 +222,37 @@ export class Item {
         rel,
         target,
       };
+    let clickFn = {};
+    const firstInteractive = this.getFirstInteractive();
     // Only set onClick if the item is clickable to prevent screen
     // readers from reading all items as clickable
-    const clickFn = clickable
-      ? {
+    if (clickable || (firstInteractive !== undefined && !multipleInputs)) {
+      clickFn = {
         onClick: (ev) => {
-          openURL(href, ev, routerDirection, routerAnimation);
+          if (clickable) {
+            openURL(href, ev, routerDirection, routerAnimation);
+          }
+          if (firstInteractive !== undefined && !multipleInputs) {
+            const path = ev.composedPath();
+            const target = path[0];
+            if (ev.isTrusted) {
+              /**
+               * Dispatches a click event to the first interactive element,
+               * when it is the result of a user clicking on the item.
+               *
+               * We check if the click target is in the shadow root,
+               * which means the user clicked on the .item-native or
+               * .item-inner padding.
+               */
+              const clickedWithinShadowRoot = this.el.shadowRoot.contains(target);
+              if (clickedWithinShadowRoot) {
+                firstInteractive.click();
+              }
+            }
+          }
         },
-      }
-      : {};
+      };
+    }
     const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
     this.itemStyles.forEach((value) => {
       Object.assign(childStyles, value);
@@ -232,6 +267,7 @@ export class Item {
         [`item-lines-${lines}`]: lines !== undefined,
         [`item-fill-${fillValue}`]: true,
         [`item-shape-${shape}`]: shape !== undefined,
+        'item-has-interactive-control': firstInteractive !== undefined,
         'item-disabled': disabled,
         'in-list': inList,
         'item-multiple-inputs': this.multipleInputs,

package/dist/collection/components/item/item.md.css

@@ -134,6 +134,10 @@
     background: var(--ion-color-contrast);
   }
 }
+:host(.item-has-interactive-control) {
+  cursor: pointer;
+}
+
 :host(.item-interactive-disabled:not(.item-multiple-inputs)) {
   cursor: default;
   pointer-events: none;

package/dist/collection/components/menu/menu.ios.css

@@ -97,12 +97,14 @@
     * Otherwise, the content will have less space on both sides.
     *
     * RTL:
-    * The right side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
+    * The right side of the menu touches the screen edge.
+    * The right side needs to revert back to the default value that was set in the core styles, so we unset it here.
+    * This would keep the variable consistent with the core styles.
+    * Additionally, it would continue to allow users to override the variable if they choose to.
     * The left side of the menu is not touching the screen edge. Padding is not
     * applied to the left side of the menu. A value of 0 is set.
     */
-  --ion-safe-area-right: env(safe-area-inset-right);
+  --ion-safe-area-right: unset;
   --ion-safe-area-left: 0px;
 }
 
@@ -115,12 +117,14 @@
       * Otherwise, the content will have less space on both sides.
       *
       * RTL:
-      * The right side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
+      * The right side of the menu touches the screen edge.
+      * The right side needs to revert back to the default value that was set in the core styles, so we unset it here.
+      * This would keep the variable consistent with the core styles.
+      * Additionally, it would continue to allow users to override the variable if they choose to.
       * The left side of the menu is not touching the screen edge. Padding is not
       * applied to the left side of the menu. A value of 0 is set.
       */
-    --ion-safe-area-right: env(safe-area-inset-right);
+    --ion-safe-area-right: unset;
     --ion-safe-area-left: 0px;
   }
 }
@@ -176,12 +180,14 @@
     * Otherwise, the content will have less space on both sides.
     *
     * RTL:
-    * The left side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
+    * The left side of the menu touches the screen edge.
+    * The left side needs to revert back to the default value that was set in the core styles, so we unset it here.
+    * This would keep the variable consistent with the core styles.
+    * Additionally, it would continue to allow users to override the variable if they choose to.
     * The right side of the menu is not touching the screen edge. Padding is not
     * applied to the right side of the menu. A value of 0 is set.
     */
-  --ion-safe-area-left: env(safe-area-inset-left);
+  --ion-safe-area-left: unset;
   --ion-safe-area-right: 0px;
 }
 
@@ -194,12 +200,14 @@
       * Otherwise, the content will have less space on both sides.
       *
       * RTL:
-      * The left side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
+      * The left side of the menu touches the screen edge.
+      * The left side needs to revert back to the default value that was set in the core styles, so we unset it here.
+      * This would keep the variable consistent with the core styles.
+      * Additionally, it would continue to allow users to override the variable if they choose to.
       * The right side of the menu is not touching the screen edge. Padding is not
       * applied to the right side of the menu. A value of 0 is set.
       */
-    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-left: unset;
     --ion-safe-area-right: 0px;
   }
 }

package/dist/collection/components/menu/menu.js

@@ -7,7 +7,7 @@ import { doc } from "../../utils/browser/index";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
-import { getOverlay } from "../../utils/overlays";
+import { getPresentedOverlay } from "../../utils/overlays";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
@@ -35,7 +35,7 @@ export class Menu {
        * open does not contain this ion-menu, then ion-menu's
        * focus trapping should not run.
        */
-      const lastOverlay = getOverlay(document);
+      const lastOverlay = getPresentedOverlay(document);
       if (lastOverlay && !lastOverlay.contains(this.el)) {
         return;
       }

package/dist/collection/components/menu/menu.md.css

@@ -97,12 +97,14 @@
     * Otherwise, the content will have less space on both sides.
     *
     * RTL:
-    * The right side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
+    * The right side of the menu touches the screen edge.
+    * The right side needs to revert back to the default value that was set in the core styles, so we unset it here.
+    * This would keep the variable consistent with the core styles.
+    * Additionally, it would continue to allow users to override the variable if they choose to.
     * The left side of the menu is not touching the screen edge. Padding is not
     * applied to the left side of the menu. A value of 0 is set.
     */
-  --ion-safe-area-right: env(safe-area-inset-right);
+  --ion-safe-area-right: unset;
   --ion-safe-area-left: 0px;
 }
 
@@ -115,12 +117,14 @@
       * Otherwise, the content will have less space on both sides.
       *
       * RTL:
-      * The right side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
+      * The right side of the menu touches the screen edge.
+      * The right side needs to revert back to the default value that was set in the core styles, so we unset it here.
+      * This would keep the variable consistent with the core styles.
+      * Additionally, it would continue to allow users to override the variable if they choose to.
       * The left side of the menu is not touching the screen edge. Padding is not
       * applied to the left side of the menu. A value of 0 is set.
       */
-    --ion-safe-area-right: env(safe-area-inset-right);
+    --ion-safe-area-right: unset;
     --ion-safe-area-left: 0px;
   }
 }
@@ -176,12 +180,14 @@
     * Otherwise, the content will have less space on both sides.
     *
     * RTL:
-    * The left side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
+    * The left side of the menu touches the screen edge.
+    * The left side needs to revert back to the default value that was set in the core styles, so we unset it here.
+    * This would keep the variable consistent with the core styles.
+    * Additionally, it would continue to allow users to override the variable if they choose to.
     * The right side of the menu is not touching the screen edge. Padding is not
     * applied to the right side of the menu. A value of 0 is set.
     */
-  --ion-safe-area-left: env(safe-area-inset-left);
+  --ion-safe-area-left: unset;
   --ion-safe-area-right: 0px;
 }
 
@@ -194,12 +200,14 @@
       * Otherwise, the content will have less space on both sides.
       *
       * RTL:
-      * The left side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
+      * The left side of the menu touches the screen edge.
+      * The left side needs to revert back to the default value that was set in the core styles, so we unset it here.
+      * This would keep the variable consistent with the core styles.
+      * Additionally, it would continue to allow users to override the variable if they choose to.
       * The right side of the menu is not touching the screen edge. Padding is not
       * applied to the right side of the menu. A value of 0 is set.
       */
-    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-left: unset;
     --ion-safe-area-right: 0px;
   }
 }

package/dist/collection/components/menu/test/safe-area/menu.e2e.js

@@ -0,0 +1,87 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes.
+ */
+configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('menu: safe area'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/menu/test/safe-area`, config);
+    });
+    test.describe('side: start', () => {
+      test('should render with safe area when notch is on the left', async ({ page }) => {
+        const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+        await page.evaluate(() => {
+          const style = document.querySelector('style');
+          style.innerHTML = `
+            :root {
+              --ion-safe-area-left: 50px !important;
+              --ion-safe-area-right: 10px !important;
+            }
+          `;
+        });
+        await page.click('#open-start');
+        await ionDidOpen.next();
+        const startMenu = page.locator('[menu-id="start-menu"]');
+        await expect(startMenu).toHaveClass(/show-menu/);
+        await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-left-notch`));
+      });
+      test('should render with safe area when notch is on the right', async ({ page }) => {
+        const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+        await page.evaluate(() => {
+          const style = document.querySelector('style');
+          style.innerHTML = `
+            :root {
+              --ion-safe-area-left: 10px !important;
+              --ion-safe-area-right: 50px !important;
+            }
+          `;
+        });
+        await page.click('#open-start');
+        await ionDidOpen.next();
+        const startMenu = page.locator('[menu-id="start-menu"]');
+        await expect(startMenu).toHaveClass(/show-menu/);
+        await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-right-notch`));
+      });
+    });
+    test.describe('side: end', () => {
+      test('should render with safe area when notch is on the left', async ({ page }) => {
+        const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+        await page.evaluate(() => {
+          const style = document.querySelector('style');
+          style.innerHTML = `
+            :root {
+              --ion-safe-area-left: 50px !important;
+              --ion-safe-area-right: 10px !important;
+            }
+          `;
+        });
+        await page.click('#open-end');
+        await ionDidOpen.next();
+        const endMenu = page.locator('[menu-id="end-menu"]');
+        await expect(endMenu).toHaveClass(/show-menu/);
+        await expect(page).toHaveScreenshot(screenshot(`menu-end-safe-area-left-notch`));
+      });
+      test('should render with safe area when notch is on the right', async ({ page }) => {
+        const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+        await page.evaluate(() => {
+          const style = document.querySelector('style');
+          style.innerHTML = `
+            :root {
+              --ion-safe-area-left: 10px !important;
+              --ion-safe-area-right: 50px !important;
+            }
+          `;
+        });
+        await page.click('#open-end');
+        await ionDidOpen.next();
+        const endMenu = page.locator('[menu-id="end-menu"]');
+        await expect(endMenu).toHaveClass(/show-menu/);
+        await expect(page).toHaveScreenshot(screenshot(`menu-end-safe-area-right-notch`));
+      });
+    });
+  });
+});

package/dist/collection/components/radio/test/item/radio.e2e.js

@@ -66,4 +66,27 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`radio-stacked-label-in-item`));
     });
   });
+  test.describe(title('radio: ionChange'), () => {
+    test('clicking padded space within item should click the radio', async ({ page }) => {
+      await page.setContent(`
+        <ion-radio-group>
+          <ion-item>
+            <ion-radio>
+              <ion-label>Enable Notifications</ion-label>
+            </ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `, config);
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+      expect(ionChange).toHaveReceivedEvent();
+    });
+  });
 });

package/dist/collection/components/range/range.ios.css

@@ -407,6 +407,10 @@
   margin-bottom: 0px;
 }
 
+/**
+ * 24px was chosen so the knob and its
+ * shadow do not get cut off by the item.
+ */
 :host {
   --knob-border-radius: 50%;
   --knob-background: #ffffff;
@@ -428,6 +432,16 @@
   padding-bottom: 8px;
 }
 
+:host(.range-item-start-adjustment) {
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+}
+
+:host(.range-item-end-adjustment) {
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
+}
+
 :host(.ion-color) .range-bar-active,
 :host(.ion-color) .range-tick-active {
   background: var(--ion-color-base);