@ionic/core 8.7.16-dev.11767106094.1edd9cde → 8.7.16-dev.11767205737.13557925

package/dist/collection/components/picker-column/picker-column.js

@@ -7,10 +7,9 @@ import { getElementRoot, raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
 import { isPlatform } from "../../utils/platform";
 import { createColorClasses } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot prefix - Content to show on the left side of the picker options.
  * @slot suffix - Content to show on the right side of the picker options.
@@ -551,15 +550,15 @@ export class PickerColumn {
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '7c9603b518a73f9883ff01464fe3f70c14b9059c', class: createColorClasses(color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: createColorClasses(color, {
+                [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: 'e98e79dd51550361131d59a8871fe2990dc40edc', name: "prefix" }), h("div", { key: '85894791c93da84401138285bf4fbb169897c3d6', class: "picker-opts", ref: (el) => {
+            }) }, h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'd9546be214c2faf2340faf31d8468c2f39f31e4c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '47671f18a0a0659c0660b3b82d234e92b6dcc721', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'f3fc8f9cfc67d0d0dfbf7c134524353297117170', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '4c30c1e5df5f1758978458dbd7e405a01d3118fe' }), h("div", { key: '4e71db05a18d645c6fa49d3a6e67a68cc374b868', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '7fd2461759a92a6909ab514a14bdb41f7d2d16d5', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '015fc0875e5e2df575810fd79635ed5a0f5a29dd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd706a79b1b5b31dc1e358fe1d64b41a2104ea153', name: "suffix" })));
+            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-column-option/picker-column-option.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/picker-column-option/picker-column-option.js

@@ -4,11 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class PickerColumnOption {
     constructor() {
         /**
@@ -94,26 +90,24 @@ export class PickerColumnOption {
     }
     render() {
         const { color, disabled, ariaLabel } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'dc87366ba724d5a0243dcde6bc8cc5c16d6d0c26', class: createColorClasses(color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
+                [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("div", { key: '4cb0791a9e8f0e6c3403b2cb72c74502025f5218', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'f6b8dd7bc429991ae9c0d3448127117d62c068ba' }))));
+            }) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["picker-column-option.ios.scss"],
-            "md": ["picker-column-option.md.scss"],
-            "ionic": ["picker-column-option.md.scss"]
+            "md": ["picker-column-option.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["picker-column-option.ios.css"],
-            "md": ["picker-column-option.md.css"],
-            "ionic": ["picker-column-option.md.css"]
+            "md": ["picker-column-option.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/picker-column-option/picker-column-option.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/picker-legacy/picker.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -109,8 +103,8 @@
 
 .picker-wrapper {
   border-radius: var(--border-radius);
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
@@ -168,12 +162,6 @@
   pointer-events: none;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/picker-legacy/picker.js

@@ -7,13 +7,12 @@ import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Picker {
     constructor() {
@@ -207,12 +206,12 @@ export class Picker {
     }
     render() {
         const { htmlAttributes } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, Object.assign({ key: '722010a58f4c7fc3128b1f95675eba2b2b4a6f6a', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        const mode = getIonMode(this);
+        return (h(Host, Object.assign({ key: 'b95440747eb80cba23ae676d399d5e5816722c58', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [theme]: true,
+            }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'b3acdedf7f305b26dbec78a9e3445f24707b6673', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '67bc76dbd12f1429ff5b5951480ed248fdef0d3b', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '9bf585133a606474e1ec4ddc1028f06e1bbc88d5', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '8bd35f590263153814969636c3c47399f13aed64', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'e12063ea0bd81dfc54e379adddca75941cb8f172', class: "picker-columns" }, h("div", { key: '96baa0fab12ef8d9b79d8f10617a6791dcb2711c', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '42f2f7ad28a1802a5763e113c3fa3f807caa96de', class: "picker-below-highlight" }))), h("div", { key: '274d15028222bbd586c0497d56934d0ff72125bd', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '169d1c83ef40e7fcb134219a585298b403a70b0f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '98518e5f5cea2dfb8dfa63d9545e9ae3a5765023', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '151755ab8eb23f9adafbfe201349398f5a69dee7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '5dcf93b2f4fe8f4fce7c7aec8f85ef45a03ef470', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'fd5d66708edd38adc5a4d2fad7298969398a05e3', class: "picker-columns" }, h("div", { key: '1b5830fd6cef1016af7736792c514965d6cb38a8', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'c6edeca7afd69e13c9c66ba36f261974fd0f8f78', class: "picker-below-highlight" }))), h("div", { key: 'e2a4b24710e30579b14b82dbfd3761b2187797b5', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/picker-legacy/picker.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -109,8 +103,8 @@
 
 .picker-wrapper {
   border-radius: var(--border-radius);
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
@@ -168,12 +162,6 @@
   pointer-events: none;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/picker-legacy-column/picker-column.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -126,12 +120,6 @@
   white-space: nowrap;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/picker-legacy-column/picker-column.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
 import { getClassMap } from "../../utils/theme";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
  * @internal
  */
@@ -334,10 +334,10 @@ export class PickerColumnCmp {
     }
     render() {
         const col = this.col;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'ab339936b884abbaf075bfaf1a1556dc396ea959', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'ed32d108dd94f0302fb453c31a3497ebae65ec37', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '3cea9388a0818db89789087b90790b7734c4a9bf', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '4e4a704f5a6ca6e1647960655ce3fe454fa33f0a', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '536ee0f81d87db545846d5cdc8364e93f15a344c', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '9f0634890e66fd4ae74f826d1eea3431de121393', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '337e996e5be91af16446085fe22436f213b771eb', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'd69a132599d78d9e5107f12228978cfce4e43098', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

package/dist/collection/components/picker-legacy-column/picker-column.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -126,12 +120,6 @@
   white-space: nowrap;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/popover/animations/ios.enter.js

@@ -31,7 +31,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
     const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
     const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
     const margin = size === 'cover' ? 0 : 25;
-    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
+    const { originX, originY, top, left, bottom, checkSafeAreaTop, checkSafeAreaBottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const contentAnimation = createAnimation();
@@ -61,19 +61,35 @@ export const iosEnterAnimation = (baseEl, opts) => {
         if (addPopoverBottomClass) {
             baseEl.classList.add('popover-bottom');
         }
-        if (bottom !== undefined) {
-            contentEl.style.setProperty('bottom', `${bottom}px`);
-        }
+        /**
+         * Safe area CSS variable adjustments.
+         * When the popover is positioned near an edge, we add the corresponding
+         * safe-area inset to ensure the popover doesn't overlap with system UI
+         * (status bars, home indicators, navigation bars on Android API 36+, etc.)
+         */
+        const safeAreaTop = ' + var(--ion-safe-area-top, 0)';
+        const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0)';
         const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
         const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
+        let topValue = `${top}px`;
+        let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
         let leftValue = `${left}px`;
+        if (checkSafeAreaTop) {
+            topValue = `${top}px${safeAreaTop}`;
+        }
+        if (checkSafeAreaBottom && bottomValue !== undefined) {
+            bottomValue = `${bottom}px${safeAreaBottom}`;
+        }
         if (checkSafeAreaLeft) {
             leftValue = `${left}px${safeAreaLeft}`;
         }
         if (checkSafeAreaRight) {
             leftValue = `${left}px${safeAreaRight}`;
         }
-        contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
+        if (bottomValue !== undefined) {
+            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+        }
+        contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
         contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
         contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
         if (arrowEl !== null) {

package/dist/collection/components/popover/animations/md.enter.js

@@ -28,7 +28,23 @@ export const mdEnterAnimation = (baseEl, opts) => {
     };
     const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
     const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
-    const { originX, originY, top, left, bottom } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
+    const { originX, originY, top, left, bottom, checkSafeAreaTop, checkSafeAreaBottom } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
+    /**
+     * Safe area CSS variable adjustments.
+     * When the popover is positioned near an edge, we add the corresponding
+     * safe-area inset to ensure the popover doesn't overlap with system UI
+     * (status bars, home indicators, navigation bars on Android API 36+, etc.)
+     */
+    const safeAreaTop = ' + var(--ion-safe-area-top, 0)';
+    const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0)';
+    let topValue = `${top}px`;
+    let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
+    if (checkSafeAreaTop) {
+        topValue = `${top}px${safeAreaTop}`;
+    }
+    if (checkSafeAreaBottom && bottomValue !== undefined) {
+        bottomValue = `${bottom}px${safeAreaBottom}`;
+    }
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -45,13 +61,13 @@ export const mdEnterAnimation = (baseEl, opts) => {
     contentAnimation
         .addElement(contentEl)
         .beforeStyles({
-        top: `calc(${top}px + var(--offset-y, 0px))`,
+        top: `calc(${topValue} + var(--offset-y, 0px))`,
         left: `calc(${left}px + var(--offset-x, 0px))`,
         'transform-origin': `${originY} ${originX}`,
     })
         .beforeAddWrite(() => {
-        if (bottom !== undefined) {
-            contentEl.style.setProperty('bottom', `${bottom}px`);
+        if (bottomValue !== undefined) {
+            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
         }
     })
         .fromTo('transform', 'scale(0.8)', 'scale(1)');

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -84,8 +78,8 @@
   --height: auto;
   --offset-x: 0px;
   --offset-y: 0px;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -183,12 +177,6 @@
   }
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/popover/popover.js

@@ -11,7 +11,7 @@ import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId,
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
@@ -19,13 +19,12 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from "./utils";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed inside of the `.popover-content` element.
  *
  * @part backdrop - The `ion-backdrop` element.
- * @part arrow - The arrow that points to the reference element. Only applies on `"ios"` theme.
+ * @part arrow - The arrow that points to the reference element. Only applies on `ios` mode.
  * @part content - The wrapper element for the default slot.
  */
 export class Popover {
@@ -56,7 +55,7 @@ export class Popover {
         this.showBackdrop = true;
         /**
          * If `true`, the popover will be translucent.
-         * Only applies when the theme is `"ios"` and the device supports
+         * Only applies when the mode is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
@@ -104,7 +103,7 @@ export class Popover {
         this.side = 'bottom';
         /**
          * If `true`, the popover will display an arrow that points at the
-         * `reference` on `"ios"` theme.
+         * `reference` when running in `ios` mode. Does not apply in `md` mode.
          */
         this.arrow = true;
         /**
@@ -237,7 +236,7 @@ export class Popover {
         const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : setOverlayId(el);
         this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
         if (this.alignment === undefined) {
-            this.alignment = getIonTheme(this) === 'ios' ? 'center' : 'start';
+            this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
         }
     }
     componentDidLoad() {
@@ -464,28 +463,26 @@ export class Popover {
         return eventMethod(this.el, 'ionPopoverWillDismiss');
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: 'fb80dc11f59086710e4e54c233635413371b9252', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'e854b033fc34c173ce02287c481ce81b792efe80', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '5a91c7205e9f0f574a44a384db56fbaf14de8405', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '276be1ecb2a2867e76e9b03107dc9f6f458f91b9', class: "popover-arrow", part: "arrow" }), h("div", { key: '8043b42faba716795b324d3946ce41dec9c841a4', class: "popover-content", part: "content" }, h("slot", { key: 'afdb7c5009e221fa24ab62f37c24316be8949925' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), h("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, h("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["popover.ios.scss"],
-            "md": ["popover.md.scss"],
-            "ionic": ["popover.md.scss"]
+            "md": ["popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["popover.ios.css"],
-            "md": ["popover.md.css"],
-            "ionic": ["popover.md.css"]
+            "md": ["popover.md.css"]
         };
     }
     static get properties() {
@@ -768,7 +765,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the popover will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "getter": false,
                 "setter": false,
@@ -974,7 +971,7 @@ export class Popover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `\"ios\"` theme, and `\"start\"` for `\"md\"` theme."
+                    "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode."
                 },
                 "getter": false,
                 "setter": false,
@@ -993,7 +990,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the popover will display an arrow that points at the\n`reference` on `\"ios\"` theme."
+                    "text": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -84,8 +78,8 @@
   --height: auto;
   --offset-x: 0px;
   --offset-y: 0px;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -183,12 +177,6 @@
   }
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/popover/utils.js

@@ -648,6 +648,8 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
     let bottom;
     let originX = contentOriginX;
     let originY = contentOriginY;
+    let checkSafeAreaTop = false;
+    let checkSafeAreaBottom = false;
     let checkSafeAreaLeft = false;
     let checkSafeAreaRight = false;
     const triggerTop = triggerCoordinates
@@ -692,10 +694,18 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
              * We chose 12 here so that the popover position looks a bit nicer as
              * it is not right up against the edge of the screen.
              */
-            top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
+            top = Math.max(bodyPadding, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
             arrowTop = top + contentHeight;
             originY = 'bottom';
             addPopoverBottomClass = true;
+            /**
+             * If the popover is positioned near the top edge, account for safe area.
+             * This ensures the popover doesn't overlap with status bars or notches.
+             */
+            if (top <= bodyPadding + safeAreaMargin) {
+                checkSafeAreaTop = true;
+                top = bodyPadding;
+            }
             /**
              * If not enough room for popover to appear
              * above trigger, then cut it off.
@@ -703,6 +713,12 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
         }
         else {
             bottom = bodyPadding;
+            /**
+             * When the popover is pinned to the bottom, account for safe area.
+             * This ensures the popover doesn't overlap with home indicators
+             * or navigation bars (e.g., Android API 36+ edge-to-edge).
+             */
+            checkSafeAreaBottom = true;
         }
     }
     return {
@@ -711,6 +727,8 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
         bottom,
         originX,
         originY,
+        checkSafeAreaTop,
+        checkSafeAreaBottom,
         checkSafeAreaLeft,
         checkSafeAreaRight,
         arrowTop,