@ionic/core 8.7.6-dev.11759412372.1f332f62 → 8.7.6-dev.11759493293.13f81b9f

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: '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: {
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '66a5b7f51aa1ee343dbad3830e03933dbdab27ed', 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: '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))));
+            } }, col.prefix && (h("div", { key: '19a170752bacdabd50c719f6d1aa9e58a2bd830b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '871671f796aa6a1f78e07ab2599d94b5fd8cd0bf', 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: '89792e1dc75a4359a4706a8fd1846fe29b866173', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {
@@ -356,7 +356,6 @@ export class PickerColumnCmp {
         return {
             "col": {
                 "type": "unknown",
-                "attribute": "col",
                 "mutable": false,
                 "complexType": {
                     "original": "PickerColumn",

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
@@ -78,8 +84,8 @@
   --height: auto;
   --offset-x: 0px;
   --offset-y: 0px;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -177,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 {
@@ -55,7 +56,7 @@ export class Popover {
         this.showBackdrop = true;
         /**
          * If `true`, the popover will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
@@ -103,7 +104,7 @@ export class Popover {
         this.side = 'bottom';
         /**
          * If `true`, the popover will display an arrow that points at the
-         * `reference` when running in `ios` mode. Does not apply in `md` mode.
+         * `reference` on `"ios"` theme.
          */
         this.arrow = true;
         /**
@@ -232,7 +233,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 = getIonMode(this) === 'ios' ? 'center' : 'start';
+            this.alignment = getIonTheme(this) === 'ios' ? 'center' : 'start';
         }
     }
     componentDidLoad() {
@@ -429,34 +430,34 @@ export class Popover {
         return eventMethod(this.el, 'ionPopoverWillDismiss');
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        const focusTrapAttr = this.el.getAttribute('focus-trap');
-        return (h(Host, Object.assign({ key: 'fe80ce582ef39698a3c11e305df3e8e599e91bdb', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd8cac78e3fda5731eb8a3532ce83a711190a0f1d', "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, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false || focusTrapAttr === 'false', 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'f37d7c8574fded2721311d4f12726e21d830cc54', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1567893f935e1da1cb46b81ea14a76af7895eee5', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '456163df03d2b582e07b1f81fa6088125d3308ef', class: "popover-arrow", part: "arrow" }), h("div", { key: '470d257a44fb9532a392bf9f5a89a1531d02323c', class: "popover-content", part: "content" }, h("slot", { key: 'd434289bba55ad9ab169a5092d214f4031511a8f' })))));
+            }, 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: 'ec62e04664d67c7ef9c43bb77e5baa517ab88e7f', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1da57db158ecd1f6260369d44f2db5b0791ecd3a', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '22966b014e1a5ff24963dff94cad281200a3b334', class: "popover-arrow", part: "arrow" }), h("div", { key: 'a2b960c96a54c06807e07edc2579b5d459e5d108', class: "popover-content", part: "content" }, h("slot", { key: 'bae331e17437df55a77db538a693ef459f11e78a' })))));
     }
     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() {
         return {
             "hasController": {
                 "type": "boolean",
-                "attribute": "has-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -475,11 +476,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "has-controller",
                 "defaultValue": "false"
             },
             "delegate": {
                 "type": "unknown",
-                "attribute": "delegate",
                 "mutable": false,
                 "complexType": {
                     "original": "FrameworkDelegate",
@@ -506,7 +507,6 @@ export class Popover {
             },
             "overlayIndex": {
                 "type": "number",
-                "attribute": "overlay-index",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -524,11 +524,11 @@ export class Popover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "overlay-index"
             },
             "enterAnimation": {
                 "type": "unknown",
-                "attribute": "enter-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -552,7 +552,6 @@ export class Popover {
             },
             "leaveAnimation": {
                 "type": "unknown",
-                "attribute": "leave-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -576,7 +575,6 @@ export class Popover {
             },
             "component": {
                 "type": "string",
-                "attribute": "component",
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentRef",
@@ -597,11 +595,11 @@ export class Popover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "component"
             },
             "componentProps": {
                 "type": "unknown",
-                "attribute": "component-props",
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentProps",
@@ -625,7 +623,6 @@ export class Popover {
             },
             "keyboardClose": {
                 "type": "boolean",
-                "attribute": "keyboard-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -641,11 +638,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "keyboard-close",
                 "defaultValue": "true"
             },
             "cssClass": {
                 "type": "string",
-                "attribute": "css-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -663,11 +660,11 @@ export class Popover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "css-class"
             },
             "backdropDismiss": {
                 "type": "boolean",
-                "attribute": "backdrop-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -683,11 +680,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "backdrop-dismiss",
                 "defaultValue": "true"
             },
             "event": {
                 "type": "any",
-                "attribute": "event",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -702,11 +699,11 @@ export class Popover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "event"
             },
             "showBackdrop": {
                 "type": "boolean",
-                "attribute": "show-backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -722,11 +719,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-backdrop",
                 "defaultValue": "true"
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -737,16 +734,16 @@ 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)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "translucent",
                 "defaultValue": "false"
             },
             "animated": {
                 "type": "boolean",
-                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -762,11 +759,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "animated",
                 "defaultValue": "true"
             },
             "htmlAttributes": {
                 "type": "unknown",
-                "attribute": "html-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: any }",
@@ -784,7 +781,6 @@ export class Popover {
             },
             "triggerAction": {
                 "type": "string",
-                "attribute": "trigger-action",
                 "mutable": false,
                 "complexType": {
                     "original": "TriggerAction",
@@ -806,11 +802,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "trigger-action",
                 "defaultValue": "'click'"
             },
             "trigger": {
                 "type": "string",
-                "attribute": "trigger",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -825,11 +821,11 @@ export class Popover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "trigger"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "PopoverSize",
@@ -851,11 +847,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'auto'"
             },
             "dismissOnSelect": {
                 "type": "boolean",
-                "attribute": "dismiss-on-select",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -871,11 +867,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "dismiss-on-select",
                 "defaultValue": "false"
             },
             "reference": {
                 "type": "string",
-                "attribute": "reference",
                 "mutable": false,
                 "complexType": {
                     "original": "PositionReference",
@@ -897,11 +893,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "reference",
                 "defaultValue": "'trigger'"
             },
             "side": {
                 "type": "string",
-                "attribute": "side",
                 "mutable": false,
                 "complexType": {
                     "original": "PositionSide",
@@ -923,11 +919,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "side",
                 "defaultValue": "'bottom'"
             },
             "alignment": {
                 "type": "string",
-                "attribute": "alignment",
                 "mutable": true,
                 "complexType": {
                     "original": "PositionAlign",
@@ -944,15 +940,15 @@ 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."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "alignment"
             },
             "arrow": {
                 "type": "boolean",
-                "attribute": "arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -963,16 +959,16 @@ 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."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "arrow",
                 "defaultValue": "true"
             },
             "isOpen": {
                 "type": "boolean",
-                "attribute": "is-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -988,11 +984,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-open",
                 "defaultValue": "false"
             },
             "keyboardEvents": {
                 "type": "boolean",
-                "attribute": "keyboard-events",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1011,11 +1007,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "keyboard-events",
                 "defaultValue": "false"
             },
             "focusTrap": {
                 "type": "boolean",
-                "attribute": "focus-trap",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1031,11 +1027,11 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "focus-trap",
                 "defaultValue": "true"
             },
             "keepContentsMounted": {
                 "type": "boolean",
-                "attribute": "keep-contents-mounted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1051,6 +1047,7 @@ export class Popover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "keep-contents-mounted",
                 "defaultValue": "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
@@ -78,8 +84,8 @@
   --height: auto;
   --offset-x: 0px;
   --offset-y: 0px;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -177,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