@ionic/core 8.8.11 → 8.8.12-dev.11781793379.156d3260

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

@@ -7,9 +7,10 @@ import { raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
 import { isPlatform } from "../../utils/platform";
 import { createColorClasses } 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 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.
@@ -550,15 +551,15 @@ export class PickerColumn {
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '234c96a501d7ac413b9b0ea56b33017681e25b40', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'f93a206d4f4b96bf4e574e5c920910ea22e1b447', class: createColorClasses(color, {
+                [theme]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: '9dc15ea0601ddd2cb2e0a745e91e036a8bd96f8b', name: "prefix" }), h("div", { key: 'de4fe28ee4bc46b7c0420d6ab0df0e7809443da9', class: "picker-opts", ref: (el) => {
+            }) }, h("slot", { key: 'c2954a494c50a907529dc71e6fb91092773ad8a6', name: "prefix" }), h("div", { key: '1957b8a3a3835980bb22ea3b46b2cb5e6bcc2432', 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: '5297617462cc30e9444039ae032d8bdf718349af', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '55ea39ef867bcb1a11a912d52ecd20cb886c5fb3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '3496730ce6182ebfd33e0ee4bafc130feb575a31', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '44c3628aa957d60f799dc7019f72fe8b676c7843' }), h("div", { key: '5a1809f6c949678a67e0d4b5bfe93ea335c0161d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '98fd57f1c66dbaebc2db2dd5da142671b3159fd1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '85590708abddfa885994e549deac64866fec938f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'bb7e674f543696a80fcbfb1f68f2e975826898a6', 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: 'c7218ed79d73cef4de55b248d3a4808146e2eee4', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '00d6c9dd149302d006a3a97b9ab61a5399196494', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'f47359409deae7f7d73c8a8a64bc23053efc20d9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '791172a636d85a1b49c140066ce867a4f6e8403d' }), h("div", { key: 'f442c5ab5d84acf7b41782fd2b3908ca68a4bd1e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b378ca562795326183353f35e328957ac592148c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'f0c8e825cb890718389395b741aa1b7839dba1b1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '6a11f3a2c46181d4b982a4d14170e71e3345973b', 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,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-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() {
         /**
@@ -90,24 +94,26 @@ export class PickerColumnOption {
     }
     render() {
         const { color, disabled, ariaLabel } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'c45a1c14a351bf57d7113671164852349be5aa8a', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'fe9553e3157d35f5c28a3f2457715bd598ec1e00', class: createColorClasses(color, {
+                [theme]: true,
                 ['option-disabled']: disabled,
-            }) }, h("div", { key: '824930b658c6e3fb493ac4c6c2451d38c6bc4829', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '019df4dcf46e629bdbebcd46ed3ab29669feab27' }))));
+            }) }, h("div", { key: '9bc334f020012537144972b5a8a1aed7c35ccec5', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'bd076e43c98ad920486230684c7f63e7e0b187f8' }))));
     }
     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
@@ -103,8 +109,8 @@
 
 .picker-wrapper {
   border-radius: var(--border-radius);
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
@@ -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() {
@@ -206,12 +207,12 @@ export class Picker {
     }
     render() {
         const { htmlAttributes } = this;
-        const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '80f66d33780d8a1352d24be9cb63a0cc03d01ab5', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        const theme = getIonTheme(this);
+        return (h(Host, Object.assign({ key: '681ad6d20efa16f1d6c6f9a7d03caec2b17ff36e', "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: '97fb8e10ba08b197610cb8c0cdea61103883d55f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'b3969cb6fbf7153623d14e3ca1493d3370efb211', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '299268483c3727e698d9135bfdf40349a7050ac1', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '95394de3ef691899b7dbf416f56fd3e86bbdce3f', 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: '05f18bb8d00dc0e22f691b7e41f90f729a6c66d7', class: "picker-columns" }, h("div", { key: '4a8fdf224effc0af67fd413e2e6aca8a78d1cf43', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'e50a31db45e3f39e9d0fed36a21be9257eec09bf', class: "picker-below-highlight" }))), h("div", { key: '5a78cb2176ac807ea0c195c6b76cd0e8eef9d4c0', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '6dc71805810955048479c2a6eddce2303161cb8f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '0e61724c261c9d69ba23d3cb9064018942755033', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a6ca79c9a5fce42b5aad6808802535c723f27fb9', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '7651cbe9d723bba032788d85711e0f7c1dc32c21', 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: 'd6b83aded670bc74515c337c038503e396ab42cc', class: "picker-columns" }, h("div", { key: '1dfef6ed386d7b327dc19397cc9f01c3938fbab9', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'ec8b2f4de073a245f8917a494a681adf5d1f94f6', class: "picker-below-highlight" }))), h("div", { key: '8557ce93083feefa5deb6097270d756424f89ab2', 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,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
@@ -103,8 +109,8 @@
 
 .picker-wrapper {
   border-radius: var(--border-radius);
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
@@ -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
  */
@@ -334,10 +334,10 @@ export class PickerColumnCmp {
     }
     render() {
         const col = this.col;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '86125e95f18837dfd021db01777d72a1562d8ee3', 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: 'aed1c1a702e03765d704f6f563fe26df58e68bbf', 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", { key: 'b0f3d39e0bd128781066ffefb7a1e40d12a9e76d', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '0b106ac4d56916eaaa7f09d1b68348b3754b7bba', 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: '00ff2f9dbb4561787e5a5223327c6a2a33f8362e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: 'a6fae778eec5d57dba4b36b3e448c5c12fe0688b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '1b77354fe5eeeeb4db94fab035a9ef5e45d695ac', 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: '105286ef7ba6eac0796f5af7d6f1daef7107444a', 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.ionic.css

@@ -0,0 +1,290 @@
+@charset "UTF-8";
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * 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
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * 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
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --background: Background of the popover
+   * @prop --box-shadow: Box shadow of the popover
+   *
+   * @prop --min-width: Minimum width of the popover
+   * @prop --width: Width of the popover
+   * @prop --max-width: Maximum width of the popover
+   *
+   * @prop --min-height: Minimum height of the popover
+   * @prop --height: Height of the popover
+   * @prop --max-height: Maximum height of the popover
+   *
+   * @prop --backdrop-opacity: Opacity of the backdrop
+   *
+   * @prop --offset-x: The amount to move the popover by on the x-axis
+   * @prop --offset-y: The amount to move the popover by on the y-axis
+   */
+  --background: var(--ion-background-color, #fff);
+  --min-width: 0;
+  --min-height: 0;
+  --max-width: auto;
+  --height: auto;
+  --offset-x: 0px;
+  --offset-y: 0px;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  color: var(--ion-text-color, #000);
+  z-index: 1001;
+}
+
+/**
+ * With nested popovers, only the popover that
+ * was first presented has a popover. This is the
+ * parent popover and allows us to easily
+ * track all nested popovers from a single backdrop.
+ * As a result, nested popovers do not have backdrops
+ * and their container should not be clickable.
+ * This ensures that users can click the parent backdrop
+ * while still interacting with the nested popover inner
+ * content.
+ */
+:host(.popover-nested) {
+  pointer-events: none;
+}
+
+:host(.popover-nested) .popover-wrapper {
+  pointer-events: auto;
+}
+
+:host(.overlay-hidden) {
+  display: none;
+}
+
+.popover-wrapper {
+  z-index: 10;
+}
+
+.popover-content {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+  overflow: auto;
+  z-index: 10;
+}
+
+::slotted(.popover-viewport) {
+  --ion-safe-area-top: 0px;
+  --ion-safe-area-right: 0px;
+  --ion-safe-area-bottom: 0px;
+  --ion-safe-area-left: 0px;
+  display: flex;
+  flex-direction: column;
+}
+
+:host(.popover-nested.popover-side-left) {
+  --offset-x: 5px;
+}
+
+:host(.popover-nested.popover-side-right) {
+  --offset-x: -5px;
+}
+
+:host(.popover-nested.popover-side-start) {
+  --offset-x: 5px;
+}
+:host-context([dir=rtl]):host(.popover-nested.popover-side-start), :host-context([dir=rtl]).popover-nested.popover-side-start {
+  --offset-x: -5px;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.popover-nested.popover-side-start:dir(rtl)) {
+    --offset-x: -5px;
+  }
+}
+
+:host(.popover-nested.popover-side-end) {
+  --offset-x: -5px;
+}
+:host-context([dir=rtl]):host(.popover-nested.popover-side-end), :host-context([dir=rtl]).popover-nested.popover-side-end {
+  --offset-x: 5px;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.popover-nested.popover-side-end:dir(rtl)) {
+    --offset-x: 5px;
+  }
+}
+
+:host(.select-popover-rich-content) {
+  /**
+   * Rich content options (start/end slots, descriptions) need
+   * more horizontal space than the default fixed width provides,
+   * otherwise content gets cut off.
+   *
+   * A viewport-relative value is used instead of `auto` or
+   * `max-content` because the enter animation reads `--width`
+   * via getBoundingClientRect() before the first layout pass
+   * completes — intrinsic values return 0 at that point and
+   * cause the popover to be positioned off-screen on first open.
+   */
+  --width: clamp(250px, calc(100vw - 40px), 400px);
+}
+
+:host {
+  --width: 250px;
+  --max-height: 90%;
+  --box-shadow: var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));
+  --backdrop-opacity: 0.3;
+}
+
+.popover-content {
+  border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
+  transform-origin: left top;
+}
+:host-context([dir=rtl]) .popover-content {
+  transform-origin: right top;
+}
+
+[dir=rtl] .popover-content {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  .popover-content:dir(rtl) {
+    transform-origin: right top;
+  }
+}
+
+.popover-viewport {
+  transition-delay: 100ms;
+}

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

@@ -1,3 +1,10 @@
+@charset "UTF-8";
+/**
+ * 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
@@ -78,8 +85,8 @@
   --height: auto;
   --offset-x: 0px;
   --offset-y: 0px;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -177,6 +184,27 @@
   }
 }
 
+:host(.select-popover-rich-content) {
+  /**
+   * Rich content options (start/end slots, descriptions) need
+   * more horizontal space than the default fixed width provides,
+   * otherwise content gets cut off.
+   *
+   * A viewport-relative value is used instead of `auto` or
+   * `max-content` because the enter animation reads `--width`
+   * via getBoundingClientRect() before the first layout pass
+   * completes — intrinsic values return 0 at that point and
+   * cause the popover to be positioned off-screen on first open.
+   */
+  --width: clamp(250px, calc(100vw - 40px), 400px);
+}
+
+/**
+ * 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