@ionic/core 8.7.5 → 8.7.6-dev.11758808200.14faa1a0

package/dist/collection/components/title/title.ionic.css

@@ -0,0 +1,127 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * 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.
+ */
+/**
+ * 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: Text color of the title
+   */
+  --color: initial;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  transform: translateZ(0);
+  color: var(--color);
+}
+
+.toolbar-title {
+  display: block;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+:host(.title-small) .toolbar-title {
+  white-space: normal;
+}
+
+:host {
+  font-size: var(--token-font-size-450, 1.125rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
+  text-decoration: none;
+  text-transform: none;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+:host(.title-large) {
+  font-size: var(--token-font-size-700, 1.75rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-900, var(--token-scale-900, 36px));
+  text-decoration: none;
+  text-transform: none;
+}

package/dist/collection/components/title/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
@@ -53,6 +59,28 @@
  *   }
  * }
  */
+/**
+ * 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: Text color of the title
@@ -65,10 +93,6 @@
   color: var(--color);
 }
 
-:host(.ion-color) {
-  color: var(--ion-color-base);
-}
-
 .toolbar-title {
   display: block;
   width: 100%;
@@ -82,6 +106,10 @@
   white-space: normal;
 }
 
+:host(.ion-color) {
+  color: var(--ion-color-base);
+}
+
 :host {
   top: 0;
   -webkit-padding-start: 90px;

package/dist/collection/components/title/title.js

@@ -3,7 +3,11 @@
  */
 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 the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class ToolbarTitle {
     sizeChanged() {
         this.emitStyle();
@@ -21,26 +25,28 @@ export class ToolbarTitle {
         return this.size !== undefined ? this.size : 'default';
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: 'e599c0bf1b0817df3fa8360bdcd6d787f751c371', class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '8db3e5f9dbd8b1762a9919eaeef29c98649dfb25', class: createColorClasses(this.color, {
+                [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '6e7eee9047d6759876bb31d7305b76efc7c4338c', class: "toolbar-title" }, h("slot", { key: 'bf790eb4c83dd0af4f2fd1f85ab4af5819f46ff4' }))));
+            }) }, h("div", { key: 'a31ebae2c494a51d2145eec69d0b1bc635108a01', class: "toolbar-title" }, h("slot", { key: 'f5975b44b3e3afbf98dcbdb53fc78447b49407b3' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["title.ios.scss"],
-            "md": ["title.md.scss"]
+            "md": ["title.md.scss"],
+            "ionic": ["title.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["title.ios.css"],
-            "md": ["title.md.css"]
+            "md": ["title.md.css"],
+            "ionic": ["title.ionic.css"]
         };
     }
     static get properties() {

package/dist/collection/components/title/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
@@ -53,6 +59,28 @@
  *   }
  * }
  */
+/**
+ * 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: Text color of the title
@@ -65,10 +93,6 @@
   color: var(--color);
 }
 
-:host(.ion-color) {
-  color: var(--ion-color-base);
-}
-
 .toolbar-title {
   display: block;
   width: 100%;
@@ -82,6 +106,10 @@
   white-space: normal;
 }
 
+:host(.ion-color) {
+  color: var(--ion-color-base);
+}
+
 :host {
   -webkit-padding-start: 20px;
   padding-inline-start: 20px;

package/dist/collection/components/toast/animations/utils.js

@@ -17,7 +17,7 @@ import { printIonWarning } from "../../../utils/logging/index";
  * @param position The value of the toast's position prop.
  * @param positionAnchor The element the toast should be anchored to,
  * if applicable.
- * @param mode The toast component's mode (md, ios, etc).
+ * @param mode The toast component's platform (md or ios).
  * @param toast A reference to the toast element itself.
  */
 export function getAnimationPosition(position, positionAnchor, mode, toast) {

package/dist/collection/components/toast/toast.ionic.css

@@ -0,0 +1,394 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * 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.
+ */
+/**
+ * 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 --background: Background of the toast
+   * @prop --color: Color of the toast text
+   *
+   * @prop --border-color: Border color of the toast
+   * @prop --border-radius: Border radius of the toast
+   * @prop --border-width: Border width of the toast
+   * @prop --border-style: Border style of the toast
+   *
+   * @prop --white-space: White space of the toast message
+   *
+   * @prop --box-shadow: Box shadow of the toast
+   *
+   * @prop --min-width: Minimum width of the toast
+   * @prop --width: Width of the toast
+   * @prop --max-width: Maximum width of the toast
+   *
+   * @prop --min-height: Minimum height of the toast
+   * @prop --height: Height of the toast
+   * @prop --max-height: Maximum height of the toast
+   *
+   * @prop --button-color: Color of the button text
+   *
+   * @prop --start: Position from the left if direction is left-to-right, and from the right if direction is right-to-left
+   * @prop --end: Position from the right if direction is left-to-right, and from the left if direction is right-to-left
+   */
+  --border-width: 0;
+  --border-style: none;
+  --border-color: initial;
+  --box-shadow: none;
+  --min-width: auto;
+  --width: auto;
+  --min-height: auto;
+  --height: auto;
+  --max-height: auto;
+  --white-space: normal;
+  top: 0;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  color: var(--color);
+  contain: strict;
+  pointer-events: none;
+}
+:host {
+  inset-inline-start: 0;
+}
+
+:host(.overlay-hidden) {
+  display: none;
+}
+
+:host(.ion-color) {
+  --button-color: inherit;
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .toast-button-cancel {
+  color: inherit;
+}
+
+:host(.ion-color) .toast-wrapper {
+  background: var(--ion-color-base);
+}
+
+.toast-wrapper {
+  border-radius: var(--border-radius);
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+  pointer-events: auto;
+}
+.toast-wrapper {
+  inset-inline-start: var(--start);
+  inset-inline-end: var(--end);
+}
+
+.toast-wrapper.toast-top {
+  transform: translate3d(0,  -100%,  0);
+  top: 0;
+}
+
+.toast-wrapper.toast-bottom {
+  transform: translate3d(0,  100%,  0);
+  bottom: 0;
+}
+
+.toast-container {
+  display: flex;
+  align-items: center;
+  height: inherit;
+  min-height: inherit;
+  max-height: inherit;
+  contain: content;
+}
+
+.toast-layout-stacked .toast-container {
+  flex-wrap: wrap;
+}
+
+.toast-layout-baseline .toast-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.toast-content {
+  min-width: 0;
+}
+
+.toast-message {
+  flex: 1;
+  white-space: var(--white-space);
+}
+
+.toast-button-group {
+  display: flex;
+}
+
+.toast-layout-stacked .toast-button-group {
+  justify-content: end;
+  width: 100%;
+}
+
+.toast-button {
+  border: 0;
+  outline: none;
+  color: var(--button-color);
+  z-index: 0;
+}
+
+.toast-button-inner {
+  display: flex;
+  align-items: center;
+}
+
+@media (any-hover: hover) {
+  .toast-button:hover {
+    cursor: pointer;
+  }
+}
+:host {
+  --box-shadow: var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));
+  --max-width: 343px;
+  --start: var(--token-space-200, var(--token-scale-200, 8px));
+  --end: var(--token-space-200, var(--token-scale-200, 8px));
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  z-index: 1001;
+}
+
+.toast-wrapper {
+  -webkit-margin-start: auto;
+  margin-inline-start: auto;
+  -webkit-margin-end: auto;
+  margin-inline-end: auto;
+  margin-top: auto;
+  margin-bottom: auto;
+  display: block;
+  position: absolute;
+  z-index: 10;
+}
+
+/*
+ * In `md` mode, the toast fades in when presented.
+ * To achieve the fade-in effect, the initial opacity must be set
+ * to a value less than 1.
+ */
+:host(.md) .toast-wrapper {
+  opacity: 0.01;
+}
+
+/*
+ * In `ios` mode, the toast will move into the screen based
+ * on the `position`. If the `position` is `middle`, the toast
+ * will fade in from the middle of the screen.
+ * To achieve the fade-in effect, the initial opacity must be set
+ * to a value less than 1.
+ */
+:host(.ios) .toast-wrapper.toast-middle {
+  opacity: 0.01;
+}
+
+.toast-container {
+  -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-top: var(--token-space-300, var(--token-scale-300, 12px));
+  padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
+}
+
+:host(.toast-shape-soft) {
+  --border-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
+}
+
+:host(.toast-shape-round) {
+  --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
+}
+
+:host(.toast-shape-rectangular) {
+  --border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+}
+
+.toast-header {
+  font-size: var(--token-font-size-450, 1.125rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
+  text-decoration: none;
+  text-transform: none;
+}
+
+.toast-layout-baseline .toast-button-group-start {
+  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+.toast-layout-stacked .toast-button-group-start {
+  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+.toast-layout-baseline .toast-button-group-end {
+  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+.toast-layout-stacked .toast-button-group-end {
+  margin-top: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+.toast-button-group {
+  gap: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+.toast-button {
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-regular, 400);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  position: relative;
+  background-color: transparent;
+  text-decoration: underline;
+  overflow: hidden;
+}
+
+.toast-icon {
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--token-space-200, var(--token-scale-200, 8px));
+  margin-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
+}
+
+.toast-icon,
+.toast-button-icon {
+  font-size: var(--token-scale-600, 24px);
+}
+
+:host(.toast-hue-bold) {
+  --background: var(--token-bg-neutral-boldest-default, var(--token-primitives-neutral-1200, #242424));
+  --background-activated: var(--token-bg-neutral-boldest-press, var(--token-primitives-base-black, #111111));
+  --color: var(--token-text-inverse, var(--token-primitives-base-white, #ffffff));
+  --button-color: var(--token-text-inverse, var(--token-primitives-base-white, #ffffff));
+}
+
+:host(.toast-hue-bold.ion-color) .toast-wrapper {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+:host(.toast-hue-bold.ion-color) .toast-button {
+  color: var(--ion-color-contrast);
+}
+
+:host(.toast-hue-subtle) {
+  --background: var(--token-bg-neutral-subtlest-default, var(--token-primitives-base-white, #ffffff));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #efefef));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --button-color: var(--token-text-link-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
+}
+
+:host(.toast-hue-subtle) .toast-button-cancel {
+  color: var(--token-icon-subtlest, var(--token-primitives-neutral-800, #626262));
+}
+
+:host(.toast-hue-subtle.ion-color) .toast-wrapper {
+  background: var(--ion-color-subtle-base);
+  color: var(--ion-color-subtle-contrast);
+}