@ionic/core 9.0.11-dev.11793890855.1bf6a6e5 → 9.0.11-dev.11793906456.1ea7a0a7

package/dist/collection/components/item/item.md.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.
@@ -91,12 +124,23 @@
   justify-content: space-between;
   outline: none;
   color: var(--color);
+  font-family: var(--ion-font-family, inherit);
   text-align: initial;
   text-decoration: none;
   overflow: hidden;
   box-sizing: border-box;
 }
 
+:host(.ion-color) .item-native {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .item-native,
+:host(.ion-color) .item-inner {
+  border-color: var(--ion-color-shade);
+}
+
 :host(.ion-activated) .item-native {
   color: var(--color-activated);
 }
@@ -105,6 +149,10 @@
   opacity: var(--background-activated-opacity);
 }
 
+:host(.ion-color.ion-activated) .item-native {
+  color: var(--ion-color-contrast);
+}
+
 :host(.ion-focused) .item-native {
   color: var(--color-focused);
 }
@@ -113,6 +161,13 @@
   opacity: var(--background-focused-opacity);
 }
 
+:host(.ion-color.ion-focused) .item-native {
+  color: var(--ion-color-contrast);
+}
+:host(.ion-color.ion-focused) .item-native::after {
+  background: var(--ion-color-contrast);
+}
+
 @media (any-hover: hover) {
   :host(.ion-activatable:not(.ion-focused):hover) .item-native {
     color: var(--color-hover);
@@ -121,6 +176,12 @@
     background: var(--background-hover);
     opacity: var(--background-hover-opacity);
   }
+  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
+    color: var(--ion-color-contrast);
+  }
+  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after {
+    background: var(--ion-color-contrast);
+  }
 }
 :host(.item-control-needs-pointer-cursor) {
   cursor: pointer;
@@ -145,18 +206,18 @@
   margin-bottom: 0;
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
-  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
-  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
+  text-align: inherit;
   white-space: inherit;
+  color: inherit;
   /* stylelint-disable */
   padding-right: var(--padding-end);
   padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
@@ -173,7 +234,6 @@
   border-color: var(--border-color);
   outline: none;
   background: var(--background);
-  line-height: inherit;
   overflow: inherit;
   z-index: 1;
   box-sizing: border-box;
@@ -200,8 +260,8 @@
 }
 
 .item-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -327,90 +387,6 @@ a {
   flex-direction: column;
 }
 
-:host(.item-multiple-inputs) ::slotted(ion-checkbox),
-:host(.item-multiple-inputs) ::slotted(ion-datetime),
-:host(.item-multiple-inputs) ::slotted(ion-radio) {
-  position: relative;
-}
-
-:host(.item-textarea) {
-  align-items: stretch;
-}
-
-::slotted(ion-reorder[slot]) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-ion-ripple-effect {
-  color: var(--ripple-color);
-}
-
-/**
- * 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);
-}
-
 :host(.item-focus-indicator-room) .input-wrapper {
   -webkit-margin-start: -12px;
   margin-inline-start: -12px;
@@ -422,41 +398,25 @@ ion-ripple-effect {
   padding-inline-end: 12px;
 }
 
-:host(.ion-color) .item-native {
-  background: var(--ion-color-base);
-  color: var(--ion-color-contrast);
+:host(.item-multiple-inputs) ::slotted(ion-checkbox),
+:host(.item-multiple-inputs) ::slotted(ion-datetime),
+:host(.item-multiple-inputs) ::slotted(ion-radio) {
+  position: relative;
 }
 
-:host(.ion-color) .item-native,
-:host(.ion-color) .item-inner {
-  border-color: var(--ion-color-shade);
+:host(.item-textarea) {
+  align-items: stretch;
 }
 
-:host(.ion-color.ion-activated) .item-native {
-  color: var(--ion-color-contrast);
+::slotted(ion-reorder[slot]) {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-:host(.ion-color.ion-focused) .item-native {
-  color: var(--ion-color-contrast);
-}
-:host(.ion-color.ion-focused) .item-native::after {
-  background: var(--ion-color-contrast);
+ion-ripple-effect {
+  color: var(--ripple-color);
 }
 
-@media (any-hover: hover) {
-  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
-    color: var(--ion-color-contrast);
-  }
-  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after {
-    background: var(--ion-color-contrast);
-  }
-}
-/**
- * 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
@@ -512,12 +472,6 @@ ion-ripple-effect {
  *   }
  * }
  */
-/**
- * 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
@@ -573,12 +527,6 @@ ion-ripple-effect {
  *   }
  * }
  */
-/**
- * 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
@@ -641,8 +589,8 @@ ion-ripple-effect {
   --background-focused: currentColor;
   --background-hover: currentColor;
   --background-activated-opacity: 0;
-  --background-focused-opacity: 0.12;
-  --background-hover-opacity: 0.04;
+  --background-focused-opacity: .12;
+  --background-hover-opacity: .04;
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --transition: opacity 15ms linear, background-color 15ms linear;
@@ -795,8 +743,8 @@ ion-ripple-effect {
 ::slotted(.button-small) {
   --padding-top: 2px;
   --padding-bottom: 2px;
-  --padding-start: 0.6em;
-  --padding-end: 0.6em;
+  --padding-start: .6em;
+  --padding-end: .6em;
   min-height: 25px;
   font-size: 0.75rem;
 }

package/dist/collection/components/item-divider/item-divider.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
@@ -175,12 +169,6 @@
   overflow: hidden;
 }
 
-/**
- * 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
@@ -236,12 +224,6 @@
  *   }
  * }
  */
-/**
- * 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/item-divider/item-divider.js

@@ -3,10 +3,9 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } 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 divider text in LTR, and to the right in RTL.
@@ -27,27 +26,25 @@ export class ItemDivider {
         this.sticky = false;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'b41d12b91cf208efda5287f9be3c94fc0e934175', class: createColorClasses(this.color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'b191727cc26c600287fd856e49216bf1ae1d5aad', class: createColorClasses(this.color, {
+                [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: '490b5ab187a2f8f4c909eb5c0c16d50a7f90f87d', name: "start" }), h("div", { key: '55cc4cdda96d6a33472fe6570a09e725c3a5e091', class: "item-divider-inner", part: "inner" }, h("div", { key: 'fec32822339f1a2197fd576b0949bf12d1b7582b', class: "item-divider-wrapper", part: "container" }, h("slot", { key: '698a1e95a0481c1a7ff20795c479ceb5b00873ae' })), h("slot", { key: 'c5d28d2b06885044bdadaf203018568c8701accc', name: "end" }))));
+            }) }, h("slot", { key: 'a8e2eb48ca858b64da8ad018fa8d1667030b7143', name: "start" }), h("div", { key: '3219e0b76ac4a96db50a67f1f2794a235111c613', class: "item-divider-inner", part: "inner" }, h("div", { key: '31a64775153cd8704458e0e2a4a512096585deb4', class: "item-divider-wrapper", part: "container" }, h("slot", { key: 'd46dfb578028790eb6ccaac5e6009a5d96aa831a' })), h("slot", { key: 'a5fc7ac27e418ea82d9dcc913a8dae7e35493760', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["item-divider.ios.scss"],
-            "md": ["item-divider.md.scss"],
-            "ionic": ["item-divider.md.scss"]
+            "md": ["item-divider.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item-divider.ios.css"],
-            "md": ["item-divider.md.css"],
-            "ionic": ["item-divider.md.css"]
+            "md": ["item-divider.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/item-divider/item-divider.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
@@ -175,12 +169,6 @@
   overflow: hidden;
 }
 
-/**
- * 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
@@ -236,12 +224,6 @@
  *   }
  * }
  */
-/**
- * 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/item-group/item-group.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
@@ -63,12 +57,6 @@ ion-item-group {
   display: block;
 }
 
-/**
- * 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/item-group/item-group.js

@@ -2,18 +2,14 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '192876ea9e6fc866519490556a5db863b8731ceb', role: "group", class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'd24ee9c70a99d11b7d95dfb4a8066670bdfcbc1d', role: "group", class: {
+                [mode]: true,
                 // Used internally for styling
-                [`item-group-${theme}`]: true,
+                [`item-group-${mode}`]: true,
                 item: true,
             } }));
     }
@@ -21,15 +17,13 @@ export class ItemGroup {
     static get originalStyleUrls() {
         return {
             "ios": ["item-group.ios.scss"],
-            "md": ["item-group.md.scss"],
-            "ionic": ["item-group.md.scss"]
+            "md": ["item-group.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item-group.ios.css"],
-            "md": ["item-group.md.css"],
-            "ionic": ["item-group.md.css"]
+            "md": ["item-group.md.css"]
         };
     }
 }

package/dist/collection/components/item-group/item-group.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
@@ -63,12 +57,6 @@ ion-item-group {
   display: block;
 }
 
-/**
- * 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