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

package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css

@@ -0,0 +1,137 @@
+/**
+ * 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.
+ */
+/**
+ * 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 ion-button.button-has-icon-only {
+  --padding-end: inherit;
+  --color: var(--ionic-color-neutral-500, #a2a2a2);
+  --margin-end: calc(-1 * var(--padding-end));
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--margin-end);
+  margin-inline-end: var(--margin-end);
+  margin-top: 0;
+  margin-bottom: 0;
+}

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -94,29 +94,31 @@ export class InputPasswordToggle {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: '4ca80b49b49f4ed0c14573a2965e5590e1cb7607', class: createColorClasses(color, {
+        return (h(Host, { key: '140bda3fc0a5a4dda16c9dfcf1254cc94c60206e', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: '37eeacd2673026ce9c068c45af0df09a9d83156c', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: 'ec84dcf19d488f9454eadc860e10be8f8a306f0b', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '27ad27e94b0fee38cf6129870621a0c96de4375a', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '40d2804ffafda8cb18c4f55af8cb6f7916c7c466', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["input-password-toggle.scss"],
-            "md": ["input-password-toggle.scss"]
+            "ios": ["input-password-toggle.common.scss"],
+            "md": ["input-password-toggle.common.scss"],
+            "ionic": ["input-password-toggle.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["input-password-toggle.css"],
-            "md": ["input-password-toggle.css"]
+            "ios": ["input-password-toggle.common.css"],
+            "md": ["input-password-toggle.common.css"],
+            "ionic": ["input-password-toggle.ionic.css"]
         };
     }
     static get properties() {

package/dist/collection/components/input-password-toggle/test/basic/input-password-toggle.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('input password toggle: states'), () => {
         test('should be hidden when inside of a readonly input', async ({ page }) => {
             await page.setContent(`

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

@@ -416,6 +416,9 @@ ion-ripple-effect {
   --border-color: var(--ionic-color-neutral-300, #cfcfcf);
   --border-style: var(--ionic-border-style-solid, solid);
   --border-width: 0 0 var(--ionic-border-size-025, 1px) 0;
+  --detail-icon-color: var(--ionic-color-neutral-800, #626262);
+  --detail-icon-font-size: var(--ionic-scale-600, 24px);
+  --detail-icon-opacity: 1;
   --min-height: var(--ionic-scale-1800, 72px);
   --padding-top: var(--ionic-space-200, 8px);
   --padding-end: var(--ionic-space-400, 16px);
@@ -428,6 +431,10 @@ ion-ripple-effect {
   min-height: initial;
 }
 
+.item-detail-icon {
+  margin-inline-end: 0;
+}
+
 slot[name=start]::slotted(*) {
   -webkit-margin-end: var(--ionic-space-400, 16px);
   margin-inline-end: var(--ionic-space-400, 16px);
@@ -438,6 +445,11 @@ slot[name=end]::slotted(*) {
   margin-inline-start: var(--ionic-space-400, 16px);
 }
 
+::slotted(ion-icon:not(.item-detail-icon)) {
+  color: var(--ionic-color-neutral-1000, #3b3b3b);
+  font-size: var(--ionic-scale-1000, 40px);
+}
+
 :host(.item-disabled) {
   opacity: 0.6;
 }

package/dist/collection/components/item/item.js

@@ -155,8 +155,15 @@ export class Item {
         // Return the configured item detail icon or the default icon
         return config.get('itemDetailIcon', defaultIcon);
     }
+    /**
+     * The icon should be flipped when the app is RTL and
+     * the icon is a variation of chevron.
+     */
+    get shouldFlipIcon() {
+        return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightRegular;
+    }
     render() {
-        const { detail, download, labelColorStyles, lines, disabled, href, itemDetailIcon, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
+        const { detail, download, labelColorStyles, lines, disabled, href, itemDetailIcon, shouldFlipIcon, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
         const childStyles = {};
         const theme = getIonTheme(this);
         const clickable = this.isClickable();
@@ -222,7 +229,7 @@ export class Item {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '6d42ec98b0fea85143b13be0255a1990ee228eb6', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '52b074f43aeb2638edd202fefcace85393ef9236', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [theme]: true,
                 'item-lines-default': lines === undefined,
@@ -234,7 +241,7 @@ export class Item {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '491f9c275244cc2f80edf879527c247c8befed37' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'f228392d32b6d7e7ebfebe68f07c174e7859c672', name: "start" }), h("div", { key: '5d8621ef3bee15f3cf44a0a8366fbbac7f62e273', class: "item-inner" }, h("div", { key: 'f3fbf1b7f869673a987e1fe87b8b62ee9df25344', class: "input-wrapper" }, h("slot", { key: '2eeba85da9a8d43d415033eb1fb72dca712f3f4e' })), h("slot", { key: 'd6bbf4174566f41be93a4e164468ff6830e38740', name: "end" }), showDetail && (h("ion-icon", { key: '0cd957743e35b4258a61d554442dd6d7327043e8', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": itemDetailIcon === chevronForward }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: 'b59ba78680d1548813f957023471fe5a947a73e9' }))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '6e2b795279107f00dd4cb69b613a0a1b11c6ef58' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '91ac9ed7a36349c145e2a1b406bdc6a1f4995d2c', name: "start" }), h("div", { key: '5a11561024c18e69ef50e7bd30ceb4b169f799bb', class: "item-inner" }, h("div", { key: 'd670580211c19ab39ee85d74242d899ffe77407a', class: "input-wrapper" }, h("slot", { key: 'c2eaf2eb884b85f971d387f21eadda17f1dacc2b' })), h("slot", { key: 'cbf98a93c4e009a0e7ebb9b8f83a99b148da4e6f', name: "end" }), showDetail && (h("ion-icon", { key: 'b8f1ff2d0f79515eec726bd1c67dbab2e70e0b9f', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: 'e094623c360e6ae89b01f3aa940ada51a9d16349' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ripple-effect/ripple-effect.ionic.css

@@ -0,0 +1,154 @@
+/**
+ * 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 {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  contain: strict;
+  pointer-events: none;
+}
+
+:host(.unbounded) {
+  contain: layout size style;
+}
+
+.ripple-effect {
+  border-radius: 50%;
+  position: absolute;
+  background-color: currentColor;
+  color: inherit;
+  contain: strict;
+  opacity: 0;
+  animation: 225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+
+.fade-out {
+  transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  animation: 150ms fadeOutAnimation forwards;
+}
+
+@keyframes rippleAnimation {
+  from {
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transform: scale(1);
+  }
+  to {
+    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  }
+}
+@keyframes fadeInAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0;
+  }
+  to {
+    opacity: 0.16;
+  }
+}
+@keyframes fadeOutAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0.16;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.ripple-effect {
+  animation-name: rippleAnimation, fadeInAnimation;
+}
+
+.fade-out {
+  animation-name: fadeOutAnimation;
+}
+
+@keyframes rippleAnimation {
+  from {
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transform: scale(1);
+  }
+  to {
+    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  }
+}
+@keyframes fadeInAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0;
+  }
+  to {
+    opacity: var(--ripple-opacity, 0.16);
+  }
+}
+@keyframes fadeOutAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: var(--ripple-opacity, 0.16);
+  }
+  to {
+    opacity: 0;
+  }
+}

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -63,7 +63,7 @@ export class RippleEffect {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f1e6f4a3fc8ae9761f8aba243f2866721b839398', role: "presentation", class: {
+        return (h(Host, { key: '8ae91c86a67ffd14458eb733a207f01a64d59307', role: "presentation", class: {
                 [theme]: true,
                 unbounded: this.unbounded,
             } }));
@@ -72,12 +72,16 @@ export class RippleEffect {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["ripple-effect.scss"]
+            "ios": ["ripple-effect.common.scss"],
+            "md": ["ripple-effect.common.scss"],
+            "ionic": ["ripple-effect.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["ripple-effect.css"]
+            "ios": ["ripple-effect.common.css"],
+            "md": ["ripple-effect.common.css"],
+            "ionic": ["ripple-effect.ionic.css"]
         };
     }
     static get properties() {

package/dist/collection/components/spinner/spinner.js

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonTheme, getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -18,14 +18,13 @@ export class Spinner {
         this.paused = false;
         this.size = undefined;
     }
-    // TODO(ROU-10920): Switch `theme` to `mode`.
     getName() {
         const spinnerName = this.name || config.get('spinner');
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         if (spinnerName) {
             return spinnerName;
         }
-        return theme === 'ios' ? 'lines' : 'circular';
+        return mode === 'ios' ? 'lines' : 'circular';
     }
     getSize() {
         const theme = getIonTheme(this);
@@ -58,7 +57,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '6cac09975f1088551e71b1c60033d3571438f374', class: createColorClasses(self.color, {
+        return (h(Host, { key: '49fd776ff3793a76b111c1f0e0fc0755d1d28d6c', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),