@carbon/ibmdotcom-utilities 2.10.0 → 2.11.0-rc.0

package/es/utilities/StickyHeader/StickyHeader.js

@@ -1,7 +1,7 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /**
@@ -16,25 +16,39 @@ import root from 'window-or-global';
 import settings from '../settings/settings.js';
 var prefix = settings.prefix,
   c4dPrefix = settings.stablePrefix;
+var ddsPrefix = 'dds';
+var bxPrefix = 'bx';
 var gridBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
 var StickyHeader = /*#__PURE__*/function () {
   function StickyHeader() {
     _classCallCheck(this, StickyHeader);
     this.ownerDocument = root.document;
-    this._banner = undefined;
-    this._cumulativeHeight = 0;
-    this._hasBanner = false;
-    this._lastScrollPosition = 0;
-    this._leadspaceWithSearch = undefined;
-    this._leadspaceSearchBar = undefined;
-    this._leadspaceWithSearchStickyThreshold = 0;
-    this._localeModal = undefined;
-    this._masthead = undefined;
-    this._mastheadL0 = undefined;
-    this._mastheadL1 = undefined;
-    this._tableOfContents = undefined;
-    this._tableOfContentsInnerBar = undefined;
-    this._tableOfContentsLayout = undefined;
+    this._state = {
+      cumulativeOffset: 0,
+      hasBanner: false,
+      leadspaceSearchThreshold: 0,
+      mastheadL0IsActive: false,
+      mastheadL1IsActive: false,
+      maxScrollaway: 0,
+      scrollPosPrevious: 0,
+      scrollPos: 0,
+      searchIsAtTop: false,
+      tocShouldStick: false,
+      tocIsAtTop: false,
+      tocIsAtSearch: false
+    };
+    this._elements = {
+      banner: undefined,
+      leadspaceSearch: undefined,
+      leadspaceSearchBar: undefined,
+      leadspaceSearchInput: undefined,
+      localeModal: undefined,
+      masthead: undefined,
+      mastheadL0: undefined,
+      mastheadL1: undefined,
+      tableOfContents: undefined,
+      tableOfContentsInnerBar: undefined
+    };
     this._throttled = false;
     this._resizeObserver = new ResizeObserver(this._handleResize.bind(this));
     root.addEventListener('scroll', this._throttledHandler.bind(this));
@@ -46,7 +60,7 @@ var StickyHeader = /*#__PURE__*/function () {
   return _createClass(StickyHeader, [{
     key: "height",
     get: function get() {
-      return this._cumulativeHeight;
+      return this._state.cumulativeOffset;
     }
 
     /**
@@ -62,78 +76,176 @@ var StickyHeader = /*#__PURE__*/function () {
     value: function _validateComponent(component, expected) {
       var received = component.tagName.toLowerCase();
       if (received !== expected) {
-        throw new TypeError("".concat(expected, " expected, ").concat(received, " provided"));
+        // TODO: don't check for v1/v2 compatibility after v1 EOL.
+        if (received.split('-').splice(1).join('-') !== expected.split('-').splice(1).join('-')) {
+          throw new TypeError("".concat(expected, " expected, ").concat(received, " provided"));
+        } else {
+          var message = ["Mixed prefixes detected.\n", "expected ".concat(expected, ", found ").concat(received, ".")];
+          console.warn(message.join(''));
+          return true;
+        }
       } else {
         return true;
       }
     }
+
+    /**
+     * Helper method to query for either C4IBM v1.x or v2.x sub-elements;
+     *
+     * @param {*} element The C4IBM element.
+     * @param {*} v1Func The querying function to run if using a C4IBM v1.x element.
+     * @param {*} v2Func The querying function to run if using a C4IBM v2.x element.
+     */
   }, {
-    key: "_tableOfContentsStickyUpdate",
-    value: function _tableOfContentsStickyUpdate() {
-      var toc = this._tableOfContents;
+    key: "_updateRefsV1orV2",
+    value: function _updateRefsV1orV2(element, v1Func, v2Func) {
+      var elementPrefix = element.tagName.toLowerCase().split('-')[0];
+      if (elementPrefix === ddsPrefix) {
+        v1Func.bind(this)();
+      } else if (elementPrefix === c4dPrefix) {
+        v2Func.bind(this)();
+      } else {
+        throw new Error("\n        Could not find sub-elements for ".concat(element.tagName.toLowerCase(), ".\n      "));
+      }
+    }
+
+    /**
+     * Temporary method to find v1 leadspace sub-elements.
+     */
+  }, {
+    key: "_updateLeadspaceRefsV1",
+    value: function _updateLeadspaceRefsV1() {
+      var leadspaceSearch = this._elements.leadspaceSearch;
+      this._elements.leadspaceSearchBar = leadspaceSearch.shadowRoot.querySelector(".".concat(bxPrefix, "--search-container"));
+      this._elements.leadspaceSearchInput = leadspaceSearch.querySelector("".concat(ddsPrefix, "-search-with-typeahead"));
+    }
+
+    /**
+     * Temporary method to find v2 leadspace sub-elements.
+     */
+  }, {
+    key: "_updateLeadspaceRefsV2",
+    value: function _updateLeadspaceRefsV2() {
+      var leadspaceSearch = this._elements.leadspaceSearch;
+      this._elements.leadspaceSearchBar = leadspaceSearch.shadowRoot.querySelector(".".concat(prefix, "--search-container"));
+      this._elements.leadspaceSearchInput = leadspaceSearch.querySelector("".concat(c4dPrefix, "-search-with-typeahead"));
+    }
+
+    /**
+     * Temporary method to find v1 masthead sub-elements.
+     */
+  }, {
+    key: "_updateMastheadRefsV1",
+    value: function _updateMastheadRefsV1() {
+      var masthead = this._elements.masthead;
+      this._elements.mastheadL0 = masthead.shadowRoot.querySelector(".".concat(bxPrefix, "--masthead__l0"));
+      this._elements.mastheadL1 = masthead.querySelector("".concat(ddsPrefix, "-masthead-l1"));
+    }
+
+    /**
+     * Temporary method to find v2 masthead sub-elements.
+     */
+  }, {
+    key: "_updateMastheadRefsV2",
+    value: function _updateMastheadRefsV2() {
+      var masthead = this._elements.masthead;
+      this._elements.mastheadL0 = masthead.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
+      this._elements.mastheadL1 = masthead.querySelector("".concat(c4dPrefix, "-masthead-l1"));
+    }
+
+    /**
+     * Temporary method to find v1 table of contents sub-elements.
+     */
+  }, {
+    key: "_updateTableOfContentsRefsV1",
+    value: function _updateTableOfContentsRefsV1() {
+      var toc = this._elements.tableOfContents;
       var tocRoot = toc.shadowRoot;
-      this._tableOfContentsInnerBar = tocRoot.querySelector(".".concat(prefix, "--tableofcontents__navbar"));
-      if (window.innerWidth > gridBreakpoint) {
-        if (toc.layout === 'horizontal') {
-          this._tableOfContentsLayout = 'horizontal';
-        } else {
-          this._tableOfContentsInnerBar = tocRoot.querySelector(".".concat(c4dPrefix, "-ce--table-of-contents__items-container"));
+      var selectors = {
+        desktop: {
+          vertical: ".".concat(ddsPrefix, "-ce--table-of-contents__items-container"),
+          horizontal: ".".concat(bxPrefix, "--tableofcontents__navbar")
+        },
+        mobile: {
+          vertical: ".".concat(bxPrefix, "--tableofcontents__sidebar"),
+          horizontal: ".".concat(bxPrefix, "--tableofcontents__navbar")
         }
-      }
+      };
+      var viewportDimension = window.innerWidth >= gridBreakpoint ? 'desktop' : 'mobile';
+      this._elements.tableOfContentsInnerBar = tocRoot.querySelector(selectors[viewportDimension][toc.layout || 'vertical']);
+    }
+
+    /**
+     * Temporary method to find v2 table of contents sub-elements.
+     */
+  }, {
+    key: "_updateTableOfContentsRefsV2",
+    value: function _updateTableOfContentsRefsV2() {
+      var toc = this._elements.tableOfContents;
+      var tocRoot = toc.shadowRoot;
+      this._elements.tableOfContentsInnerBar = tocRoot.querySelector(window.innerWidth >= gridBreakpoint && (toc === null || toc === void 0 ? void 0 : toc.layout) !== 'horizontal' ? ".".concat(c4dPrefix, "-ce--table-of-contents__items-container") : ".".concat(prefix, "--tableofcontents__navbar"));
+    }
+
+    /**
+     * Stores references to TOC sub-elements that are relevant to current viewport
+     * dimensions.
+     */
+  }, {
+    key: "_updateTableOfContentsRefs",
+    value: function _updateTableOfContentsRefs() {
+      var toc = this._elements.tableOfContents;
+      this._updateRefsV1orV2(toc, this._updateTableOfContentsRefsV1, this._updateTableOfContentsRefsV2);
     }
   }, {
     key: "banner",
     set: function set(component) {
       if (this._validateComponent(component, "".concat(c4dPrefix, "-global-banner"))) {
-        this._banner = component;
-        this.hasBanner = true;
-        if (this._masthead) {
-          this._masthead.setAttribute('with-banner', '');
+        this._elements.banner = component;
+        this._state.hasBanner = true;
+        if (this._elements.masthead) {
+          this._elements.masthead.setAttribute('with-banner', '');
         }
-        this._calculateCumulativeHeight();
+        this._manageStickyElements();
       }
     }
   }, {
-    key: "leadspaceWithSearch",
+    key: "leadspaceSearch",
     set: function set(component) {
       if (this._validateComponent(component, "".concat(c4dPrefix, "-leadspace-with-search"))) {
-        this._leadspaceWithSearch = component;
-        var leadspaceSearchBar = component.shadowRoot.querySelector(".".concat(prefix, "--search-container"));
-        this._leadspaceSearchBar = leadspaceSearchBar;
-        this._leadspaceWithSearchInput = component.querySelector("".concat(c4dPrefix, "-search-with-typeahead"));
-        this._leadspaceWithSearchStickyThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
-        this._calculateCumulativeHeight();
+        this._elements.leadspaceSearch = component;
+        this._updateRefsV1orV2(component, this._updateLeadspaceRefsV1, this._updateLeadspaceRefsV2);
+        this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(this._elements.leadspaceSearchBar).paddingBottom) - 16;
+        this._manageStickyElements();
       }
     }
   }, {
     key: "localeModal",
     set: function set(component) {
       if (this._validateComponent(component, "".concat(c4dPrefix, "-locale-modal"))) {
-        this._localeModal = component;
-        this._calculateCumulativeHeight();
+        this._elements.localeModal = component;
+        this._manageStickyElements();
       }
     }
   }, {
     key: "masthead",
     set: function set(component) {
       if (this._validateComponent(component, "".concat(c4dPrefix, "-masthead"))) {
-        this._masthead = component;
-        if (this._banner) {
-          this._masthead.setAttribute('with-banner', '');
+        this._elements.masthead = component;
+        if (this._elements.banner) {
+          this._elements.masthead.setAttribute('with-banner', '');
         }
-        this._mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
-        this._mastheadL1 = component.querySelector("".concat(c4dPrefix, "-masthead-l1"));
-        this._calculateCumulativeHeight();
+        this._updateRefsV1orV2(component, this._updateMastheadRefsV1, this._updateMastheadRefsV2);
+        this._manageStickyElements();
       }
     }
   }, {
     key: "tableOfContents",
     set: function set(component) {
       if (this._validateComponent(component, "".concat(c4dPrefix, "-table-of-contents"))) {
-        this._tableOfContents = component;
-        this._tableOfContentsStickyUpdate();
-        this._resizeObserver.observe(this._tableOfContents);
-        this._calculateCumulativeHeight();
+        this._elements.tableOfContents = component;
+        this._updateTableOfContentsRefs();
+        this._resizeObserver.observe(this._elements.tableOfContents);
+        this._manageStickyElements();
       }
     }
 
@@ -146,7 +258,7 @@ var StickyHeader = /*#__PURE__*/function () {
       var _this = this;
       if (!this._throttled) {
         this._throttled = true;
-        this._calculateCumulativeHeight();
+        this._manageStickyElements();
         setTimeout(function () {
           _this._throttled = false;
         }, 20);
@@ -155,95 +267,197 @@ var StickyHeader = /*#__PURE__*/function () {
   }, {
     key: "_handleResize",
     value: function _handleResize() {
-      var hasBanner = this._hasBanner,
-        masthead = this._masthead,
-        toc = this._tableOfContents,
-        tocLayout = this._tableOfContentsLayout,
-        leadspaceSearchBar = this._leadspaceSearchBar;
+      var hasBanner = this._state._hasBanner;
+      var _this$_elements = this._elements,
+        masthead = _this$_elements.masthead,
+        toc = _this$_elements.tableOfContents,
+        leadspaceSearchBar = _this$_elements.leadspaceSearchBar;
       if (toc && masthead) {
-        this._tableOfContentsStickyUpdate();
-        if (window.innerWidth >= gridBreakpoint && tocLayout !== 'horizontal' && !hasBanner) {
-          masthead.style.top = '0';
+        this._updateTableOfContentsRefs();
+        if (window.innerWidth >= gridBreakpoint && toc.layout !== 'horizontal' && !hasBanner) {
+          masthead.style.insetBlockStart = '0';
         } else {
-          // This has to happen after the tocStickyUpdate method.
-          var tocInner = this._tableOfContentsInnerBar;
+          // This has to happen after the _updateTableOfContentsRefs method.
+          var tocInner = this._elements.tableOfContentsInnerBar;
           if (masthead.offsetTop === 0) {
-            tocInner.style.top = "".concat(masthead.offsetHeight, "px");
+            tocInner.style.insetBlockStart = "".concat(masthead.offsetHeight, "px");
           }
         }
-        this._calculateCumulativeHeight();
+        this._manageStickyElements();
       }
       if (leadspaceSearchBar) {
-        this._leadspaceWithSearchStickyThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
+        this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
       }
     }
+
+    /**
+     * Handles the banner given the current scroll position.
+     */
   }, {
-    key: "_calculateCumulativeHeight",
-    value: function _calculateCumulativeHeight() {
-      var _StickyHeader$global = StickyHeader.global,
-        oldY = _StickyHeader$global._lastScrollPosition,
-        banner = _StickyHeader$global._banner,
-        masthead = _StickyHeader$global._masthead,
-        mastheadL0 = _StickyHeader$global._mastheadL0,
-        mastheadL1 = _StickyHeader$global._mastheadL1,
-        localeModal = _StickyHeader$global._localeModal,
-        toc = _StickyHeader$global._tableOfContents,
-        tocInner = _StickyHeader$global._tableOfContentsInnerBar,
-        leadspaceSearch = _StickyHeader$global._leadspaceWithSearch,
-        leadspaceSearchBar = _StickyHeader$global._leadspaceSearchBar,
-        leadspaceSearchInput = _StickyHeader$global._leadspaceWithSearchInput,
-        leadspaceSearchThreshold = _StickyHeader$global._leadspaceWithSearchStickyThreshold;
-      var customPropertyName = this.constructor.customPropertyName;
-      if (localeModal && localeModal.hasAttribute('open')) {
-        return;
-      }
-      var newY = window.scrollY;
-      this._lastScrollPosition = Math.max(0, newY);
+    key: "_handleBanner",
+    value: function _handleBanner() {
+      var banner = this._elements.banner;
+      var scrollPos = this._state.scrollPos;
+      this._state.cumulativeOffset += Math.max(banner.offsetHeight - scrollPos, 0);
+    }
 
-      /**
-       * maxScrollaway is a calculated value matching the height of all components
-       * that are allowed to hide above the viewport.
-       *
-       * We should only have one sticky header showing as the page scrolls down.
-       *
-       * Items that stick, in order
-       * - L0
-       * - L1
-       * - The TOC in horizontal bar form
-       * - The leadspace with search (if no TOC)
-       */
-      var maxScrollaway = 0;
+    /**
+     * Handles the masthead given the current scroll position.
+     */
+  }, {
+    key: "_handleMasthead",
+    value: function _handleMasthead() {
+      var masthead = this._elements.masthead;
+      masthead.style.transition = 'none';
+      masthead.style.insetBlockStart = "".concat(this._state.cumulativeOffset, "px");
 
-      // Calculate maxScrollaway values based on TOC positon
-      var tocIsAtTop = false;
-      var tocShouldStick = false;
-      if (tocInner) {
-        tocIsAtTop = tocInner.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1;
-        tocShouldStick = toc.layout === 'horizontal' || window.innerWidth < gridBreakpoint;
-        if (masthead && tocIsAtTop && (tocShouldStick || mastheadL1)) {
-          maxScrollaway += masthead.offsetHeight;
-          if (mastheadL1 && !tocShouldStick) {
-            maxScrollaway -= mastheadL1.offsetHeight;
-          }
-        } else if (mastheadL0 && mastheadL1) {
-          maxScrollaway += mastheadL0.offsetHeight;
+      // Masthead always sticks, therefore always add its height.
+      this._state.cumulativeOffset += masthead.offsetHeight;
+    }
+
+    /**
+     * Handles the table of contents given the current scroll position.
+     */
+  }, {
+    key: "_handleToc",
+    value: function _handleToc() {
+      var tableOfContentsInnerBar = this._elements.tableOfContentsInnerBar;
+      var tocShouldStick = this._state.tocShouldStick;
+      tableOfContentsInnerBar.style.transition = 'none';
+      tableOfContentsInnerBar.style.insetBlockStart = "".concat(this._state.cumulativeOffset, "px");
+      var tocIsStuck = Math.round(tableOfContentsInnerBar.getBoundingClientRect().top) <= this._state.cumulativeOffset + 1;
+      if (tocShouldStick && tocIsStuck) {
+        this._state.cumulativeOffset += tableOfContentsInnerBar.offsetHeight;
+      }
+    }
+
+    /**
+     * Handles the leadspace search given the current scroll position.
+     */
+  }, {
+    key: "_handleLeadspaceSearch",
+    value: function _handleLeadspaceSearch() {
+      var _this$_elements2 = this._elements,
+        leadspaceSearch = _this$_elements2.leadspaceSearch,
+        leadspaceSearchBar = _this$_elements2.leadspaceSearchBar,
+        leadspaceSearchInput = _this$_elements2.leadspaceSearchInput;
+      var leadspaceSearchThreshold = this._state.leadspaceSearchThreshold;
+      var searchShouldBeSticky = leadspaceSearch.getBoundingClientRect().bottom <= leadspaceSearchThreshold;
+      var searchIsSticky = leadspaceSearch.hasAttribute('sticky-search');
+      if (searchShouldBeSticky) {
+        if (!searchIsSticky) {
+          leadspaceSearch.style.paddingBottom = "".concat(leadspaceSearchBar.offsetHeight, "px");
+          leadspaceSearch.setAttribute('sticky-search', '');
+          leadspaceSearchInput.setAttribute('large', '');
+          window.requestAnimationFrame(function () {
+            leadspaceSearchBar.style.transitionDuration = '110ms';
+            leadspaceSearchBar.style.transform = 'translateY(0)';
+          });
         }
+        leadspaceSearchBar.style.insetBlockStart = "".concat(this._state.cumulativeOffset, "px");
+        this._state.cumulativeOffset += leadspaceSearchBar.offsetHeight;
+      } else if (searchIsSticky) {
+        leadspaceSearch.style.paddingBottom = '';
+        leadspaceSearch.removeAttribute('sticky-search');
+        leadspaceSearchInput.removeAttribute('large');
+        leadspaceSearchBar.style.transitionDuration = '';
+        leadspaceSearchBar.style.transform = '';
+        leadspaceSearchBar.style.insetBlockStart = '';
+      }
+    }
+
+    /**
+     * Calculates a value matching the height of all components that are allowed
+     * to hide above the viewport.
+     *
+     * Adding an item's height to this value indicates we expect it to be hidden
+     * above the viewport.
+     *
+     * Items that stick, in order
+     * - L0
+     * - L1
+     * - The TOC in horizontal bar form
+     * - The leadspace with search (if no TOC)
+     */
+  }, {
+    key: "_calculateMaxScrollaway",
+    value: function _calculateMaxScrollaway() {
+      var _this$_elements3 = this._elements,
+        masthead = _this$_elements3.masthead,
+        mastheadL0 = _this$_elements3.mastheadL0,
+        mastheadL1 = _this$_elements3.mastheadL1,
+        tableOfContents = _this$_elements3.tableOfContents,
+        tableOfContentsInnerBar = _this$_elements3.tableOfContentsInnerBar,
+        leadspaceSearchBar = _this$_elements3.leadspaceSearchBar;
+
+      // Reset the value before performing any further calculations.
+      this._state.maxScrollaway = 0;
+
+      // Collect conditions we may want to test for to make logic easier to read.
+      this._state.tocShouldStick = tableOfContents ? tableOfContents.layout === 'horizontal' || window.innerWidth < gridBreakpoint : false;
+      this._state.tocIsAtTop = tableOfContentsInnerBar ? tableOfContentsInnerBar.getBoundingClientRect().top <= this.height + 1 : false;
+      this._state.searchIsAtTop = leadspaceSearchBar ? leadspaceSearchBar.getBoundingClientRect().top <= this.height + 1 : false;
+      this._state.tocIsAtSearch = leadspaceSearchBar && tableOfContentsInnerBar ? tableOfContentsInnerBar.getBoundingClientRect().top <= leadspaceSearchBar.getBoundingClientRect().bottom : false;
+      this._state.mastheadL0IsActive = Boolean(masthead === null || masthead === void 0 ? void 0 : masthead.querySelector('[expanded]'));
+      this._state.mastheadL1IsActive = mastheadL1 && mastheadL1.hasAttribute('active');
+      var _this$_state = this._state,
+        tocShouldStick = _this$_state.tocShouldStick,
+        tocIsAtTop = _this$_state.tocIsAtTop,
+        searchIsAtTop = _this$_state.searchIsAtTop,
+        tocIsAtSearch = _this$_state.tocIsAtSearch,
+        mastheadL0IsActive = _this$_state.mastheadL0IsActive,
+        mastheadL1IsActive = _this$_state.mastheadL1IsActive;
+
+      // Begin calculating maxScrollAway.
+
+      // If L0 is open, lock it to the top of the page.
+      if (mastheadL0 && mastheadL0IsActive) {
+        this._state.maxScrollaway = 0;
       }
+      // If L1 is open, lock it to the top of the page.
+      else if (mastheadL1IsActive && mastheadL0) {
+        this._state.maxScrollaway = mastheadL0.offsetHeight;
+      } else {
+        // In cases where we have both an eligible ToC and leadspace search, we want
+        // the ToC to take precedence. Scroll away leadspace search.
+        if (searchIsAtTop && tocIsAtSearch && tocShouldStick) {
+          this._state.maxScrollaway += leadspaceSearchBar.offsetHeight;
+        }
 
-      // Calculate maxScrollaway values based on leadspace search position
-      if (!tocInner && leadspaceSearchBar) {
-        var searchIsAtTop = leadspaceSearchBar.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1;
-        if (masthead && searchIsAtTop) {
-          maxScrollaway += masthead.offsetHeight;
+        // Scroll away entire masthead if either ToC or leadspace search is eligible
+        // to be the stuck element (unless L1 is open). Otherwise, scroll away the
+        // L0 if we have an L1.
+        if (searchIsAtTop || tocIsAtTop && tocShouldStick) {
+          if (masthead) {
+            this._state.maxScrollaway += masthead.offsetHeight;
+          }
+        } else if (masthead && mastheadL0 && mastheadL1) {
+          this._state.maxScrollaway += mastheadL0.offsetHeight;
         }
       }
+    }
+
+    /**
+     * Positions sticky elements. Does so by checking the scroll position and where
+     * tracked elements are in relation to it, then applying the correct styles to
+     * each element in succession to ensure that only one element is stuck to the
+     * top of the page, and all other elements that have been scrolled past can be
+     * revealed when scrolling back up.
+     */
+  }, {
+    key: "_positionElements",
+    value: function _positionElements() {
+      var _this$_elements4 = this._elements,
+        banner = _this$_elements4.banner,
+        masthead = _this$_elements4.masthead,
+        tocInner = _this$_elements4.tableOfContentsInnerBar,
+        leadspaceSearchBar = _this$_elements4.leadspaceSearchBar;
+      var oldY = this._state.scrollPosPrevious;
 
       /**
-       * Cumulative offset is a calculated value used to set the `top` property of
-       * components that stick to the top of the viewport.
-       *
-       * This value is equal to the difference between the previous scrollY and
-       * the current scrollY values, but is positively and negatively limited.
+       * Reset to a value that is equal to the difference between the previous
+       * scrollY and the current scrollY values, but is positively and negatively
+       * limited.
        *
        * Positive limit: 0
        *   all elements visible, starting at the top of the viewport.
@@ -253,55 +467,58 @@ var StickyHeader = /*#__PURE__*/function () {
        *   with the elements that should be visible starting at the top of the
        *   viewport.
        */
-      var cumulativeOffset = Math.max(Math.min((masthead ? masthead.offsetTop : 0) + oldY - newY, 0), maxScrollaway * -1);
+      this._state.cumulativeOffset = Math.max(Math.min((masthead ? masthead.offsetTop : 0) + oldY - this._state.scrollPos, 0), this._state.maxScrollaway * -1);
+
+      /**
+       * Handle each potentially sticky element in the order we expect them to
+       * appear on the page. Important to do this sequentially for
+       * cumulativeOffset to be correctly calculated by the time each of these
+       * methods accesses it.
+       *
+       * To-do: One idea for improving this so the execution order doesn't matter
+       * is to collect our elements into an array ordered by document position,
+       * then loop over that array and execute a corresponding handler method.
+       */
       if (banner) {
-        cumulativeOffset += Math.max(banner.offsetHeight - newY, 0);
+        this._handleBanner();
       }
       if (masthead) {
-        masthead.style.transition = 'none';
-        masthead.style.top = "".concat(cumulativeOffset, "px");
-        cumulativeOffset += masthead.offsetHeight;
+        this._handleMasthead();
+      }
+      if (leadspaceSearchBar) {
+        this._handleLeadspaceSearch();
       }
       if (tocInner) {
-        tocInner.style.transition = 'none';
-        tocInner.style.top = "".concat(cumulativeOffset, "px");
-        tocShouldStick = toc.layout === 'horizontal' || window.innerWidth < gridBreakpoint;
-        var tocIsStuck = Math.round(tocInner.getBoundingClientRect().top) <= cumulativeOffset + 1;
-        if (tocShouldStick && tocIsStuck) {
-          cumulativeOffset += tocInner.offsetHeight;
-        }
+        this._handleToc();
       }
-      if (!tocInner && leadspaceSearchBar) {
-        var searchShouldBeSticky = leadspaceSearch.getBoundingClientRect().bottom <= leadspaceSearchThreshold;
-        var searchIsSticky = leadspaceSearch.hasAttribute('sticky-search');
-        if (searchShouldBeSticky) {
-          if (!searchIsSticky) {
-            leadspaceSearch.style.paddingBottom = "".concat(leadspaceSearchBar.offsetHeight, "px");
-            leadspaceSearch.setAttribute('sticky-search', '');
-            leadspaceSearchInput.setAttribute('large', '');
-            window.requestAnimationFrame(function () {
-              leadspaceSearchBar.style.transitionDuration = '110ms';
-              leadspaceSearchBar.style.transform = 'translateY(0)';
-            });
-          }
-          leadspaceSearchBar.style.top = "".concat(cumulativeOffset, "px");
-          cumulativeOffset += leadspaceSearchBar.offsetHeight;
-        }
-        if (!searchShouldBeSticky && searchIsSticky) {
-          leadspaceSearch.removeAttribute('sticky-search');
-          leadspaceSearch.style.paddingBottom = '';
-          leadspaceSearchBar.style.top = '';
-          leadspaceSearchBar.style.transitionDuration = '';
-          leadspaceSearchBar.style.transform = '';
-          leadspaceSearchInput.removeAttribute('large');
-        }
+    }
+
+    /**
+     * Manages which elements are stuck and where they are positioned. We should
+     * only have one element stuck to the top of the viewport as the page scrolls
+     * down.
+     */
+  }, {
+    key: "_manageStickyElements",
+    value: function _manageStickyElements() {
+      var localeModal = this._elements.localeModal;
+      var scrollPosPrevious = this._state.scrollPos;
+
+      // Exit early if locale modal is open.
+      if (localeModal && localeModal.hasAttribute('open')) {
+        return;
       }
 
-      // Set internal property for use in scripts
-      this._cumulativeHeight = cumulativeOffset;
+      // Store scroll positions.
+      this._state.scrollPosPrevious = scrollPosPrevious;
+      this._state.scrollPos = Math.max(0, window.scrollY);
+
+      // Given the current state, calculate how elements should be positioned.
+      this._calculateMaxScrollaway();
+      this._positionElements();
 
       // Set custom property for use in stylesheets
-      root.document.documentElement.style.setProperty(customPropertyName, "".concat(this._cumulativeHeight, "px"));
+      root.document.documentElement.style.setProperty(this.constructor.customPropertyName, "".concat(this._state.cumulativeOffset, "px"));
     }
   }], [{
     key: "global",