diff --git a/docs/ui/makeup-menu-button/index.js b/docs/ui/makeup-menu-button/index.js
index 441a1207..03996206 100644
--- a/docs/ui/makeup-menu-button/index.js
+++ b/docs/ui/makeup-menu-button/index.js
@@ -32,8 +32,8 @@ window.onload = function () {
       menuItemButtonAriaLabelSelector,
     });
 
-    widget.menu.el.addEventListener("makeup-menu-select", (e) => console.log(e.type, e.detail));
-    widget.menu.el.addEventListener("makeup-menu-change", (e) => console.log(e.type, e.detail));
-    widget.menu.el.addEventListener("makeup-menu-button-mutation", (e) => console.log(e.type, e.detail));
+    widget.el.addEventListener("makeup-menu-button-select", (e) => console.log(e.type, e.detail));
+    widget.el.addEventListener("makeup-menu-button-change", (e) => console.log(e.type, e.detail));
+    widget.el.addEventListener("makeup-menu-button-mutation", (e) => console.log(e.type, e.detail));
   });
 };
diff --git a/docs/ui/makeup-menu-button/index.min.js b/docs/ui/makeup-menu-button/index.min.js
index f0aa28c6..a4d15016 100644
--- a/docs/ui/makeup-menu-button/index.min.js
+++ b/docs/ui/makeup-menu-button/index.min.js
@@ -636,6 +636,7 @@ class _default {
     this._onButtonFirstClickListener = _onButtonFirstClick.bind(this);
     this._onMenuKeyDownListener = _onMenuKeyDown.bind(this);
     this._onMenuItemSelectListener = _onMenuItemSelect.bind(this);
+    this._onMenuItemChangeListener = _onMenuItemChange.bind(this);
     this._onMutationListener = _onMutation.bind(this);
     this.el.classList.add("menu-button--js");
     if (!this._options.customElementMode) {
@@ -666,14 +667,22 @@ class _default {
       });
       this.menu.el.addEventListener("keydown", this._onMenuKeyDownListener);
       this.menu.el.addEventListener("makeup-menu-select", this._onMenuItemSelectListener);
-      this.menu.el.addEventListener("makeup-menu-change", this._onMenuItemSelectListener);
+      this.menu.el.addEventListener("makeup-menu-change", this._onMenuItemChangeListener);
     }
   }
   _unobserveEvents() {
     this._buttonEl.removeEventListener("click", this._onButtonFirstClickListener);
     this.menu.el.removeEventListener("keydown", this._onMenuKeyDownListener);
     this.menu.el.removeEventListener("makeup-menu-select", this._onMenuItemSelectListener);
-    this.menu.el.removeEventListener("makeup-menu-change", this._onMenuItemSelectListener);
+    this.menu.el.removeEventListener("makeup-menu-change", this._onMenuItemChangeListener);
+  }
+
+  // TODO: Move this logic to Expander as an option callback that runs after collapse.
+  _collapseMenuAfterTimeout() {
+    setTimeout(() => {
+      this._expander.expanded = false;
+      this._buttonEl.focus();
+    }, 150);
   }
   destroy() {
     this._destroyed = true;
@@ -682,6 +691,7 @@ class _default {
     this._onButtonFirstClickListener = null;
     this._onMenuKeyDownListener = null;
     this._onMenuItemSelectListener = null;
+    this._onMenuItemChangeListener = null;
     this._onMutationListener = null;
   }
 }
@@ -707,14 +717,19 @@ function _onMenuKeyDown(e) {
   }
 }
 function _onMenuItemSelect(e) {
-  const widget = this;
+  this._collapseMenuAfterTimeout();
+  this.el.dispatchEvent(new CustomEvent("makeup-menu-button-select", {
+    detail: e.detail
+  }));
+}
+function _onMenuItemChange(e) {
   const {
     el
   } = e.detail;
-  setTimeout(function () {
-    widget._expander.expanded = false;
-    widget._buttonEl.focus();
-  }, 150);
+  this._collapseMenuAfterTimeout();
+  this.el.dispatchEvent(new CustomEvent("makeup-menu-button-change", {
+    detail: e.detail
+  }));
   if (el.getAttribute("role") !== "menuitemradio") {
     return;
   }
@@ -1749,9 +1764,9 @@ window.onload = function () {
       buttonValueType,
       menuItemButtonAriaLabelSelector
     });
-    widget.menu.el.addEventListener("makeup-menu-select", e => console.log(e.type, e.detail));
-    widget.menu.el.addEventListener("makeup-menu-change", e => console.log(e.type, e.detail));
-    widget.menu.el.addEventListener("makeup-menu-button-mutation", e => console.log(e.type, e.detail));
+    widget.el.addEventListener("makeup-menu-button-select", e => console.log(e.type, e.detail));
+    widget.el.addEventListener("makeup-menu-button-change", e => console.log(e.type, e.detail));
+    widget.el.addEventListener("makeup-menu-button-mutation", e => console.log(e.type, e.detail));
   });
 };
 })();
diff --git a/docs/ui/makeup-menu-button/index.min.js.map b/docs/ui/makeup-menu-button/index.min.js.map
index f481675f..cd578dcb 100644
--- a/docs/ui/makeup-menu-button/index.min.js.map
+++ b/docs/ui/makeup-menu-button/index.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"makeup-menu-button/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,0CAA0C,mBAAO,CAAC,IAAqB;AACvE,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA,IAAI;AACJ;AACA,IAAI;AACJ,2CAA2C,gBAAgB;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA,+DAA+D;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,kDAAkD,WAAW;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;;;;;;;;;ACtSF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,6CAA6C,mBAAO,CAAC,IAAiB;AACtE,yCAAyC,mBAAO,CAAC,IAAa;AAC9D,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA,2CAA2C,oBAAoB,EAAE,KAAK;AACtE;AACA;AACA;AACA,wBAAwB,gBAAgB,QAAQ,WAAW;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sEAAsE,oBAAoB,EAAE,aAAa;AACzG;AACA;AACA;;;;;;;;;ACvJa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,IAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,6CAA6C,mBAAO,CAAC,IAAwB;AAC7E,gDAAgD,mBAAO,CAAC,IAA4B;AACpF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mEAAmE,UAAU;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;;;;;;;;AC9Ka;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,yCAAyC,mBAAO,CAAC,IAAoB;AACrE,0CAA0C,mBAAO,CAAC,IAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC,mCAAmC;;AAEnC,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;;ACjXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,cAAc;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACjBa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,gDAAgD,mBAAO,CAAC,IAA2B;AACnF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;UCvHA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,+CAA+C,mBAAO,CAAC,IAAoB;AAC3E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/menu-button.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/menu-button/menu-button.css?7300","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-expander/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-menu/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-prevent-scroll-keys/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-roving-tabindex/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-menu-button/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/menu-button/menu-button.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n  alwaysDoFocusManagement: false,\n  ariaControls: true,\n  autoCollapse: false,\n  collapseOnFocusOut: false,\n  collapseOnMouseOut: false,\n  collapseOnClickOut: false,\n  collapseOnHostReFocus: false,\n  contentSelector: \".expander__content\",\n  expandedClass: null,\n  expandOnClick: false,\n  expandOnFocus: false,\n  expandOnHover: false,\n  focusManagement: null,\n  hostSelector: \".expander__host\",\n  simulateSpacebarClick: false,\n  useAriaExpanded: true\n};\nfunction onHostKeyDown(e) {\n  if (e.keyCode === 13 || e.keyCode === 32) {\n    this._keyboardClickFlag = true;\n  }\n  // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here.\n  // careful! if host already triggers click events naturally, we end up with a \"double-click\".\n  if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) {\n    this.hostEl.click();\n  }\n}\nfunction onHostMouseDown() {\n  this._mouseClickFlag = true;\n}\nfunction onHostClick() {\n  this._expandWasKeyboardClickActivated = this._keyboardClickFlag;\n  this._expandWasMouseClickActivated = this._mouseClickFlag;\n  this._widgetHasKeyboardFocus = this._keyboardClickFlag;\n  this.expanded = !this.expanded;\n}\nfunction onHostFocus() {\n  this._expandWasFocusActivated = true;\n  this.expanded = true;\n}\n\n// NOTE: collapseOnHostReFocus cannot be used when expandOnFocus is true\nfunction onHostReFocus() {\n  if (this.expanded && this._widgetHasKeyboardFocus) {\n    this.expanded = false;\n  }\n}\nfunction onHostHover() {\n  clearTimeout(this._mouseLeft);\n  this._expandWasHoverActivated = true;\n  this.expanded = true;\n}\nfunction onFocusExit() {\n  this._widgetHasKeyboardFocus = false;\n  this.expanded = false;\n}\nfunction onMouseLeave() {\n  clearTimeout(this._mouseLeft);\n  this._mouseLeft = setTimeout(() => {\n    this.expanded = false;\n  }, 300);\n}\nfunction _onDocumentClick(e) {\n  if (this.el.contains(e.target) === false) {\n    this.expanded = false;\n  }\n}\nfunction _onDocumentTouchStart() {\n  this.documentClick = true;\n}\nfunction _onDocumentTouchMove() {\n  this.documentClick = false;\n}\nfunction _onDocumentTouchEnd(e) {\n  if (this.documentClick === true) {\n    this.documentClick = false;\n    if (this.el.contains(e.target) === false) {\n      this.expanded = false;\n    }\n  }\n}\nfunction manageFocus(focusManagement, contentEl) {\n  if (focusManagement === \"content\") {\n    contentEl.setAttribute(\"tabindex\", \"-1\");\n    contentEl.focus();\n  } else if (focusManagement === \"focusable\") {\n    (0, _makeupFocusables.default)(contentEl)[0]?.focus();\n  } else if (focusManagement === \"interactive\") {\n    (0, _makeupFocusables.default)(contentEl, true)[0]?.focus();\n  } else if (focusManagement !== null) {\n    const el = contentEl.querySelector(`#${focusManagement}`);\n    if (el) {\n      el.focus();\n    }\n  }\n}\nclass _default {\n  constructor(el, selectedOptions) {\n    this.options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = el;\n    this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el\n    this.contentEl = el.querySelector(this.options.contentSelector);\n    ExitEmitter.addFocusExit(this.el);\n    this._hostKeyDownListener = onHostKeyDown.bind(this);\n    this._hostMouseDownListener = onHostMouseDown.bind(this);\n    this._documentClickListener = _onDocumentClick.bind(this);\n    this._documentTouchStartListener = _onDocumentTouchStart.bind(this);\n    this._documentTouchMoveListener = _onDocumentTouchMove.bind(this);\n    this._documentTouchEndListener = _onDocumentTouchEnd.bind(this);\n    this._hostClickListener = onHostClick.bind(this);\n    this._hostFocusListener = onHostFocus.bind(this);\n    this._hostReFocusListener = onHostReFocus.bind(this);\n    this._hostHoverListener = onHostHover.bind(this);\n    this._focusExitListener = onFocusExit.bind(this);\n    this._mouseLeaveListener = onMouseLeave.bind(this);\n    if (this.options.useAriaExpanded === true) {\n      const initialAriaExpanded = this.hostEl.getAttribute(\"aria-expanded\");\n      this._expanded = initialAriaExpanded === \"true\";\n      if (initialAriaExpanded === null) {\n        this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n      }\n    } else {\n      this._expanded = false;\n    }\n    if (this.options.ariaControls === true) {\n      // ensure the widget has an id\n      (0, _makeupNextId.default)(this.el, \"expander\");\n      this.contentEl.id = this.contentEl.id || `${this.el.id}-content`;\n      this.hostEl.setAttribute(\"aria-controls\", this.contentEl.id);\n    }\n    this.expandOnClick = this.options.expandOnClick;\n    this.expandOnFocus = this.options.expandOnFocus;\n    this.expandOnHover = this.options.expandOnHover;\n    this.collapseOnHostReFocus = this.options.collapseOnHostReFocus;\n    if (this.options.autoCollapse === false) {\n      this.collapseOnClickOut = this.options.collapseOnClickOut;\n      this.collapseOnFocusOut = this.options.collapseOnFocusOut;\n      this.collapseOnMouseOut = this.options.collapseOnMouseOut;\n    }\n  }\n  set expandOnClick(bool) {\n    if (bool === true) {\n      this.hostEl.addEventListener(\"keydown\", this._hostKeyDownListener);\n      this.hostEl.addEventListener(\"mousedown\", this._hostMouseDownListener);\n      this.hostEl.addEventListener(\"click\", this._hostClickListener);\n      if (this.options.autoCollapse === true) {\n        this.collapseOnClickOut = true;\n        this.collapseOnFocusOut = true;\n      }\n    } else {\n      this.hostEl.removeEventListener(\"click\", this._hostClickListener);\n      this.hostEl.removeEventListener(\"mousedown\", this._hostMouseDownListener);\n      this.hostEl.removeEventListener(\"keydown\", this._hostKeyDownListener);\n    }\n  }\n  set expandOnFocus(bool) {\n    if (bool === true) {\n      this.hostEl.addEventListener(\"focus\", this._hostFocusListener);\n      if (this.options.autoCollapse === true) {\n        this.collapseOnClickOut = true;\n        this.collapseOnFocusOut = true;\n      }\n    } else {\n      this.hostEl.removeEventListener(\"focus\", this._hostFocusListener);\n    }\n  }\n  set collapseOnHostReFocus(bool) {\n    if (bool === true) {\n      this.hostEl.addEventListener(\"focus\", this._hostReFocusListener);\n    } else {\n      this.hostEl.removeEventListener(\"focus\", this._hostReFocusListener);\n    }\n  }\n  set expandOnHover(bool) {\n    if (bool === true) {\n      this.hostEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n      this.contentEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n      if (this.options.autoCollapse === true) {\n        this.collapseOnMouseOut = true;\n      }\n    } else {\n      this.hostEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n      this.contentEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n    }\n  }\n  set collapseOnClickOut(bool) {\n    if (bool === true) {\n      document.addEventListener(\"click\", this._documentClickListener);\n      document.addEventListener(\"touchstart\", this._documentTouchStartListener);\n      document.addEventListener(\"touchmove\", this._documentTouchMoveListener);\n      document.addEventListener(\"touchend\", this._documentTouchEndListener);\n    } else {\n      document.removeEventListener(\"click\", this._documentClickListener);\n      document.removeEventListener(\"touchstart\", this._documentTouchStartListener);\n      document.removeEventListener(\"touchmove\", this._documentTouchMoveListener);\n      document.removeEventListener(\"touchend\", this._documentTouchEndListener);\n    }\n  }\n  set collapseOnFocusOut(bool) {\n    if (bool === true) {\n      this.el.addEventListener(\"focusExit\", this._focusExitListener);\n    } else {\n      this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n    }\n  }\n  set collapseOnMouseOut(bool) {\n    if (bool === true) {\n      this.el.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n      this.contentEl.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n    } else {\n      this.el.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n      this.contentEl.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n    }\n  }\n  get expanded() {\n    return this._expanded;\n  }\n  set expanded(bool) {\n    if (bool === true && this.expanded === false) {\n      if (this.options.useAriaExpanded === true) {\n        this.hostEl.setAttribute(\"aria-expanded\", \"true\");\n      }\n      if (this.options.expandedClass) {\n        this.el.classList.add(this.options.expandedClass);\n      }\n      if (this._expandWasKeyboardClickActivated || this._expandWasMouseClickActivated && this.options.alwaysDoFocusManagement) {\n        manageFocus(this.options.focusManagement, this.contentEl);\n      }\n      this.el.dispatchEvent(new CustomEvent(\"expander-expand\", {\n        bubbles: true,\n        detail: this.contentEl\n      }));\n    }\n    if (bool === false && this.expanded === true) {\n      if (this.options.useAriaExpanded === true) {\n        this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n      }\n      if (this.options.expandedClass) {\n        this.el.classList.remove(this.options.expandedClass);\n      }\n      this.el.dispatchEvent(new CustomEvent(\"expander-collapse\", {\n        bubbles: true,\n        detail: this.contentEl\n      }));\n    }\n    this._expanded = bool;\n    this._expandWasKeyboardClickActivated = false;\n    this._expandWasMouseClickActivated = false;\n    this._expandWasFocusActivated = false;\n    this._expandWasHoverActivated = false;\n    this._keyboardClickFlag = false;\n    this._mouseClickFlag = false;\n  }\n  sleep() {\n    if (this._destroyed !== true) {\n      this.expandOnClick = false;\n      this.expandOnFocus = false;\n      this.expandOnHover = false;\n      this.collapseOnClickOut = false;\n      this.collapseOnFocusOut = false;\n      this.collapseOnMouseOut = false;\n      this.collapseOnHostReFocus = false;\n    }\n  }\n  destroy() {\n    this.sleep();\n    this._destroyed = true;\n    this._hostKeyDownListener = null;\n    this._hostMouseDownListener = null;\n    this._documentClickListener = null;\n    this._documentTouchStartListener = null;\n    this._documentTouchMoveListener = null;\n    this._documentTouchEndListener = null;\n    this._hostClickListener = null;\n    this._hostFocusListener = null;\n    this._hostReFocusListener = null;\n    this._hostHoverListener = null;\n    this._focusExitListener = null;\n    this._mouseLeaveListener = null;\n    this._widgetHasKeyboardFocus = null;\n  }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n  el.dispatchEvent(new CustomEvent(\"focusExit\", {\n    detail: {\n      fromElement,\n      toElement\n    },\n    bubbles: false // mirror the native mouseleave event\n  }));\n}\nfunction onDocumentFocusIn(e) {\n  const newFocusElement = e.target;\n  const targetIsDescendant = this.el.contains(newFocusElement);\n\n  // if focus has moved to a focusable descendant\n  if (targetIsDescendant === true) {\n    // set the target as the currently focussed element\n    this.currentFocusElement = newFocusElement;\n  } else {\n    // else focus has not gone to a focusable descendant\n    window.removeEventListener(\"blur\", this.onWindowBlurListener);\n    document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n    doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n    this.currentFocusElement = null;\n  }\n}\nfunction onWindowBlur() {\n  doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n  // listen for focus moving to anywhere in document\n  // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n  document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n  // listen for focus leaving the window\n  window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n  constructor(el) {\n    this.el = el;\n    this.currentFocusElement = null;\n    this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n    this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n    this.onWindowBlurListener = onWindowBlur.bind(this);\n    this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n  }\n  removeEventListeners() {\n    window.removeEventListener(\"blur\", this.onWindowBlurListener);\n    document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n    this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n  }\n}\nfunction addFocusExit(el) {\n  let exitEmitter = null;\n  (0, _makeupNextId.default)(el);\n  if (!focusExitEmitters[el.id]) {\n    exitEmitter = new FocusExitEmitter(el);\n    focusExitEmitters[el.id] = exitEmitter;\n  }\n  return exitEmitter;\n}\nfunction removeFocusExit(el) {\n  const exitEmitter = focusExitEmitters[el.id];\n  if (exitEmitter) {\n    exitEmitter.removeEventListeners();\n    delete focusExitEmitters[el.id];\n  }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n  let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n  let callback = arguments.length > 2 ? arguments[2] : undefined;\n  if (callback) {\n    const request = requestAnimationFrame(() => {\n      callback(getFocusables(el, keyboardOnly));\n    });\n    return () => {\n      cancelAnimationFrame(request);\n    };\n  }\n  return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n  let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n  let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n  // filter out elements with display: none or nested in a display: none parent\n  focusableEls = focusableEls.filter(function (focusableEl) {\n    return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n  });\n  if (keyboardOnly === true) {\n    focusableEls = focusableEls.filter(function (focusableEl) {\n      return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n    });\n  }\n  return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n  return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n  const letters = \"abcdefghijklmnopqrstuvwxyz\";\n  const digits = \"0123456789\";\n  const allChars = letters + digits;\n\n  // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n  let portion = letters[randomNumber(25)];\n\n  // start iterating from 1, as we already have our first char\n  for (let i = 1; i < size; i++) {\n    portion += allChars[randomNumber(35)];\n  }\n  return portion;\n}\nfunction _default(el) {\n  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n  const separator = prefix === \"\" ? \"\" : \"-\";\n\n  // join first prefix with random portion to create key\n  const key = `${prefix}${separator}${randomPortion}`;\n\n  // initialise key in sequence map if necessary\n  sequenceMap[key] = sequenceMap[key] || 0;\n  if (!el.id) {\n    el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n  }\n  return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\nvar _makeupExpander = _interopRequireDefault(require(\"makeup-expander\"));\nvar _makeupMenu = _interopRequireDefault(require(\"makeup-menu\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n  customElementMode: false,\n  expandedClass: \"menu-button--expanded\",\n  menuSelector: \".menu-button__menu\",\n  buttonTextSelector: `.btn__text`,\n  buttonValueType: \"text\",\n  // [\"text\", \"icon\", \"both\"],\n  menuItemIconSelector: \".icon\",\n  menuItemButtonAriaLabelSelector: null\n};\nclass _default {\n  constructor(widgetEl, selectedOptions) {\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = widgetEl;\n    this._buttonEl = widgetEl.querySelector(\"button\");\n    this._buttonEl.setAttribute(\"aria-haspopup\", \"true\");\n    this.menu = new _makeupMenu.default(widgetEl.querySelector(this._options.menuSelector), {\n      autoReset: \"interactive\"\n    });\n    this._buttonPrefix = this._buttonEl.dataset?.makeupMenuButtonPrefix;\n    this._buttonTextEl = this._buttonEl.querySelector(this._options.buttonTextSelector);\n    this._expander = new _makeupExpander.default(widgetEl, {\n      alwaysDoFocusManagement: true,\n      autoCollapse: true,\n      collapseOnHostReFocus: true,\n      contentSelector: this._options.menuSelector,\n      expandedClass: this._options.expandedClass,\n      expandOnClick: true,\n      focusManagement: \"focusable\",\n      hostSelector: \"button\"\n    });\n    this._onButtonFirstClickListener = _onButtonFirstClick.bind(this);\n    this._onMenuKeyDownListener = _onMenuKeyDown.bind(this);\n    this._onMenuItemSelectListener = _onMenuItemSelect.bind(this);\n    this._onMutationListener = _onMutation.bind(this);\n    this.el.classList.add(\"menu-button--js\");\n    if (!this._options.customElementMode) {\n      this._mutationObserver = new MutationObserver(this._onMutationListener);\n      this._observeMutations();\n      this._observeEvents();\n    }\n  }\n  _observeMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.observe(this.el, {\n        attributeFilter: [\"aria-expanded\", \"disabled\"],\n        attributes: true,\n        childList: false,\n        subtree: false\n      });\n    }\n  }\n  _unobserveMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.disconnect();\n    }\n  }\n  _observeEvents() {\n    if (this._destroyed !== true) {\n      this._buttonEl.addEventListener(\"click\", this._onButtonFirstClickListener, {\n        once: true\n      });\n      this.menu.el.addEventListener(\"keydown\", this._onMenuKeyDownListener);\n      this.menu.el.addEventListener(\"makeup-menu-select\", this._onMenuItemSelectListener);\n      this.menu.el.addEventListener(\"makeup-menu-change\", this._onMenuItemSelectListener);\n    }\n  }\n  _unobserveEvents() {\n    this._buttonEl.removeEventListener(\"click\", this._onButtonFirstClickListener);\n    this.menu.el.removeEventListener(\"keydown\", this._onMenuKeyDownListener);\n    this.menu.el.removeEventListener(\"makeup-menu-select\", this._onMenuItemSelectListener);\n    this.menu.el.removeEventListener(\"makeup-menu-change\", this._onMenuItemSelectListener);\n  }\n  destroy() {\n    this._destroyed = true;\n    this._unobserveMutations();\n    this._unobserveEvents();\n    this._onButtonFirstClickListener = null;\n    this._onMenuKeyDownListener = null;\n    this._onMenuItemSelectListener = null;\n    this._onMutationListener = null;\n  }\n}\nexports.default = _default;\nfunction _onMutation(mutationsList) {\n  for (const mutation of mutationsList) {\n    if (mutation.type === \"attributes\") {\n      this.el.dispatchEvent(new CustomEvent(\"makeup-menu-button-mutation\", {\n        detail: {\n          attributeName: mutation.attributeName\n        }\n      }));\n    }\n  }\n}\nfunction _onButtonFirstClick() {\n  this.menu.el.hidden = false;\n}\nfunction _onMenuKeyDown(e) {\n  if (e.keyCode === 27) {\n    this._expander.expanded = false;\n    this._buttonEl.focus();\n  }\n}\nfunction _onMenuItemSelect(e) {\n  const widget = this;\n  const {\n    el\n  } = e.detail;\n  setTimeout(function () {\n    widget._expander.expanded = false;\n    widget._buttonEl.focus();\n  }, 150);\n  if (el.getAttribute(\"role\") !== \"menuitemradio\") {\n    return;\n  }\n  const {\n    menuItemIconSelector,\n    menuItemButtonAriaLabelSelector,\n    buttonValueType\n  } = this._options;\n  const icon = el.querySelector(menuItemIconSelector).cloneNode(true);\n  const text = el.innerText.trim();\n  let btnContent = this._buttonPrefix ? `${this._buttonPrefix} ${text}` : text;\n  if (icon) {\n    switch (buttonValueType) {\n      case \"both\":\n        btnContent = `${icon.outerHTML} <span>${btnContent}</span>`;\n        break;\n      case \"icon\":\n        this._buttonEl.setAttribute(\"aria-label\", btnContent);\n        btnContent = icon.outerHTML;\n        break;\n      default:\n        break;\n    }\n  }\n  if (menuItemButtonAriaLabelSelector) {\n    const selectorText = el.querySelector(menuItemButtonAriaLabelSelector)?.innerText.trim();\n    this._buttonEl.setAttribute(\"aria-label\", this._buttonPrefix ? `${this._buttonPrefix} ${selectorText}` : selectorText);\n  }\n  this._buttonTextEl.innerHTML = btnContent;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n  el.dispatchEvent(new CustomEvent(\"focusExit\", {\n    detail: {\n      fromElement,\n      toElement\n    },\n    bubbles: false // mirror the native mouseleave event\n  }));\n}\nfunction onDocumentFocusIn(e) {\n  const newFocusElement = e.target;\n  const targetIsDescendant = this.el.contains(newFocusElement);\n\n  // if focus has moved to a focusable descendant\n  if (targetIsDescendant === true) {\n    // set the target as the currently focussed element\n    this.currentFocusElement = newFocusElement;\n  } else {\n    // else focus has not gone to a focusable descendant\n    window.removeEventListener(\"blur\", this.onWindowBlurListener);\n    document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n    doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n    this.currentFocusElement = null;\n  }\n}\nfunction onWindowBlur() {\n  doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n  // listen for focus moving to anywhere in document\n  // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n  document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n  // listen for focus leaving the window\n  window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n  constructor(el) {\n    this.el = el;\n    this.currentFocusElement = null;\n    this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n    this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n    this.onWindowBlurListener = onWindowBlur.bind(this);\n    this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n  }\n  removeEventListeners() {\n    window.removeEventListener(\"blur\", this.onWindowBlurListener);\n    document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n    this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n  }\n}\nfunction addFocusExit(el) {\n  let exitEmitter = null;\n  (0, _makeupNextId.default)(el);\n  if (!focusExitEmitters[el.id]) {\n    exitEmitter = new FocusExitEmitter(el);\n    focusExitEmitters[el.id] = exitEmitter;\n  }\n  return exitEmitter;\n}\nfunction removeFocusExit(el) {\n  const exitEmitter = focusExitEmitters[el.id];\n  if (exitEmitter) {\n    exitEmitter.removeEventListeners();\n    delete focusExitEmitters[el.id];\n  }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n  return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n  if (!evt.shiftKey) {\n    const key = evt.key;\n    switch (key) {\n      case \"Enter\":\n      case \"Escape\":\n      case \"PageUp\":\n      case \"PageDown\":\n      case \"End\":\n      case \"Home\":\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n          detail: evt,\n          bubbles: true\n        }));\n        break;\n      case \" \":\n        el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n          detail: evt,\n          bubbles: true\n        }));\n        break;\n      default:\n        return;\n    }\n  }\n}\nfunction onKeyDown(e) {\n  onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n  onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n  el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n  el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n  el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n  el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n  addKeyDown(el);\n  addKeyUp(el);\n}\nfunction remove(el) {\n  removeKeyDown(el);\n  removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\nvar RovingTabIndex = _interopRequireWildcard(require(\"makeup-roving-tabindex\"));\nvar PreventScrollKeys = _interopRequireWildcard(require(\"makeup-prevent-scroll-keys\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n  customElementMode: false,\n  autoInit: \"interactive\",\n  autoReset: \"interactive\"\n};\nclass _default {\n  constructor(widgetEl, selectedOptions) {\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = widgetEl;\n    this._rovingTabIndex = RovingTabIndex.createLinear(this.el, \"[role^=menuitem]\", {\n      autoInit: this._options.autoInit,\n      autoReset: this._options.autoReset\n    });\n    PreventScrollKeys.add(this.el);\n    this._onKeyDownListener = _onKeyDown.bind(this);\n    this._onClickListener = _onClick.bind(this);\n    this._onMutationListener = _onMutation.bind(this);\n    this.el.classList.add(\"menu--js\");\n    if (!this._options.customElementMode) {\n      this._mutationObserver = new MutationObserver(this._onMutationListener);\n      this._observeMutations();\n      this._observeEvents();\n    }\n  }\n  select(index) {\n    this._unobserveMutations();\n    const el = this.items[index];\n    switch (el.getAttribute(\"role\")) {\n      case \"menuitemcheckbox\":\n        _selectMenuItemCheckbox(this.el, el);\n        break;\n      case \"menuitemradio\":\n        _selectMenuItemRadio(this.el, el);\n        break;\n      default:\n        _selectMenuItem(this.el, el);\n        break;\n    }\n    this._observeMutations();\n  }\n  get items() {\n    return this._rovingTabIndex.items;\n  }\n  get radioGroupNames() {\n    const els = [...this.el.querySelectorAll(\"[role=menuitemradio][data-makeup-group]\")];\n    const groupNames = [...new Set(els.map(el => el.dataset.makeupGroup))];\n    return groupNames;\n  }\n  get checkboxGroupNames() {\n    const els = [...this.el.querySelectorAll(\"[role=menuitemcheckbox][data-makeup-group]\")];\n    const groupNames = [...new Set(els.map(el => el.dataset.makeupGroup))];\n    return groupNames;\n  }\n  _observeMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.observe(this.el, {\n        attributeFilter: [\"aria-checked\", \"aria-disabled\"],\n        attributes: true,\n        childList: true,\n        subtree: true\n      });\n    }\n  }\n  _unobserveMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.disconnect();\n    }\n  }\n  _observeEvents() {\n    if (this._destroyed !== true) {\n      this.el.addEventListener(\"keydown\", this._onKeyDownListener);\n      this.el.addEventListener(\"click\", this._onClickListener);\n    }\n  }\n  _unobserveEvents() {\n    this.el.removeEventListener(\"keydown\", this._onKeyDownListener);\n    this.el.removeEventListener(\"click\", this._onClickListener);\n  }\n  destroy() {\n    this._destroyed = true;\n    this._unobserveMutations();\n    this._unobserveEvents();\n    this._onKeyDownListener = null;\n    this._onClickListener = null;\n    this._onMutationListener = null;\n  }\n}\nexports.default = _default;\nfunction _onMutation(mutationsList) {\n  for (const mutation of mutationsList) {\n    if (mutation.type === \"attributes\") {\n      this.el.dispatchEvent(new CustomEvent(\"makeup-menu-mutation\", {\n        detail: {\n          attributeName: mutation.attributeName\n        }\n      }));\n    }\n  }\n}\nfunction _onKeyDown(e) {\n  this._unobserveMutations();\n  if (e.keyCode === 13) {\n    e.preventDefault();\n  }\n  if (e.keyCode === 13 || e.keyCode === 32) {\n    this.select(Array.from(this.items).indexOf(e.target));\n  }\n  this._observeMutations();\n}\nfunction _onClick(e) {\n  // unlike the keyDown event, the click event target can be a child element of the menuitem\n  // e.g. <div role=\"menuitem\"><span>Item 1</span></div>\n  const menuItemEl = e.target.closest(\"[role^=menuitem]\");\n  const index = this.items.indexOf(menuItemEl);\n  if (index !== -1) {\n    this.select(index);\n  }\n}\nfunction _selectMenuItem(widgetEl, menuItemEl) {\n  widgetEl.dispatchEvent(new CustomEvent(\"makeup-menu-select\", {\n    detail: {\n      el: menuItemEl,\n      value: menuItemEl.innerText\n    }\n  }));\n}\nfunction _selectMenuItemCheckbox(widgetEl, menuItemEl) {\n  if (menuItemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n    const groupName = menuItemEl.dataset.makeupGroup;\n    menuItemEl.setAttribute(\"aria-checked\", menuItemEl.getAttribute(\"aria-checked\") === \"true\" ? \"false\" : \"true\");\n    widgetEl.dispatchEvent(new CustomEvent(\"makeup-menu-change\", {\n      detail: {\n        el: menuItemEl,\n        checked: menuItemEl.getAttribute(\"aria-checked\"),\n        group: groupName,\n        value: menuItemEl.innerText\n      }\n    }));\n  }\n}\nfunction _selectMenuItemRadio(widgetEl, menuItemEl) {\n  if (menuItemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n    const groupName = menuItemEl.dataset.makeupGroup;\n    const checkedEl = widgetEl.querySelector(`[data-makeup-group=${groupName}][aria-checked=true]`);\n    if (!checkedEl) {\n      menuItemEl.setAttribute(\"aria-checked\", \"true\");\n      widgetEl.dispatchEvent(new CustomEvent(\"makeup-menu-change\", {\n        detail: {\n          el: menuItemEl,\n          group: groupName,\n          value: menuItemEl.innerText\n        }\n      }));\n    } else if (checkedEl !== menuItemEl) {\n      checkedEl.setAttribute(\"aria-checked\", \"false\");\n      menuItemEl.setAttribute(\"aria-checked\", \"true\");\n      widgetEl.dispatchEvent(new CustomEvent(\"makeup-menu-change\", {\n        detail: {\n          el: menuItemEl,\n          group: groupName,\n          value: menuItemEl.innerText\n        }\n      }));\n    }\n  }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.createLinear = createLinear;\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n  axis: \"both\",\n  autoInit: \"interactive\",\n  autoReset: \"current\",\n  ignoreByDelegateSelector: null,\n  wrap: false\n};\nfunction isItemNavigable(el) {\n  return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n  return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n  return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n  return items.findIndex(item => isItemNavigable(item));\n}\nfunction findLastNavigableIndex(items) {\n  // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n  return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n  return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n  return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n  return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n  return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n  let previousNavigableIndex = -1;\n  if (index === null || atStart(items, index)) {\n    if (wrap === true) {\n      previousNavigableIndex = findLastNavigableIndex(items);\n    }\n  } else {\n    let i = index;\n    while (--i >= 0) {\n      if (isItemNavigable(items[i])) {\n        previousNavigableIndex = i;\n        break;\n      }\n    }\n  }\n  return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n  let nextNavigableIndex = -1;\n  if (index === null) {\n    nextNavigableIndex = findFirstNavigableIndex(items);\n  } else if (atEnd(items, index)) {\n    if (wrap === true) {\n      nextNavigableIndex = findFirstNavigableIndex(items);\n    }\n  } else {\n    let i = index;\n    while (++i < items.length) {\n      if (isItemNavigable(items[i])) {\n        nextNavigableIndex = i;\n        break;\n      }\n    }\n  }\n  return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n  let index = -1;\n  switch (typeOrNum) {\n    case \"none\":\n      index = null;\n      break;\n    case \"current\":\n      index = currentIndex;\n      break;\n    case \"interactive\":\n      index = findFirstNavigableIndex(items);\n      break;\n    case \"ariaChecked\":\n      index = findFirstNavigableAriaCheckedIndex(items);\n      break;\n    case \"ariaSelected\":\n      index = findFirstNavigableAriaSelectedIndex(items);\n      break;\n    case \"ariaSelectedOrInteractive\":\n      index = findFirstNavigableAriaSelectedIndex(items);\n      index = index === -1 ? findFirstNavigableIndex(items) : index;\n      break;\n    default:\n      index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n  }\n  return index;\n}\nfunction atStart(items, index) {\n  return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n  return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n  // todo: update KeyEmitter to deal with ignored items?\n  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n    this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n  }\n}\nfunction onKeyNext(e) {\n  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n  // todo: update KeyEmitter to deal with ignored items?\n  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n    this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n  }\n}\nfunction onClick(e) {\n  const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n  if (isIndexNavigable(this.items, itemIndex)) {\n    this.index = itemIndex;\n  }\n}\nfunction onKeyHome(e) {\n  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n  // todo: update KeyEmitter to deal with ignored items?\n  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n    this.index = findFirstNavigableIndex(this.items);\n  }\n}\nfunction onKeyEnd(e) {\n  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n  // todo: update KeyEmitter to deal with ignored items?\n  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n    this.index = findLastNavigableIndex(this.items);\n  }\n}\nfunction onFocusExit() {\n  if (this.options.autoReset !== null) {\n    this.reset();\n  }\n}\nfunction onMutation(e) {\n  const fromIndex = this.index;\n  let toIndex = this.index;\n  // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n  const {\n    addedNodes,\n    attributeName,\n    removedNodes,\n    target,\n    type\n  } = e[0];\n  if (type === \"attributes\") {\n    if (target === this.currentItem) {\n      if (attributeName === \"aria-disabled\") {\n        // current item was disabled - keep it as current index (until a keyboard navigation happens)\n        toIndex = this.index;\n      } else if (attributeName === \"hidden\") {\n        // current item was hidden and focus is lost - reset index to first interactive element\n        toIndex = findFirstNavigableIndex(this.items);\n      }\n    } else {\n      toIndex = this.index;\n    }\n  } else if (type === \"childList\") {\n    if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n      // current item was removed and focus is lost - reset index to first interactive element\n      toIndex = findFirstNavigableIndex(this.items);\n    } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n      // nodes were added and/or removed - keep current item and resync its index\n      toIndex = this.indexOf(this._cachedElement);\n    }\n  }\n  this._index = toIndex;\n  this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n    bubbles: false,\n    detail: {\n      fromIndex,\n      toIndex\n    }\n  }));\n}\nclass NavigationModel {\n  /**\n   * @param {HTMLElement} el\n   * @param {string} itemSelector\n   * @param {typeof defaultOptions} selectedOptions\n   */\n  constructor(el, itemSelector, selectedOptions) {\n    /** @member {typeof defaultOptions} */\n    this.options = Object.assign({}, defaultOptions, selectedOptions);\n\n    /** @member {HTMLElement} */\n    this._el = el;\n\n    /** @member {string} */\n    this._itemSelector = itemSelector;\n  }\n}\nclass LinearNavigationModel extends NavigationModel {\n  /**\n   * @param {HTMLElement} el\n   * @param {string} itemSelector\n   * @param {typeof defaultOptions} selectedOptions\n   */\n  constructor(el, itemSelector, selectedOptions) {\n    super(el, itemSelector, selectedOptions);\n    const fromIndex = this._index;\n    const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n    // do not use setter as it will trigger a change event\n    this._index = toIndex;\n\n    // always keep an element reference to the last item (for use in mutation observer)\n    // todo: convert index to Tuple to store last/current values instead?\n    this._cachedElement = this.items[toIndex];\n    this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n      bubbles: false,\n      detail: {\n        firstInteractiveIndex: this.firstNavigableIndex,\n        fromIndex,\n        items: this.items,\n        toIndex\n      }\n    }));\n  }\n  get currentItem() {\n    return this.items[this.index];\n  }\n\n  // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n  get items() {\n    return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n  }\n  get index() {\n    return this._index;\n  }\n\n  /**\n   * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n   */\n  set index(toIndex) {\n    if (toIndex === this.index) {\n      return;\n    } else if (!isIndexNavigable(this.items, toIndex)) {\n      // no-op. throw exception?\n    } else {\n      const fromIndex = this.index;\n      // update cached element reference (for use in mutation observer if DOM node gets removed)\n      this._cachedElement = this.items[toIndex];\n      this._index = toIndex;\n      this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n        bubbles: false,\n        detail: {\n          fromIndex,\n          toIndex\n        }\n      }));\n    }\n  }\n  indexOf(element) {\n    return this.items.indexOf(element);\n  }\n  reset() {\n    const fromIndex = this.index;\n    const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n    if (toIndex !== fromIndex) {\n      // do not use setter as it will trigger a navigationModelChange event\n      this._index = toIndex;\n      this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n        bubbles: false,\n        detail: {\n          fromIndex,\n          toIndex\n        }\n      }));\n    }\n  }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n    constructor(el, rowSelector, colSelector) {\n        super();\n        this._coords = null;\n    }\n}\n*/\n\nclass NavigationEmitter {\n  /**\n   * @param {HTMLElement} el\n   * @param {LinearNavigationModel} model\n   */\n  constructor(el, model) {\n    this.model = model;\n    this.el = el;\n    this._keyPrevListener = onKeyPrev.bind(model);\n    this._keyNextListener = onKeyNext.bind(model);\n    this._keyHomeListener = onKeyHome.bind(model);\n    this._keyEndListener = onKeyEnd.bind(model);\n    this._clickListener = onClick.bind(model);\n    this._focusExitListener = onFocusExit.bind(model);\n    this._observer = new MutationObserver(onMutation.bind(model));\n    KeyEmitter.addKeyDown(this.el);\n    ExitEmitter.addFocusExit(this.el);\n    const axis = model.options.axis;\n    if (axis === \"both\" || axis === \"x\") {\n      this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n      this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n    }\n    if (axis === \"both\" || axis === \"y\") {\n      this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n      this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n    }\n    this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n    this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n    this.el.addEventListener(\"click\", this._clickListener);\n    this.el.addEventListener(\"focusExit\", this._focusExitListener);\n    this._observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n      attributeFilter: [\"aria-disabled\", \"hidden\"],\n      attributes: true,\n      attributeOldValue: true\n    });\n  }\n  destroy() {\n    KeyEmitter.removeKeyDown(this.el);\n    ExitEmitter.removeFocusExit(this.el);\n    this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n    this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n    this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n    this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n    this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n    this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n    this.el.removeEventListener(\"click\", this._clickListener);\n    this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n    this._observer.disconnect();\n  }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n  const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n  return new NavigationEmitter(el, model);\n}\n\n/*\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n    return null;\n}\n*/\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n  return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n  const letters = \"abcdefghijklmnopqrstuvwxyz\";\n  const digits = \"0123456789\";\n  const allChars = letters + digits;\n\n  // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n  let portion = letters[randomNumber(25)];\n\n  // start iterating from 1, as we already have our first char\n  for (let i = 1; i < size; i++) {\n    portion += allChars[randomNumber(35)];\n  }\n  return portion;\n}\nfunction _default(el) {\n  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n  const separator = prefix === \"\" ? \"\" : \"-\";\n\n  // join first prefix with random portion to create key\n  const key = `${prefix}${separator}${randomPortion}`;\n\n  // initialise key in sequence map if necessary\n  sequenceMap[key] = sequenceMap[key] || 0;\n  if (!el.id) {\n    el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n  }\n  return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.add = add;\nexports.remove = remove;\nfunction onKeyDown(e) {\n  if (e.keyCode >= 32 && e.keyCode <= 40) {\n    e.preventDefault();\n  }\n}\nfunction add(el) {\n  el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction remove(el) {\n  el.removeEventListener(\"keydown\", onKeyDown);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.createLinear = createLinear;\nvar NavigationEmitter = _interopRequireWildcard(require(\"makeup-navigation-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n  autoInit: \"interactive\",\n  autoReset: \"current\",\n  wrap: false,\n  axis: \"both\"\n};\nfunction refreshTabindex(items, focusIndex) {\n  items.forEach(function (el, i) {\n    el.setAttribute(\"tabindex\", i === focusIndex ? \"0\" : \"-1\");\n  });\n}\nfunction onModelInit(e) {\n  refreshTabindex(e.detail.items, e.detail.toIndex);\n  this._el.dispatchEvent(new CustomEvent(\"rovingTabindexInit\", {\n    detail: e.detail\n  }));\n}\nfunction onModelChange(e) {\n  const items = this.items;\n  const fromItem = items[e.detail.fromIndex];\n  const toItem = items[e.detail.toIndex];\n  if (fromItem) {\n    fromItem.setAttribute(\"tabindex\", \"-1\");\n  }\n  if (toItem) {\n    toItem.setAttribute(\"tabindex\", \"0\");\n    toItem.focus();\n  }\n  this._el.dispatchEvent(new CustomEvent(\"rovingTabindexChange\", {\n    detail: e.detail\n  }));\n}\nfunction onModelReset(e) {\n  refreshTabindex(this.items, e.detail.toIndex);\n  this._el.dispatchEvent(new CustomEvent(\"rovingTabindexReset\", {\n    detail: e.detail\n  }));\n}\nfunction onModelMutation(e) {\n  refreshTabindex(this.items, e.detail.toIndex);\n  this._el.dispatchEvent(new CustomEvent(\"rovingTabindexMutation\", {\n    detail: e.detail\n  }));\n}\nclass RovingTabindex {\n  constructor(el) {\n    this._el = el;\n    this._onMutationListener = onModelMutation.bind(this);\n    this._onChangeListener = onModelChange.bind(this);\n    this._onInitListener = onModelInit.bind(this);\n    this._onResetListener = onModelReset.bind(this);\n    this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n    this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n    this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n    this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n  }\n  destroy() {\n    this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n    this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n    this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n    this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n  }\n}\nclass LinearRovingTabindex extends RovingTabindex {\n  constructor(el, itemSelector, selectedOptions) {\n    super(el);\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this._itemSelector = itemSelector;\n\n    // todo: options.index is deprecated. Remove support in future release.\n    this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {\n      autoInit: this._options.index !== undefined ? this._options.index : this._options.autoInit,\n      autoReset: this._options.autoReset,\n      wrap: this._options.wrap,\n      axis: this._options.axis\n    });\n  }\n  get index() {\n    return this._navigationEmitter.model.index;\n  }\n  set index(newIndex) {\n    this._navigationEmitter.model.index = newIndex;\n  }\n  set wrap(newWrap) {\n    this._navigationEmitter.model.options.wrap = newWrap;\n  }\n  get currentItem() {\n    return this._navigationEmitter.model.currentItem;\n  }\n  get items() {\n    return this._navigationEmitter.model.items;\n  }\n  reset() {\n    this._navigationEmitter.model.reset();\n  }\n  destroy() {\n    super.destroy();\n    this._navigationEmitter.destroy();\n  }\n}\n\n/*\nclass GridRovingTabindex extends RovingTabindex {\n    constructor(el, rowSelector, cellSelector, selectedOptions) {\n        super(el);\n    }\n}\n*/\n\nfunction createLinear(el, itemSelector, selectedOptions) {\n  return new LinearRovingTabindex(el, itemSelector, selectedOptions);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/menu-button\");\nvar _makeupMenuButton = _interopRequireDefault(require(\"makeup-menu-button\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const MenuButton = require('makeup-menu-button').default;\n\n// IMPORT\n\nwindow.onload = function () {\n  document.querySelectorAll(\".menu-button\").forEach(function (el, i) {\n    const hasCustomLabel = el.classList.contains(\"menu-button-with-icon-customText\");\n    const hasIconText = el.classList.contains(\"menu-button-with-iconText\");\n    const hasIcon = el.classList.contains(\"menu-button-with-icon\");\n    let buttonValueType;\n    if (hasIconText) {\n      buttonValueType = \"both\";\n    } else if (hasIcon || hasCustomLabel) {\n      buttonValueType = \"icon\";\n    } else {\n      buttonValueType = \"text\";\n    }\n    const menuItemButtonAriaLabelSelector = hasCustomLabel ? \".menu-button__item-value span\" : null;\n    const widget = new _makeupMenuButton.default(el, {\n      buttonValueType,\n      menuItemButtonAriaLabelSelector\n    });\n    widget.menu.el.addEventListener(\"makeup-menu-select\", e => console.log(e.type, e.detail));\n    widget.menu.el.addEventListener(\"makeup-menu-change\", e => console.log(e.type, e.detail));\n    widget.menu.el.addEventListener(\"makeup-menu-button-mutation\", e => console.log(e.type, e.detail));\n  });\n};"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"makeup-menu-button/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,0CAA0C,mBAAO,CAAC,IAAqB;AACvE,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA,IAAI;AACJ;AACA,IAAI;AACJ,2CAA2C,gBAAgB;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA,+DAA+D;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,kDAAkD,WAAW;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;;;;;;;;;ACtSF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,6CAA6C,mBAAO,CAAC,IAAiB;AACtE,yCAAyC,mBAAO,CAAC,IAAa;AAC9D,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA,2CAA2C,oBAAoB,EAAE,KAAK;AACtE;AACA;AACA;AACA,wBAAwB,gBAAgB,QAAQ,WAAW;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sEAAsE,oBAAoB,EAAE,aAAa;AACzG;AACA;AACA;;;;;;;;;ACtKa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,IAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,6CAA6C,mBAAO,CAAC,IAAwB;AAC7E,gDAAgD,mBAAO,CAAC,IAA4B;AACpF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mEAAmE,UAAU;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;;;;;;;;AC9Ka;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,yCAAyC,mBAAO,CAAC,IAAoB;AACrE,0CAA0C,mBAAO,CAAC,IAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC,mCAAmC;;AAEnC,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;;ACjXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,cAAc;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACjBa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,gDAAgD,mBAAO,CAAC,IAA2B;AACnF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;UCvHA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,+CAA+C,mBAAO,CAAC,IAAoB;AAC3E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/menu-button.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/menu-button/menu-button.css?7300","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-expander/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-menu/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-prevent-scroll-keys/dist/cjs/index.js","webpack://root/./packages/ui/makeup-menu-button/node_modules/makeup-roving-tabindex/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-menu-button/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/menu-button/menu-button.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n  alwaysDoFocusManagement: false,\n  ariaControls: true,\n  autoCollapse: false,\n  collapseOnFocusOut: false,\n  collapseOnMouseOut: false,\n  collapseOnClickOut: false,\n  collapseOnHostReFocus: false,\n  contentSelector: \".expander__content\",\n  expandedClass: null,\n  expandOnClick: false,\n  expandOnFocus: false,\n  expandOnHover: false,\n  focusManagement: null,\n  hostSelector: \".expander__host\",\n  simulateSpacebarClick: false,\n  useAriaExpanded: true\n};\nfunction onHostKeyDown(e) {\n  if (e.keyCode === 13 || e.keyCode === 32) {\n    this._keyboardClickFlag = true;\n  }\n  // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here.\n  // careful! if host already triggers click events naturally, we end up with a \"double-click\".\n  if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) {\n    this.hostEl.click();\n  }\n}\nfunction onHostMouseDown() {\n  this._mouseClickFlag = true;\n}\nfunction onHostClick() {\n  this._expandWasKeyboardClickActivated = this._keyboardClickFlag;\n  this._expandWasMouseClickActivated = this._mouseClickFlag;\n  this._widgetHasKeyboardFocus = this._keyboardClickFlag;\n  this.expanded = !this.expanded;\n}\nfunction onHostFocus() {\n  this._expandWasFocusActivated = true;\n  this.expanded = true;\n}\n\n// NOTE: collapseOnHostReFocus cannot be used when expandOnFocus is true\nfunction onHostReFocus() {\n  if (this.expanded && this._widgetHasKeyboardFocus) {\n    this.expanded = false;\n  }\n}\nfunction onHostHover() {\n  clearTimeout(this._mouseLeft);\n  this._expandWasHoverActivated = true;\n  this.expanded = true;\n}\nfunction onFocusExit() {\n  this._widgetHasKeyboardFocus = false;\n  this.expanded = false;\n}\nfunction onMouseLeave() {\n  clearTimeout(this._mouseLeft);\n  this._mouseLeft = setTimeout(() => {\n    this.expanded = false;\n  }, 300);\n}\nfunction _onDocumentClick(e) {\n  if (this.el.contains(e.target) === false) {\n    this.expanded = false;\n  }\n}\nfunction _onDocumentTouchStart() {\n  this.documentClick = true;\n}\nfunction _onDocumentTouchMove() {\n  this.documentClick = false;\n}\nfunction _onDocumentTouchEnd(e) {\n  if (this.documentClick === true) {\n    this.documentClick = false;\n    if (this.el.contains(e.target) === false) {\n      this.expanded = false;\n    }\n  }\n}\nfunction manageFocus(focusManagement, contentEl) {\n  if (focusManagement === \"content\") {\n    contentEl.setAttribute(\"tabindex\", \"-1\");\n    contentEl.focus();\n  } else if (focusManagement === \"focusable\") {\n    (0, _makeupFocusables.default)(contentEl)[0]?.focus();\n  } else if (focusManagement === \"interactive\") {\n    (0, _makeupFocusables.default)(contentEl, true)[0]?.focus();\n  } else if (focusManagement !== null) {\n    const el = contentEl.querySelector(`#${focusManagement}`);\n    if (el) {\n      el.focus();\n    }\n  }\n}\nclass _default {\n  constructor(el, selectedOptions) {\n    this.options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = el;\n    this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el\n    this.contentEl = el.querySelector(this.options.contentSelector);\n    ExitEmitter.addFocusExit(this.el);\n    this._hostKeyDownListener = onHostKeyDown.bind(this);\n    this._hostMouseDownListener = onHostMouseDown.bind(this);\n    this._documentClickListener = _onDocumentClick.bind(this);\n    this._documentTouchStartListener = _onDocumentTouchStart.bind(this);\n    this._documentTouchMoveListener = _onDocumentTouchMove.bind(this);\n    this._documentTouchEndListener = _onDocumentTouchEnd.bind(this);\n    this._hostClickListener = onHostClick.bind(this);\n    this._hostFocusListener = onHostFocus.bind(this);\n    this._hostReFocusListener = onHostReFocus.bind(this);\n    this._hostHoverListener = onHostHover.bind(this);\n    this._focusExitListener = onFocusExit.bind(this);\n    this._mouseLeaveListener = onMouseLeave.bind(this);\n    if (this.options.useAriaExpanded === true) {\n      const initialAriaExpanded = this.hostEl.getAttribute(\"aria-expanded\");\n      this._expanded = initialAriaExpanded === \"true\";\n      if (initialAriaExpanded === null) {\n        this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n      }\n    } else {\n      this._expanded = false;\n    }\n    if (this.options.ariaControls === true) {\n      // ensure the widget has an id\n      (0, _makeupNextId.default)(this.el, \"expander\");\n      this.contentEl.id = this.contentEl.id || `${this.el.id}-content`;\n      this.hostEl.setAttribute(\"aria-controls\", this.contentEl.id);\n    }\n    this.expandOnClick = this.options.expandOnClick;\n    this.expandOnFocus = this.options.expandOnFocus;\n    this.expandOnHover = this.options.expandOnHover;\n    this.collapseOnHostReFocus = this.options.collapseOnHostReFocus;\n    if (this.options.autoCollapse === false) {\n      this.collapseOnClickOut = this.options.collapseOnClickOut;\n      this.collapseOnFocusOut = this.options.collapseOnFocusOut;\n      this.collapseOnMouseOut = this.options.collapseOnMouseOut;\n    }\n  }\n  set expandOnClick(bool) {\n    if (bool === true) {\n      this.hostEl.addEventListener(\"keydown\", this._hostKeyDownListener);\n      this.hostEl.addEventListener(\"mousedown\", this._hostMouseDownListener);\n      this.hostEl.addEventListener(\"click\", this._hostClickListener);\n      if (this.options.autoCollapse === true) {\n        this.collapseOnClickOut = true;\n        this.collapseOnFocusOut = true;\n      }\n    } else {\n      this.hostEl.removeEventListener(\"click\", this._hostClickListener);\n      this.hostEl.removeEventListener(\"mousedown\", this._hostMouseDownListener);\n      this.hostEl.removeEventListener(\"keydown\", this._hostKeyDownListener);\n    }\n  }\n  set expandOnFocus(bool) {\n    if (bool === true) {\n      this.hostEl.addEventListener(\"focus\", this._hostFocusListener);\n      if (this.options.autoCollapse === true) {\n        this.collapseOnClickOut = true;\n        this.collapseOnFocusOut = true;\n      }\n    } else {\n      this.hostEl.removeEventListener(\"focus\", this._hostFocusListener);\n    }\n  }\n  set collapseOnHostReFocus(bool) {\n    if (bool === true) {\n      this.hostEl.addEventListener(\"focus\", this._hostReFocusListener);\n    } else {\n      this.hostEl.removeEventListener(\"focus\", this._hostReFocusListener);\n    }\n  }\n  set expandOnHover(bool) {\n    if (bool === true) {\n      this.hostEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n      this.contentEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n      if (this.options.autoCollapse === true) {\n        this.collapseOnMouseOut = true;\n      }\n    } else {\n      this.hostEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n      this.contentEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n    }\n  }\n  set collapseOnClickOut(bool) {\n    if (bool === true) {\n      document.addEventListener(\"click\", this._documentClickListener);\n      document.addEventListener(\"touchstart\", this._documentTouchStartListener);\n      document.addEventListener(\"touchmove\", this._documentTouchMoveListener);\n      document.addEventListener(\"touchend\", this._documentTouchEndListener);\n    } else {\n      document.removeEventListener(\"click\", this._documentClickListener);\n      document.removeEventListener(\"touchstart\", this._documentTouchStartListener);\n      document.removeEventListener(\"touchmove\", this._documentTouchMoveListener);\n      document.removeEventListener(\"touchend\", this._documentTouchEndListener);\n    }\n  }\n  set collapseOnFocusOut(bool) {\n    if (bool === true) {\n      this.el.addEventListener(\"focusExit\", this._focusExitListener);\n    } else {\n      this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n    }\n  }\n  set collapseOnMouseOut(bool) {\n    if (bool === true) {\n      this.el.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n      this.contentEl.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n    } else {\n      this.el.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n      this.contentEl.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n    }\n  }\n  get expanded() {\n    return this._expanded;\n  }\n  set expanded(bool) {\n    if (bool === true && this.expanded === false) {\n      if (this.options.useAriaExpanded === true) {\n        this.hostEl.setAttribute(\"aria-expanded\", \"true\");\n      }\n      if (this.options.expandedClass) {\n        this.el.classList.add(this.options.expandedClass);\n      }\n      if (this._expandWasKeyboardClickActivated || this._expandWasMouseClickActivated && this.options.alwaysDoFocusManagement) {\n        manageFocus(this.options.focusManagement, this.contentEl);\n      }\n      this.el.dispatchEvent(new CustomEvent(\"expander-expand\", {\n        bubbles: true,\n        detail: this.contentEl\n      }));\n    }\n    if (bool === false && this.expanded === true) {\n      if (this.options.useAriaExpanded === true) {\n        this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n      }\n      if (this.options.expandedClass) {\n        this.el.classList.remove(this.options.expandedClass);\n      }\n      this.el.dispatchEvent(new CustomEvent(\"expander-collapse\", {\n        bubbles: true,\n        detail: this.contentEl\n      }));\n    }\n    this._expanded = bool;\n    this._expandWasKeyboardClickActivated = false;\n    this._expandWasMouseClickActivated = false;\n    this._expandWasFocusActivated = false;\n    this._expandWasHoverActivated = false;\n    this._keyboardClickFlag = false;\n    this._mouseClickFlag = false;\n  }\n  sleep() {\n    if (this._destroyed !== true) {\n      this.expandOnClick = false;\n      this.expandOnFocus = false;\n      this.expandOnHover = false;\n      this.collapseOnClickOut = false;\n      this.collapseOnFocusOut = false;\n      this.collapseOnMouseOut = false;\n      this.collapseOnHostReFocus = false;\n    }\n  }\n  destroy() {\n    this.sleep();\n    this._destroyed = true;\n    this._hostKeyDownListener = null;\n    this._hostMouseDownListener = null;\n    this._documentClickListener = null;\n    this._documentTouchStartListener = null;\n    this._documentTouchMoveListener = null;\n    this._documentTouchEndListener = null;\n    this._hostClickListener = null;\n    this._hostFocusListener = null;\n    this._hostReFocusListener = null;\n    this._hostHoverListener = null;\n    this._focusExitListener = null;\n    this._mouseLeaveListener = null;\n    this._widgetHasKeyboardFocus = null;\n  }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n  el.dispatchEvent(new CustomEvent(\"focusExit\", {\n    detail: {\n      fromElement,\n      toElement\n    },\n    bubbles: false // mirror the native mouseleave event\n  }));\n}\nfunction onDocumentFocusIn(e) {\n  const newFocusElement = e.target;\n  const targetIsDescendant = this.el.contains(newFocusElement);\n\n  // if focus has moved to a focusable descendant\n  if (targetIsDescendant === true) {\n    // set the target as the currently focussed element\n    this.currentFocusElement = newFocusElement;\n  } else {\n    // else focus has not gone to a focusable descendant\n    window.removeEventListener(\"blur\", this.onWindowBlurListener);\n    document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n    doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n    this.currentFocusElement = null;\n  }\n}\nfunction onWindowBlur() {\n  doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n  // listen for focus moving to anywhere in document\n  // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n  document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n  // listen for focus leaving the window\n  window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n  constructor(el) {\n    this.el = el;\n    this.currentFocusElement = null;\n    this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n    this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n    this.onWindowBlurListener = onWindowBlur.bind(this);\n    this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n  }\n  removeEventListeners() {\n    window.removeEventListener(\"blur\", this.onWindowBlurListener);\n    document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n    this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n  }\n}\nfunction addFocusExit(el) {\n  let exitEmitter = null;\n  (0, _makeupNextId.default)(el);\n  if (!focusExitEmitters[el.id]) {\n    exitEmitter = new FocusExitEmitter(el);\n    focusExitEmitters[el.id] = exitEmitter;\n  }\n  return exitEmitter;\n}\nfunction removeFocusExit(el) {\n  const exitEmitter = focusExitEmitters[el.id];\n  if (exitEmitter) {\n    exitEmitter.removeEventListeners();\n    delete focusExitEmitters[el.id];\n  }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n  let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n  let callback = arguments.length > 2 ? arguments[2] : undefined;\n  if (callback) {\n    const request = requestAnimationFrame(() => {\n      callback(getFocusables(el, keyboardOnly));\n    });\n    return () => {\n      cancelAnimationFrame(request);\n    };\n  }\n  return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n  let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n  let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n  // filter out elements with display: none or nested in a display: none parent\n  focusableEls = focusableEls.filter(function (focusableEl) {\n    return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n  });\n  if (keyboardOnly === true) {\n    focusableEls = focusableEls.filter(function (focusableEl) {\n      return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n    });\n  }\n  return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n  return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n  const letters = \"abcdefghijklmnopqrstuvwxyz\";\n  const digits = \"0123456789\";\n  const allChars = letters + digits;\n\n  // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n  let portion = letters[randomNumber(25)];\n\n  // start iterating from 1, as we already have our first char\n  for (let i = 1; i < size; i++) {\n    portion += allChars[randomNumber(35)];\n  }\n  return portion;\n}\nfunction _default(el) {\n  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n  const separator = prefix === \"\" ? \"\" : \"-\";\n\n  // join first prefix with random portion to create key\n  const key = `${prefix}${separator}${randomPortion}`;\n\n  // initialise key in sequence map if necessary\n  sequenceMap[key] = sequenceMap[key] || 0;\n  if (!el.id) {\n    el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n  }\n  return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\nvar _makeupExpander = _interopRequireDefault(require(\"makeup-expander\"));\nvar _makeupMenu = _interopRequireDefault(require(\"makeup-menu\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n  customElementMode: false,\n  expandedClass: \"menu-button--expanded\",\n  menuSelector: \".menu-button__menu\",\n  buttonTextSelector: `.btn__text`,\n  buttonValueType: \"text\",\n  // [\"text\", \"icon\", \"both\"],\n  menuItemIconSelector: \".icon\",\n  menuItemButtonAriaLabelSelector: null\n};\nclass _default {\n  constructor(widgetEl, selectedOptions) {\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = widgetEl;\n    this._buttonEl = widgetEl.querySelector(\"button\");\n    this._buttonEl.setAttribute(\"aria-haspopup\", \"true\");\n    this.menu = new _makeupMenu.default(widgetEl.querySelector(this._options.menuSelector), {\n      autoReset: \"interactive\"\n    });\n    this._buttonPrefix = this._buttonEl.dataset?.makeupMenuButtonPrefix;\n    this._buttonTextEl = this._buttonEl.querySelector(this._options.buttonTextSelector);\n    this._expander = new _makeupExpander.default(widgetEl, {\n      alwaysDoFocusManagement: true,\n      autoCollapse: true,\n      collapseOnHostReFocus: true,\n      contentSelector: this._options.menuSelector,\n      expandedClass: this._options.expandedClass,\n      expandOnClick: true,\n      focusManagement: \"focusable\",\n      hostSelector: \"button\"\n    });\n    this._onButtonFirstClickListener = _onButtonFirstClick.bind(this);\n    this._onMenuKeyDownListener = _onMenuKeyDown.bind(this);\n    this._onMenuItemSelectListener = _onMenuItemSelect.bind(this);\n    this._onMenuItemChangeListener = _onMenuItemChange.bind(this);\n    this._onMutationListener = _onMutation.bind(this);\n    this.el.classList.add(\"menu-button--js\");\n    if (!this._options.customElementMode) {\n      this._mutationObserver = new MutationObserver(this._onMutationListener);\n      this._observeMutations();\n      this._observeEvents();\n    }\n  }\n  _observeMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.observe(this.el, {\n        attributeFilter: [\"aria-expanded\", \"disabled\"],\n        attributes: true,\n        childList: false,\n        subtree: false\n      });\n    }\n  }\n  _unobserveMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.disconnect();\n    }\n  }\n  _observeEvents() {\n    if (this._destroyed !== true) {\n      this._buttonEl.addEventListener(\"click\", this._onButtonFirstClickListener, {\n        once: true\n      });\n      this.menu.el.addEventListener(\"keydown\", this._onMenuKeyDownListener);\n      this.menu.el.addEventListener(\"makeup-menu-select\", this._onMenuItemSelectListener);\n      this.menu.el.addEventListener(\"makeup-menu-change\", this._onMenuItemChangeListener);\n    }\n  }\n  _unobserveEvents() {\n    this._buttonEl.removeEventListener(\"click\", this._onButtonFirstClickListener);\n    this.menu.el.removeEventListener(\"keydown\", this._onMenuKeyDownListener);\n    this.menu.el.removeEventListener(\"makeup-menu-select\", this._onMenuItemSelectListener);\n    this.menu.el.removeEventListener(\"makeup-menu-change\", this._onMenuItemChangeListener);\n  }\n\n  // TODO: Move this logic to Expander as an option callback that runs after collapse.\n  _collapseMenuAfterTimeout() {\n    setTimeout(() => {\n      this._expander.expanded = false;\n      this._buttonEl.focus();\n    }, 150);\n  }\n  destroy() {\n    this._destroyed = true;\n    this._unobserveMutations();\n    this._unobserveEvents();\n    this._onButtonFirstClickListener = null;\n    this._onMenuKeyDownListener = null;\n    this._onMenuItemSelectListener = null;\n    this._onMenuItemChangeListener = null;\n    this._onMutationListener = null;\n  }\n}\nexports.default = _default;\nfunction _onMutation(mutationsList) {\n  for (const mutation of mutationsList) {\n    if (mutation.type === \"attributes\") {\n      this.el.dispatchEvent(new CustomEvent(\"makeup-menu-button-mutation\", {\n        detail: {\n          attributeName: mutation.attributeName\n        }\n      }));\n    }\n  }\n}\nfunction _onButtonFirstClick() {\n  this.menu.el.hidden = false;\n}\nfunction _onMenuKeyDown(e) {\n  if (e.keyCode === 27) {\n    this._expander.expanded = false;\n    this._buttonEl.focus();\n  }\n}\nfunction _onMenuItemSelect(e) {\n  this._collapseMenuAfterTimeout();\n  this.el.dispatchEvent(new CustomEvent(\"makeup-menu-button-select\", {\n    detail: e.detail\n  }));\n}\nfunction _onMenuItemChange(e) {\n  const {\n    el\n  } = e.detail;\n  this._collapseMenuAfterTimeout();\n  this.el.dispatchEvent(new CustomEvent(\"makeup-menu-button-change\", {\n    detail: e.detail\n  }));\n  if (el.getAttribute(\"role\") !== \"menuitemradio\") {\n    return;\n  }\n  const {\n    menuItemIconSelector,\n    menuItemButtonAriaLabelSelector,\n    buttonValueType\n  } = this._options;\n  const icon = el.querySelector(menuItemIconSelector).cloneNode(true);\n  const text = el.innerText.trim();\n  let btnContent = this._buttonPrefix ? `${this._buttonPrefix} ${text}` : text;\n  if (icon) {\n    switch (buttonValueType) {\n      case \"both\":\n        btnContent = `${icon.outerHTML} <span>${btnContent}</span>`;\n        break;\n      case \"icon\":\n        this._buttonEl.setAttribute(\"aria-label\", btnContent);\n        btnContent = icon.outerHTML;\n        break;\n      default:\n        break;\n    }\n  }\n  if (menuItemButtonAriaLabelSelector) {\n    const selectorText = el.querySelector(menuItemButtonAriaLabelSelector)?.innerText.trim();\n    this._buttonEl.setAttribute(\"aria-label\", this._buttonPrefix ? `${this._buttonPrefix} ${selectorText}` : selectorText);\n  }\n  this._buttonTextEl.innerHTML = btnContent;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n  el.dispatchEvent(new CustomEvent(\"focusExit\", {\n    detail: {\n      fromElement,\n      toElement\n    },\n    bubbles: false // mirror the native mouseleave event\n  }));\n}\nfunction onDocumentFocusIn(e) {\n  const newFocusElement = e.target;\n  const targetIsDescendant = this.el.contains(newFocusElement);\n\n  // if focus has moved to a focusable descendant\n  if (targetIsDescendant === true) {\n    // set the target as the currently focussed element\n    this.currentFocusElement = newFocusElement;\n  } else {\n    // else focus has not gone to a focusable descendant\n    window.removeEventListener(\"blur\", this.onWindowBlurListener);\n    document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n    doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n    this.currentFocusElement = null;\n  }\n}\nfunction onWindowBlur() {\n  doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n  // listen for focus moving to anywhere in document\n  // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n  document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n  // listen for focus leaving the window\n  window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n  constructor(el) {\n    this.el = el;\n    this.currentFocusElement = null;\n    this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n    this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n    this.onWindowBlurListener = onWindowBlur.bind(this);\n    this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n  }\n  removeEventListeners() {\n    window.removeEventListener(\"blur\", this.onWindowBlurListener);\n    document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n    this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n  }\n}\nfunction addFocusExit(el) {\n  let exitEmitter = null;\n  (0, _makeupNextId.default)(el);\n  if (!focusExitEmitters[el.id]) {\n    exitEmitter = new FocusExitEmitter(el);\n    focusExitEmitters[el.id] = exitEmitter;\n  }\n  return exitEmitter;\n}\nfunction removeFocusExit(el) {\n  const exitEmitter = focusExitEmitters[el.id];\n  if (exitEmitter) {\n    exitEmitter.removeEventListeners();\n    delete focusExitEmitters[el.id];\n  }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n  return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n  if (!evt.shiftKey) {\n    const key = evt.key;\n    switch (key) {\n      case \"Enter\":\n      case \"Escape\":\n      case \"PageUp\":\n      case \"PageDown\":\n      case \"End\":\n      case \"Home\":\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n          detail: evt,\n          bubbles: true\n        }));\n        break;\n      case \" \":\n        el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n          detail: evt,\n          bubbles: true\n        }));\n        break;\n      default:\n        return;\n    }\n  }\n}\nfunction onKeyDown(e) {\n  onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n  onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n  el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n  el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n  el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n  el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n  addKeyDown(el);\n  addKeyUp(el);\n}\nfunction remove(el) {\n  removeKeyDown(el);\n  removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\nvar RovingTabIndex = _interopRequireWildcard(require(\"makeup-roving-tabindex\"));\nvar PreventScrollKeys = _interopRequireWildcard(require(\"makeup-prevent-scroll-keys\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n  customElementMode: false,\n  autoInit: \"interactive\",\n  autoReset: \"interactive\"\n};\nclass _default {\n  constructor(widgetEl, selectedOptions) {\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = widgetEl;\n    this._rovingTabIndex = RovingTabIndex.createLinear(this.el, \"[role^=menuitem]\", {\n      autoInit: this._options.autoInit,\n      autoReset: this._options.autoReset\n    });\n    PreventScrollKeys.add(this.el);\n    this._onKeyDownListener = _onKeyDown.bind(this);\n    this._onClickListener = _onClick.bind(this);\n    this._onMutationListener = _onMutation.bind(this);\n    this.el.classList.add(\"menu--js\");\n    if (!this._options.customElementMode) {\n      this._mutationObserver = new MutationObserver(this._onMutationListener);\n      this._observeMutations();\n      this._observeEvents();\n    }\n  }\n  select(index) {\n    this._unobserveMutations();\n    const el = this.items[index];\n    switch (el.getAttribute(\"role\")) {\n      case \"menuitemcheckbox\":\n        _selectMenuItemCheckbox(this.el, el);\n        break;\n      case \"menuitemradio\":\n        _selectMenuItemRadio(this.el, el);\n        break;\n      default:\n        _selectMenuItem(this.el, el);\n        break;\n    }\n    this._observeMutations();\n  }\n  get items() {\n    return this._rovingTabIndex.items;\n  }\n  get radioGroupNames() {\n    const els = [...this.el.querySelectorAll(\"[role=menuitemradio][data-makeup-group]\")];\n    const groupNames = [...new Set(els.map(el => el.dataset.makeupGroup))];\n    return groupNames;\n  }\n  get checkboxGroupNames() {\n    const els = [...this.el.querySelectorAll(\"[role=menuitemcheckbox][data-makeup-group]\")];\n    const groupNames = [...new Set(els.map(el => el.dataset.makeupGroup))];\n    return groupNames;\n  }\n  _observeMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.observe(this.el, {\n        attributeFilter: [\"aria-checked\", \"aria-disabled\"],\n        attributes: true,\n        childList: true,\n        subtree: true\n      });\n    }\n  }\n  _unobserveMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.disconnect();\n    }\n  }\n  _observeEvents() {\n    if (this._destroyed !== true) {\n      this.el.addEventListener(\"keydown\", this._onKeyDownListener);\n      this.el.addEventListener(\"click\", this._onClickListener);\n    }\n  }\n  _unobserveEvents() {\n    this.el.removeEventListener(\"keydown\", this._onKeyDownListener);\n    this.el.removeEventListener(\"click\", this._onClickListener);\n  }\n  destroy() {\n    this._destroyed = true;\n    this._unobserveMutations();\n    this._unobserveEvents();\n    this._onKeyDownListener = null;\n    this._onClickListener = null;\n    this._onMutationListener = null;\n  }\n}\nexports.default = _default;\nfunction _onMutation(mutationsList) {\n  for (const mutation of mutationsList) {\n    if (mutation.type === \"attributes\") {\n      this.el.dispatchEvent(new CustomEvent(\"makeup-menu-mutation\", {\n        detail: {\n          attributeName: mutation.attributeName\n        }\n      }));\n    }\n  }\n}\nfunction _onKeyDown(e) {\n  this._unobserveMutations();\n  if (e.keyCode === 13) {\n    e.preventDefault();\n  }\n  if (e.keyCode === 13 || e.keyCode === 32) {\n    this.select(Array.from(this.items).indexOf(e.target));\n  }\n  this._observeMutations();\n}\nfunction _onClick(e) {\n  // unlike the keyDown event, the click event target can be a child element of the menuitem\n  // e.g. <div role=\"menuitem\"><span>Item 1</span></div>\n  const menuItemEl = e.target.closest(\"[role^=menuitem]\");\n  const index = this.items.indexOf(menuItemEl);\n  if (index !== -1) {\n    this.select(index);\n  }\n}\nfunction _selectMenuItem(widgetEl, menuItemEl) {\n  widgetEl.dispatchEvent(new CustomEvent(\"makeup-menu-select\", {\n    detail: {\n      el: menuItemEl,\n      value: menuItemEl.innerText\n    }\n  }));\n}\nfunction _selectMenuItemCheckbox(widgetEl, menuItemEl) {\n  if (menuItemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n    const groupName = menuItemEl.dataset.makeupGroup;\n    menuItemEl.setAttribute(\"aria-checked\", menuItemEl.getAttribute(\"aria-checked\") === \"true\" ? \"false\" : \"true\");\n    widgetEl.dispatchEvent(new CustomEvent(\"makeup-menu-change\", {\n      detail: {\n        el: menuItemEl,\n        checked: menuItemEl.getAttribute(\"aria-checked\"),\n        group: groupName,\n        value: menuItemEl.innerText\n      }\n    }));\n  }\n}\nfunction _selectMenuItemRadio(widgetEl, menuItemEl) {\n  if (menuItemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n    const groupName = menuItemEl.dataset.makeupGroup;\n    const checkedEl = widgetEl.querySelector(`[data-makeup-group=${groupName}][aria-checked=true]`);\n    if (!checkedEl) {\n      menuItemEl.setAttribute(\"aria-checked\", \"true\");\n      widgetEl.dispatchEvent(new CustomEvent(\"makeup-menu-change\", {\n        detail: {\n          el: menuItemEl,\n          group: groupName,\n          value: menuItemEl.innerText\n        }\n      }));\n    } else if (checkedEl !== menuItemEl) {\n      checkedEl.setAttribute(\"aria-checked\", \"false\");\n      menuItemEl.setAttribute(\"aria-checked\", \"true\");\n      widgetEl.dispatchEvent(new CustomEvent(\"makeup-menu-change\", {\n        detail: {\n          el: menuItemEl,\n          group: groupName,\n          value: menuItemEl.innerText\n        }\n      }));\n    }\n  }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.createLinear = createLinear;\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n  axis: \"both\",\n  autoInit: \"interactive\",\n  autoReset: \"current\",\n  ignoreByDelegateSelector: null,\n  wrap: false\n};\nfunction isItemNavigable(el) {\n  return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n  return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n  return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n  return items.findIndex(item => isItemNavigable(item));\n}\nfunction findLastNavigableIndex(items) {\n  // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n  return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n  return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n  return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n  return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n  return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n  let previousNavigableIndex = -1;\n  if (index === null || atStart(items, index)) {\n    if (wrap === true) {\n      previousNavigableIndex = findLastNavigableIndex(items);\n    }\n  } else {\n    let i = index;\n    while (--i >= 0) {\n      if (isItemNavigable(items[i])) {\n        previousNavigableIndex = i;\n        break;\n      }\n    }\n  }\n  return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n  let nextNavigableIndex = -1;\n  if (index === null) {\n    nextNavigableIndex = findFirstNavigableIndex(items);\n  } else if (atEnd(items, index)) {\n    if (wrap === true) {\n      nextNavigableIndex = findFirstNavigableIndex(items);\n    }\n  } else {\n    let i = index;\n    while (++i < items.length) {\n      if (isItemNavigable(items[i])) {\n        nextNavigableIndex = i;\n        break;\n      }\n    }\n  }\n  return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n  let index = -1;\n  switch (typeOrNum) {\n    case \"none\":\n      index = null;\n      break;\n    case \"current\":\n      index = currentIndex;\n      break;\n    case \"interactive\":\n      index = findFirstNavigableIndex(items);\n      break;\n    case \"ariaChecked\":\n      index = findFirstNavigableAriaCheckedIndex(items);\n      break;\n    case \"ariaSelected\":\n      index = findFirstNavigableAriaSelectedIndex(items);\n      break;\n    case \"ariaSelectedOrInteractive\":\n      index = findFirstNavigableAriaSelectedIndex(items);\n      index = index === -1 ? findFirstNavigableIndex(items) : index;\n      break;\n    default:\n      index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n  }\n  return index;\n}\nfunction atStart(items, index) {\n  return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n  return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n  // todo: update KeyEmitter to deal with ignored items?\n  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n    this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n  }\n}\nfunction onKeyNext(e) {\n  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n  // todo: update KeyEmitter to deal with ignored items?\n  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n    this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n  }\n}\nfunction onClick(e) {\n  const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n  if (isIndexNavigable(this.items, itemIndex)) {\n    this.index = itemIndex;\n  }\n}\nfunction onKeyHome(e) {\n  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n  // todo: update KeyEmitter to deal with ignored items?\n  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n    this.index = findFirstNavigableIndex(this.items);\n  }\n}\nfunction onKeyEnd(e) {\n  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n  // todo: update KeyEmitter to deal with ignored items?\n  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n    this.index = findLastNavigableIndex(this.items);\n  }\n}\nfunction onFocusExit() {\n  if (this.options.autoReset !== null) {\n    this.reset();\n  }\n}\nfunction onMutation(e) {\n  const fromIndex = this.index;\n  let toIndex = this.index;\n  // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n  const {\n    addedNodes,\n    attributeName,\n    removedNodes,\n    target,\n    type\n  } = e[0];\n  if (type === \"attributes\") {\n    if (target === this.currentItem) {\n      if (attributeName === \"aria-disabled\") {\n        // current item was disabled - keep it as current index (until a keyboard navigation happens)\n        toIndex = this.index;\n      } else if (attributeName === \"hidden\") {\n        // current item was hidden and focus is lost - reset index to first interactive element\n        toIndex = findFirstNavigableIndex(this.items);\n      }\n    } else {\n      toIndex = this.index;\n    }\n  } else if (type === \"childList\") {\n    if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n      // current item was removed and focus is lost - reset index to first interactive element\n      toIndex = findFirstNavigableIndex(this.items);\n    } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n      // nodes were added and/or removed - keep current item and resync its index\n      toIndex = this.indexOf(this._cachedElement);\n    }\n  }\n  this._index = toIndex;\n  this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n    bubbles: false,\n    detail: {\n      fromIndex,\n      toIndex\n    }\n  }));\n}\nclass NavigationModel {\n  /**\n   * @param {HTMLElement} el\n   * @param {string} itemSelector\n   * @param {typeof defaultOptions} selectedOptions\n   */\n  constructor(el, itemSelector, selectedOptions) {\n    /** @member {typeof defaultOptions} */\n    this.options = Object.assign({}, defaultOptions, selectedOptions);\n\n    /** @member {HTMLElement} */\n    this._el = el;\n\n    /** @member {string} */\n    this._itemSelector = itemSelector;\n  }\n}\nclass LinearNavigationModel extends NavigationModel {\n  /**\n   * @param {HTMLElement} el\n   * @param {string} itemSelector\n   * @param {typeof defaultOptions} selectedOptions\n   */\n  constructor(el, itemSelector, selectedOptions) {\n    super(el, itemSelector, selectedOptions);\n    const fromIndex = this._index;\n    const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n    // do not use setter as it will trigger a change event\n    this._index = toIndex;\n\n    // always keep an element reference to the last item (for use in mutation observer)\n    // todo: convert index to Tuple to store last/current values instead?\n    this._cachedElement = this.items[toIndex];\n    this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n      bubbles: false,\n      detail: {\n        firstInteractiveIndex: this.firstNavigableIndex,\n        fromIndex,\n        items: this.items,\n        toIndex\n      }\n    }));\n  }\n  get currentItem() {\n    return this.items[this.index];\n  }\n\n  // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n  get items() {\n    return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n  }\n  get index() {\n    return this._index;\n  }\n\n  /**\n   * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n   */\n  set index(toIndex) {\n    if (toIndex === this.index) {\n      return;\n    } else if (!isIndexNavigable(this.items, toIndex)) {\n      // no-op. throw exception?\n    } else {\n      const fromIndex = this.index;\n      // update cached element reference (for use in mutation observer if DOM node gets removed)\n      this._cachedElement = this.items[toIndex];\n      this._index = toIndex;\n      this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n        bubbles: false,\n        detail: {\n          fromIndex,\n          toIndex\n        }\n      }));\n    }\n  }\n  indexOf(element) {\n    return this.items.indexOf(element);\n  }\n  reset() {\n    const fromIndex = this.index;\n    const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n    if (toIndex !== fromIndex) {\n      // do not use setter as it will trigger a navigationModelChange event\n      this._index = toIndex;\n      this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n        bubbles: false,\n        detail: {\n          fromIndex,\n          toIndex\n        }\n      }));\n    }\n  }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n    constructor(el, rowSelector, colSelector) {\n        super();\n        this._coords = null;\n    }\n}\n*/\n\nclass NavigationEmitter {\n  /**\n   * @param {HTMLElement} el\n   * @param {LinearNavigationModel} model\n   */\n  constructor(el, model) {\n    this.model = model;\n    this.el = el;\n    this._keyPrevListener = onKeyPrev.bind(model);\n    this._keyNextListener = onKeyNext.bind(model);\n    this._keyHomeListener = onKeyHome.bind(model);\n    this._keyEndListener = onKeyEnd.bind(model);\n    this._clickListener = onClick.bind(model);\n    this._focusExitListener = onFocusExit.bind(model);\n    this._observer = new MutationObserver(onMutation.bind(model));\n    KeyEmitter.addKeyDown(this.el);\n    ExitEmitter.addFocusExit(this.el);\n    const axis = model.options.axis;\n    if (axis === \"both\" || axis === \"x\") {\n      this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n      this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n    }\n    if (axis === \"both\" || axis === \"y\") {\n      this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n      this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n    }\n    this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n    this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n    this.el.addEventListener(\"click\", this._clickListener);\n    this.el.addEventListener(\"focusExit\", this._focusExitListener);\n    this._observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n      attributeFilter: [\"aria-disabled\", \"hidden\"],\n      attributes: true,\n      attributeOldValue: true\n    });\n  }\n  destroy() {\n    KeyEmitter.removeKeyDown(this.el);\n    ExitEmitter.removeFocusExit(this.el);\n    this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n    this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n    this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n    this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n    this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n    this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n    this.el.removeEventListener(\"click\", this._clickListener);\n    this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n    this._observer.disconnect();\n  }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n  const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n  return new NavigationEmitter(el, model);\n}\n\n/*\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n    return null;\n}\n*/\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n  return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n  const letters = \"abcdefghijklmnopqrstuvwxyz\";\n  const digits = \"0123456789\";\n  const allChars = letters + digits;\n\n  // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n  let portion = letters[randomNumber(25)];\n\n  // start iterating from 1, as we already have our first char\n  for (let i = 1; i < size; i++) {\n    portion += allChars[randomNumber(35)];\n  }\n  return portion;\n}\nfunction _default(el) {\n  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n  const separator = prefix === \"\" ? \"\" : \"-\";\n\n  // join first prefix with random portion to create key\n  const key = `${prefix}${separator}${randomPortion}`;\n\n  // initialise key in sequence map if necessary\n  sequenceMap[key] = sequenceMap[key] || 0;\n  if (!el.id) {\n    el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n  }\n  return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.add = add;\nexports.remove = remove;\nfunction onKeyDown(e) {\n  if (e.keyCode >= 32 && e.keyCode <= 40) {\n    e.preventDefault();\n  }\n}\nfunction add(el) {\n  el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction remove(el) {\n  el.removeEventListener(\"keydown\", onKeyDown);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.createLinear = createLinear;\nvar NavigationEmitter = _interopRequireWildcard(require(\"makeup-navigation-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n  autoInit: \"interactive\",\n  autoReset: \"current\",\n  wrap: false,\n  axis: \"both\"\n};\nfunction refreshTabindex(items, focusIndex) {\n  items.forEach(function (el, i) {\n    el.setAttribute(\"tabindex\", i === focusIndex ? \"0\" : \"-1\");\n  });\n}\nfunction onModelInit(e) {\n  refreshTabindex(e.detail.items, e.detail.toIndex);\n  this._el.dispatchEvent(new CustomEvent(\"rovingTabindexInit\", {\n    detail: e.detail\n  }));\n}\nfunction onModelChange(e) {\n  const items = this.items;\n  const fromItem = items[e.detail.fromIndex];\n  const toItem = items[e.detail.toIndex];\n  if (fromItem) {\n    fromItem.setAttribute(\"tabindex\", \"-1\");\n  }\n  if (toItem) {\n    toItem.setAttribute(\"tabindex\", \"0\");\n    toItem.focus();\n  }\n  this._el.dispatchEvent(new CustomEvent(\"rovingTabindexChange\", {\n    detail: e.detail\n  }));\n}\nfunction onModelReset(e) {\n  refreshTabindex(this.items, e.detail.toIndex);\n  this._el.dispatchEvent(new CustomEvent(\"rovingTabindexReset\", {\n    detail: e.detail\n  }));\n}\nfunction onModelMutation(e) {\n  refreshTabindex(this.items, e.detail.toIndex);\n  this._el.dispatchEvent(new CustomEvent(\"rovingTabindexMutation\", {\n    detail: e.detail\n  }));\n}\nclass RovingTabindex {\n  constructor(el) {\n    this._el = el;\n    this._onMutationListener = onModelMutation.bind(this);\n    this._onChangeListener = onModelChange.bind(this);\n    this._onInitListener = onModelInit.bind(this);\n    this._onResetListener = onModelReset.bind(this);\n    this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n    this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n    this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n    this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n  }\n  destroy() {\n    this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n    this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n    this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n    this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n  }\n}\nclass LinearRovingTabindex extends RovingTabindex {\n  constructor(el, itemSelector, selectedOptions) {\n    super(el);\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this._itemSelector = itemSelector;\n\n    // todo: options.index is deprecated. Remove support in future release.\n    this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {\n      autoInit: this._options.index !== undefined ? this._options.index : this._options.autoInit,\n      autoReset: this._options.autoReset,\n      wrap: this._options.wrap,\n      axis: this._options.axis\n    });\n  }\n  get index() {\n    return this._navigationEmitter.model.index;\n  }\n  set index(newIndex) {\n    this._navigationEmitter.model.index = newIndex;\n  }\n  set wrap(newWrap) {\n    this._navigationEmitter.model.options.wrap = newWrap;\n  }\n  get currentItem() {\n    return this._navigationEmitter.model.currentItem;\n  }\n  get items() {\n    return this._navigationEmitter.model.items;\n  }\n  reset() {\n    this._navigationEmitter.model.reset();\n  }\n  destroy() {\n    super.destroy();\n    this._navigationEmitter.destroy();\n  }\n}\n\n/*\nclass GridRovingTabindex extends RovingTabindex {\n    constructor(el, rowSelector, cellSelector, selectedOptions) {\n        super(el);\n    }\n}\n*/\n\nfunction createLinear(el, itemSelector, selectedOptions) {\n  return new LinearRovingTabindex(el, itemSelector, selectedOptions);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/menu-button\");\nvar _makeupMenuButton = _interopRequireDefault(require(\"makeup-menu-button\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const MenuButton = require('makeup-menu-button').default;\n\n// IMPORT\n\nwindow.onload = function () {\n  document.querySelectorAll(\".menu-button\").forEach(function (el, i) {\n    const hasCustomLabel = el.classList.contains(\"menu-button-with-icon-customText\");\n    const hasIconText = el.classList.contains(\"menu-button-with-iconText\");\n    const hasIcon = el.classList.contains(\"menu-button-with-icon\");\n    let buttonValueType;\n    if (hasIconText) {\n      buttonValueType = \"both\";\n    } else if (hasIcon || hasCustomLabel) {\n      buttonValueType = \"icon\";\n    } else {\n      buttonValueType = \"text\";\n    }\n    const menuItemButtonAriaLabelSelector = hasCustomLabel ? \".menu-button__item-value span\" : null;\n    const widget = new _makeupMenuButton.default(el, {\n      buttonValueType,\n      menuItemButtonAriaLabelSelector\n    });\n    widget.el.addEventListener(\"makeup-menu-button-select\", e => console.log(e.type, e.detail));\n    widget.el.addEventListener(\"makeup-menu-button-change\", e => console.log(e.type, e.detail));\n    widget.el.addEventListener(\"makeup-menu-button-mutation\", e => console.log(e.type, e.detail));\n  });\n};"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/packages/ui/makeup-menu-button/dist/cjs/index.js b/packages/ui/makeup-menu-button/dist/cjs/index.js
index ac9efc0e..24674119 100644
--- a/packages/ui/makeup-menu-button/dist/cjs/index.js
+++ b/packages/ui/makeup-menu-button/dist/cjs/index.js
@@ -41,6 +41,7 @@ class _default {
     this._onButtonFirstClickListener = _onButtonFirstClick.bind(this);
     this._onMenuKeyDownListener = _onMenuKeyDown.bind(this);
     this._onMenuItemSelectListener = _onMenuItemSelect.bind(this);
+    this._onMenuItemChangeListener = _onMenuItemChange.bind(this);
     this._onMutationListener = _onMutation.bind(this);
     this.el.classList.add("menu-button--js");
     if (!this._options.customElementMode) {
@@ -71,14 +72,22 @@ class _default {
       });
       this.menu.el.addEventListener("keydown", this._onMenuKeyDownListener);
       this.menu.el.addEventListener("makeup-menu-select", this._onMenuItemSelectListener);
-      this.menu.el.addEventListener("makeup-menu-change", this._onMenuItemSelectListener);
+      this.menu.el.addEventListener("makeup-menu-change", this._onMenuItemChangeListener);
     }
   }
   _unobserveEvents() {
     this._buttonEl.removeEventListener("click", this._onButtonFirstClickListener);
     this.menu.el.removeEventListener("keydown", this._onMenuKeyDownListener);
     this.menu.el.removeEventListener("makeup-menu-select", this._onMenuItemSelectListener);
-    this.menu.el.removeEventListener("makeup-menu-change", this._onMenuItemSelectListener);
+    this.menu.el.removeEventListener("makeup-menu-change", this._onMenuItemChangeListener);
+  }
+
+  // TODO: Move this logic to Expander as an option callback that runs after collapse.
+  _collapseMenuAfterTimeout() {
+    setTimeout(() => {
+      this._expander.expanded = false;
+      this._buttonEl.focus();
+    }, 150);
   }
   destroy() {
     this._destroyed = true;
@@ -87,6 +96,7 @@ class _default {
     this._onButtonFirstClickListener = null;
     this._onMenuKeyDownListener = null;
     this._onMenuItemSelectListener = null;
+    this._onMenuItemChangeListener = null;
     this._onMutationListener = null;
   }
 }
@@ -112,14 +122,19 @@ function _onMenuKeyDown(e) {
   }
 }
 function _onMenuItemSelect(e) {
-  const widget = this;
+  this._collapseMenuAfterTimeout();
+  this.el.dispatchEvent(new CustomEvent("makeup-menu-button-select", {
+    detail: e.detail
+  }));
+}
+function _onMenuItemChange(e) {
   const {
     el
   } = e.detail;
-  setTimeout(function () {
-    widget._expander.expanded = false;
-    widget._buttonEl.focus();
-  }, 150);
+  this._collapseMenuAfterTimeout();
+  this.el.dispatchEvent(new CustomEvent("makeup-menu-button-change", {
+    detail: e.detail
+  }));
   if (el.getAttribute("role") !== "menuitemradio") {
     return;
   }
diff --git a/packages/ui/makeup-menu-button/dist/mjs/index.js b/packages/ui/makeup-menu-button/dist/mjs/index.js
index f63c9ae5..dea4d348 100644
--- a/packages/ui/makeup-menu-button/dist/mjs/index.js
+++ b/packages/ui/makeup-menu-button/dist/mjs/index.js
@@ -34,6 +34,7 @@ class index_default {
     this._onButtonFirstClickListener = _onButtonFirstClick.bind(this);
     this._onMenuKeyDownListener = _onMenuKeyDown.bind(this);
     this._onMenuItemSelectListener = _onMenuItemSelect.bind(this);
+    this._onMenuItemChangeListener = _onMenuItemChange.bind(this);
     this._onMutationListener = _onMutation.bind(this);
     this.el.classList.add("menu-button--js");
     if (!this._options.customElementMode) {
@@ -62,14 +63,21 @@ class index_default {
       this._buttonEl.addEventListener("click", this._onButtonFirstClickListener, { once: true });
       this.menu.el.addEventListener("keydown", this._onMenuKeyDownListener);
       this.menu.el.addEventListener("makeup-menu-select", this._onMenuItemSelectListener);
-      this.menu.el.addEventListener("makeup-menu-change", this._onMenuItemSelectListener);
+      this.menu.el.addEventListener("makeup-menu-change", this._onMenuItemChangeListener);
     }
   }
   _unobserveEvents() {
     this._buttonEl.removeEventListener("click", this._onButtonFirstClickListener);
     this.menu.el.removeEventListener("keydown", this._onMenuKeyDownListener);
     this.menu.el.removeEventListener("makeup-menu-select", this._onMenuItemSelectListener);
-    this.menu.el.removeEventListener("makeup-menu-change", this._onMenuItemSelectListener);
+    this.menu.el.removeEventListener("makeup-menu-change", this._onMenuItemChangeListener);
+  }
+  // TODO: Move this logic to Expander as an option callback that runs after collapse.
+  _collapseMenuAfterTimeout() {
+    setTimeout(() => {
+      this._expander.expanded = false;
+      this._buttonEl.focus();
+    }, 150);
   }
   destroy() {
     this._destroyed = true;
@@ -78,6 +86,7 @@ class index_default {
     this._onButtonFirstClickListener = null;
     this._onMenuKeyDownListener = null;
     this._onMenuItemSelectListener = null;
+    this._onMenuItemChangeListener = null;
     this._onMutationListener = null;
   }
 }
@@ -104,12 +113,21 @@ function _onMenuKeyDown(e) {
   }
 }
 function _onMenuItemSelect(e) {
-  const widget = this;
+  this._collapseMenuAfterTimeout();
+  this.el.dispatchEvent(
+    new CustomEvent("makeup-menu-button-select", {
+      detail: e.detail
+    })
+  );
+}
+function _onMenuItemChange(e) {
   const { el } = e.detail;
-  setTimeout(function() {
-    widget._expander.expanded = false;
-    widget._buttonEl.focus();
-  }, 150);
+  this._collapseMenuAfterTimeout();
+  this.el.dispatchEvent(
+    new CustomEvent("makeup-menu-button-change", {
+      detail: e.detail
+    })
+  );
   if (el.getAttribute("role") !== "menuitemradio") {
     return;
   }
diff --git a/packages/ui/makeup-menu-button/src/index.js b/packages/ui/makeup-menu-button/src/index.js
index 844a438a..89668c6c 100644
--- a/packages/ui/makeup-menu-button/src/index.js
+++ b/packages/ui/makeup-menu-button/src/index.js
@@ -37,6 +37,7 @@ export default class {
     this._onButtonFirstClickListener = _onButtonFirstClick.bind(this);
     this._onMenuKeyDownListener = _onMenuKeyDown.bind(this);
     this._onMenuItemSelectListener = _onMenuItemSelect.bind(this);
+    this._onMenuItemChangeListener = _onMenuItemChange.bind(this);
     this._onMutationListener = _onMutation.bind(this);
 
     this.el.classList.add("menu-button--js");
@@ -70,7 +71,7 @@ export default class {
       this._buttonEl.addEventListener("click", this._onButtonFirstClickListener, { once: true });
       this.menu.el.addEventListener("keydown", this._onMenuKeyDownListener);
       this.menu.el.addEventListener("makeup-menu-select", this._onMenuItemSelectListener);
-      this.menu.el.addEventListener("makeup-menu-change", this._onMenuItemSelectListener);
+      this.menu.el.addEventListener("makeup-menu-change", this._onMenuItemChangeListener);
     }
   }
 
@@ -78,7 +79,15 @@ export default class {
     this._buttonEl.removeEventListener("click", this._onButtonFirstClickListener);
     this.menu.el.removeEventListener("keydown", this._onMenuKeyDownListener);
     this.menu.el.removeEventListener("makeup-menu-select", this._onMenuItemSelectListener);
-    this.menu.el.removeEventListener("makeup-menu-change", this._onMenuItemSelectListener);
+    this.menu.el.removeEventListener("makeup-menu-change", this._onMenuItemChangeListener);
+  }
+
+  // TODO: Move this logic to Expander as an option callback that runs after collapse.
+  _collapseMenuAfterTimeout() {
+    setTimeout(() => {
+      this._expander.expanded = false;
+      this._buttonEl.focus();
+    }, 150);
   }
 
   destroy() {
@@ -90,6 +99,7 @@ export default class {
     this._onButtonFirstClickListener = null;
     this._onMenuKeyDownListener = null;
     this._onMenuItemSelectListener = null;
+    this._onMenuItemChangeListener = null;
     this._onMutationListener = null;
   }
 }
@@ -120,13 +130,25 @@ function _onMenuKeyDown(e) {
 }
 
 function _onMenuItemSelect(e) {
-  const widget = this;
+  this._collapseMenuAfterTimeout();
+
+  this.el.dispatchEvent(
+    new CustomEvent("makeup-menu-button-select", {
+      detail: e.detail,
+    }),
+  );
+}
+
+function _onMenuItemChange(e) {
   const { el } = e.detail;
 
-  setTimeout(function () {
-    widget._expander.expanded = false;
-    widget._buttonEl.focus();
-  }, 150);
+  this._collapseMenuAfterTimeout();
+
+  this.el.dispatchEvent(
+    new CustomEvent("makeup-menu-button-change", {
+      detail: e.detail,
+    }),
+  );
 
   if (el.getAttribute("role") !== "menuitemradio") {
     return;