@ionic/core 8.2.2 → 8.2.3-dev.11718879673.1a3f486b

package/dist/collection/components/card-header/card-header.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 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.
  */
 export class CardHeader {
     constructor() {
@@ -13,25 +14,27 @@ export class CardHeader {
         this.translucent = false;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '18d12507ec6e650a72d721e9d0f4128b5e86df1d', class: createColorClasses(this.color, {
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '8d0b55caa6295f60a607b401b84077f7bd2d069b', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
-                [mode]: true,
-            }) }, h("slot", { key: '3374c087d8c3f014082787e255432e7a335ef44f' })));
+                [theme]: true,
+            }) }, h("slot", { key: '4b5e745481d86493e821a329203fb42867743bb3' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-header.ios.scss"],
-            "md": ["card-header.md.scss"]
+            "md": ["card-header.md.scss"],
+            "ionic": ["card-header.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card-header.ios.css"],
-            "md": ["card-header.md.css"]
+            "md": ["card-header.md.css"],
+            "ionic": ["card-header.md.css"]
         };
     }
     static get properties() {
@@ -71,7 +74,7 @@ export class CardHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the card header 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 card header 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)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/card-header/card-header.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
@@ -68,6 +74,12 @@
   color: 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

package/dist/collection/components/card-subtitle/card-subtitle.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
@@ -66,6 +72,12 @@
   color: var(--ion-color-base);
 }
 
+/**
+ * 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/card-subtitle/card-subtitle.js

@@ -3,33 +3,36 @@
  */
 import { Host, h } from "@stencil/core";
 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.
  */
 export class CardSubtitle {
     constructor() {
         this.color = undefined;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'cbcb01bd01cf6de64a0b04fb626e42b07ceb8f53', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '37a73ff9acef0817bb86f5d631e8ea982c8944b9', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
-                [mode]: true,
-            }) }, h("slot", { key: 'cbcaa73aa5799882c48d6c0aabfb13651bcc91c0' })));
+                [theme]: true,
+            }) }, h("slot", { key: '82196ebafd2b54bb74de8dd28513d6e9cabd12f9' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-subtitle.ios.scss"],
-            "md": ["card-subtitle.md.scss"]
+            "md": ["card-subtitle.md.scss"],
+            "ionic": ["card-subtitle.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card-subtitle.ios.css"],
-            "md": ["card-subtitle.md.css"]
+            "md": ["card-subtitle.md.css"],
+            "ionic": ["card-subtitle.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/card-subtitle/card-subtitle.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
@@ -66,6 +72,12 @@
   color: var(--ion-color-base);
 }
 
+/**
+ * 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/card-title/card-title.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
@@ -66,6 +72,12 @@
   color: var(--ion-color-base);
 }
 
+/**
+ * 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/card-title/card-title.js

@@ -3,33 +3,36 @@
  */
 import { Host, h } from "@stencil/core";
 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.
  */
 export class CardTitle {
     constructor() {
         this.color = undefined;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'f904a0ca6489f147d03c9c5f9f2c5549cdb38d1a', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '40bb33c38b01e975be19b8967bea1548edb9034d', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
-                [mode]: true,
-            }) }, h("slot", { key: 'effb921de4ad8dfbbe318b3f692f4005812da7b1' })));
+                [theme]: true,
+            }) }, h("slot", { key: '2b0604799bb5aa49452fdce02f9fd5d8f2e078e2' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-title.ios.scss"],
-            "md": ["card-title.md.scss"]
+            "md": ["card-title.md.scss"],
+            "ionic": ["card-title.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card-title.ios.css"],
-            "md": ["card-title.md.css"]
+            "md": ["card-title.md.css"],
+            "ionic": ["card-title.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/card-title/card-title.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
@@ -66,6 +72,12 @@
   color: var(--ion-color-base);
 }
 
+/**
+ * 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/checkbox/checkbox.ionic.css

@@ -0,0 +1,391 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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 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.
+ */
+:host {
+  --border-width: var(--ionic-border-size-025, 1px);
+  --border-style: var(--ionic-border-style-solid, solid);
+  --border-color: var(--ionic-color-neutral-800, #626262);
+  --checkmark-width: 3;
+  --focus-ring-color: var(--ionic-state-focus-1, #9ec4fd);
+  --focus-ring-width: var(--ionic-border-size-050, 2px);
+  --focus-ring-offset: var(--ionic-space-050, 2px);
+  --size: var(--ionic-scale-600, 24px);
+  --checkbox-background-checked: var(--ionic-color-primary-base, #105cef);
+  --border-color-checked: var(--ionic-color-primary-base, #105cef);
+  --checkmark-color: var(--ionic-color-base-white, #ffffff);
+  --transition: none;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  z-index: 2;
+}
+:host::after {
+  right: 0;
+  left: 0;
+  top: 50%;
+  position: absolute;
+  height: 100%;
+  min-height: var(--ionic-scale-1200, 48px);
+  transform: translateY(-50%);
+  content: "";
+  cursor: pointer;
+  z-index: 1;
+}
+:host .native-wrapper {
+  position: relative;
+}
+
+:host(.in-item) {
+  flex: 1 1 0;
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ * Checkbox can be slotted
+ * in components such as item and
+ * toolbar which is why we do not
+ * limit the below behavior to just ion-item.
+ */
+:host([slot=start]),
+:host([slot=end]) {
+  flex: initial;
+  width: auto;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  height: inherit;
+  cursor: inherit;
+}
+
+.label-text-wrapper {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:host(.in-item) .label-text-wrapper {
+  margin-top: var(--ionic-space-250, 10px);
+  margin-bottom: var(--ionic-space-250, 10px);
+}
+
+:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
+  margin-top: var(--ionic-space-250, 10px);
+  margin-bottom: var(--ionic-space-400, 16px);
+}
+
+:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
+  margin-bottom: var(--ionic-space-250, 10px);
+}
+
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden {
+  display: none;
+}
+
+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;
+}
+
+.native-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-icon {
+  border-radius: var(--border-radius);
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  transition: var(--transition);
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background: var(--checkbox-background);
+  box-sizing: border-box;
+}
+
+.checkbox-icon path {
+  fill: none;
+  stroke: var(--checkmark-color);
+  stroke-width: var(--checkmark-width);
+  opacity: 0;
+}
+
+:host(.checkbox-justify-space-between) .checkbox-wrapper {
+  justify-content: space-between;
+}
+
+:host(.checkbox-justify-start) .checkbox-wrapper {
+  justify-content: start;
+}
+
+:host(.checkbox-justify-end) .checkbox-wrapper {
+  justify-content: end;
+}
+
+:host(.checkbox-alignment-start) .checkbox-wrapper {
+  align-items: start;
+}
+
+:host(.checkbox-alignment-center) .checkbox-wrapper {
+  align-items: center;
+}
+
+/**
+ * Label is on the left of the checkbox in LTR and
+ * on the right in RTL.
+ */
+:host(.checkbox-label-placement-start) .checkbox-wrapper {
+  flex-direction: row;
+}
+
+:host(.checkbox-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the checkbox should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--ionic-space-400, 16px);
+  margin-inline-end: var(--ionic-space-400, 16px);
+}
+
+/**
+ * Label is on the right of the checkbox in LTR and
+ * on the left in RTL.
+ */
+:host(.checkbox-label-placement-end) .checkbox-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * The margin between the label and
+ * the checkbox should be on the start
+ * when the label sits at the end.
+ */
+:host(.checkbox-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: var(--ionic-space-400, 16px);
+  margin-inline-start: var(--ionic-space-400, 16px);
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+}
+
+:host(.checkbox-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the checkbox should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--ionic-space-400, 16px);
+  margin-inline-end: var(--ionic-space-400, 16px);
+}
+
+/**
+ * Label is on the left of the checkbox in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.checkbox-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the checkbox.
+ */
+:host(.checkbox-label-placement-stacked) .checkbox-wrapper {
+  flex-direction: column;
+}
+
+:host(.checkbox-label-placement-stacked) .label-text-wrapper {
+  transform: scale(0.75);
+  /**
+   * The margin between the label and
+   * the checkbox should be on the bottom
+   * when the label sits at the top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: var(--ionic-space-400, 16px);
+  /**
+   * Label text should not extend
+   * beyond the bounds of the checkbox.
+   */
+  max-width: 133.3333333333%;
+}
+
+:host(.checkbox-size-small) {
+  --size: var(--ionic-scale-400, 16px);
+}
+
+:host(.checkbox-checked) .checkbox-icon,
+:host(.checkbox-indeterminate) .checkbox-icon {
+  border-color: var(--border-color-checked);
+  background: var(--checkbox-background-checked);
+}
+
+:host(.checkbox-checked) .checkbox-icon path,
+:host(.checkbox-indeterminate) .checkbox-icon path {
+  opacity: 1;
+}
+
+:host(.ion-invalid) {
+  --focus-ring-color: var(--ionic-state-focus-2, #ffafaf);
+}
+:host(.ion-invalid) .checkbox-icon {
+  border-color: var(--ionic-color-danger-800, #bf2222);
+}
+
+:host(.checkbox-disabled) {
+  pointer-events: none;
+}
+
+:host(.checkbox-disabled) .native-wrapper:after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  background-color: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));
+  content: "";
+  pointer-events: none;
+}
+
+:host(.checkbox-disabled) .checkbox-icon {
+  border-color: var(--ionic-color-neutral-800, #626262);
+  background-color: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));
+}
+
+:host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
+  border-width: var(--ionic-border-size-0, 0px);
+  background-color: var(--ionic-color-primary-base, #105cef);
+}
+
+@media (any-hover: hover) {
+  :host(:hover) .checkbox-icon {
+    background-color: var(--ionic-color-neutral-100, #f1f1f1);
+  }
+  :host(:hover.checkbox-checked) .checkbox-icon,
+  :host(:hover.checkbox-indeterminate) .checkbox-icon {
+    background-color: var(--ionic-color-primary-800, #0f54da);
+  }
+}
+:host(.ion-focused:not(.checkbox-disabled)) .checkbox-icon {
+  outline: var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+:host(.ion-activated) .checkbox-icon {
+  background-color: var(--ionic-color-neutral-200, #e7e7e7);
+}
+
+:host(.ion-activated.checkbox-checked) .checkbox-icon,
+:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
+  background-color: var(--ionic-color-primary-900, #0d4bc3);
+}
+
+:host(.checkbox-shape-soft) {
+  --border-radius: var(--ionic-border-radius-100, 4px);
+}
+
+:host(.checkbox-size-small.checkbox-shape-soft) {
+  --border-radius: var(--ionic-border-radius-050, 2px);
+}
+
+:host(.checkbox-shape-rectangular) {
+  --border-radius: var(--ionic-border-radius-0, 0px);
+}
+
+.checkbox-wrapper {
+  min-height: var(--ionic-scale-1200, 48px);
+}