@ionic/core 8.2.3-dev.11723022900.1196a7bf → 8.2.3-dev.11724326037.1eacfaff

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

@@ -1,3 +1,64 @@
+/**
+ * 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
  * 
@@ -103,7 +164,6 @@
   display: inline-block;
   width: auto;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
   white-space: normal;
@@ -240,28 +300,9 @@
 }
 
 ::slotted(ion-icon) {
-  font-size: 1.35em;
   pointer-events: none;
 }
 
-::slotted(ion-icon[slot=start]) {
-  -webkit-margin-start: -0.3em;
-  margin-inline-start: -0.3em;
-  -webkit-margin-end: 0.3em;
-  margin-inline-end: 0.3em;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-::slotted(ion-icon[slot=end]) {
-  -webkit-margin-start: 0.3em;
-  margin-inline-start: 0.3em;
-  -webkit-margin-end: -0.2em;
-  margin-inline-end: -0.2em;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 ion-ripple-effect {
   color: var(--ripple-color);
 }
@@ -332,6 +373,32 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--color));
 }
 
+:host {
+  font-family: var(--ion-font-family, inherit);
+}
+
+::slotted(ion-icon) {
+  font-size: 1.35em;
+}
+
+::slotted(ion-icon[slot=start]) {
+  -webkit-margin-start: -0.3em;
+  margin-inline-start: -0.3em;
+  -webkit-margin-end: 0.3em;
+  margin-inline-end: 0.3em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted(ion-icon[slot=end]) {
+  -webkit-margin-start: 0.3em;
+  margin-inline-start: 0.3em;
+  -webkit-margin-end: -0.2em;
+  margin-inline-end: -0.2em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/button/button.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonTheme, 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.
@@ -209,6 +209,7 @@ export class Button {
     render() {
         const { buttonType, type, disabled, rel, target, href, color, expand, hasIconOnly, strong, inheritedAttributes } = this;
         const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const size = this.getSize();
         const shape = this.getShape();
         const TagType = href === undefined ? 'button' : 'a';
@@ -238,7 +239,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: 'b541bf4e31842abbd28c63c34601703e857342f7', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'ab53a2de1a5ed8d54fac1b6260e92d01a4b5fe4a', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -253,7 +254,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '946f186bc9b59ce166597352c5a5477e5b8f1497' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'e7fae7d9bc649553d03fe5093daeb4be4fe05ee2', class: "button-inner" }, h("slot", { key: 'f84b4ffcde1addfe15e98435c81917cab03160a9', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'df052bae97c139a43844f4ed870f6c943575eeda', name: "start" }), h("slot", { key: '08a0582eaa49c55586d168fa03b3d62d6954f7f5' }), h("slot", { key: 'ecaf2227e61fa5094174f13f0c2b671cd5c69557', name: "end" })), theme === 'md' && h("ion-ripple-effect", { key: 'd46220de6ffd3a0fc73299766cf619276b1cdea9', type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: 'cdecf090ea518104bb093d62edcd108fa84727b6' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'db73f177db1ddea7f202ef6f2c6b07d41f812f04', class: "button-inner" }, h("slot", { key: '8ec45f3a34de9494972ee1753750664ef51af5f6', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '313ec292c9fcea510cedb8683050145f561492b2', name: "start" }), h("slot", { key: 'e4b977f187f4308dbdb883b676c65e65e46b16eb' }), h("slot", { key: '12a14e528c13c84648a3be528275eb84d19b7d61', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'a7d45433eb402f3edde9830867f65bbe824c0a62', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,64 @@
+/**
+ * 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
  * 
@@ -103,7 +164,6 @@
   display: inline-block;
   width: auto;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
   white-space: normal;
@@ -240,28 +300,9 @@
 }
 
 ::slotted(ion-icon) {
-  font-size: 1.35em;
   pointer-events: none;
 }
 
-::slotted(ion-icon[slot=start]) {
-  -webkit-margin-start: -0.3em;
-  margin-inline-start: -0.3em;
-  -webkit-margin-end: 0.3em;
-  margin-inline-end: 0.3em;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-::slotted(ion-icon[slot=end]) {
-  -webkit-margin-start: 0.3em;
-  margin-inline-start: 0.3em;
-  -webkit-margin-end: -0.2em;
-  margin-inline-end: -0.2em;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 ion-ripple-effect {
   color: var(--ripple-color);
 }
@@ -332,6 +373,32 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--color));
 }
 
+:host {
+  font-family: var(--ion-font-family, inherit);
+}
+
+::slotted(ion-icon) {
+  font-size: 1.35em;
+}
+
+::slotted(ion-icon[slot=start]) {
+  -webkit-margin-start: -0.3em;
+  margin-inline-start: -0.3em;
+  -webkit-margin-end: 0.3em;
+  margin-inline-end: 0.3em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted(ion-icon[slot=end]) {
+  -webkit-margin-start: 0.3em;
+  margin-inline-start: 0.3em;
+  -webkit-margin-end: -0.2em;
+  margin-inline-end: -0.2em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/button/test/basic/button.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ config, screenshot, title }) => {
+configs({ modes: ['ios', 'md', 'ionic-md', 'ionic-ios'] }).forEach(({ config, screenshot, title }) => {
     test.describe(title('button: basic'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.goto(`/src/components/button/test/basic`, config);
@@ -31,9 +31,9 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ config, title }) => {
     });
 });
 /**
- * Ripple effect is only available in MD mode.
+ * Ripple effect is only available in MD and Ionic mode.
  */
-configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
+configs({ modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
     test.describe(title('button: ripple effect'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.goto(`/src/components/button/test/basic?ionic:_testing=false`, config);

package/dist/collection/components/button/test/clear/button.e2e.js

@@ -6,7 +6,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * Fill="clear" does not render differently based on the direction.
  */
-configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md', 'ionic-ios'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('button: fill: clear'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.goto(`/src/components/button/test/clear`, config);

package/dist/collection/components/button/test/outline/button.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md', 'ionic-ios'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('button: outline'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.goto(`/src/components/button/test/outline`, config);

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

@@ -63,24 +63,75 @@
  * @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 {
-  --background: var(--ionic-color-base-white, #ffffff);
-  --border-radius: var(--ionic-border-radius-100, 4px);
-  -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-400, 16px);
-  padding-bottom: var(--ionic-space-400, 16px);
+  /**
+   * @prop --background: Background of the card
+   * @prop --color: Color of the card
+   * @prop --border-radius: Border radius of the card
+   */
+  --ion-safe-area-left: 0px;
+  --ion-safe-area-right: 0px;
   border-radius: var(--border-radius);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
   display: block;
-  border: var(--ionic-border-size-025, 1px) solid var(--ionic-color-neutral-500, #a2a2a2);
+  position: relative;
   background: var(--background);
   color: var(--color);
+  contain: content;
+  overflow: hidden;
+}
+
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+button,
+a {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 
-:host(.card-round) {
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
+
+:host {
+  --background: var(--ionic-color-base-white, #ffffff);
   --border-radius: var(--ionic-border-radius-400, 16px);
+  --color: var(--ionic-color-neutral-1200, #242424);
+}
+
+::slotted(img) {
+  display: block;
+}
+
+:host(.card-soft) {
+  --border-radius: var(--ionic-border-radius-200, 8px);
 }
 
 :host(.card-rectangular) {

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

@@ -59,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 --background: Background of the card
@@ -74,7 +96,6 @@
   position: relative;
   background: var(--background);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: content;
   overflow: hidden;
 }
@@ -84,6 +105,21 @@
   color: var(--ion-color-contrast);
 }
 
+button,
+a {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
+
+:host {
+  font-family: var(--ion-font-family, inherit);
+}
+
 :host(.card-disabled) {
   cursor: default;
   opacity: 0.3;
@@ -126,17 +162,6 @@
   border: 0;
 }
 
-button,
-a {
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-drag: none;
-}
-
-ion-ripple-effect {
-  color: var(--ripple-color);
-}
-
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -59,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 --background: Background of the card
@@ -74,7 +96,6 @@
   position: relative;
   background: var(--background);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: content;
   overflow: hidden;
 }
@@ -84,6 +105,21 @@
   color: var(--ion-color-contrast);
 }
 
+button,
+a {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
+
+:host {
+  font-family: var(--ion-font-family, inherit);
+}
+
 :host(.card-disabled) {
   cursor: default;
   opacity: 0.3;
@@ -126,17 +162,6 @@
   border: 0;
 }
 
-button,
-a {
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-drag: none;
-}
-
-ion-ripple-effect {
-  color: var(--ripple-color);
-}
-
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/card-content/card-content.ionic.css

@@ -0,0 +1,92 @@
+ion-card-content {
+  position: relative;
+}
+
+/**
+ * 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.
+ */
+.card-content-ionic {
+  -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-400, 16px);
+  padding-bottom: var(--ionic-space-400, 16px);
+  display: flex;
+  flex-direction: column;
+  font-size: var(--ionic-font-size-350, 0.875rem);
+  line-height: var(--ionic-line-height-600, 24px);
+  gap: var(--ionic-space-200, 8px);
+}
+.card-content-ionic img {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: var(--ionic-space-200, 8px);
+  margin-bottom: var(--ionic-space-200, 8px);
+}
+
+ion-card-header + .card-content-ionic {
+  padding-top: 0;
+}

package/dist/collection/components/card-content/card-content.ios.css

@@ -1,3 +1,7 @@
+ion-card-content {
+  position: relative;
+}
+
 /**
  * Convert a pixels given value into rem
  * 
@@ -61,7 +65,6 @@
  */
 ion-card-content {
   display: block;
-  position: relative;
 }
 
 /**