@ionic/core 9.0.11-dev.11793890855.1bf6a6e5 → 9.0.11-dev.11793906456.1ea7a0a7

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

@@ -1,173 +1,3 @@
-ion-header {
-  display: block;
-  position: relative;
-  order: -1;
-  width: 100%;
-}
-
-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
- * 
- * @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
@@ -224,15 +54,17 @@ ion-header.header-scroll-effect-hide.header-scroll-hidden {
  * }
  */
 ion-header {
+  display: block;
+  position: relative;
+  order: -1;
+  width: 100%;
   z-index: 10;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+ion-header ion-toolbar:first-of-type {
+  padding-top: var(--ion-safe-area-top, 0);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -294,15 +126,15 @@ ion-header {
 
 @supports (backdrop-filter: blur(0)) {
   .header-background {
-    right: 0;
     left: 0;
+    right: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     backdrop-filter: saturate(180%) blur(20px);
   }
   .header-translucent-ios ion-toolbar {
-    --opacity: 0.8;
+    --opacity: .8;
   }
   /**
    * Disable the saturation otherwise it distorts the content
@@ -316,6 +148,129 @@ ion-header {
   --border-width: 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 a collapse header (ion-header[collapse="condense"])
+ *
+ * We use opacity: 0 to avoid a layout shift.
+ * We target both the attribute and the class in the event that the attribute
+ * is not reflected on the host in some frameworks.
+ *
+ * Both headers should be scoped to iOS mode otherwise an MD app that uses an
+ * iOS header may cause other MD headers to be unexpectedly hidden.
+ */
+ion-header.header-ios:not(.header-collapse-main):has(~ ion-content ion-header.header-ios[collapse=condense],
+~ ion-content ion-header.header-ios.header-collapse-condense) {
+  opacity: 0;
 }

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

@@ -4,59 +4,26 @@
 import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { inheritAriaAttributes } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
-import { createScrollHideController } from "../../utils/scroll-hide-controller";
 import { hostContext } from "../../utils/theme";
-import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, getRoleType, } from "./header.utils";
 /**
- * @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 Header {
     constructor() {
         this.inheritedAttributes = {};
-        this.scrollHideCtrlPromise = null;
-        this.hasWarnedCollapse = false;
-        this.fadeCondenseSetupId = 0;
-        /**
-         * If `true`, the header will have a line at the bottom.
-         * TODO(ROU-10855): add support for this prop on ios/md themes
-         */
-        this.divider = false;
         /**
          * If `true`, the header will be translucent.
-         * Only applies when the theme is `"ios"` or `"ionic"` and the device supports
+         * Only applies when the mode is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          *
          * Note: In order to scroll content behind the header, the `fullscreen`
          * attribute needs to be set on the content.
          */
         this.translucent = false;
-        this.setupScrollEffectHide = async (contentEl) => {
-            const setupPromise = createScrollHideController(contentEl, {
-                el: this.el,
-                cssVar: '--internal-header-hide-height',
-                hiddenClass: 'header-scroll-hidden',
-                contentPartnerClass: 'content-header-hide-scroll-partner',
-                contentHiddenClass: 'content-header-hide-scroll-hidden',
-            });
-            this.scrollHideCtrlPromise = setupPromise;
-            const controller = await setupPromise;
-            if (this.scrollHideCtrlPromise === setupPromise) {
-                this.scrollHideCtrlPromise = null;
-                controller.init();
-                this.scrollHideCtrl = controller;
-            }
-        };
         this.setupFadeHeader = async (contentEl, condenseHeader) => {
-            const setupId = ++this.fadeCondenseSetupId;
-            const scrollEl = await getScrollElement(contentEl);
-            if (this.fadeCondenseSetupId !== setupId) {
-                return;
-            }
-            this.scrollEl = scrollEl;
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
             /**
              * Handle fading of toolbars on scroll
              */
@@ -80,63 +47,37 @@ export class Header {
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
-        const { scrollEffect, collapse } = this;
-        if (collapse !== undefined && scrollEffect === undefined && !this.hasWarnedCollapse) {
-            this.hasWarnedCollapse = true;
-            printIonWarning(`[ion-header] - The \`collapse\` property is deprecated. Use \`scrollEffect\` instead.\nExample: <ion-header scroll-effect="${collapse}">`, this.el);
-        }
-        const effect = scrollEffect ?? collapse;
-        // Skip teardown/rebuild if the effect hasn't changed.
-        // This prevents re-renders from destroying the scroll controller
-        // and resetting isHidden.
-        if (effect === this.activeEffect) {
+        const mode = getIonMode(this);
+        if (mode !== 'ios') {
             return;
         }
-        const hasHide = effect === 'hide';
-        const hasCondense = effect === 'condense';
-        const hasFade = effect === 'fade';
+        const { collapse } = this;
+        const hasCondense = collapse === 'condense';
+        const hasFade = collapse === 'fade';
         this.destroyCollapsibleHeader();
-        const appRootSelector = config.get('appRootSelector', 'ion-app');
-        const pageEl = this.el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner`);
-        const contentEl = pageEl ? findIonContent(pageEl) : null;
-        if (hasHide && contentEl) {
-            this.activeEffect = effect;
-            await this.setupScrollEffectHide(contentEl);
-            return;
-        }
-        // condense/fade via the deprecated `collapse` prop are iOS-only.
-        // condense/fade via the new `scrollEffect` prop work in all themes.
-        const isModeRestricted = scrollEffect === undefined && getIonTheme(this) !== 'ios';
-        if (hasCondense && !isModeRestricted) {
+        if (hasCondense) {
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
             writeTask(() => {
                 const title = cloneElement('ion-title');
                 title.size = 'large';
                 cloneElement('ion-back-button');
             });
-            const didSetup = await this.setupCondenseHeader(contentEl, pageEl);
-            if (didSetup) {
-                this.activeEffect = effect;
-            }
+            await this.setupCondenseHeader(contentEl, pageEl);
         }
-        else if (hasFade && !isModeRestricted) {
+        else if (hasFade) {
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
             if (!contentEl) {
                 printIonContentErrorMsg(this.el);
                 return;
             }
-            const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"],ion-header[scroll-effect="condense"]');
-            this.activeEffect = effect;
+            const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
             await this.setupFadeHeader(contentEl, condenseHeader);
         }
     }
     destroyCollapsibleHeader() {
-        this.activeEffect = undefined;
-        this.fadeCondenseSetupId++;
-        this.scrollHideCtrlPromise = null;
-        if (this.scrollHideCtrl) {
-            this.scrollHideCtrl.destroy();
-            this.scrollHideCtrl = undefined;
-        }
         if (this.intersectionObserver) {
             this.intersectionObserver.disconnect();
             this.intersectionObserver = undefined;
@@ -153,39 +94,21 @@ export class Header {
     async setupCondenseHeader(contentEl, pageEl) {
         if (!contentEl || !pageEl) {
             printIonContentErrorMsg(this.el);
-            return false;
+            return;
         }
         if (typeof IntersectionObserver === 'undefined') {
-            return false;
-        }
-        const setupId = ++this.fadeCondenseSetupId;
-        const scrollEl = await getScrollElement(contentEl);
-        if (this.fadeCondenseSetupId !== setupId) {
-            return false;
-        }
-        this.scrollEl = scrollEl;
-        /**
-         * The condense effect requires an ion-title with size="large"
-         * in the condense header. Without it, there is nothing to
-         * collapse into the main header toolbar.
-         */
-        const hasLargeTitle = this.el.querySelector('ion-title[size="large"]') !== null;
-        if (!hasLargeTitle) {
-            printIonWarning('[ion-header] - The condense scroll effect requires an <ion-title size="large"> in the condense header.', this.el);
-            return false;
+            return;
         }
+        this.scrollEl = await getScrollElement(contentEl);
         const headers = pageEl.querySelectorAll('ion-header');
-        this.collapsibleMainHeader = Array.from(headers).find((header) => {
-            const effect = header.scrollEffect ?? header.collapse;
-            return effect !== 'condense';
-        });
+        this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
         if (!this.collapsibleMainHeader) {
-            return false;
+            return;
         }
         const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
         const scrollHeaderIndex = createHeaderIndex(this.el);
         if (!mainHeaderIndex || !scrollHeaderIndex) {
-            return false;
+            return;
         }
         setHeaderActive(mainHeaderIndex, false);
         setToolbarBackgroundOpacity(mainHeaderIndex.el, 0);
@@ -217,79 +140,38 @@ export class Header {
                 this.collapsibleMainHeader.classList.add('header-collapse-main');
             }
         });
-        return true;
     }
     render() {
-        const { translucent, inheritedAttributes, divider, scrollEffect, collapse } = this;
-        const theme = getIonTheme(this);
-        const effect = scrollEffect ?? collapse;
-        // condense/fade via the deprecated `collapse` prop are iOS-only.
-        const isModeRestricted = scrollEffect === undefined && theme !== 'ios';
-        const hasHide = effect === 'hide';
-        const hasCondense = effect === 'condense' && !isModeRestricted && this.el.querySelector('ion-title[size="large"]') !== null;
-        const hasFade = effect === 'fade' && !isModeRestricted;
-        // The condense header should be hidden when
-        // - deprecated collapse prop is used on non-iOS (mode restricted), or
-        // - scrollEffect="condense" is set but no ion-title[size="large"] is present
-        const isHiddenCondense = effect === 'condense' && !hasCondense;
+        const { translucent, inheritedAttributes } = this;
+        const mode = getIonMode(this);
+        const collapse = this.collapse || 'none';
+        const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
-        const roleType = isHiddenCondense ? 'none' : getRoleType(hostContext('ion-menu', this.el));
-        return (h(Host, { key: '09f60ca014bb7b3a85d3c0a94e7989d5dbc43f46', role: roleType, class: {
-                [theme]: true,
+        const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
+        return (h(Host, { key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
+                [mode]: true,
                 // Used internally for styling
-                [`header-${theme}`]: true,
+                [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
-                ['header-collapse-condense']: hasCondense,
-                ['header-collapse-condense-hidden']: isHiddenCondense,
-                ['header-collapse-fade']: hasFade,
-                [`header-translucent-${theme}`]: this.translucent,
-                ['header-divider']: divider,
-                'header-scroll-effect-hide': hasHide,
-            }, ...inheritedAttributes }, theme !== 'md' && translucent && (h("div", { key: '5179b806abb6f04ed294dc50166c4f014028a4e3', class: "header-background" }, theme === 'ionic' && (h("div", { key: '4c9d23456672b5bd4ce55280ec6f3e6c39f162cc', class: "header-background-blur", "aria-hidden": "true" }, h("div", { key: '9b9da46049e24390491b2b97ab20863f6fefc079', class: "header-background-blur-layer" }), h("div", { key: 'fc2899267eea7fdd415cc4f394fb469188bfae50', class: "header-background-blur-layer" }), h("div", { key: '8a9747c21d2bd92670deeec8022a37409fd349c4', class: "header-background-blur-layer" }), h("div", { key: '03abc8d5e1e8554963a7f652349ab65430d14db9', class: "header-background-blur-layer" }), h("div", { key: '6a481b7894c44b37d8e3569784a3b6a1191fba09', class: "header-background-blur-layer" }), h("div", { key: '8e4cf985b7c58a836316baa47c35dbaac765f658', class: "header-background-blur-layer" }), h("div", { key: '4ce7402a8ea8aa8253fc2e69e614c50c22ae2c9d', class: "header-background-blur-layer" }))))), h("slot", { key: '1e5ae6dddd080197c7801ed58fb22b9f237b6099' })));
+                [`header-collapse-${collapse}`]: true,
+                [`header-translucent-${mode}`]: this.translucent,
+            }, ...inheritedAttributes }, mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {
         return {
             "ios": ["header.ios.scss"],
-            "md": ["header.md.scss"],
-            "ionic": ["header.ionic.scss"]
+            "md": ["header.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["header.ios.css"],
-            "md": ["header.md.css"],
-            "ionic": ["header.ionic.css"]
+            "md": ["header.md.css"]
         };
     }
     static get properties() {
         return {
-            "scrollEffect": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "HeaderScrollEffect",
-                    "resolved": "\"condense\" | \"fade\" | \"hide\" | undefined",
-                    "references": {
-                        "HeaderScrollEffect": {
-                            "location": "import",
-                            "path": "./header-interface",
-                            "id": "src/components/header/header-interface.ts::HeaderScrollEffect",
-                            "referenceLocation": "HeaderScrollEffect"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the header.\n`\"hide\"` slides the header out of view when scrolling down and back in\nwhen scrolling up.\n`\"condense\"` collapses the large title into the main toolbar on scroll.\n`\"fade\"` fades the toolbar background on scroll."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "scroll-effect"
-            },
             "collapse": {
                 "type": "string",
                 "mutable": false,
@@ -300,37 +182,14 @@ export class Header {
                 },
                 "required": false,
                 "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use `scrollEffect` instead."
-                        }],
-                    "text": "Describes the scroll effect that will be applied to the header.\nOnly applies when the theme is `\"ios\"`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "collapse"
-            },
-            "divider": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the header will have a line at the bottom.\nTODO(ROU-10855): add support for this prop on ios/md themes"
+                    "text": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "divider",
-                "defaultValue": "false"
+                "attribute": "collapse"
             },
             "translucent": {
                 "type": "boolean",
@@ -344,7 +203,7 @@ export class Header {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the header will be translucent.\nOnly applies when the theme is `\"ios\"` or `\"ionic\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content."
+                    "text": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content."
                 },
                 "getter": false,
                 "setter": false,