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

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

@@ -1,70 +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
- * 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;
- *   }
- * }
- */
-/**
- * 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,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 --track-background: Background of the toggle track
@@ -167,6 +78,7 @@
   outline: none;
   cursor: pointer;
   user-select: none;
+  z-index: 2;
 }
 
 :host(.in-item) {
@@ -198,18 +110,18 @@
 input {
   position: absolute;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
+  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -225,6 +137,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.toggle-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -240,11 +172,17 @@ input {
 }
 
 .toggle-bottom {
+  padding-top: 4px;
   display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
   white-space: normal;
 }
 
+:host(.toggle-label-placement-stacked) .toggle-bottom {
+  font-size: 1rem;
+}
+
 /**
  * Error text should only be shown when .ion-invalid is
  * present on the checkbox. Otherwise the helper text should
@@ -252,10 +190,12 @@ input {
  */
 .toggle-bottom .error-text {
   display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
 .toggle-bottom .helper-text {
   display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .toggle-bottom .error-text {
@@ -274,6 +214,18 @@ input {
   flex-direction: row;
 }
 
+:host(.toggle-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
 /**
  * Label is on the right of the input in LTR and
  * on the left in RTL.
@@ -283,6 +235,92 @@ input {
   justify-content: start;
 }
 
+/**
+ * The margin between the label and
+ * the input should be on the start
+ * when the label sits at the end.
+ */
+:host(.toggle-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+}
+
+:host(.toggle-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
+/**
+ * Label is on the left of the input in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.toggle-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the toggle.
+ */
+:host(.toggle-label-placement-stacked) .toggle-wrapper {
+  flex-direction: column;
+  text-align: center;
+}
+
+:host(.toggle-label-placement-stacked) .label-text-wrapper {
+  transform: scale(0.75);
+  /**
+   * The margin between the label and
+   * the toggle should be on the bottom
+   * when the label sits on top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+  /**
+   * Label text should not extend
+   * beyond the bounds of the toggle.
+   */
+  max-width: calc(100% / 0.75);
+}
+
+:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {
+  transform-origin: left top;
+}
+:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {
+  transform-origin: center top;
+}
+:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper {
+  transform-origin: calc(100% - center) top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
+    transform-origin: calc(100% - center) top;
+  }
+}
+
 :host(.toggle-justify-space-between) .toggle-wrapper {
   justify-content: space-between;
 }
@@ -381,151 +419,6 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
 }
 
-:host {
-  z-index: 2;
-}
-
-:host(.in-item) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 16px;
-}
-
-:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
-  margin-bottom: 10px;
-}
-
-.toggle-bottom {
-  padding-top: 4px;
-  font-size: 0.75rem;
-}
-
-:host(.toggle-label-placement-stacked) .toggle-bottom {
-  font-size: 1rem;
-}
-
-.toggle-bottom .error-text {
-  color: var(--ion-color-danger, #c5000f);
-}
-
-.toggle-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-}
-
-.label-text-wrapper {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-:host(.toggle-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-}
-
-/**
-* Label is on the left of the input in LTR and
-* on the right in RTL. Label also has a fixed width.
-*/
-:host(.toggle-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-/**
-* Label is on top of the toggle.
-*/
-:host(.toggle-label-placement-stacked) .toggle-wrapper {
-  flex-direction: column;
-  text-align: center;
-}
-
-:host(.toggle-label-placement-stacked) .label-text-wrapper {
-  transform: scale(0.75);
-  /**
-    * The margin between the label and
-    * the toggle should be on the bottom
-    * when the label sits on top.
-    */
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 16px;
-  /**
-    * Label text should not extend
-    * beyond the bounds of the toggle.
-    */
-  max-width: calc(100% / 0.75);
-}
-
-:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {
-  transform-origin: center top;
-}
-:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper {
-  transform-origin: calc(100% - center) top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
-    transform-origin: calc(100% - center) top;
-  }
-}
-
-:host(.toggle-label-placement-start) .label-text-wrapper {
-  /**
-    * The margin between the label and
-    * the input should be on the end
-    * when the label sits at the start.
-    */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-}
-
-/**
-* The margin between the label and
-* the input should be on the start
-* when the label sits at the end.
-*/
-:host(.toggle-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-}
-
-/**
- * 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
@@ -581,12 +474,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/toolbar/toolbar.ios.css

@@ -1,3 +1,36 @@
+/**
+ * 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.
@@ -51,10 +84,20 @@
   padding-right: var(--ion-safe-area-right);
   padding-left: var(--ion-safe-area-left);
   color: var(--color);
+  font-family: var(--ion-font-family, inherit);
   contain: content;
+  z-index: 10;
   box-sizing: border-box;
 }
 
+:host(.ion-color) {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .toolbar-background {
+  background: var(--ion-color-base);
+}
+
 .toolbar-container {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -71,12 +114,13 @@
   min-height: var(--min-height);
   contain: content;
   overflow: hidden;
+  z-index: 10;
   box-sizing: border-box;
 }
 
 .toolbar-background {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -87,104 +131,17 @@
   background: var(--background);
   contain: strict;
   opacity: calc(var(--opacity) * var(--opacity-scale));
+  z-index: -1;
   pointer-events: none;
 }
 
 ::slotted(ion-progress-bar) {
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   position: absolute;
 }
 
-/**
- * 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 {
-  font-family: var(--ion-font-family, inherit);
-  z-index: 10;
-}
-
-:host(.ion-color) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .toolbar-background {
-  background: var(--ion-color-base);
-}
-
-.toolbar-container {
-  z-index: 10;
-}
-
-.toolbar-background {
-  z-index: -1;
-}
-
-/**
- * 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/toolbar/toolbar.js

@@ -3,15 +3,14 @@
  */
 import { Host, forceUpdate, h } from "@stencil/core";
 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 - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.
- * @slot secondary - Content is placed to the left of the toolbar text in the `"ios"` theme, and directly to the right in the `"md"` theme.
- * @slot primary - Content is placed to the right of the toolbar text in the `"ios"` theme, and to the far right in the `"md"` theme.
+ * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
+ * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
  *
  * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
@@ -62,30 +61,28 @@ export class Toolbar {
         }
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const childStyles = {};
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '6368640c5bcc3515d628c24116912e7ba1e79a00', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '402afe7ce0c97883cedd0e48a5a0492a9bfe76ae', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+                [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '139edd9fb7a7c42d94dd79e783d841b052abb245', class: "toolbar-background", part: "background" }), h("div", { key: '72716d4a9af0191d6083d1a2444cea42e4521127', class: "toolbar-container", part: "container" }, h("slot", { key: '5049c3e4235dd52b80b50f87b74f58c03fc53c00', name: "start" }), h("slot", { key: 'cf43c31b7d81dfb49e0fdf987978c621fc563213', name: "secondary" }), h("div", { key: '34bd76bdb954adcecb4a9c263584733d617e5988', class: "toolbar-content", part: "content" }, h("slot", { key: 'a63dfc76eb070c680426e3fe6b8efc9bec9a69ac' })), h("slot", { key: 'bb0a4cb83c30d206489c2dcfb6238481ccfc51af', name: "primary" }), h("slot", { key: 'e3c632b6810493f714ec632d17b878740874e919', name: "end" }))));
+            })) }, h("div", { key: '2465a6dc8d507ec650538378d1be2abd399c58ad', class: "toolbar-background", part: "background" }), h("div", { key: '6075096afd12303b961e4fe9ad345ef2887573af', class: "toolbar-container", part: "container" }, h("slot", { key: '8b7eec1148cfeb339d87cdf9273f2104703e7601', name: "start" }), h("slot", { key: 'b102d3926cade24faf78b7af78ad5e192c4c0308', name: "secondary" }), h("div", { key: 'c6ab2e978328324c6f9e7892024cbcd8b8987067', class: "toolbar-content", part: "content" }, h("slot", { key: '86f8952c4355a9df5b4bbb95e9d0cafefd272d5b' })), h("slot", { key: '501e43431da6b9dd35b47b79222f948d445f7a78', name: "primary" }), h("slot", { key: '84bf1a15a5e52e8e94df9f479c4ce18004f5ab57', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toolbar.ios.scss"],
-            "md": ["toolbar.md.scss"],
-            "ionic": ["toolbar.ionic.scss"]
+            "md": ["toolbar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toolbar.ios.css"],
-            "md": ["toolbar.md.css"],
-            "ionic": ["toolbar.ionic.css"]
+            "md": ["toolbar.md.css"]
         };
     }
     static get properties() {