@ionic/core 8.0.0-dev.11712072527.1dd97c66 → 8.0.0-dev.11712932867.11504809

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

@@ -4,7 +4,11 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+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.
+ */
 export class PickerColumnOption {
     constructor() {
         /**
@@ -75,24 +79,26 @@ export class PickerColumnOption {
     }
     render() {
         const { color, disabled, ariaLabel } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '1d5358c019c01ca429ddb514b9f9b67a3c89f652', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '7f590f416e43f74cca1649bb739eabb43bef8ec9', class: createColorClasses(color, {
+                [theme]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: 'c86794a15b61062a886c6f5113723ccd98238e9f', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'ab7f80cacdd39b5aedf7d2cc8eddc6288093629a' }))));
+            }) }, h("button", { key: 'cc640ef332d72da10fcc58d5d7ee2a6a087c4cc3', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '3816ea2975ccc61d064d285815080f59abfa01eb' }))));
     }
     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"]
+            "md": ["picker-column-option.md.scss"],
+            "ionic": ["picker-column-option.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["picker-column-option.ios.css"],
-            "md": ["picker-column-option.md.css"]
+            "md": ["picker-column-option.md.css"],
+            "ionic": ["picker-column-option.md.css"]
         };
     }
     static get properties() {

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

@@ -1,3 +1,9 @@
+/**
+ * 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,3 +1,9 @@
+/**
+ * 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
@@ -162,6 +168,12 @@
   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,12 +7,13 @@ 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 { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } 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 which platform styles to use.
+ * @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.
  */
 export class Picker {
     constructor() {
@@ -181,12 +182,12 @@ export class Picker {
     }
     render() {
         const { htmlAttributes } = this;
-        const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '1cf2f8a25a3eca7ac59eff969803c85540f102fc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        const theme = getIonTheme(this);
+        return (h(Host, Object.assign({ key: 'd988de06290eb92ff6f7be07959780d0d19fadb3', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true,
+            }, class: Object.assign({ [theme]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '3a70c7c6e0457afda2e9ef4619cb253b583b7805', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4c90cf7dfeb9d2bdb5e947739864dbc2d1e327e0', tabindex: "0" }), h("div", { key: '050098ced341fd86bfcd72595b1f7a52c3b01b46', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'b0d9420fb053d0c71af04c88224a38f804fd99ba', 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: '82cd2788c394079cb8843c240c17e3629eef0953', class: "picker-columns" }, h("div", { key: '34d2ce59e88b5967e52fe8077ef3a151c6ce38e5', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'b604b101bc0006efc246aea9320d9f44419c531f', class: "picker-below-highlight" }))), h("div", { key: '70437d735b009386b4f5ae250b555c039c366183', tabindex: "0" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '17f85a6ff9c41b38de985d86e58f0f91315c767e', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '46358c402039738cdf47496228564b8f836ca1ca', tabindex: "0" }), h("div", { key: 'fb6a2892d259042a10fb1766bb0e1fce6a048e2b', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '082583fd8895f1f12de7a4761af718c886ad1c89', 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: 'b6d169cbe219ada5875c818e1fbff2b3b8e75343', class: "picker-columns" }, h("div", { key: '3598b21e94c321adfffb83778ddc3ac9f5c7daba', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'afbd8f751a842f52d1fe23fc409b01f5074e0f57', class: "picker-below-highlight" }))), h("div", { key: '248251b4ddfed8078ce242e5ce52b53caa49ccf0', tabindex: "0" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -162,6 +168,12 @@
   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,3 +1,9 @@
+/**
+ * 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
@@ -120,6 +126,12 @@
   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 } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 /**
  * @internal
  */
@@ -335,10 +335,10 @@ export class PickerColumnCmp {
     }
     render() {
         const col = this.col;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '0337ac8379be177501b8d61f0ac0f68ecbb8344d', 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: {
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'b8c99747752c30cc7dbd4e63c6a10e1b713b0958', 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: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '013ba8ea1c2fe4fe717386b9cc87484913c234f7', 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", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '5f22527170ea87eacfff014b5ef8f0ba48a116b8', 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", { 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,3 +1,9 @@
+/**
+ * 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
@@ -120,6 +126,12 @@
   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/popover.ios.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -141,7 +147,6 @@
   --ion-safe-area-left: 0px;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
 }
 
 :host(.popover-nested.popover-side-left) {
@@ -178,6 +183,12 @@
   }
 }
 
+/**
+ * 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 { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
@@ -19,12 +19,13 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from "./utils";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @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` mode.
+ * @part arrow - The arrow that points to the reference element. Only applies on `"ios"` theme.
  * @part content - The wrapper element for the default slot.
  */
 export class Popover {
@@ -136,7 +137,7 @@ export class Popover {
         const popoverId = setOverlayId(el);
         this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
         if (this.alignment === undefined) {
-            this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
+            this.alignment = getIonTheme(this) === 'ios' ? 'center' : 'start';
         }
     }
     componentDidLoad() {
@@ -332,26 +333,28 @@ export class Popover {
         return eventMethod(this.el, 'ionPopoverWillDismiss');
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: 'a4a6fb333562cb2ecc2ac2350541de9be61837af', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '4a666a310a920fa5c4c5d7ff3c310f8701140657', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'de9c7ad73f221e6e9a55e2bc7e1ffad7b936b0dd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '1cb5abc9835c044e6d14d444283f34b65b0b134e', class: "popover-content", part: "content" }, h("slot", { key: '0e4db95e6341e823f87877325bb1164193ae6676' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '9a23205e9044b2c67847553eff6e051f8a86104f', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '6c530a3ed01a281691912deb50b53088d28812cc', class: "popover-content", part: "content" }, h("slot", { key: '54c80a33cd409811ca6e557117319439eac487b8' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["popover.ios.scss"],
-            "md": ["popover.md.scss"]
+            "md": ["popover.md.scss"],
+            "ionic": ["popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["popover.ios.css"],
-            "md": ["popover.md.css"]
+            "md": ["popover.md.css"],
+            "ionic": ["popover.md.css"]
         };
     }
     static get properties() {
@@ -610,7 +613,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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)."
+                    "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)."
                 },
                 "attribute": "translucent",
                 "reflect": false,
@@ -798,7 +801,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` mode, and `\"start\"` for `md` mode."
+                    "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `\"ios\"` theme, and `\"start\"` for `\"md\"` theme."
                 },
                 "attribute": "alignment",
                 "reflect": false
@@ -815,7 +818,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "text": "If `true`, the popover will display an arrow that points at the\n`reference` on `\"ios\"` theme."
                 },
                 "attribute": "arrow",
                 "reflect": false,

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -141,7 +147,6 @@
   --ion-safe-area-left: 0px;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
 }
 
 :host(.popover-nested.popover-side-left) {
@@ -178,6 +183,12 @@
   }
 }
 
+/**
+ * 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/test/basic/popover.e2e.js

@@ -46,6 +46,82 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  * Translucent popovers are only available on iOS
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('popover: scrolling'), async () => {
+        test.beforeEach(({ skip }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/29211',
+            });
+            // We are testing if Ionic sets overflow is set correctly on elements,
+            // so we do not need to test across browsers
+            skip.browser('webkit', 'Behavior does not vary across browsers');
+            skip.browser('firefox', 'Behavior does not vary across browsers');
+        });
+        test('should scroll to bottom without IonContent', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          ion-popover {
+            --height: 150px;
+          }
+        </style>
+        <ion-popover>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+        </ion-popover>
+      `, config);
+            const popover = page.locator('ion-popover');
+            const viewport = popover.locator('.popover-viewport');
+            const p = popover.locator('p');
+            const lastP = await p.last();
+            await popover.evaluate((el) => el.present());
+            await expect(lastP).not.toBeInViewport();
+            // hover over viewport and scroll to bottom
+            await viewport.hover();
+            await page.mouse.wheel(0, 500);
+            await expect(lastP).toBeInViewport();
+        });
+        test('should scroll to bottom with IonContent', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          ion-popover {
+            --height: 150px;
+          }
+        </style>
+        <ion-popover>
+          <ion-content>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+          </ion-content>
+        </ion-popover>
+      `, config);
+            const popover = page.locator('ion-popover');
+            const content = popover.locator('ion-content');
+            const p = popover.locator('p');
+            const lastP = await p.last();
+            await popover.evaluate((el) => el.present());
+            await expect(lastP).not.toBeInViewport();
+            // hover over viewport and scroll to bottom
+            await content.hover();
+            await page.mouse.wheel(0, 500);
+            await expect(lastP).toBeInViewport();
+        });
+    });
     test.describe(title('popover: translucent variants'), async () => {
         let popoverFixture;
         test.beforeEach(async ({ page }) => {

package/dist/collection/components/progress-bar/progress-bar.ios.css

@@ -1,3 +1,9 @@
+/**
+ * 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/progress-bar/progress-bar.js

@@ -5,9 +5,10 @@ import { Host, h } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
  * @part stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
@@ -25,11 +26,11 @@ export class ProgressBar {
     render() {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '78a32304c7164cb78145a91be7bb9b86ecd11b66', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '529ac45563dcdd96559235171f5c9f3fef7ffb3b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+                [theme]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
                 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
@@ -41,13 +42,15 @@ export class ProgressBar {
     static get originalStyleUrls() {
         return {
             "ios": ["progress-bar.ios.scss"],
-            "md": ["progress-bar.md.scss"]
+            "md": ["progress-bar.md.scss"],
+            "ionic": ["progress-bar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["progress-bar.ios.css"],
-            "md": ["progress-bar.md.css"]
+            "md": ["progress-bar.md.css"],
+            "ionic": ["progress-bar.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/progress-bar/progress-bar.md.css

@@ -1,3 +1,9 @@
+/**
+ * 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/radio/radio.ios.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -304,6 +310,12 @@ input {
   }
 }
 
+/**
+ * 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
@@ -359,6 +371,12 @@ input {
  *   }
  * }
  */
+/**
+ * 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/radio/radio.js

@@ -5,9 +5,10 @@ import { Host, h } from "@stencil/core";
 import { isOptionSelected } from "../../utils/forms/index";
 import { addEventListener, removeEventListener } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @slot - The label text to associate with the radio. Use the "labelPlacement" property to control where the label is placed relative to the radio.
  *
@@ -105,10 +106,10 @@ export class Radio {
     }
     render() {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: 'bc70e174a1ca756f073ca0a95d6a12597a6eb896', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '6ef7b0ec90814c02828ffa5c5de0a2fda71443fc', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+                [theme]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
                 'radio-disabled': disabled,
@@ -118,23 +119,25 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '04cab7d54338c7bf9b8986e0a7bc402d5c1713af', class: "radio-wrapper" }, h("div", { key: '9cd2e6ff53313c175a4a9804739f3e468d123c0b', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '1072d3d73ea3dbe6abb6c218c1d8ec6272e5408d', class: "radio-wrapper" }, h("div", { key: '215dbe1b57c9557c339552b333e6e132bed96f77', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: 'f1c3120b4df240e690bf9b0a7d9e893c4a546476' })), h("div", { key: 'ab89f05be8b93adb22851856d3e570065d594dae', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: 'e643d0d5184ed178e1bff761bcda16aef8d7d06c' })), h("div", { key: '0297a100b8ee684eef1ca9b60dd1438c2ead86a3', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["radio.ios.scss"],
-            "md": ["radio.md.scss"]
+            "md": ["radio.md.scss"],
+            "ionic": ["radio.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["radio.ios.css"],
-            "md": ["radio.md.css"]
+            "md": ["radio.md.css"],
+            "ionic": ["radio.md.css"]
         };
     }
     static get properties() {