@ionic/core 8.8.4-dev.11777064748.1e6da1cd → 8.8.4-dev.11777318673.18d001f6

package/dist/collection/components/button/button.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,28 +53,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 {
   /**
    * @prop --background: Background of the button
@@ -125,6 +97,7 @@
   display: inline-block;
   width: auto;
   color: var(--color);
+  font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
   white-space: normal;
@@ -140,13 +113,21 @@
   pointer-events: none;
 }
 
+:host(.button-solid) {
+  --background: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary-contrast, #fff);
+}
+
 :host(.button-outline) {
+  --border-color: var(--ion-color-primary, #0054e9);
   --background: transparent;
+  --color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
+  --color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.button-block) {
@@ -196,18 +177,18 @@
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
-  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;
   display: flex;
   position: relative;
   align-items: center;
@@ -252,18 +233,36 @@
   flex-shrink: 0;
 }
 
-::slotted(ion-icon),
-::slotted(ion-spinner) {
+::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);
 }
 
 .button-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -311,7 +310,7 @@ ion-ripple-effect {
 
 :host(.button-clear.ion-color) .button-native {
   background: transparent;
-  color: var(--ion-color-foreground);
+  color: var(--ion-color-base);
 }
 
 :host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
@@ -327,90 +326,6 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--color));
 }
 
-.button-native ion-ripple-effect,
-.button-native::after {
-  border-radius: inherit;
-}
-
-:host(.button-has-badge) .button-native {
-  --overflow: visible;
-}
-
-:host ::slotted(ion-badge[vertical]:not(:empty)) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:host {
-  font-family: var(--ion-font-family, inherit);
-}
-
-:host(.button-solid) {
-  --background: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary-contrast, #fff);
-}
-
-:host(.button-outline) {
-  --border-color: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary, #0054e9);
-}
-
-:host(.button-clear) {
-  --color: var(--ion-color-primary, #0054e9);
-}
-
-::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;
-}
-
-.button-native ::slotted(ion-badge) {
-  position: fixed;
-}
-
-:host ::slotted(ion-badge[vertical]:not(:empty)) {
-  -webkit-padding-start: 2px;
-  padding-inline-start: 2px;
-  -webkit-padding-end: 2px;
-  padding-inline-end: 2px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
-:host(.in-datetime) {
-  -webkit-margin-start: 2px;
-  margin-inline-start: 2px;
-  -webkit-margin-end: 2px;
-  margin-inline-end: 2px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  min-height: 32px;
-}
-
-/**
- * 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
@@ -467,11 +382,14 @@ ion-ripple-effect {
  * }
  */
 :host {
+  --border-radius: 4px;
   --padding-top: 8px;
   --padding-bottom: 8px;
   --padding-start: 1.1em;
   --padding-end: 1.1em;
-  --transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 15ms linear, color 15ms linear;
+  --transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
+                background-color 15ms linear,
+                color 15ms linear;
   -webkit-margin-start: 2px;
   margin-inline-start: 2px;
   -webkit-margin-end: 2px;
@@ -490,8 +408,8 @@ ion-ripple-effect {
   --background-hover: var(--ion-color-primary-contrast, #fff);
   --background-focused: var(--ion-color-primary-contrast, #fff);
   --background-activated-opacity: 0;
-  --background-focused-opacity: 0.24;
-  --background-hover-opacity: 0.08;
+  --background-focused-opacity: .24;
+  --background-hover-opacity: .08;
   --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);
 }
 
@@ -507,8 +425,8 @@ ion-ripple-effect {
   --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: var(--ion-color-primary, #0054e9);
   --background-activated-opacity: 0;
-  --background-focused-opacity: 0.12;
-  --background-hover-opacity: 0.04;
+  --background-focused-opacity: .12;
+  --background-hover-opacity: .04;
 }
 
 :host(.button-outline.ion-activated.ion-color) .button-native {
@@ -520,20 +438,16 @@ ion-ripple-effect {
   --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: var(--ion-color-primary, #0054e9);
   --background-activated-opacity: 0;
-  --background-focused-opacity: 0.12;
-  --background-hover-opacity: 0.04;
-}
-
-:host(.button-soft) {
-  --border-radius: 4px;
+  --background-focused-opacity: .12;
+  --background-hover-opacity: .04;
 }
 
 :host(.button-round) {
   --border-radius: 999px;
-}
-
-:host(.button-rectangular) {
-  --border-radius: 0px;
+  --padding-top: 0;
+  --padding-start: 26px;
+  --padding-end: 26px;
+  --padding-bottom: 0;
 }
 
 :host(.button-large) {
@@ -575,7 +489,7 @@ ion-ripple-effect {
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 14px
@@ -598,7 +512,7 @@ ion-ripple-effect {
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 13px
@@ -621,7 +535,7 @@ ion-ripple-effect {
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 20px
@@ -657,18 +571,4 @@ ion-ripple-effect {
 :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: var(--ion-toolbar-background, var(--color));
   color: var(--ion-toolbar-color, var(--background), var(--ion-color-primary-contrast, #fff));
-}
-
-:host(.in-datetime) {
-  --padding-top: 3px;
-  --padding-bottom: 3px;
-  --padding-start: 8px;
-  --padding-end: 8px;
-  --box-shadow: none;
-}
-
-:host(.in-datetime.button-clear) {
-  --background-activated: transparent;
-  --background-focused: currentColor;
-  --background-hover: currentColor;
 }

package/dist/collection/components/buttons/buttons.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,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;
 }
 
@@ -261,9 +209,9 @@
 :host-context(.ion-color)::slotted(*) .button-solid {
   --background: var(--ion-color-contrast);
   --background-focused: #000;
-  --background-focused-opacity: 0.12;
+  --background-focused-opacity: .12;
   --background-activated: #000;
-  --background-activated-opacity: 0.12;
+  --background-activated-opacity: .12;
   --background-hover: var(--ion-color-base);
   --background-hover-opacity: 0.45;
   --color: var(--ion-color-base);
@@ -290,9 +238,9 @@
 
 ::slotted(*) .button-solid:not(.ion-color) {
   --background-focused: #000;
-  --background-focused-opacity: 0.12;
+  --background-focused-opacity: .12;
   --background-activated: #000;
-  --background-activated-opacity: 0.12;
+  --background-activated-opacity: .12;
 }
 
 ::slotted(*) ion-icon[slot=start] {

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;
 }