@ionic/core 8.3.2-dev.11728314937.130218e6 → 8.3.2-dev.11729014526.1ab61c12

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

@@ -0,0 +1,348 @@
+/**
+ * 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.
+ */
+/**
+ * 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);
+}
+.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;
+  pointer-events: auto;
+  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-icon {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+}
+
+.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-icon,
+.toast-button-icon {
+  font-size: 1.4em;
+}
+
+.toast-button-inner {
+  display: flex;
+  align-items: center;
+}
+
+@media (any-hover: hover) {
+  .toast-button:hover {
+    cursor: pointer;
+  }
+}
+:host {
+  --background: var(--ionic-color-neutral-1200, #242424);
+  --border-radius: var(--ionic-border-radius-400, 16px);
+  --box-shadow: var(--ionic-elevation-400, 0px 15px 48px 0px rgba(0, 0, 0, 0.18), 0px 3px 12px 0px rgba(0, 0, 0, 0.12));
+  --button-color: var(--ionic-color-base-white, #ffffff);
+  --color: var(--ionic-color-base-white, #ffffff);
+  --max-width: 343px;
+  --start: 8px;
+  --end: 8px;
+  font-size: var(--ionic-font-size-350, 0.875rem);
+  font-weight: var(--ionic-font-weight-medium, 500);
+  letter-spacing: var(--ionic-letter-spacing-0, 0);
+  line-height: var(--ionic-line-height-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;
+  opacity: 0.01;
+  z-index: 10;
+}
+
+.toast-container {
+  -webkit-padding-start: var(--ionic-space-400, 16px);
+  padding-inline-start: var(--ionic-space-400, 16px);
+  -webkit-padding-end: var(--ionic-space-400, 16px);
+  padding-inline-end: var(--ionic-space-400, 16px);
+  padding-top: var(--ionic-space-300, 12px);
+  padding-bottom: var(--ionic-space-300, 12px);
+}
+
+.toast-header {
+  font-size: var(--ionic-font-size-450, 1.125rem);
+  font-weight: var(--ionic-font-weight-medium, 500);
+  letter-spacing: var(--ionic-letter-spacing-0, 0);
+  line-height: var(--ionic-line-height-700, 28px);
+  text-decoration: none;
+  text-transform: none;
+}
+
+.toast-layout-baseline .toast-button-group-start {
+  -webkit-margin-end: var(--ionic-space-400, 16px);
+  margin-inline-end: var(--ionic-space-400, 16px);
+}
+
+.toast-layout-stacked .toast-button-group-start {
+  margin-bottom: var(--ionic-space-400, 16px);
+}
+
+.toast-layout-baseline .toast-button-group-end {
+  -webkit-margin-start: var(--ionic-space-400, 16px);
+  margin-inline-start: var(--ionic-space-400, 16px);
+}
+
+.toast-layout-stacked .toast-button-group-end {
+  margin-top: var(--ionic-space-400, 16px);
+}
+
+.toast-button-group {
+  gap: var(--ionic-space-400, 16px);
+}
+
+.toast-button {
+  font-size: var(--ionic-font-size-350, 0.875rem);
+  font-weight: var(--ionic-font-weight-regular, 400);
+  letter-spacing: var(--ionic-letter-spacing-0, 0);
+  line-height: var(--ionic-line-height-600, 24px);
+  text-decoration: underline;
+  text-transform: none;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  position: relative;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.toast-icon {
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--ionic-space-200, 8px);
+  margin-inline-end: var(--ionic-space-200, 8px);
+}
+
+.toast-icon,
+.toast-button-icon {
+  font-size: var(--ionic-scale-600, 24px);
+}

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

@@ -1,42 +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.
@@ -103,11 +64,10 @@
   height: 100%;
   outline: none;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: strict;
-  z-index: 1001;
   pointer-events: none;
 }
+
 :host {
   inset-inline-start: 0;
 }
@@ -143,6 +103,7 @@
   background: var(--background);
   box-shadow: var(--box-shadow);
 }
+
 .toast-wrapper {
   inset-inline-start: var(--start);
   inset-inline-end: var(--end);
@@ -224,6 +185,72 @@
     cursor: pointer;
   }
 }
+/**
+ * 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: 1001;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -393,9 +393,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: 'e62265cdc56f9726ea22ec9a950b1112108c2594', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '760eb4a0d8a104505869c9079774b4fc8e08bbe1', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'b39b39c45928a22c32aa1490c291246236c3c044', class: wrapperClass }, h("div", { key: '92639f6d0244745a8679cd4df6a9f352bd7fc8bb', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '3e3bad4ba15ceb99ad9cfc08204de0fe8ac72f86', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '40d0e4076946a8d3a729a60165151d7a202f0b4b', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '8eec1ddcd16adbc66f5026eb9062bb0d59c55578', class: wrapperClass }, h("div", { key: '9bf6a3d5a001cc8d620cbae1226d33de55920b1f', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '584d2c32dba9afc9a18e328ad6c67e8913c57b03', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '28d192b7b3df03e44a381b8f8d23dd5db92dcc79', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -403,14 +403,14 @@ export class Toast {
         return {
             "ios": ["toast.ios.scss"],
             "md": ["toast.md.scss"],
-            "ionic": ["toast.md.scss"]
+            "ionic": ["toast.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toast.ios.css"],
             "md": ["toast.md.css"],
-            "ionic": ["toast.md.css"]
+            "ionic": ["toast.ionic.css"]
         };
     }
     static get properties() {

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

@@ -1,42 +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.
@@ -103,11 +64,10 @@
   height: 100%;
   outline: none;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: strict;
-  z-index: 1001;
   pointer-events: none;
 }
+
 :host {
   inset-inline-start: 0;
 }
@@ -143,6 +103,7 @@
   background: var(--background);
   box-shadow: var(--box-shadow);
 }
+
 .toast-wrapper {
   inset-inline-start: var(--start);
   inset-inline-end: var(--end);
@@ -224,6 +185,72 @@
     cursor: pointer;
   }
 }
+/**
+ * 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: 1001;
+}
+
 /**
  * Convert a pixels given value into rem
  *