@ionic/core 8.8.16-dev.11784841344.1aa1a41c → 8.8.16-dev.11784914346.10d0804c

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

@@ -9,6 +9,159 @@ ion-header ion-toolbar:first-of-type {
   padding-top: var(--ion-safe-area-top, 0);
 }
 
+.header-collapse-fade ion-toolbar {
+  --opacity-scale: inherit;
+}
+
+/**
+ * Override styles applied during the page transition to prevent
+ * header flickering.
+ */
+.header-collapse-fade.header-transitioning ion-toolbar {
+  --background: transparent;
+  --border-style: none;
+}
+
+.header-collapse-condense {
+  z-index: 9;
+}
+
+.header-collapse-condense ion-toolbar {
+  position: sticky;
+  top: 0;
+}
+
+.header-collapse-condense ion-toolbar:first-of-type {
+  /**
+   * The toolbar that contains the collapsible
+   * large title should not have safe area padding applied.
+   */
+  padding-top: 0px;
+  z-index: 1;
+}
+
+/**
+ * Large title toolbar should just use the content background
+ * since it needs to blend in with the header above it.
+ */
+.header-collapse-condense ion-toolbar {
+  z-index: 0;
+}
+
+.header-collapse-condense ion-toolbar:last-of-type {
+  --border-width: 0px;
+}
+
+.header-collapse-condense ion-toolbar ion-searchbar {
+  padding-top: 0px;
+  padding-bottom: 13px;
+}
+
+.header-collapse-main {
+  --opacity-scale: 1;
+}
+
+.header-collapse-main ion-toolbar {
+  --opacity-scale: inherit;
+}
+
+.header-collapse-main ion-toolbar.in-toolbar ion-title,
+.header-collapse-main ion-toolbar.in-toolbar ion-buttons {
+  transition: all 0.2s ease-in-out;
+}
+
+/**
+ * Large title toolbar should just use the content background
+ * since it needs to blend in with the header above it.
+ */
+.header-collapse-condense ion-toolbar,
+.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
+  --background: var(--ion-background-color, #fff);
+}
+
+/**
+ * Override styles applied during the page transition to prevent
+ * header flickering.
+ */
+.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
+  --border-style: none;
+  --opacity-scale: 1;
+}
+
+.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
+.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/**
+ * There is a bug in Safari where changing
+ * the opacity of an element in a scrollable container
+ * while rubber-banding causes the scroll position
+ * to jump to the top
+ */
+.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
+.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
+  visibility: hidden;
+}
+
+/**
+ * The main header is only hidden once the collapsible large
+ * title is configured. As a result, if the main header loads
+ * before the collapsible large title is configured then the
+ * main header will be visible briefly before being hidden
+ * by the collapsible large title.
+ *
+ * The following selector ensures that any main header
+ * on a page with a collapsible large title is hidden
+ * before the collapsible large title is configured.
+ * Once the collapsible large title is configured the main
+ * header will have the ".header-collapse-main" class, and
+ * this selector will no longer apply.
+ *
+ * The :has(...) part of the selector ensures a couple things:
+ * 1. This will only apply within a page view since the content
+ * must be a subsequent-sibling of the header (~ ion-content).
+ * 2. This will only apply when that content has an active condense
+ *    header (the .header-collapse-condense class).
+ *
+ * We use opacity: 0 to avoid a layout shift.
+ * We use the class (not the attribute) because the class is only
+ * added when the condense effect is valid (large title present).
+ * The attribute alone is not sufficient since it would match even
+ * when the effect is guarded (e.g. no large title).
+ */
+ion-header:not(.header-collapse-main):has(~ ion-content ion-header.header-collapse-condense) {
+  opacity: 0;
+}
+
+/**
+ * The deprecated collapse="condense" prop is iOS-only.
+ * On non-iOS themes, the condense header should be hidden since
+ * the JS won't activate it. Uses a class instead of an attribute
+ * selector because collapse is not a reflected prop, and framework
+ * proxies (Angular/Vue) bind it as a property.
+ */
+.header-collapse-condense-hidden {
+  display: none;
+}
+
+ion-header.header-scroll-effect-hide {
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+ion-header.header-scroll-effect-hide.header-scroll-hidden {
+  transform: translateY(-100%);
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ion-header.header-scroll-effect-hide,
+  ion-header.header-scroll-effect-hide.header-scroll-hidden {
+    transition: none;
+  }
+}
 /**
  * Convert a pixels given value into rem
  * 
@@ -139,8 +292,30 @@ ion-header {
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
+/**
+ * The condense header should blend seamlessly with the
+ * main header above it, so remove the box-shadow.
+ */
 .header-md.header-collapse-condense {
-  display: none;
+  box-shadow: none;
+}
+
+/**
+ * When the condense header is active (large title visible),
+ * the main header's box-shadow should be hidden so it blends
+ * with the condense header below it.
+ */
+.header-md.header-collapse-condense-inactive:not(.header-collapse-condense) {
+  box-shadow: none;
+}
+
+/**
+ * The fade effect fades the toolbar background via --opacity-scale,
+ * but box-shadow is not affected by that variable. Remove it so
+ * the shadow doesn't persist when the background is faded out.
+ */
+.header-md.header-collapse-fade {
+  box-shadow: none;
 }
 
 .header-md.ion-no-border {

package/dist/collection/components/header/header.utils.js

@@ -50,13 +50,14 @@ export const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
     });
 };
 export const setToolbarBackgroundOpacity = (headerEl, opacity) => {
+    var _a;
     /**
      * Fading in the backdrop opacity
      * should happen after the large title
      * has collapsed, so it is handled
      * by handleHeaderFade()
      */
-    if (headerEl.collapse === 'fade') {
+    if (((_a = headerEl.scrollEffect) !== null && _a !== void 0 ? _a : headerEl.collapse) === 'fade') {
         return;
     }
     if (opacity === undefined) {
@@ -214,23 +215,15 @@ export const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
  * Get the role type for the ion-header.
  *
  * @param isInsideMenu If ion-header is inside ion-menu.
- * @param isCondensed If ion-header has collapse="condense".
- * @param theme The current theme.
- * @returns 'none' if inside ion-menu or if condensed in md
- * theme, otherwise 'banner'.
+ * @returns 'none' if inside ion-menu, otherwise 'banner'.
+ * Condensed headers start as 'banner' and have their role
+ * toggled dynamically by setHeaderActive() on scroll.
  */
-export const getRoleType = (isInsideMenu, isCondensed, theme) => {
+export const getRoleType = (isInsideMenu) => {
     // If the header is inside a menu, it should not have the banner role.
     if (isInsideMenu) {
         return ROLE_NONE;
     }
-    /**
-     * Only apply role="none" to `md` & `ionic` theme condensed headers
-     * since the large header is never shown.
-     */
-    if (isCondensed && theme !== 'ios') {
-        return ROLE_NONE;
-    }
     // Default to banner role.
     return ROLE_BANNER;
 };

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

@@ -775,7 +775,8 @@
 }
 
 .input-clear-icon ion-icon {
-  font-size: var(--token-font-size-400, 1rem);
+  width: 100%;
+  height: 100%;
 }
 
 /**

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

@@ -813,7 +813,8 @@
 }
 
 .input-clear-icon ion-icon {
-  font-size: 18px;
+  width: 18px;
+  height: 18px;
 }
 
 :host(.input-disabled) {

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

@@ -1176,7 +1176,8 @@
 }
 
 .input-clear-icon ion-icon {
-  font-size: 22px;
+  width: 22px;
+  height: 22px;
 }
 
 :host(.input-disabled) {

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

@@ -215,8 +215,9 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+  width: var(--token-scale-500, 20px);
   min-width: initial;
-  font-size: var(--token-font-size-500, 1.25rem);
+  height: var(--token-scale-500, 20px);
 }
 
 /* Round */

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

@@ -238,7 +238,8 @@
 }
 
 .searchbar-search-icon {
-  font-size: var(--token-font-size-400, 1rem);
+  width: var(--token-scale-400, 16px);
+  height: var(--token-scale-400, 16px);
 }
 
 .searchbar-input {
@@ -252,7 +253,7 @@
   width: var(--token-scale-400, 16px);
   height: var(--token-scale-400, 16px);
   background-color: transparent;
-  font-size: var(--token-font-size-400, 1rem);
+  font-size: var(--token-scale-400, 16px);
   contain: strict;
 }
 
@@ -521,6 +522,9 @@
 :host(.searchbar-size-large) .searchbar-cancel-button {
   width: var(--token-scale-500, 20px);
   height: var(--token-scale-500, 20px);
+}
+
+:host(.searchbar-size-large) .searchbar-cancel-button {
   font-size: var(--token-font-size-500, 1.25rem);
 }
 

package/dist/collection/components/segment-button/segment-button.ionic.css

@@ -311,7 +311,8 @@
 }
 
 ::slotted(ion-icon) {
-  font-size: var(--token-font-size-600, 1.5rem);
+  width: var(--token-scale-600, 24px);
+  height: var(--token-scale-600, 24px);
 }
 
 :host(.segment-button-checked) ::slotted(*) {

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

@@ -748,7 +748,8 @@ button {
 
 .select-icon,
 ::slotted(ion-icon) {
-  font-size: var(--token-font-size-400, 1rem);
+  width: var(--token-scale-400, 16px);
+  height: var(--token-scale-400, 16px);
 }
 
 .select-icon {

package/dist/collection/components/select-modal/select-modal.ionic.css

@@ -103,22 +103,19 @@
 .select-option-start > ion-avatar,
 .select-option-start > ion-img,
 .select-option-start > ion-thumbnail,
+.select-option-start > ion-icon,
 .select-option-start > img,
 .select-option-start > svg,
 .select-option-end > ion-avatar,
 .select-option-end > ion-img,
 .select-option-end > ion-thumbnail,
+.select-option-end > ion-icon,
 .select-option-end > img,
 .select-option-end > svg {
   width: var(--token-scale-1200, 48px);
   height: var(--token-scale-1200, 48px);
 }
 
-.select-option-start > ion-icon,
-.select-option-end > ion-icon {
-  font-size: var(--token-scale-1200, 48px);
-}
-
 .action-sheet-button-label-has-rich-content,
 .alert-radio-label-has-rich-content,
 .alert-checkbox-label-has-rich-content,

package/dist/collection/components/select-modal/select-modal.ios.css

@@ -224,7 +224,8 @@
 
 .select-option-start > ion-icon,
 .select-option-end > ion-icon {
-  font-size: 28px;
+  width: 28px;
+  height: 28px;
 }
 
 .action-sheet-button-label-text {

package/dist/collection/components/select-modal/select-modal.md.css

@@ -155,7 +155,8 @@
 
 .select-option-start > ion-icon,
 .select-option-end > ion-icon {
-  font-size: 24px;
+  width: 24px;
+  height: 24px;
 }
 
 .select-option-start > ion-img,

package/dist/collection/components/select-popover/select-popover.ionic.css

@@ -103,22 +103,19 @@
 .select-option-start > ion-avatar,
 .select-option-start > ion-img,
 .select-option-start > ion-thumbnail,
+.select-option-start > ion-icon,
 .select-option-start > img,
 .select-option-start > svg,
 .select-option-end > ion-avatar,
 .select-option-end > ion-img,
 .select-option-end > ion-thumbnail,
+.select-option-end > ion-icon,
 .select-option-end > img,
 .select-option-end > svg {
   width: var(--token-scale-1200, 48px);
   height: var(--token-scale-1200, 48px);
 }
 
-.select-option-start > ion-icon,
-.select-option-end > ion-icon {
-  font-size: var(--token-scale-1200, 48px);
-}
-
 .action-sheet-button-label-has-rich-content,
 .alert-radio-label-has-rich-content,
 .alert-checkbox-label-has-rich-content,

package/dist/collection/components/select-popover/select-popover.ios.css

@@ -224,7 +224,8 @@
 
 .select-option-start > ion-icon,
 .select-option-end > ion-icon {
-  font-size: 28px;
+  width: 28px;
+  height: 28px;
 }
 
 .action-sheet-button-label-text {

package/dist/collection/components/select-popover/select-popover.md.css

@@ -155,7 +155,8 @@
 
 .select-option-start > ion-icon,
 .select-option-end > ion-icon {
-  font-size: 24px;
+  width: 24px;
+  height: 24px;
 }
 
 .select-option-start > ion-img,

package/dist/collection/components/tab-bar/tab-bar.ionic.css

@@ -112,6 +112,21 @@
   padding-bottom: 0;
 }
 
+:host(.tab-bar-scroll-effect-hide) {
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+  transform: translateY(100%);
+  transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.tab-bar-scroll-effect-hide),
+  :host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+    transition: none;
+  }
+}
 :host {
   --background: var(--ion-tab-bar-background, var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff)));
   --background-activated: var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));
@@ -189,16 +204,16 @@
   bottom: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-bottom, 0));
 }
 
-:host(.tab-bar-hide-on-scroll) {
+:host(.tab-bar-scroll-effect-hide) {
   transition: transform var(--token-transition-time-200, 200ms) var(--token-transition-curve-spring, cubic-bezier(0.16, 1, 0.3, 1));
 }
 
-:host(.tab-bar-scroll-hidden) {
+:host(.tab-bar-compact.tab-bar-scroll-hidden) {
   transform: translateY(calc(100% + var(--ion-safe-area-bottom, 0) + var(--token-space-1000, var(--token-scale-1000, 40px)))) translateX(-50%);
   transition: transform var(--token-transition-time-350, 350ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
 }
 
-:host([slot=top].tab-bar-scroll-hidden) {
+:host([slot=top].tab-bar-compact.tab-bar-scroll-hidden) {
   transform: translateY(-100%) translateX(-50%);
 }
 
@@ -224,4 +239,11 @@
 /* Rectangular */
 :host(.tab-bar-rectangular) {
   border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.tab-bar-scroll-effect-hide),
+  :host(.tab-bar-compact.tab-bar-scroll-hidden) {
+    transition: none;
+  }
 }

package/dist/collection/components/tab-bar/tab-bar.ios.css

@@ -51,6 +51,21 @@
   padding-bottom: 0;
 }
 
+:host(.tab-bar-scroll-effect-hide) {
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+  transform: translateY(100%);
+  transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.tab-bar-scroll-effect-hide),
+  :host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+    transition: none;
+  }
+}
 /**
  * Convert a pixels given value into rem
  *