@ionic/core 8.8.6-dev.11777569278.1613db2e → 8.8.6-dev.11777572994.1147595d

package/dist/collection/components/buttons/buttons.js

@@ -2,11 +2,7 @@
  * (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 Buttons {
     constructor() {
         /**
@@ -16,7 +12,7 @@ export class Buttons {
          * first toolbar, the buttons will be hidden and will
          * only be shown once all toolbars have fully collapsed.
          *
-         * Only applies in the `ios` theme with `collapse` set to
+         * Only applies in `ios` mode with `collapse` set to
          * `true` on `ion-header`.
          *
          * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
@@ -24,26 +20,24 @@ export class Buttons {
         this.collapse = false;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '95c107ba7871c801a5ef14c636dc8e2fe69debf3', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '58c1fc5eb867d0731c63549b1ccb3ec3bbbe6e1b', class: {
+                [mode]: true,
                 ['buttons-collapse']: this.collapse,
-            } }, h("slot", { key: '58669abfce458e1344b84286d4200e305017b958' })));
+            } }, h("slot", { key: '0c8f95b9840c8fa0c4e50be84c5159620a3eb5c8' })));
     }
     static get is() { return "ion-buttons"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["buttons.ios.scss"],
-            "md": ["buttons.md.scss"],
-            "ionic": ["buttons.ionic.scss"]
+            "md": ["buttons.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["buttons.ios.css"],
-            "md": ["buttons.md.css"],
-            "ionic": ["buttons.ionic.css"]
+            "md": ["buttons.md.css"]
         };
     }
     static get properties() {
@@ -60,7 +54,7 @@ export class Buttons {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in the `ios` theme with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
+                    "text": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/buttons/buttons.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
@@ -59,12 +53,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
@@ -120,49 +108,6 @@
  *   }
  * }
  */
-/**
- * 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 {
-  display: flex;
-  align-items: center;
-  transform: translateZ(0);
-}
-
-::slotted(*) ion-button {
-  --padding-top: 0;
-  --padding-bottom: 0;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/**
- * 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
@@ -219,6 +164,9 @@
  * }
  */
 :host {
+  display: flex;
+  align-items: center;
+  transform: translateZ(0);
   z-index: 99;
 }
 

package/dist/collection/components/card/card.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
@@ -59,43 +53,20 @@
  *   }
  * }
  */
-/**
- * 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
    * @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;
   position: relative;
   background: var(--background);
   color: var(--color);
+  font-family: var(--ion-font-family, inherit);
   contain: content;
   overflow: hidden;
 }
@@ -105,21 +76,6 @@
   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;
@@ -127,18 +83,18 @@ ion-ripple-effect {
 }
 
 .card-native {
-  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;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -162,12 +118,16 @@ ion-ripple-effect {
   border: 0;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+button, a {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -232,6 +192,7 @@ ion-ripple-effect {
   margin-inline-end: 16px;
   margin-top: 24px;
   margin-bottom: 24px;
+  border-radius: 8px;
   transition: transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);
   font-size: 0.875rem;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
@@ -239,16 +200,4 @@ ion-ripple-effect {
 
 :host(.ion-activated) {
   transform: scale3d(0.97, 0.97, 1);
-}
-
-:host(.card-soft) {
-  --border-radius: 8px;
-}
-
-:host(.card-round) {
-  --border-radius: 14px;
-}
-
-:host(.card-rectangular) {
-  --border-radius: 0px;
 }

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

@@ -4,10 +4,9 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { createColorClasses, openURL } 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.
  *
  * @part native - The native HTML button, anchor, or div element that wraps all child elements.
  */
@@ -31,12 +30,6 @@ export class Card {
          * another page using `href`.
          */
         this.routerDirection = 'forward';
-        /**
-         * Set to `"soft"` for a card with slightly rounded corners, `"round"` for a card with more
-         * rounded corners, or `"rectangular"` for a card without rounded corners.
-         * Defaults to `"round"`.
-         */
-        this.shape = 'round';
     }
     componentWillLoad() {
         this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
@@ -44,7 +37,7 @@ export class Card {
     isClickable() {
         return this.href !== undefined || this.button;
     }
-    renderCard(theme) {
+    renderCard(mode) {
         const clickable = this.isClickable();
         if (!clickable) {
             return [h("slot", null)];
@@ -59,32 +52,28 @@ export class Card {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }), h("slot", null), clickable && theme === 'md' && h("ion-ripple-effect", null)));
+        return (h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }), h("slot", null), clickable && mode === 'md' && h("ion-ripple-effect", null)));
     }
     render() {
-        const { shape } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'cc8d900ed5325a8b08fb0d0646f301060aee8b7d', class: createColorClasses(this.color, {
-                [theme]: true,
-                [`card-${shape}`]: shape !== undefined,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '85e9b30bd81e79a0c7ac75cb3664bdcf9e4afc4d', class: createColorClasses(this.color, {
+                [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),
-            }) }, this.renderCard(theme)));
+            }) }, this.renderCard(mode)));
     }
     static get is() { return "ion-card"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card.ios.scss"],
-            "md": ["card.md.scss"],
-            "ionic": ["card.ionic.scss"]
+            "md": ["card.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card.ios.css"],
-            "md": ["card.md.css"],
-            "ionic": ["card.ionic.css"]
+            "md": ["card.md.css"]
         };
     }
     static get properties() {
@@ -283,26 +272,6 @@ export class Card {
                 "getter": false,
                 "setter": false
             },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'soft' | 'round' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"soft\"` for a card with slightly rounded corners, `\"round\"` for a card with more\nrounded corners, or `\"rectangular\"` for a card without rounded corners.\nDefaults to `\"round\"`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "shape",
-                "defaultValue": "'round'"
-            },
             "target": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/card/card.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
@@ -59,43 +53,20 @@
  *   }
  * }
  */
-/**
- * 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
    * @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;
   position: relative;
   background: var(--background);
   color: var(--color);
+  font-family: var(--ion-font-family, inherit);
   contain: content;
   overflow: hidden;
 }
@@ -105,21 +76,6 @@
   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;
@@ -127,18 +83,18 @@ ion-ripple-effect {
 }
 
 .card-native {
-  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;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -162,12 +118,16 @@ ion-ripple-effect {
   border: 0;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+button, a {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -232,18 +192,7 @@ ion-ripple-effect {
   margin-inline-end: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
+  border-radius: 4px;
   font-size: 0.875rem;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-}
-
-:host(.card-soft) {
-  --border-radius: 4px;
-}
-
-:host(.card-round) {
-  --border-radius: 12px;
-}
-
-:host(.card-rectangular) {
-  --border-radius: 0px;
 }

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

@@ -1,13 +1,3 @@
-:host {
-  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
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -63,16 +53,11 @@
  *   }
  * }
  */
-:host {
+ion-card-content {
   display: block;
+  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
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -128,7 +113,7 @@
  *   }
  * }
  */
-:host {
+.card-content-ios {
   -webkit-padding-start: 20px;
   padding-inline-start: 20px;
   -webkit-padding-end: 20px;
@@ -138,11 +123,41 @@
   font-size: 1rem;
   line-height: 1.4;
 }
-
-::slotted(p) {
+.card-content-ios h1 {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 2px;
+  font-size: 1.5rem;
+  font-weight: normal;
+}
+.card-content-ios h2 {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  font-size: 1rem;
+  font-weight: normal;
+}
+.card-content-ios h3,
+.card-content-ios h4,
+.card-content-ios h5,
+.card-content-ios h6 {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  font-size: 0.875rem;
+  font-weight: normal;
+}
+.card-content-ios p {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
   font-size: 0.875rem;
+}
+
+ion-card-header + .card-content-ios {
+  padding-top: 0;
 }

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

@@ -2,32 +2,30 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-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.
  */
 export class CardContent {
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'c01bc2a0212e1567b9654a4a79670ae636779764', class: {
-                [theme]: true,
-            } }, h("slot", { key: 'beb72f0ed2c9924eb198a30bf6942a430b22d2a7' })));
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'd98e4d1fc6ad3237549f9bc17e4c67ec5059b1b3', class: {
+                [mode]: true,
+                // Used internally for styling
+                [`card-content-${mode}`]: true,
+            } }));
     }
     static get is() { return "ion-card-content"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-content.ios.scss"],
-            "md": ["card-content.md.scss"],
-            "ionic": ["card-content.ionic.scss"]
+            "md": ["card-content.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card-content.ios.css"],
-            "md": ["card-content.md.css"],
-            "ionic": ["card-content.ionic.css"]
+            "md": ["card-content.md.css"]
         };
     }
 }