@ionic/core 8.5.2-dev.11743424594.169340bf → 8.5.2-dev.11743531350.19e040aa

package/dist/collection/components/progress-bar/progress-bar.js

@@ -5,10 +5,9 @@ import { Host, h } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-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.
  *
  * @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"`.
@@ -22,34 +21,19 @@ export class ProgressBar {
         this.value = 0;
         this.buffer = 1;
         this.color = undefined;
-        this.shape = undefined;
-    }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-11638): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
-        return shape;
     }
     render() {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
-        const theme = getIonTheme(this);
-        const shape = this.getShape();
+        const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: 'f15cd49c5f06daf16872b95871e9eb6dc2e46ff4', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: 'd60eeaa18aaee607e083c0ef9d0de8178d47c4cd', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+                [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
                 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
                 'progress-bar-solid': progressSolid,
-                [`progress-bar-shape-${shape}`]: shape !== undefined,
             }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
     }
     static get is() { return "ion-progress-bar"; }
@@ -57,15 +41,13 @@ export class ProgressBar {
     static get originalStyleUrls() {
         return {
             "ios": ["progress-bar.ios.scss"],
-            "md": ["progress-bar.md.scss"],
-            "ionic": ["progress-bar.ionic.scss"]
+            "md": ["progress-bar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["progress-bar.ios.css"],
-            "md": ["progress-bar.md.css"],
-            "ionic": ["progress-bar.ionic.css"]
+            "md": ["progress-bar.md.css"]
         };
     }
     static get properties() {
@@ -164,23 +146,6 @@ export class ProgressBar {
                 },
                 "attribute": "color",
                 "reflect": true
-            },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'round' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"round\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"round\"` for a progress bar with rounded corners, or `\"rectangular\"`\nfor a progress bar without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
-                },
-                "attribute": "shape",
-                "reflect": false
             }
         };
     }

package/dist/collection/components/progress-bar/progress-bar.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
@@ -79,8 +73,8 @@
 .indeterminate-bar-primary,
 .indeterminate-bar-secondary,
 .progress-buffer-bar {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -90,8 +84,8 @@
 
 .buffer-circles-container,
 .buffer-circles {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;

package/dist/collection/components/radio/radio.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
@@ -59,28 +53,6 @@
  *   }
  * }
  */
-/**
- * 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 --color: Color of the radio
@@ -95,28 +67,10 @@
   min-height: inherit;
   cursor: pointer;
   user-select: none;
+  z-index: 2;
   box-sizing: border-box;
 }
 
-input {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  opacity: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
 :host(.radio-disabled) {
   pointer-events: none;
 }
@@ -135,6 +89,25 @@ input {
   box-sizing: border-box;
 }
 
+input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  clip: rect(0 0 0 0);
+  opacity: 0;
+  overflow: hidden;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
 :host(:focus) {
   outline: none;
 }
@@ -168,6 +141,26 @@ input {
   cursor: inherit;
 }
 
+.label-text-wrapper {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:host(.in-item) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.radio-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -210,12 +203,6 @@ input {
   display: block;
 }
 
-.label-text-wrapper {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 /**
  * Label is on the left of the radio in LTR and
  * on the right in RTL.
@@ -224,75 +211,6 @@ input {
   flex-direction: row;
 }
 
-/**
- * Label is on the right of the radio in LTR and
- * on the left in RTL.
- */
-:host(.radio-label-placement-end) .radio-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the radio in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.radio-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-}
-
-/**
- * Label is on top of the radio.
- */
-:host(.radio-label-placement-stacked) .radio-wrapper {
-  flex-direction: column;
-}
-
-:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {
-  transform-origin: center top;
-}
-:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper {
-  transform-origin: calc(100% - center) top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
-    transform-origin: calc(100% - center) top;
-  }
-}
-
-:host {
-  z-index: 2;
-}
-
-:host(.in-item) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 16px;
-}
-
-:host(.in-item.radio-label-placement-stacked) .native-wrapper {
-  margin-bottom: 10px;
-}
-
 :host(.radio-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -305,6 +223,14 @@ input {
   margin-inline-end: 16px;
 }
 
+/**
+ * Label is on the right of the radio in LTR and
+ * on the left in RTL.
+ */
+:host(.radio-label-placement-end) .radio-wrapper {
+  flex-direction: row-reverse;
+}
+
 /**
  * The margin between the label and
  * the radio should be on the start
@@ -329,6 +255,23 @@ input {
   margin-inline-end: 16px;
 }
 
+/**
+ * Label is on the left of the radio in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.radio-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+}
+
+/**
+ * Label is on top of the radio.
+ */
+:host(.radio-label-placement-stacked) .radio-wrapper {
+  flex-direction: column;
+}
+
 :host(.radio-label-placement-stacked) .label-text-wrapper {
   transform: scale(0.75);
   /**
@@ -346,12 +289,32 @@ input {
   max-width: calc(100% / 0.75);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {
+  transform-origin: left top;
+}
+:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {
+  transform-origin: center top;
+}
+:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper {
+  transform-origin: calc(100% - center) top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
+    transform-origin: calc(100% - center) top;
+  }
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -407,12 +370,6 @@ 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,10 +5,9 @@ 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 { 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 - The label text to associate with the radio. Use the "labelPlacement" property to control where the label is placed relative to the radio.
  *
@@ -119,10 +118,10 @@ export class Radio {
     }
     render() {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '7fbe8308ef9eb375552a9a52aa38cdc7b7adc265', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '8badd4aec277addc0793e14df21f73bb345e99b7', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+                [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
                 'radio-disabled': disabled,
@@ -132,25 +131,23 @@ 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: '25b08970002e8346929b3e3d4d9116a616011f58', class: "radio-wrapper" }, h("div", { key: '02982316f2b4b5fa3772a34dbdc9f2c019bb7fc7', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '8765b847edc93a1b5a16506e155ed03da807bb10', class: "radio-wrapper" }, h("div", { key: '3d568a0192a32d4f0b8a920019c79ff02639b5c9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '033f8660fc810b4d9bc1723546e1c97f261d5b96' })), h("div", { key: '58694ff4a4f09e0a9a4c6f26dbf7ee5d111f8913', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '331f3dc2ce5f6ed8f124fc4560f92e0f7c668a85' })), h("div", { key: '473bd4aaf448753e385f2dda3fddc9f56379aa19', 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"],
-            "ionic": ["radio.ionic.scss"]
+            "md": ["radio.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["radio.ios.css"],
-            "md": ["radio.md.css"],
-            "ionic": ["radio.ionic.css"]
+            "md": ["radio.md.css"]
         };
     }
     static get properties() {