@carbon/ibmdotcom-utilities 2.10.0-nightly.9262124525.0 → 2.10.0-nightly.9278788518.0

package/lib/utilities/StickyHeader/StickyHeader.js

@@ -26,20 +26,32 @@ var StickyHeader = /*#__PURE__*/function () {
   function StickyHeader() {
     _classCallCheck(this, StickyHeader);
     this.ownerDocument = _windowOrGlobal.default.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));
     _windowOrGlobal.default.addEventListener('scroll', this._throttledHandler.bind(this));
@@ -51,7 +63,7 @@ var StickyHeader = /*#__PURE__*/function () {
   return _createClass(StickyHeader, [{
     key: "height",
     get: function get() {
-      return this._cumulativeHeight;
+      return this._state.cumulativeOffset;
     }
 
     /**
@@ -72,73 +84,71 @@ var StickyHeader = /*#__PURE__*/function () {
         return true;
       }
     }
+
+    /**
+     * Stores references to TOC sub-elements that are relevant to current viewport
+     * dimensions.
+     */
   }, {
-    key: "_tableOfContentsStickyUpdate",
-    value: function _tableOfContentsStickyUpdate() {
-      var toc = this._tableOfContents;
+    key: "_updateTableOfContentsRefs",
+    value: function _updateTableOfContentsRefs() {
+      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"));
-        }
-      }
+      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"));
     }
   }, {
     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;
+        this._elements.leadspaceSearch = 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.leadspaceSearchBar = leadspaceSearchBar;
+        this._elements.leadspaceSearchInput = component.querySelector("".concat(c4dPrefix, "-search-with-typeahead"));
+        this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(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._elements.mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
+        this._elements.mastheadL1 = component.querySelector("".concat(c4dPrefix, "-masthead-l1"));
+        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();
       }
     }
 
@@ -151,7 +161,7 @@ var StickyHeader = /*#__PURE__*/function () {
       var _this = this;
       if (!this._throttled) {
         this._throttled = true;
-        this._calculateCumulativeHeight();
+        this._manageStickyElements();
         setTimeout(function () {
           _this._throttled = false;
         }, 20);
@@ -160,95 +170,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 = '';
       }
+    }
 
-      // 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;
+    /**
+     * 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;
+        }
+
+        // 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.
@@ -258,55 +370,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
-      _windowOrGlobal.default.document.documentElement.style.setProperty(customPropertyName, "".concat(this._cumulativeHeight, "px"));
+      _windowOrGlobal.default.document.documentElement.style.setProperty(this.constructor.customPropertyName, "".concat(this._state.cumulativeOffset, "px"));
     }
   }], [{
     key: "global",

package/lib/utilities/settings/settings.js

@@ -18,10 +18,10 @@ exports.default = void 0;
  * @type {object} Settings object
  * @property {string} [stablePrefix=c4d] stable prefix
  * @property {string} [prefix=cds] core Carbon prefix
- * Carbon for IBM.com v2.9.0',
+ * Carbon for IBM.com v2.10.0',
  */
 var settings = {
-  version: 'Carbon for IBM.com v2.9.0',
+  version: 'Carbon for IBM.com v2.10.0',
   stablePrefix: 'c4d',
   prefix: 'cds'
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-utilities",
   "description": "Carbon for IBM.com Utilities",
-  "version": "2.10.0-nightly.9262124525.0+b6911a8",
+  "version": "2.10.0-nightly.9278788518.0+365c9b6",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -88,5 +88,5 @@
     "rollup-plugin-sizes": "^1.0.4",
     "whatwg-fetch": "^2.0.3"
   },
-  "gitHead": "b6911a839210b121087c884288cdc6037e5f400f"
+  "gitHead": "365c9b684bfc0e59785009c05a0ebe05cc0b6df9"
 }

package/umd/ibmdotcom-utilities.js

@@ -4935,10 +4935,10 @@
    * @type {object} Settings object
    * @property {string} [stablePrefix=c4d] stable prefix
    * @property {string} [prefix=cds] core Carbon prefix
-   * Carbon for IBM.com v2.9.0',
+   * Carbon for IBM.com v2.10.0',
    */
   var settings = {
-    version: 'Carbon for IBM.com v2.9.0',
+    version: 'Carbon for IBM.com v2.10.0',
     stablePrefix: 'c4d',
     prefix: 'cds'
   };