@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779921691.1777274a

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

@@ -208,7 +208,6 @@
 .alert-message,
 .alert-input-group {
   box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }
@@ -289,7 +288,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  background: var(--ion-background-color-step-100, #e6e6e6);
 }
 
 .alert-button-inner {
@@ -373,7 +372,7 @@ textarea.alert-input {
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -509,7 +508,7 @@ textarea.alert-input {
  * differences across browsers.
  */
 :host {
-  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));
+  --background: var(--ion-overlay-background-color, var(--ion-background-color-step-100, #f9f9f9));
   --max-width: clamp(270px, 16.875rem, 324px);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
   font-size: max(14px, 0.875rem);
@@ -549,7 +548,7 @@ textarea.alert-input {
 }
 
 .alert-sub-title {
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-text-color-step-400, #666666);
   font-size: max(14px, 0.875rem);
 }
 
@@ -586,13 +585,13 @@ textarea.alert-input {
   padding-inline-end: 7px;
   padding-top: 7px;
   padding-bottom: 7px;
-  border: 0.55px solid var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));
+  border: 0.55px solid var(--ion-background-color-step-250, #bfbfbf);
   background-color: var(--ion-background-color, #fff);
   appearance: none;
   font-size: 1rem;
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
+  color: var(--ion-placeholder-color, var(--ion-text-color-step-600, #999999));
   font-family: inherit;
   font-weight: inherit;
 }
@@ -616,7 +615,6 @@ textarea.alert-input {
   max-height: 240px;
   border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
 }
 
 .alert-tappable {
@@ -636,7 +634,7 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 .alert-radio-icon {
@@ -655,7 +653,7 @@ textarea.alert-input {
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
-  border-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 [aria-checked=true] .alert-radio-inner {
   inset-inline-start: 7px;
@@ -685,14 +683,14 @@ textarea.alert-input {
   height: min(1.375rem, 55.836px);
   border-width: 0.125rem;
   border-style: solid;
-  border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)));
   background-color: var(--ion-item-background, var(--ion-background-color, #fff));
   contain: strict;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #0054e9);
-  background-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, var(--ion-color-primary-bold));
+  background-color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 [aria-checked=true] .alert-checkbox-inner {
@@ -761,7 +759,7 @@ textarea.alert-input {
   border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   border-right: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   background-color: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
   font-size: max(17px, 1.0625rem);
   overflow: hidden;
 }
@@ -805,5 +803,5 @@ textarea.alert-input {
 .alert-button-role-destructive,
 .alert-button-role-destructive.ion-activated,
 .alert-button-role-destructive.ion-focused {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, var(--ion-color-danger-bold));
 }

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

@@ -208,7 +208,6 @@
 .alert-message,
 .alert-input-group {
   box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }
@@ -289,7 +288,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  background: var(--ion-background-color-step-100, #e6e6e6);
 }
 
 .alert-button-inner {
@@ -373,7 +372,7 @@ textarea.alert-input {
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   font-size: 0.75rem;
 }
 
@@ -548,7 +547,7 @@ textarea.alert-input {
   padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-text-color-step-450, #737373);
 }
 
 .alert-message {
@@ -581,11 +580,11 @@ textarea.alert-input {
   margin-right: 0;
   margin-top: 5px;
   margin-bottom: 5px;
-  border-bottom: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  border-bottom: 1px solid var(--ion-background-color-step-150, #d9d9d9);
   color: var(--ion-text-color, #000);
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
+  color: var(--ion-placeholder-color, var(--ion-text-color-step-600, #999999));
   font-family: inherit;
   font-weight: inherit;
 }
@@ -595,14 +594,14 @@ textarea.alert-input {
 
 .alert-input:focus {
   margin-bottom: 4px;
-  border-bottom: 2px solid var(--ion-color-primary, #0054e9);
+  border-bottom: 2px solid var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 .alert-radio-group,
 .alert-checkbox-group {
   position: relative;
-  border-top: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
-  border-bottom: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  border-top: 1px solid var(--ion-background-color-step-150, #d9d9d9);
+  border-bottom: 1px solid var(--ion-background-color-step-150, #d9d9d9);
   overflow: auto;
 }
 
@@ -630,7 +629,7 @@ textarea.alert-input {
   padding-top: 13px;
   padding-bottom: 13px;
   flex: 1;
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-text-color-step-150, #262626);
   font-size: 1rem;
 }
 
@@ -643,7 +642,7 @@ textarea.alert-input {
   height: 20px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
+  border-color: var(--ion-background-color-step-550, #737373);
 }
 .alert-radio-icon {
   inset-inline-start: 26px;
@@ -657,18 +656,18 @@ textarea.alert-input {
   height: 10px;
   transform: scale3d(0, 0, 0);
   transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: var(--ion-color-primary, #0054e9);
+  background-color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 .alert-radio-inner {
   inset-inline-start: 3px;
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-text-color-step-150, #262626);
 }
 
 [aria-checked=true] .alert-radio-icon {
-  border-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 [aria-checked=true] .alert-radio-inner {
@@ -684,7 +683,7 @@ textarea.alert-input {
   padding-bottom: 13px;
   flex: 1;
   width: calc(100% - 53px);
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  color: var(--ion-text-color-step-150, #262626);
   font-size: 1rem;
 }
 
@@ -696,7 +695,7 @@ textarea.alert-input {
   height: 16px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
+  border-color: var(--ion-background-color-step-550, #737373);
   contain: strict;
 }
 .alert-checkbox-icon {
@@ -704,8 +703,8 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #0054e9);
-  background-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, var(--ion-color-primary-bold));
+  background-color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 [aria-checked=true] .alert-checkbox-inner {
@@ -718,7 +717,7 @@ textarea.alert-input {
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
-  border-color: var(--ion-color-primary-contrast, #fff);
+  border-color: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
 }
 [aria-checked=true] .alert-checkbox-inner {
   inset-inline-start: 3px;
@@ -752,7 +751,7 @@ textarea.alert-input {
   padding-bottom: 10px;
   position: relative;
   background-color: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
   font-weight: 500;
   text-align: end;
   text-transform: uppercase;

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

@@ -284,100 +284,6 @@
   height: var(--token-scale-800, 32px);
 }
 
-:host ::slotted(ion-badge.badge-vertical-top:empty) {
-  transform: translate(var(--token-scale-050, 2px), calc(var(--token-scale-050, 2px) * -1));
-}
-
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
-  transform: translate(var(--token-scale-100, 4px), calc(var(--token-scale-100, 4px) * -1));
-}
-
-:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  transform: translate(0, var(--token-scale-100, 4px));
-}
-
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  transform: translate(var(--token-scale-100, 4px), var(--token-scale-100, 4px));
-}
-
-:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  transform: translate(50%, 50%);
-}
-
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  bottom: var(--token-scale-100, 4px);
-  transform: translate(100%, 100%);
-}
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  inset-inline-end: var(--token-scale-100, 4px);
-}
-
-:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  bottom: calc(var(--token-scale-050, 2px) * -1);
-}
-:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  inset-inline-end: calc(var(--token-scale-050, 2px) * -1);
-}
-
-:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
-:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
-:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  bottom: var(--token-scale-050, 2px);
-}
-:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
-:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
-:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  inset-inline-end: var(--token-scale-050, 2px);
-}
-
-:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  bottom: var(--token-scale-150, 6px);
-}
-:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  inset-inline-end: var(--token-scale-150, 6px);
-}
-
-:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  transform: translate(50%, -50%);
-}
-
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  top: var(--token-scale-050, 2px);
-}
-:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  inset-inline-end: 0;
-}
-
-:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  top: var(--token-scale-100, 4px);
-}
-:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  inset-inline-end: calc(var(--token-scale-050, 2px) * -1);
-}
-
-:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
-:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  top: var(--token-scale-150, 6px);
-}
-:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
-:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  inset-inline-end: 0;
-}
-
-:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  top: var(--token-scale-150, 6px);
-}
-:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  inset-inline-end: var(--token-scale-050, 2px);
-}
-
-:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  top: var(--token-scale-150, 6px);
-}
-:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  inset-inline-end: var(--token-scale-150, 6px);
-}
-
 :host(.avatar-disabled)::after {
   border-radius: var(--border-radius);
   right: 0;

package/dist/collection/components/avatar/avatar.js

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
+import { createBadgeManager } from "../../utils/badge-position";
 import { getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -9,10 +10,29 @@ import { getIonTheme } from "../../global/ionic-global";
  */
 export class Avatar {
     constructor() {
+        this.hasLoaded = false;
+        this.badgeManager = createBadgeManager(this.el, () => ({
+            target: this.el,
+        }));
         /**
          * If `true`, the user cannot interact with the avatar.
          */
         this.disabled = false;
+        this.onSlotChanged = () => {
+            this.badgeManager.onSlotChanged();
+        };
+    }
+    connectedCallback() {
+        if (this.hasLoaded) {
+            this.badgeManager.init();
+        }
+    }
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.badgeManager.init();
+    }
+    disconnectedCallback() {
+        this.badgeManager.destroy();
     }
     get hasImage() {
         return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
@@ -21,12 +41,7 @@ export class Avatar {
         return !!this.el.querySelector('ion-icon');
     }
     getSize() {
-        const theme = getIonTheme(this);
         const { size } = this;
-        // TODO(ROU-10752): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
         if (size === undefined) {
             return 'medium';
         }
@@ -49,14 +64,14 @@ export class Avatar {
         const theme = getIonTheme(this);
         const size = this.getSize();
         const shape = this.getShape();
-        return (h(Host, { key: '78ff5863d80f0e334b679a1ba530008dee4e0e69', class: {
+        return (h(Host, { key: '3b191ef80f6ff2613b417daf4dd7f82a2bd8c35c', class: {
                 [theme]: true,
                 [`avatar-${size}`]: size !== undefined,
                 [`avatar-${shape}`]: shape !== undefined,
                 [`avatar-image`]: hasImage,
                 [`avatar-icon`]: hasIcon,
                 [`avatar-disabled`]: disabled,
-            } }, h("slot", { key: '7f82734af2338a2afca67e1c600c64352a52e8a2' })));
+            } }, h("slot", { key: '46de577d761004d2a46b5a3871abb0e2ee254309', onSlotchange: this.onSlotChanged })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -164,20 +164,4 @@
   --border-radius: 50%;
   width: 64px;
   height: 64px;
-}
-
-::slotted(ion-badge.badge-vertical-top:empty) {
-  transform: translate(-50%, 50%);
-}
-
-::slotted(ion-badge.badge-vertical-bottom:empty) {
-  transform: translateX(-100%);
-}
-
-:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
-  transform: translate(0, 100%);
-}
-
-:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
-  transform: translate(0, -100%);
 }

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

@@ -343,7 +343,7 @@ ion-icon {
   --background-focused: currentColor;
   --background-focused-opacity: 0.1;
   --border-radius: 4px;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, var(--ion-color-primary-bold));
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
   /**

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

@@ -3,8 +3,8 @@
  */
 import caretLeftRegular from "@phosphor-icons/core/assets/regular/caret-left.svg";
 import { Host, h } from "@stencil/core";
-import { inheritAriaAttributes } from "../../utils/helpers";
-import { createColorClasses, hostContext, openURL } from "../../utils/theme";
+import { inheritAriaAttributes, openURL } from "../../utils/helpers";
+import { createColorClasses, hostContext } from "../../utils/theme";
 import { arrowBackSharp, chevronBack } from "ionicons/icons";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";