From eb3eb020d9ac1d7208537f877b6026a76f310203 Mon Sep 17 00:00:00 2001
From: Goutham Ponnada <sponnada@ebay.com>
Date: Thu, 14 Mar 2024 12:32:04 -0700
Subject: [PATCH] feat(listbox-button): added custom aria-label selector (#148)

---
 docs/makeup-listbox-button/index.html         | 63 ++++++++++++++++++-
 docs/makeup-listbox-button/index.js           | 28 +++++++--
 docs/makeup-listbox-button/index.min.js       | 54 +++++++++++-----
 docs/makeup-listbox-button/index.min.js.map   |  2 +-
 .../makeup-listbox-button/dist/cjs/index.js   | 36 +++++++----
 .../makeup-listbox-button/dist/mjs/index.js   | 38 +++++++----
 packages/makeup-listbox-button/src/index.js   | 42 +++++++++----
 7 files changed, 202 insertions(+), 61 deletions(-)

diff --git a/docs/makeup-listbox-button/index.html b/docs/makeup-listbox-button/index.html
index d1d7dbe..e740da2 100644
--- a/docs/makeup-listbox-button/index.html
+++ b/docs/makeup-listbox-button/index.html
@@ -350,11 +350,65 @@ <h3>Unselected - with descripton</h3>
       <h3>With Icons</h3>
 
       <div class="listbox-button listbox-button-with-icon" data-makeup-auto-select="true">
-        <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox">
+        <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox" aria-label="Card Type: AMEX" data-listbox-button-prefix="Card Type: ">
           <span class="btn__cell">
             <span class="btn__text">
-              <svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30"
-                aria-label="Card Type: AMEX">
+              <svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
+                <use href="../icons.svg#icon-amex-18-colored"></use>
+              </svg>
+            </span>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="../icons.svg#icon-chevron-down-12"></use>
+            </svg>
+          </span>
+        </button>
+        <div class="listbox-button__listbox" hidden>
+          <div class="listbox-button__options" role="listbox">
+            <div class="listbox-button__option" role="option">
+              <span class="listbox-button__value">
+                <svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
+                  <use href="../icons.svg#icon-amex-18-colored"></use>
+                </svg>
+                <span>AMEX</span>
+              </span>
+              <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                <use href="../icons.svg#icon-tick-16"></use>
+              </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+              <span class="listbox-button__value">
+                <svg class="icon icon--visa-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
+                  <use href="../icons.svg#icon-visa-18-colored"></use>
+                </svg>
+                <span>VISA</span>
+              </span>
+              <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                <use href="../icons.svg#icon-tick-16"></use>
+              </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+              <span class="listbox-button__value">
+                <svg class="icon icon--mastercard-18-colored" focusable="false" height="18" width="30"
+                  aria-hidden="true">
+                  <use href="../icons.svg#icon-mastercard-18-colored"></use>
+                </svg>
+                <span>Mastercard</span>
+              </span>
+              <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                <use href="../icons.svg#icon-tick-16"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h3>With Icons & custom aria-label</h3>
+
+      <div class="listbox-button listbox-button-with-icon-label" data-makeup-auto-select="true">
+        <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox" aria-label="Card Type: AMEX" data-listbox-button-prefix="Card Type: ">
+          <span class="btn__cell">
+            <span class="btn__text">
+              <svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
                 <use href="../icons.svg#icon-amex-18-colored"></use>
               </svg>
             </span>
@@ -371,6 +425,7 @@ <h3>With Icons</h3>
                   <use href="../icons.svg#icon-amex-18-colored"></use>
                 </svg>
                 <span>AMEX</span>
+                <span>Extra text</span>
               </span>
               <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
                 <use href="../icons.svg#icon-tick-16"></use>
@@ -382,6 +437,7 @@ <h3>With Icons</h3>
                   <use href="../icons.svg#icon-visa-18-colored"></use>
                 </svg>
                 <span>VISA</span>
+                <span>Extra text</span>
               </span>
               <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
                 <use href="../icons.svg#icon-tick-16"></use>
@@ -394,6 +450,7 @@ <h3>With Icons</h3>
                   <use href="../icons.svg#icon-mastercard-18-colored"></use>
                 </svg>
                 <span>Mastercard</span>
+                <span>Extra text</span>
               </span>
               <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
                 <use href="../icons.svg#icon-tick-16"></use>
diff --git a/docs/makeup-listbox-button/index.js b/docs/makeup-listbox-button/index.js
index e8b4838..88b7a86 100644
--- a/docs/makeup-listbox-button/index.js
+++ b/docs/makeup-listbox-button/index.js
@@ -16,15 +16,31 @@ const log = (e) => console.log(e.type, e.detail);
 
 window.onload = function () {
   document.querySelectorAll(".listbox-button").forEach(function (el, i) {
-    const buttonValueType = el.classList.contains("listbox-button-with-iconText")
-      ? "both"
-      : el.classList.contains("listbox-button-with-icon")
-        ? "icon"
-        : "text";
+    const hasCustomLabel = el.classList.contains("listbox-button-with-icon-label");
+    const hasIconText = el.classList.contains("listbox-button-with-iconText");
+    const hasIcon = el.classList.contains("listbox-button-with-icon");
+
+    let buttonValueType;
+    if (hasIconText) {
+      buttonValueType = "both";
+    } else if (hasIcon || hasCustomLabel) {
+      buttonValueType = "icon";
+    } else {
+      buttonValueType = "text";
+    }
+
+    const listboxOptionAriaLabelSelector = hasCustomLabel ? ".listbox-button__value span" : null;
+
     el.addEventListener("makeup-listbox-button-init", log);
     el.addEventListener("makeup-listbox-button-change", log);
     el.addEventListener("makeup-listbox-button-mutation", log);
 
-    widgets.push(new ListboxButton(el, { autoSelect: el.dataset.makeupAutoSelect === "false" ? false : true, buttonValueType }));
+    widgets.push(
+      new ListboxButton(el, {
+        autoSelect: el.dataset.makeupAutoSelect === "false" ? false : true,
+        buttonValueType,
+        listboxOptionAriaLabelSelector,
+      }),
+    );
   });
 };
diff --git a/docs/makeup-listbox-button/index.min.js b/docs/makeup-listbox-button/index.min.js
index e514b9a..cb047c6 100644
--- a/docs/makeup-listbox-button/index.min.js
+++ b/docs/makeup-listbox-button/index.min.js
@@ -1215,7 +1215,8 @@ const makeup_listbox_button_dist_mjs_defaultOptions = {
   valueSelector: ".listbox-button__value",
   buttonValueType: "text",
   // ["text", "icon", "both"],
-  iconSelector: ".icon"
+  listboxOptionIconSelector: ".icon",
+  listboxOptionAriaLabelSelector: null
 };
 class makeup_listbox_button_dist_mjs_src_default {
   constructor(widgetEl, selectedOptions) {
@@ -1329,29 +1330,42 @@ function _onListboxInit(e) {
 }
 function _onListboxChange(e) {
   const toValue = e.detail.optionValue;
-  const icon = e.detail.el.querySelector(this._options.iconSelector).cloneNode(true);
-  let content = this._buttonPrefix ? `${this._buttonPrefix} ${toValue}` : toValue;
+  const {
+    listboxOptionIconSelector,
+    listboxOptionAriaLabelSelector,
+    buttonValueType,
+    floatingLabelAnimate,
+    floatingLabelInline
+  } = this._options;
+  const icon = e.detail.el.querySelector(listboxOptionIconSelector).cloneNode(true);
+  let btnContent = this._buttonPrefix ? `${this._buttonPrefix}${toValue}` : toValue;
   if (icon) {
-    switch (this._options.buttonValueType) {
+    switch (buttonValueType) {
       case "both":
-        content = `${icon.outerHTML} <span>${content}</span>`;
+        btnContent = `${icon.outerHTML} <span>${btnContent}</span>`;
         break;
       case "icon":
-        icon.setAttribute("aria-label", content);
-        icon.removeAttribute("aria-hidden");
-        content = icon.outerHTML;
+        this._buttonEl.setAttribute("aria-label", btnContent);
+        btnContent = icon.outerHTML;
         break;
       default:
         break;
     }
   }
-  this._buttonLabelEl.innerHTML = content;
+  if (listboxOptionAriaLabelSelector) {
+    const selectorText = e.detail.el.querySelector(listboxOptionAriaLabelSelector)?.innerText.trim();
+    this._buttonEl.setAttribute(
+      "aria-label",
+      this._buttonPrefix ? `${this._buttonPrefix} ${selectorText}` : selectorText
+    );
+  }
+  this._buttonLabelEl.innerHTML = btnContent;
   if (this._buttonFloatingLabelEl) {
     if (toValue) {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelAnimate);
-      this._buttonFloatingLabelEl.classList.remove(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelAnimate);
+      this._buttonFloatingLabelEl.classList.remove(floatingLabelInline);
     } else {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelInline);
     }
   }
   this.el.dispatchEvent(new CustomEvent("makeup-listbox-button-change", { detail: e.detail }));
@@ -1453,13 +1467,25 @@ const widgets = [];
 const log = e => console.log(e.type, e.detail);
 window.onload = function () {
   document.querySelectorAll(".listbox-button").forEach(function (el, i) {
-    const buttonValueType = el.classList.contains("listbox-button-with-iconText") ? "both" : el.classList.contains("listbox-button-with-icon") ? "icon" : "text";
+    const hasCustomLabel = el.classList.contains("listbox-button-with-icon-label");
+    const hasIconText = el.classList.contains("listbox-button-with-iconText");
+    const hasIcon = el.classList.contains("listbox-button-with-icon");
+    let buttonValueType;
+    if (hasIconText) {
+      buttonValueType = "both";
+    } else if (hasIcon || hasCustomLabel) {
+      buttonValueType = "icon";
+    } else {
+      buttonValueType = "text";
+    }
+    const listboxOptionAriaLabelSelector = hasCustomLabel ? ".listbox-button__value span" : null;
     el.addEventListener("makeup-listbox-button-init", log);
     el.addEventListener("makeup-listbox-button-change", log);
     el.addEventListener("makeup-listbox-button-mutation", log);
     widgets.push(new _makeupListboxButton.default(el, {
       autoSelect: el.dataset.makeupAutoSelect === "false" ? false : true,
-      buttonValueType
+      buttonValueType,
+      listboxOptionAriaLabelSelector
     }));
   });
 };
diff --git a/docs/makeup-listbox-button/index.min.js.map b/docs/makeup-listbox-button/index.min.js.map
index 8512b2e..f494d53 100644
--- a/docs/makeup-listbox-button/index.min.js.map
+++ b/docs/makeup-listbox-button/index.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"makeup-listbox-button/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,GAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0C;;;;;;;;ACAlD,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,EAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;ACAxC,mBAAO,CAAC,IAA4B;;;;;;;;;;ACApC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA,SAAS,eAAW;AACpB;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;AACpD;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;AAGE;;;AC3BkC;AACpC;AACA;AACA;AACA,cAAc,wBAAwB;AACtC;AACA,GAAG;AACH;AACA;AACA;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,EAAE,eAAM;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIE;;;AC7DF;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,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AAGE;;;ACvCkC;AACe;AACR;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ,IAAI,WAAU;AACd,IAAI;AACJ,IAAI,WAAU;AACd,IAAI;AACJ,2CAA2C,gBAAgB;AAC3D;AACA;AACA;AACA;AACA;AACA,MAAM,oBAAW;AACjB;AACA,mCAAmC;AACnC;AACA;AACA;AACA,IAAI,YAAwB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,eAAM;AACZ,kDAAkD,WAAW;AAC7D;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;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,iEAAiE,uCAAuC;AACxG;AACA;AACA;AACA;AACA;AACA;AACA,mEAAmE,uCAAuC;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGE;;;ACrPF;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;AAQE;;;AClE+C;AACE;AACnD,MAAM,kBAAc;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,eAAW;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,wDAAwD;AAClE;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,cAAc;AACd,GAAG;AACH;AACA;AACA;AACA,mCAAmC,EAAE,kBAAc;AACnD;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,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B,eAAW;AACzC;AACA,IAAI,UAAqB;AACzB,IAAI,YAAwB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,IAAI,aAAwB;AAC5B,IAAI,eAA2B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGE;;;AC5R6D;AAC3B;AACpC,MAAM,uBAAc;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,iBAAiB;AAC3B;AACA;AACA;AACA;AACA;AACA,mEAAmE,kBAAkB;AACrF;AACA;AACA,UAAU,qBAAqB;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,kBAAkB;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA,oEAAoE,kBAAkB;AACtF;AACA;AACA,UAAU,UAAU;AACpB;AACA;AACA,IAAI,eAAM;AACV;AACA;AACA,MAAM;AACN;AACA;AACA,GAAG;AACH,uEAAuE,kBAAkB;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC,EAAE,uBAAc;AACpD;AACA;AACA;AACA,IAAI,eAAM;AACV;AACA;AACA;AACA,8BAA8B,YAA8B;AAC5D;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,MAAM,eAAM;AACZ,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,SAAS,gBAAY;AACrB;AACA;AAGE;;;ACpIF,SAAS,aAAS;AAClB;AACA;AACA;AACA;AACA,SAAS,OAAG;AACZ,iCAAiC,aAAS;AAC1C;AACA,SAAS,UAAM;AACf,oCAAoC,aAAS;AAC7C;AAIE;;;ACd2D;AACG;AAChE,MAAM,sCAAc;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,mCAAW;AACjB;AACA,oCAAoC,EAAE,sCAAc;AACpD;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,IAAI,OAAqB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,gBAA6B;AAC1D;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,qBAAqB;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AAGE;;;AC9LqC;AACF;AACrC,MAAM,6CAAc;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,0CAAW;AACjB;AACA,oCAAoC,EAAE,6CAAc;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,cAAW;AAC1C;AACA;AACA;AACA;AACA;AACA,uBAAuB,mCAAO;AAC9B;AACA;AACA;AACA;AACA,KAAK;AACL,yBAAyB,oBAAQ;AACjC;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,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mFAAmF,YAAY;AAC/F;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wEAAwE,kBAAkB;AAC1F;AACA;AACA;AACA;AACA,wCAAwC,oBAAoB,EAAE,QAAQ;AACtE;AACA;AACA;AACA,qBAAqB,gBAAgB,QAAQ,QAAQ;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA,0EAA0E,kBAAkB;AAC5F;AACA,SAAS,cAAW;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AAGE;;;;;;;UC1KF;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAa;AACrB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAoB;AAC5B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAA2B;AACnC,kDAAkD,mBAAO,CAAC,IAAsC;AAChG,uCAAuC,uCAAuC;AAC9E;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,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/listbox-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/./node_modules/@ebay/skin/utility.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/listbox-button/listbox-button.css?ea08","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/./node_modules/@ebay/skin/dist/utility/utility.css?6c3b","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-next-id/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-exit-emitter/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-focusables/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-expander/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-key-emitter/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-navigation-emitter/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-active-descendant/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-prevent-scroll-keys/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-listbox/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/dist/mjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/define property getters","webpack://root/webpack/runtime/hasOwnProperty shorthand","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/makeup-listbox-button/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/listbox-button/listbox-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","require('./dist/utility/utility.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 {};","// extracted by mini-css-extract-plugin\nexport {};","const 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  let portion = letters[randomNumber(25)];\n  for (let i = 1; i < size; i++) {\n    portion += allChars[randomNumber(35)];\n  }\n  return portion;\n}\nfunction src_default(el, prefix = defaultPrefix) {\n  const separator = prefix === \"\" ? \"\" : \"-\";\n  const key = `${prefix}${separator}${randomPortion}`;\n  sequenceMap[key] = sequenceMap[key] || 0;\n  if (!el.id) {\n    el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n  }\n  return el.id;\n}\nexport {\n  src_default as default\n};\n","import nextID from \"makeup-next-id\";\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n  el.dispatchEvent(new CustomEvent(\"focusExit\", {\n    detail: { fromElement, toElement },\n    bubbles: false\n  }));\n}\nfunction onDocumentFocusIn(e) {\n  const newFocusElement = e.target;\n  const targetIsDescendant = this.el.contains(newFocusElement);\n  if (targetIsDescendant === true) {\n    this.currentFocusElement = newFocusElement;\n  } else {\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, void 0);\n}\nfunction onWidgetFocusIn() {\n  document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\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  nextID(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}\nexport {\n  addFocusExit,\n  removeFocusExit\n};\n","const focusableElList = [\n  \"a[href]\",\n  \"area[href]\",\n  \"button:not([disabled])\",\n  \"embed\",\n  \"iframe\",\n  \"input:not([disabled])\",\n  \"object\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"*[tabindex]\",\n  \"*[contenteditable]\"\n];\nconst focusableElSelector = focusableElList.join();\nfunction src_default(el, keyboardOnly = false, callback) {\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, keyboardOnly = false) {\n  let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n  focusableEls = focusableEls.filter(function(focusableEl) {\n    return window.getComputedStyle(focusableEl).display !== \"none\";\n  });\n  if (keyboardOnly === true) {\n    focusableEls = focusableEls.filter(function(focusableEl) {\n      return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n    });\n  }\n  return focusableEls;\n}\nexport {\n  src_default as default\n};\n","import nextID from \"makeup-next-id\";\nimport * as ExitEmitter from \"makeup-exit-emitter\";\nimport focusables from \"makeup-focusables\";\nconst defaultOptions = {\n  alwaysDoFocusManagement: false,\n  ariaControls: true,\n  autoCollapse: false,\n  collapseOnFocusOut: false,\n  collapseOnMouseOut: false,\n  collapseOnClickOut: 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};\nfunction onHostKeyDown(e) {\n  if (e.keyCode === 13 || e.keyCode === 32) {\n    this._keyboardClickFlag = true;\n  }\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.expanded = !this.expanded;\n}\nfunction onHostFocus() {\n  this._expandWasFocusActivated = true;\n  this.expanded = true;\n}\nfunction onHostHover() {\n  clearTimeout(this._mouseLeft);\n  this._expandWasHoverActivated = true;\n  this.expanded = true;\n}\nfunction onFocusExit() {\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    focusables(contentEl)[0].focus();\n  } else if (focusManagement === \"interactive\") {\n    focusables(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 src_default {\n  constructor(el, selectedOptions) {\n    this.options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = el;\n    this.hostEl = el.querySelector(this.options.hostSelector);\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._hostHoverListener = onHostHover.bind(this);\n    this._focusExitListener = onFocusExit.bind(this);\n    this._mouseLeaveListener = onMouseLeave.bind(this);\n    if (this.hostEl.getAttribute(\"aria-expanded\") === null) {\n      this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n    }\n    if (this.options.ariaControls === true) {\n      nextID(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    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 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.hostEl.getAttribute(\"aria-expanded\") === \"true\";\n  }\n  set expanded(bool) {\n    if (bool === true && this.expanded === false) {\n      this.hostEl.setAttribute(\"aria-expanded\", \"true\");\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\", { bubbles: true, detail: this.contentEl }));\n    }\n    if (bool === false && this.expanded === true) {\n      this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n      if (this.options.expandedClass) {\n        this.el.classList.remove(this.options.expandedClass);\n      }\n      this.el.dispatchEvent(new CustomEvent(\"expander-collapse\", { bubbles: true, detail: this.contentEl }));\n    }\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    }\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._hostHoverListener = null;\n    this._focusExitListener = null;\n    this._mouseLeaveListener = null;\n  }\n}\nexport {\n  src_default as default\n};\n","function 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}\nexport {\n  add,\n  addKeyDown,\n  addKeyUp,\n  remove,\n  removeKeyDown,\n  removeKeyUp\n};\n","import * as KeyEmitter from \"makeup-key-emitter\";\nimport * as ExitEmitter from \"makeup-exit-emitter\";\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  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) {\n  } else if (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}\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  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  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  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  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  const { addedNodes, attributeName, removedNodes, target, type } = e[0];\n  if (type === \"attributes\") {\n    if (target === this.currentItem) {\n      if (attributeName === \"aria-disabled\") {\n        toIndex = this.index;\n      } else if (attributeName === \"hidden\") {\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      toIndex = findFirstNavigableIndex(this.items);\n    } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n      toIndex = this.indexOf(this._cachedElement);\n    }\n  }\n  this._index = toIndex;\n  this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n    bubbles: false,\n    detail: { fromIndex, toIndex }\n  }));\n}\nclass NavigationModel {\n  constructor(el, itemSelector, selectedOptions) {\n    this.options = Object.assign({}, defaultOptions, selectedOptions);\n    this._el = el;\n    this._itemSelector = itemSelector;\n  }\n}\nclass LinearNavigationModel extends NavigationModel {\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    this._index = toIndex;\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  get items() {\n    return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n  }\n  get index() {\n    return this._index;\n  }\n  set index(toIndex) {\n    if (toIndex === this.index) {\n      return;\n    } else if (!isIndexNavigable(this.items, toIndex)) {\n    } else {\n      const fromIndex = this.index;\n      this._cachedElement = this.items[toIndex];\n      this._index = toIndex;\n      this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n        bubbles: false,\n        detail: { fromIndex, toIndex }\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      this._index = toIndex;\n      this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n        bubbles: false,\n        detail: { fromIndex, toIndex }\n      }));\n    }\n  }\n}\nclass NavigationEmitter {\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}\nexport {\n  createLinear\n};\n","import * as NavigationEmitter from \"makeup-navigation-emitter\";\nimport nextID from \"makeup-next-id\";\nconst defaultOptions = {\n  activeDescendantClassName: \"active-descendant\",\n  autoInit: \"none\",\n  autoReset: \"none\",\n  autoScroll: false,\n  axis: \"both\",\n  wrap: false\n};\nfunction onModelInit(e) {\n  const { items, toIndex } = e.detail;\n  const itemEl = items[toIndex];\n  if (itemEl) {\n    itemEl.classList.add(this._options.activeDescendantClassName);\n    this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n  }\n  this._el.dispatchEvent(new CustomEvent(\"activeDescendantInit\", { detail: e.detail }));\n}\nfunction onModelChange(e) {\n  const { fromIndex, toIndex } = e.detail;\n  const fromItem = this.items[fromIndex];\n  const toItem = this.items[toIndex];\n  if (fromItem) {\n    fromItem.classList.remove(this._options.activeDescendantClassName);\n  }\n  if (toItem) {\n    toItem.classList.add(this._options.activeDescendantClassName);\n    this._focusEl.setAttribute(\"aria-activedescendant\", toItem.id);\n    if (this._options.autoScroll && this._containerEl) {\n      this._containerEl.scrollTop = toItem.offsetTop - this._containerEl.offsetHeight / 2;\n    }\n  }\n  this._el.dispatchEvent(new CustomEvent(\"activeDescendantChange\", { detail: e.detail }));\n}\nfunction onModelReset(e) {\n  const toIndex = e.detail.toIndex;\n  const activeClassName = this._options.activeDescendantClassName;\n  this.items.forEach(function(el) {\n    el.classList.remove(activeClassName);\n  });\n  if (toIndex !== null && toIndex !== -1) {\n    const itemEl = this.items[toIndex];\n    itemEl.classList.add(activeClassName);\n    this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n  } else {\n    this._focusEl.removeAttribute(\"aria-activedescendant\");\n  }\n  this._el.dispatchEvent(new CustomEvent(\"activeDescendantReset\", { detail: e.detail }));\n}\nfunction onModelMutation(e) {\n  const { toIndex } = e.detail;\n  const activeDescendantClassName = this._options.activeDescendantClassName;\n  this.items.forEach(function(item, index) {\n    nextID(item);\n    if (index !== toIndex) {\n      item.classList.remove(activeDescendantClassName);\n    } else {\n      item.classList.add(activeDescendantClassName);\n    }\n  });\n  this._el.dispatchEvent(new CustomEvent(\"activeDescendantMutation\", { detail: e.detail }));\n}\nclass ActiveDescendant {\n  constructor(el) {\n    this._el = el;\n    this._onMutationListener = onModelMutation.bind(this);\n    this._onChangeListener = onModelChange.bind(this);\n    this._onResetListener = onModelReset.bind(this);\n    this._onInitListener = onModelInit.bind(this);\n    this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n    this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n    this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n    this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n  }\n  destroy() {\n    this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n    this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n    this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n    this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n  }\n}\nclass LinearActiveDescendant extends ActiveDescendant {\n  constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n    super(el);\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this._focusEl = focusEl;\n    this._itemContainerEl = itemContainerEl;\n    this._itemSelector = itemSelector;\n    nextID(this._itemContainerEl);\n    if (this._itemContainerEl !== this._focusEl) {\n      focusEl.setAttribute(\"aria-owns\", this._itemContainerEl.id);\n    }\n    this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {\n      autoInit: this._options.autoInit,\n      autoReset: this._options.autoReset,\n      axis: this._options.axis,\n      ignoreByDelegateSelector: this._options.ignoreByDelegateSelector,\n      wrap: this._options.wrap\n    });\n    this.items.forEach(function(itemEl) {\n      nextID(itemEl);\n    });\n  }\n  get index() {\n    return this._navigationEmitter.model.index;\n  }\n  set index(newIndex) {\n    this._navigationEmitter.model.index = newIndex;\n  }\n  reset() {\n    this._navigationEmitter.model.reset();\n  }\n  get currentItem() {\n    return this._navigationEmitter.model.currentItem;\n  }\n  get items() {\n    return this._navigationEmitter.model.items;\n  }\n  set wrap(newWrap) {\n    this._navigationEmitter.model.options.wrap = newWrap;\n  }\n  destroy() {\n    super.destroy();\n    this._navigationEmitter.destroy();\n  }\n}\nfunction createLinear(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n  return new LinearActiveDescendant(el, focusEl, itemContainerEl, itemSelector, selectedOptions);\n}\nexport {\n  createLinear\n};\n","function 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}\nexport {\n  add,\n  remove\n};\n","import * as ActiveDescendant from \"makeup-active-descendant\";\nimport * as PreventScrollKeys from \"makeup-prevent-scroll-keys\";\nconst defaultOptions = {\n  activeDescendantClassName: \"listbox__option--active\",\n  // the classname applied to the current active desdcendant\n  autoInit: \"ariaSelectedOrInteractive\",\n  autoReset: \"ariaSelectedOrInteractive\",\n  autoSelect: true,\n  // when true, aria-checked state matches active-descendant\n  customElementMode: false,\n  focusableElement: null,\n  // used in a combobox/datepicker scenario\n  listboxOwnerElement: null,\n  // used in a combobox/datepicker scenario\n  multiSelect: false,\n  // todo\n  useAriaChecked: true,\n  // doubles up on support for aria-selected to announce visible selected/checked state\n  valueSelector: \".listbox__value\"\n  // Selector to get value from\n};\nfunction isSpacebarOrEnter(keyCode) {\n  return keyCode === 13 || keyCode === 32;\n}\nclass src_default {\n  constructor(widgetEl, selectedOptions) {\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = widgetEl;\n    this._activeDescendantRootEl = this._options.listboxOwnerElement || this.el;\n    if (widgetEl.getAttribute(\"role\") === \"listbox\") {\n      this._listboxEl = widgetEl;\n    } else {\n      this._listboxEl = this.el.querySelector(\"[role=listbox]\");\n    }\n    if (!this._options.focusableElement && this._listboxEl.getAttribute(\"tabindex\") === null) {\n      this._listboxEl.setAttribute(\"tabindex\", \"0\");\n    }\n    PreventScrollKeys.add(this.el);\n    this._onKeyDownListener = _onKeyDown.bind(this);\n    this._onClickListener = _onClick.bind(this);\n    this._onActiveDescendantChangeListener = _onActiveDescendantChange.bind(this);\n    this._onMutationListener = _onMutation.bind(this);\n    this.el.classList.add(\"listbox--js\");\n    if (!this._options.customElementMode) {\n      this._mutationObserver = new MutationObserver(this._onMutationListener);\n      this._observeMutations();\n      this._observeEvents();\n    }\n    this._activeDescendant = ActiveDescendant.createLinear(\n      this._activeDescendantRootEl,\n      this._options.focusableElement || this._listboxEl,\n      this._listboxEl,\n      \"[role=option]\",\n      {\n        activeDescendantClassName: this._options.activeDescendantClassName,\n        autoInit: this._options.autoInit,\n        autoReset: this._options.autoReset,\n        axis: \"y\"\n      }\n    );\n  }\n  _observeMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.observe(this._listboxEl, {\n        attributeFilter: [\"aria-selected\"],\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._activeDescendantRootEl.addEventListener(\"activeDescendantChange\", this._onActiveDescendantChangeListener);\n      this._listboxEl.addEventListener(\"keydown\", this._onKeyDownListener);\n      this._listboxEl.addEventListener(\"click\", this._onClickListener);\n    }\n  }\n  _unobserveEvents() {\n    this._listboxEl.removeEventListener(\"keydown\", this._onKeyDownListener);\n    this._listboxEl.removeEventListener(\"click\", this._onClickListener);\n    this._activeDescendantRootEl.removeEventListener(\"activeDescendantChange\", this._onActiveDescendantChangeListener);\n  }\n  get index() {\n    return this.items.findIndex((el) => el.getAttribute(\"aria-selected\") === \"true\");\n  }\n  get items() {\n    return this._activeDescendant.items;\n  }\n  select(index) {\n    this._unobserveMutations();\n    const itemEl = this.items[index];\n    if (itemEl && itemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n      const matchingItem = this.items[index];\n      let optionValue;\n      matchingItem.setAttribute(\"aria-selected\", \"true\");\n      if (this._options.useAriaChecked === true) {\n        matchingItem.setAttribute(\"aria-checked\", \"true\");\n      }\n      optionValue = matchingItem.innerText;\n      if (this._options.valueSelector) {\n        const valueSelector = matchingItem.querySelector(this._options.valueSelector);\n        if (valueSelector) {\n          optionValue = valueSelector.innerText;\n        }\n      }\n      this.el.dispatchEvent(\n        new CustomEvent(\"makeup-listbox-change\", {\n          detail: {\n            el: matchingItem,\n            optionIndex: index,\n            optionValue\n          }\n        })\n      );\n    }\n    this._observeMutations();\n  }\n  unselect(index) {\n    this._unobserveMutations();\n    const itemEl = this.items[index];\n    if (itemEl && itemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n      const matchingItem = this.items[index];\n      matchingItem.setAttribute(\"aria-selected\", \"false\");\n      if (this._options.useAriaChecked === true) {\n        matchingItem.setAttribute(\"aria-checked\", \"false\");\n      }\n    }\n    this._observeMutations();\n  }\n  destroy() {\n    this._destroyed = true;\n    this._unobserveMutations();\n    this._unobserveEvents();\n    this._onKeyDownListener = null;\n    this._onClickListener = null;\n    this._onActiveDescendantChangeListener = null;\n    this._onMutationListener = null;\n  }\n}\nfunction _onKeyDown(e) {\n  const activeDescendantEl = this._activeDescendant.currentItem;\n  if (isSpacebarOrEnter(e.keyCode) && activeDescendantEl?.getAttribute(\"aria-selected\") !== \"true\") {\n    this.unselect(this.index);\n    this.select(this._activeDescendant.index);\n  }\n}\nfunction _onClick(e) {\n  const toEl = e.target.closest(\"[role=option]\");\n  const toElIndex = this.items.indexOf(toEl);\n  const isTolElSelected = toEl.getAttribute(\"aria-selected\") === \"true\";\n  const isTolElDisabled = toEl.getAttribute(\"aria-disabled\") === \"true\";\n  if (!isTolElDisabled && this._options.autoSelect === false && isTolElSelected === false) {\n    this.unselect(this.index);\n    this.select(toElIndex);\n  }\n}\nfunction _onActiveDescendantChange(e) {\n  const { fromIndex, toIndex } = e.detail;\n  if (this._options.autoSelect === true) {\n    const fromEl = this.items[fromIndex];\n    const toEl = this.items[toIndex];\n    if (fromEl) {\n      this.unselect(fromIndex);\n    }\n    if (toEl) {\n      this.select(toIndex);\n    }\n  }\n}\nfunction _onMutation(mutationsList) {\n  for (const mutation of mutationsList) {\n    if (mutation.type === \"attributes\") {\n      this.el.dispatchEvent(\n        new CustomEvent(\"makeup-listbox-mutation\", {\n          detail: {\n            attributeName: mutation.attributeName\n          }\n        })\n      );\n    }\n  }\n}\nexport {\n  src_default as default\n};\n","import Expander from \"makeup-expander\";\nimport Listbox from \"makeup-listbox\";\nconst defaultOptions = {\n  autoSelect: true,\n  buttonLabelSelector: \".btn__text\",\n  collapseTimeout: 150,\n  customElementMode: false,\n  listboxSelector: \".listbox-button__listbox\",\n  floatingLabelSelector: \".btn__floating-label\",\n  floatingLabelInline: \"btn__floating-label--inline\",\n  floatingLabelAnimate: \"btn__floating-label--animate\",\n  valueSelector: \".listbox-button__value\",\n  buttonValueType: \"text\",\n  // [\"text\", \"icon\", \"both\"],\n  iconSelector: \".icon\"\n};\nclass src_default {\n  constructor(widgetEl, selectedOptions) {\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = widgetEl;\n    this._buttonEl = this.el.querySelector(\"button\");\n    this._buttonLabelEl = widgetEl.querySelector(this._options.buttonLabelSelector);\n    this._buttonFloatingLabelEl = widgetEl.querySelector(this._options.floatingLabelSelector);\n    this._buttonPrefix = this._buttonEl.dataset?.listboxButtonPrefix;\n    this._listboxEl = this.el.querySelector(this._options.listboxSelector);\n    this._onButtonFirstClickListener = _onButtonFirstClick.bind(this);\n    this._onListboxClickListener = _onListboxClick.bind(this);\n    this._onListboxKeyDownListener = _onListboxKeyDown.bind(this);\n    this._onListboxInitListener = _onListboxInit.bind(this);\n    this._onListboxChangeListener = _onListboxChange.bind(this);\n    this._onMutationListener = _onMutation.bind(this);\n    if (!this._options.customElementMode) {\n      this._mutationObserver = new MutationObserver(this._onMutationListener);\n      this._observeMutations();\n      this._observeEvents();\n    }\n    this.listbox = new Listbox(this._listboxEl, {\n      activeDescendantClassName: \"listbox-button__option--active\",\n      autoReset: \"ariaSelectedOrInteractive\",\n      autoSelect: this._options.autoSelect,\n      valueSelector: this._options.valueSelector\n    });\n    this._expander = new Expander(this.el, {\n      alwaysDoFocusManagement: true,\n      collapseOnClick: true,\n      collapseOnClickOut: true,\n      collapseOnFocusOut: true,\n      contentSelector: this._options.listboxSelector,\n      expandedClass: \"listbox-button--expanded\",\n      expandOnClick: true,\n      focusManagement: \"focusable\",\n      hostSelector: \"button\"\n    });\n    this.el.classList.add(\"listbox-button--js\");\n    if (this._buttonFloatingLabelEl) {\n      if (!this._buttonLabelEl.innerText) {\n        this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelInline);\n      }\n    }\n  }\n  _observeMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.observe(this._buttonEl, {\n        attributeFilter: [\"aria-expanded\"],\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  _unobserveEvents() {\n    this._buttonEl.removeEventListener(\"click\", this._onButtonFirstClickListener);\n    this._listboxEl.removeEventListener(\"click\", this._onListboxClickListener);\n    this._listboxEl.removeEventListener(\"keydown\", this._onListboxKeyDownListener);\n    this._listboxEl.removeEventListener(\"makeup-listbox-init\", this._onListboxInitListener);\n    this._listboxEl.removeEventListener(\"makeup-listbox-change\", this._onListboxChangeListener);\n  }\n  _observeEvents() {\n    if (this._destroyed !== true) {\n      this._buttonEl.addEventListener(\"click\", this._onButtonFirstClickListener, { once: true });\n      this._listboxEl.addEventListener(\"click\", this._onListboxClickListener);\n      this._listboxEl.addEventListener(\"keydown\", this._onListboxKeyDownListener);\n      this._listboxEl.addEventListener(\"makeup-listbox-init\", this._onListboxInitListener);\n      this._listboxEl.addEventListener(\"makeup-listbox-change\", this._onListboxChangeListener);\n    }\n  }\n  collapse() {\n    const widget = this;\n    setTimeout(function() {\n      widget._unobserveMutations();\n      widget._expander.expanded = false;\n      widget._observeMutations();\n      widget._buttonEl.focus();\n    }, this._options.collapseTimeout);\n  }\n  destroy() {\n    this._destroyed = true;\n    this._unobserveEvents();\n    this._unobserveMutations();\n    this._onButtonFirstClickListener = null;\n    this._onListboxClickListener = null;\n    this._onListboxKeyDownListener = null;\n    this._onListboxInitListener = null;\n    this._onListboxChangeListener = null;\n    this._onMutationListener = null;\n  }\n}\nfunction _onButtonFirstClick() {\n  this.listbox.el.hidden = false;\n}\nfunction _onListboxKeyDown(e) {\n  if (e.keyCode === 13 || e.keyCode === 27 || e.keyCode === 32) {\n    this.collapse();\n  }\n}\nfunction _onListboxClick() {\n  this.collapse();\n}\nfunction _onListboxInit(e) {\n  this.el.dispatchEvent(new CustomEvent(\"makeup-listbox-button-init\", { detail: e.detail }));\n}\nfunction _onListboxChange(e) {\n  const toValue = e.detail.optionValue;\n  const icon = e.detail.el.querySelector(this._options.iconSelector).cloneNode(true);\n  let content = this._buttonPrefix ? `${this._buttonPrefix} ${toValue}` : toValue;\n  if (icon) {\n    switch (this._options.buttonValueType) {\n      case \"both\":\n        content = `${icon.outerHTML} <span>${content}</span>`;\n        break;\n      case \"icon\":\n        icon.setAttribute(\"aria-label\", content);\n        icon.removeAttribute(\"aria-hidden\");\n        content = icon.outerHTML;\n        break;\n      default:\n        break;\n    }\n  }\n  this._buttonLabelEl.innerHTML = content;\n  if (this._buttonFloatingLabelEl) {\n    if (toValue) {\n      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelAnimate);\n      this._buttonFloatingLabelEl.classList.remove(this._options.floatingLabelInline);\n    } else {\n      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelInline);\n    }\n  }\n  this.el.dispatchEvent(new CustomEvent(\"makeup-listbox-button-change\", { detail: e.detail }));\n}\nfunction _onMutation(mutationsList) {\n  for (const mutation of mutationsList) {\n    if (mutation.type === \"attributes\") {\n      this.el.dispatchEvent(\n        new CustomEvent(\"makeup-listbox-button-mutation\", {\n          detail: {\n            attributeName: mutation.attributeName\n          }\n        })\n      );\n    }\n  }\n}\nexport {\n  src_default as default\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 getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// 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/utility\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/listbox-button\");\nvar _makeupListboxButton = _interopRequireDefault(require(\"../../packages/makeup-listbox-button\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n// REQUIRE\n// const ListboxButton = require('../../packages/makeup-listbox-button').default;\n\n// IMPORT\n\nconst widgets = [];\nconst log = e => console.log(e.type, e.detail);\nwindow.onload = function () {\n  document.querySelectorAll(\".listbox-button\").forEach(function (el, i) {\n    const buttonValueType = el.classList.contains(\"listbox-button-with-iconText\") ? \"both\" : el.classList.contains(\"listbox-button-with-icon\") ? \"icon\" : \"text\";\n    el.addEventListener(\"makeup-listbox-button-init\", log);\n    el.addEventListener(\"makeup-listbox-button-change\", log);\n    el.addEventListener(\"makeup-listbox-button-mutation\", log);\n    widgets.push(new _makeupListboxButton.default(el, {\n      autoSelect: el.dataset.makeupAutoSelect === \"false\" ? false : true,\n      buttonValueType\n    }));\n  });\n};"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"makeup-listbox-button/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,GAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0C;;;;;;;;ACAlD,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,EAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;ACAxC,mBAAO,CAAC,IAA4B;;;;;;;;;;ACApC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA,SAAS,eAAW;AACpB;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;AACpD;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;AAGE;;;AC3BkC;AACpC;AACA;AACA;AACA,cAAc,wBAAwB;AACtC;AACA,GAAG;AACH;AACA;AACA;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,EAAE,eAAM;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIE;;;AC7DF;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,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AAGE;;;ACvCkC;AACe;AACR;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ,IAAI,WAAU;AACd,IAAI;AACJ,IAAI,WAAU;AACd,IAAI;AACJ,2CAA2C,gBAAgB;AAC3D;AACA;AACA;AACA;AACA;AACA,MAAM,oBAAW;AACjB;AACA,mCAAmC;AACnC;AACA;AACA;AACA,IAAI,YAAwB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,eAAM;AACZ,kDAAkD,WAAW;AAC7D;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;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,iEAAiE,uCAAuC;AACxG;AACA;AACA;AACA;AACA;AACA;AACA,mEAAmE,uCAAuC;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGE;;;ACrPF;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;AAQE;;;AClE+C;AACE;AACnD,MAAM,kBAAc;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,eAAW;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,wDAAwD;AAClE;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,cAAc;AACd,GAAG;AACH;AACA;AACA;AACA,mCAAmC,EAAE,kBAAc;AACnD;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,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B,eAAW;AACzC;AACA,IAAI,UAAqB;AACzB,IAAI,YAAwB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,IAAI,aAAwB;AAC5B,IAAI,eAA2B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGE;;;AC5R6D;AAC3B;AACpC,MAAM,uBAAc;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,iBAAiB;AAC3B;AACA;AACA;AACA;AACA;AACA,mEAAmE,kBAAkB;AACrF;AACA;AACA,UAAU,qBAAqB;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,kBAAkB;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA,oEAAoE,kBAAkB;AACtF;AACA;AACA,UAAU,UAAU;AACpB;AACA;AACA,IAAI,eAAM;AACV;AACA;AACA,MAAM;AACN;AACA;AACA,GAAG;AACH,uEAAuE,kBAAkB;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC,EAAE,uBAAc;AACpD;AACA;AACA;AACA,IAAI,eAAM;AACV;AACA;AACA;AACA,8BAA8B,YAA8B;AAC5D;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,MAAM,eAAM;AACZ,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,SAAS,gBAAY;AACrB;AACA;AAGE;;;ACpIF,SAAS,aAAS;AAClB;AACA;AACA;AACA;AACA,SAAS,OAAG;AACZ,iCAAiC,aAAS;AAC1C;AACA,SAAS,UAAM;AACf,oCAAoC,aAAS;AAC7C;AAIE;;;ACd2D;AACG;AAChE,MAAM,sCAAc;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,mCAAW;AACjB;AACA,oCAAoC,EAAE,sCAAc;AACpD;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,IAAI,OAAqB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,gBAA6B;AAC1D;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,qBAAqB;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AAGE;;;AC9LqC;AACF;AACrC,MAAM,6CAAc;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,0CAAW;AACjB;AACA,oCAAoC,EAAE,6CAAc;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,cAAW;AAC1C;AACA;AACA;AACA;AACA;AACA,uBAAuB,mCAAO;AAC9B;AACA;AACA;AACA;AACA,KAAK;AACL,yBAAyB,oBAAQ;AACjC;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,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mFAAmF,YAAY;AAC/F;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wEAAwE,kBAAkB;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA,2CAA2C,mBAAmB,EAAE,QAAQ;AACxE;AACA;AACA;AACA,wBAAwB,gBAAgB,QAAQ,WAAW;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B,oBAAoB,EAAE,aAAa;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA,0EAA0E,kBAAkB;AAC5F;AACA,SAAS,cAAW;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AAGE;;;;;;;UCxLF;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAa;AACrB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAoB;AAC5B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAA2B;AACnC,kDAAkD,mBAAO,CAAC,IAAsC;AAChG,uCAAuC,uCAAuC;AAC9E;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,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/listbox-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/./node_modules/@ebay/skin/utility.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/listbox-button/listbox-button.css?ea08","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/./node_modules/@ebay/skin/dist/utility/utility.css?6c3b","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-next-id/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-exit-emitter/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-focusables/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-expander/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-key-emitter/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-navigation-emitter/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-active-descendant/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-prevent-scroll-keys/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/node_modules/makeup-listbox/dist/mjs/index.js","webpack://root/./packages/makeup-listbox-button/dist/mjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/define property getters","webpack://root/webpack/runtime/hasOwnProperty shorthand","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/makeup-listbox-button/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/listbox-button/listbox-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","require('./dist/utility/utility.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 {};","// extracted by mini-css-extract-plugin\nexport {};","const 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  let portion = letters[randomNumber(25)];\n  for (let i = 1; i < size; i++) {\n    portion += allChars[randomNumber(35)];\n  }\n  return portion;\n}\nfunction src_default(el, prefix = defaultPrefix) {\n  const separator = prefix === \"\" ? \"\" : \"-\";\n  const key = `${prefix}${separator}${randomPortion}`;\n  sequenceMap[key] = sequenceMap[key] || 0;\n  if (!el.id) {\n    el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n  }\n  return el.id;\n}\nexport {\n  src_default as default\n};\n","import nextID from \"makeup-next-id\";\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n  el.dispatchEvent(new CustomEvent(\"focusExit\", {\n    detail: { fromElement, toElement },\n    bubbles: false\n  }));\n}\nfunction onDocumentFocusIn(e) {\n  const newFocusElement = e.target;\n  const targetIsDescendant = this.el.contains(newFocusElement);\n  if (targetIsDescendant === true) {\n    this.currentFocusElement = newFocusElement;\n  } else {\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, void 0);\n}\nfunction onWidgetFocusIn() {\n  document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\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  nextID(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}\nexport {\n  addFocusExit,\n  removeFocusExit\n};\n","const focusableElList = [\n  \"a[href]\",\n  \"area[href]\",\n  \"button:not([disabled])\",\n  \"embed\",\n  \"iframe\",\n  \"input:not([disabled])\",\n  \"object\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"*[tabindex]\",\n  \"*[contenteditable]\"\n];\nconst focusableElSelector = focusableElList.join();\nfunction src_default(el, keyboardOnly = false, callback) {\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, keyboardOnly = false) {\n  let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n  focusableEls = focusableEls.filter(function(focusableEl) {\n    return window.getComputedStyle(focusableEl).display !== \"none\";\n  });\n  if (keyboardOnly === true) {\n    focusableEls = focusableEls.filter(function(focusableEl) {\n      return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n    });\n  }\n  return focusableEls;\n}\nexport {\n  src_default as default\n};\n","import nextID from \"makeup-next-id\";\nimport * as ExitEmitter from \"makeup-exit-emitter\";\nimport focusables from \"makeup-focusables\";\nconst defaultOptions = {\n  alwaysDoFocusManagement: false,\n  ariaControls: true,\n  autoCollapse: false,\n  collapseOnFocusOut: false,\n  collapseOnMouseOut: false,\n  collapseOnClickOut: 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};\nfunction onHostKeyDown(e) {\n  if (e.keyCode === 13 || e.keyCode === 32) {\n    this._keyboardClickFlag = true;\n  }\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.expanded = !this.expanded;\n}\nfunction onHostFocus() {\n  this._expandWasFocusActivated = true;\n  this.expanded = true;\n}\nfunction onHostHover() {\n  clearTimeout(this._mouseLeft);\n  this._expandWasHoverActivated = true;\n  this.expanded = true;\n}\nfunction onFocusExit() {\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    focusables(contentEl)[0].focus();\n  } else if (focusManagement === \"interactive\") {\n    focusables(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 src_default {\n  constructor(el, selectedOptions) {\n    this.options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = el;\n    this.hostEl = el.querySelector(this.options.hostSelector);\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._hostHoverListener = onHostHover.bind(this);\n    this._focusExitListener = onFocusExit.bind(this);\n    this._mouseLeaveListener = onMouseLeave.bind(this);\n    if (this.hostEl.getAttribute(\"aria-expanded\") === null) {\n      this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n    }\n    if (this.options.ariaControls === true) {\n      nextID(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    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 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.hostEl.getAttribute(\"aria-expanded\") === \"true\";\n  }\n  set expanded(bool) {\n    if (bool === true && this.expanded === false) {\n      this.hostEl.setAttribute(\"aria-expanded\", \"true\");\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\", { bubbles: true, detail: this.contentEl }));\n    }\n    if (bool === false && this.expanded === true) {\n      this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n      if (this.options.expandedClass) {\n        this.el.classList.remove(this.options.expandedClass);\n      }\n      this.el.dispatchEvent(new CustomEvent(\"expander-collapse\", { bubbles: true, detail: this.contentEl }));\n    }\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    }\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._hostHoverListener = null;\n    this._focusExitListener = null;\n    this._mouseLeaveListener = null;\n  }\n}\nexport {\n  src_default as default\n};\n","function 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}\nexport {\n  add,\n  addKeyDown,\n  addKeyUp,\n  remove,\n  removeKeyDown,\n  removeKeyUp\n};\n","import * as KeyEmitter from \"makeup-key-emitter\";\nimport * as ExitEmitter from \"makeup-exit-emitter\";\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  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) {\n  } else if (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}\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  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  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  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  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  const { addedNodes, attributeName, removedNodes, target, type } = e[0];\n  if (type === \"attributes\") {\n    if (target === this.currentItem) {\n      if (attributeName === \"aria-disabled\") {\n        toIndex = this.index;\n      } else if (attributeName === \"hidden\") {\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      toIndex = findFirstNavigableIndex(this.items);\n    } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n      toIndex = this.indexOf(this._cachedElement);\n    }\n  }\n  this._index = toIndex;\n  this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n    bubbles: false,\n    detail: { fromIndex, toIndex }\n  }));\n}\nclass NavigationModel {\n  constructor(el, itemSelector, selectedOptions) {\n    this.options = Object.assign({}, defaultOptions, selectedOptions);\n    this._el = el;\n    this._itemSelector = itemSelector;\n  }\n}\nclass LinearNavigationModel extends NavigationModel {\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    this._index = toIndex;\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  get items() {\n    return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n  }\n  get index() {\n    return this._index;\n  }\n  set index(toIndex) {\n    if (toIndex === this.index) {\n      return;\n    } else if (!isIndexNavigable(this.items, toIndex)) {\n    } else {\n      const fromIndex = this.index;\n      this._cachedElement = this.items[toIndex];\n      this._index = toIndex;\n      this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n        bubbles: false,\n        detail: { fromIndex, toIndex }\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      this._index = toIndex;\n      this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n        bubbles: false,\n        detail: { fromIndex, toIndex }\n      }));\n    }\n  }\n}\nclass NavigationEmitter {\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}\nexport {\n  createLinear\n};\n","import * as NavigationEmitter from \"makeup-navigation-emitter\";\nimport nextID from \"makeup-next-id\";\nconst defaultOptions = {\n  activeDescendantClassName: \"active-descendant\",\n  autoInit: \"none\",\n  autoReset: \"none\",\n  autoScroll: false,\n  axis: \"both\",\n  wrap: false\n};\nfunction onModelInit(e) {\n  const { items, toIndex } = e.detail;\n  const itemEl = items[toIndex];\n  if (itemEl) {\n    itemEl.classList.add(this._options.activeDescendantClassName);\n    this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n  }\n  this._el.dispatchEvent(new CustomEvent(\"activeDescendantInit\", { detail: e.detail }));\n}\nfunction onModelChange(e) {\n  const { fromIndex, toIndex } = e.detail;\n  const fromItem = this.items[fromIndex];\n  const toItem = this.items[toIndex];\n  if (fromItem) {\n    fromItem.classList.remove(this._options.activeDescendantClassName);\n  }\n  if (toItem) {\n    toItem.classList.add(this._options.activeDescendantClassName);\n    this._focusEl.setAttribute(\"aria-activedescendant\", toItem.id);\n    if (this._options.autoScroll && this._containerEl) {\n      this._containerEl.scrollTop = toItem.offsetTop - this._containerEl.offsetHeight / 2;\n    }\n  }\n  this._el.dispatchEvent(new CustomEvent(\"activeDescendantChange\", { detail: e.detail }));\n}\nfunction onModelReset(e) {\n  const toIndex = e.detail.toIndex;\n  const activeClassName = this._options.activeDescendantClassName;\n  this.items.forEach(function(el) {\n    el.classList.remove(activeClassName);\n  });\n  if (toIndex !== null && toIndex !== -1) {\n    const itemEl = this.items[toIndex];\n    itemEl.classList.add(activeClassName);\n    this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n  } else {\n    this._focusEl.removeAttribute(\"aria-activedescendant\");\n  }\n  this._el.dispatchEvent(new CustomEvent(\"activeDescendantReset\", { detail: e.detail }));\n}\nfunction onModelMutation(e) {\n  const { toIndex } = e.detail;\n  const activeDescendantClassName = this._options.activeDescendantClassName;\n  this.items.forEach(function(item, index) {\n    nextID(item);\n    if (index !== toIndex) {\n      item.classList.remove(activeDescendantClassName);\n    } else {\n      item.classList.add(activeDescendantClassName);\n    }\n  });\n  this._el.dispatchEvent(new CustomEvent(\"activeDescendantMutation\", { detail: e.detail }));\n}\nclass ActiveDescendant {\n  constructor(el) {\n    this._el = el;\n    this._onMutationListener = onModelMutation.bind(this);\n    this._onChangeListener = onModelChange.bind(this);\n    this._onResetListener = onModelReset.bind(this);\n    this._onInitListener = onModelInit.bind(this);\n    this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n    this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n    this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n    this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n  }\n  destroy() {\n    this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n    this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n    this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n    this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n  }\n}\nclass LinearActiveDescendant extends ActiveDescendant {\n  constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n    super(el);\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this._focusEl = focusEl;\n    this._itemContainerEl = itemContainerEl;\n    this._itemSelector = itemSelector;\n    nextID(this._itemContainerEl);\n    if (this._itemContainerEl !== this._focusEl) {\n      focusEl.setAttribute(\"aria-owns\", this._itemContainerEl.id);\n    }\n    this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {\n      autoInit: this._options.autoInit,\n      autoReset: this._options.autoReset,\n      axis: this._options.axis,\n      ignoreByDelegateSelector: this._options.ignoreByDelegateSelector,\n      wrap: this._options.wrap\n    });\n    this.items.forEach(function(itemEl) {\n      nextID(itemEl);\n    });\n  }\n  get index() {\n    return this._navigationEmitter.model.index;\n  }\n  set index(newIndex) {\n    this._navigationEmitter.model.index = newIndex;\n  }\n  reset() {\n    this._navigationEmitter.model.reset();\n  }\n  get currentItem() {\n    return this._navigationEmitter.model.currentItem;\n  }\n  get items() {\n    return this._navigationEmitter.model.items;\n  }\n  set wrap(newWrap) {\n    this._navigationEmitter.model.options.wrap = newWrap;\n  }\n  destroy() {\n    super.destroy();\n    this._navigationEmitter.destroy();\n  }\n}\nfunction createLinear(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n  return new LinearActiveDescendant(el, focusEl, itemContainerEl, itemSelector, selectedOptions);\n}\nexport {\n  createLinear\n};\n","function 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}\nexport {\n  add,\n  remove\n};\n","import * as ActiveDescendant from \"makeup-active-descendant\";\nimport * as PreventScrollKeys from \"makeup-prevent-scroll-keys\";\nconst defaultOptions = {\n  activeDescendantClassName: \"listbox__option--active\",\n  // the classname applied to the current active desdcendant\n  autoInit: \"ariaSelectedOrInteractive\",\n  autoReset: \"ariaSelectedOrInteractive\",\n  autoSelect: true,\n  // when true, aria-checked state matches active-descendant\n  customElementMode: false,\n  focusableElement: null,\n  // used in a combobox/datepicker scenario\n  listboxOwnerElement: null,\n  // used in a combobox/datepicker scenario\n  multiSelect: false,\n  // todo\n  useAriaChecked: true,\n  // doubles up on support for aria-selected to announce visible selected/checked state\n  valueSelector: \".listbox__value\"\n  // Selector to get value from\n};\nfunction isSpacebarOrEnter(keyCode) {\n  return keyCode === 13 || keyCode === 32;\n}\nclass src_default {\n  constructor(widgetEl, selectedOptions) {\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = widgetEl;\n    this._activeDescendantRootEl = this._options.listboxOwnerElement || this.el;\n    if (widgetEl.getAttribute(\"role\") === \"listbox\") {\n      this._listboxEl = widgetEl;\n    } else {\n      this._listboxEl = this.el.querySelector(\"[role=listbox]\");\n    }\n    if (!this._options.focusableElement && this._listboxEl.getAttribute(\"tabindex\") === null) {\n      this._listboxEl.setAttribute(\"tabindex\", \"0\");\n    }\n    PreventScrollKeys.add(this.el);\n    this._onKeyDownListener = _onKeyDown.bind(this);\n    this._onClickListener = _onClick.bind(this);\n    this._onActiveDescendantChangeListener = _onActiveDescendantChange.bind(this);\n    this._onMutationListener = _onMutation.bind(this);\n    this.el.classList.add(\"listbox--js\");\n    if (!this._options.customElementMode) {\n      this._mutationObserver = new MutationObserver(this._onMutationListener);\n      this._observeMutations();\n      this._observeEvents();\n    }\n    this._activeDescendant = ActiveDescendant.createLinear(\n      this._activeDescendantRootEl,\n      this._options.focusableElement || this._listboxEl,\n      this._listboxEl,\n      \"[role=option]\",\n      {\n        activeDescendantClassName: this._options.activeDescendantClassName,\n        autoInit: this._options.autoInit,\n        autoReset: this._options.autoReset,\n        axis: \"y\"\n      }\n    );\n  }\n  _observeMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.observe(this._listboxEl, {\n        attributeFilter: [\"aria-selected\"],\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._activeDescendantRootEl.addEventListener(\"activeDescendantChange\", this._onActiveDescendantChangeListener);\n      this._listboxEl.addEventListener(\"keydown\", this._onKeyDownListener);\n      this._listboxEl.addEventListener(\"click\", this._onClickListener);\n    }\n  }\n  _unobserveEvents() {\n    this._listboxEl.removeEventListener(\"keydown\", this._onKeyDownListener);\n    this._listboxEl.removeEventListener(\"click\", this._onClickListener);\n    this._activeDescendantRootEl.removeEventListener(\"activeDescendantChange\", this._onActiveDescendantChangeListener);\n  }\n  get index() {\n    return this.items.findIndex((el) => el.getAttribute(\"aria-selected\") === \"true\");\n  }\n  get items() {\n    return this._activeDescendant.items;\n  }\n  select(index) {\n    this._unobserveMutations();\n    const itemEl = this.items[index];\n    if (itemEl && itemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n      const matchingItem = this.items[index];\n      let optionValue;\n      matchingItem.setAttribute(\"aria-selected\", \"true\");\n      if (this._options.useAriaChecked === true) {\n        matchingItem.setAttribute(\"aria-checked\", \"true\");\n      }\n      optionValue = matchingItem.innerText;\n      if (this._options.valueSelector) {\n        const valueSelector = matchingItem.querySelector(this._options.valueSelector);\n        if (valueSelector) {\n          optionValue = valueSelector.innerText;\n        }\n      }\n      this.el.dispatchEvent(\n        new CustomEvent(\"makeup-listbox-change\", {\n          detail: {\n            el: matchingItem,\n            optionIndex: index,\n            optionValue\n          }\n        })\n      );\n    }\n    this._observeMutations();\n  }\n  unselect(index) {\n    this._unobserveMutations();\n    const itemEl = this.items[index];\n    if (itemEl && itemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n      const matchingItem = this.items[index];\n      matchingItem.setAttribute(\"aria-selected\", \"false\");\n      if (this._options.useAriaChecked === true) {\n        matchingItem.setAttribute(\"aria-checked\", \"false\");\n      }\n    }\n    this._observeMutations();\n  }\n  destroy() {\n    this._destroyed = true;\n    this._unobserveMutations();\n    this._unobserveEvents();\n    this._onKeyDownListener = null;\n    this._onClickListener = null;\n    this._onActiveDescendantChangeListener = null;\n    this._onMutationListener = null;\n  }\n}\nfunction _onKeyDown(e) {\n  const activeDescendantEl = this._activeDescendant.currentItem;\n  if (isSpacebarOrEnter(e.keyCode) && activeDescendantEl?.getAttribute(\"aria-selected\") !== \"true\") {\n    this.unselect(this.index);\n    this.select(this._activeDescendant.index);\n  }\n}\nfunction _onClick(e) {\n  const toEl = e.target.closest(\"[role=option]\");\n  const toElIndex = this.items.indexOf(toEl);\n  const isTolElSelected = toEl.getAttribute(\"aria-selected\") === \"true\";\n  const isTolElDisabled = toEl.getAttribute(\"aria-disabled\") === \"true\";\n  if (!isTolElDisabled && this._options.autoSelect === false && isTolElSelected === false) {\n    this.unselect(this.index);\n    this.select(toElIndex);\n  }\n}\nfunction _onActiveDescendantChange(e) {\n  const { fromIndex, toIndex } = e.detail;\n  if (this._options.autoSelect === true) {\n    const fromEl = this.items[fromIndex];\n    const toEl = this.items[toIndex];\n    if (fromEl) {\n      this.unselect(fromIndex);\n    }\n    if (toEl) {\n      this.select(toIndex);\n    }\n  }\n}\nfunction _onMutation(mutationsList) {\n  for (const mutation of mutationsList) {\n    if (mutation.type === \"attributes\") {\n      this.el.dispatchEvent(\n        new CustomEvent(\"makeup-listbox-mutation\", {\n          detail: {\n            attributeName: mutation.attributeName\n          }\n        })\n      );\n    }\n  }\n}\nexport {\n  src_default as default\n};\n","import Expander from \"makeup-expander\";\nimport Listbox from \"makeup-listbox\";\nconst defaultOptions = {\n  autoSelect: true,\n  buttonLabelSelector: \".btn__text\",\n  collapseTimeout: 150,\n  customElementMode: false,\n  listboxSelector: \".listbox-button__listbox\",\n  floatingLabelSelector: \".btn__floating-label\",\n  floatingLabelInline: \"btn__floating-label--inline\",\n  floatingLabelAnimate: \"btn__floating-label--animate\",\n  valueSelector: \".listbox-button__value\",\n  buttonValueType: \"text\",\n  // [\"text\", \"icon\", \"both\"],\n  listboxOptionIconSelector: \".icon\",\n  listboxOptionAriaLabelSelector: null\n};\nclass src_default {\n  constructor(widgetEl, selectedOptions) {\n    this._options = Object.assign({}, defaultOptions, selectedOptions);\n    this.el = widgetEl;\n    this._buttonEl = this.el.querySelector(\"button\");\n    this._buttonLabelEl = widgetEl.querySelector(this._options.buttonLabelSelector);\n    this._buttonFloatingLabelEl = widgetEl.querySelector(this._options.floatingLabelSelector);\n    this._buttonPrefix = this._buttonEl.dataset?.listboxButtonPrefix;\n    this._listboxEl = this.el.querySelector(this._options.listboxSelector);\n    this._onButtonFirstClickListener = _onButtonFirstClick.bind(this);\n    this._onListboxClickListener = _onListboxClick.bind(this);\n    this._onListboxKeyDownListener = _onListboxKeyDown.bind(this);\n    this._onListboxInitListener = _onListboxInit.bind(this);\n    this._onListboxChangeListener = _onListboxChange.bind(this);\n    this._onMutationListener = _onMutation.bind(this);\n    if (!this._options.customElementMode) {\n      this._mutationObserver = new MutationObserver(this._onMutationListener);\n      this._observeMutations();\n      this._observeEvents();\n    }\n    this.listbox = new Listbox(this._listboxEl, {\n      activeDescendantClassName: \"listbox-button__option--active\",\n      autoReset: \"ariaSelectedOrInteractive\",\n      autoSelect: this._options.autoSelect,\n      valueSelector: this._options.valueSelector\n    });\n    this._expander = new Expander(this.el, {\n      alwaysDoFocusManagement: true,\n      collapseOnClick: true,\n      collapseOnClickOut: true,\n      collapseOnFocusOut: true,\n      contentSelector: this._options.listboxSelector,\n      expandedClass: \"listbox-button--expanded\",\n      expandOnClick: true,\n      focusManagement: \"focusable\",\n      hostSelector: \"button\"\n    });\n    this.el.classList.add(\"listbox-button--js\");\n    if (this._buttonFloatingLabelEl) {\n      if (!this._buttonLabelEl.innerText) {\n        this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelInline);\n      }\n    }\n  }\n  _observeMutations() {\n    if (!this._options.customElementMode) {\n      this._mutationObserver.observe(this._buttonEl, {\n        attributeFilter: [\"aria-expanded\"],\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  _unobserveEvents() {\n    this._buttonEl.removeEventListener(\"click\", this._onButtonFirstClickListener);\n    this._listboxEl.removeEventListener(\"click\", this._onListboxClickListener);\n    this._listboxEl.removeEventListener(\"keydown\", this._onListboxKeyDownListener);\n    this._listboxEl.removeEventListener(\"makeup-listbox-init\", this._onListboxInitListener);\n    this._listboxEl.removeEventListener(\"makeup-listbox-change\", this._onListboxChangeListener);\n  }\n  _observeEvents() {\n    if (this._destroyed !== true) {\n      this._buttonEl.addEventListener(\"click\", this._onButtonFirstClickListener, { once: true });\n      this._listboxEl.addEventListener(\"click\", this._onListboxClickListener);\n      this._listboxEl.addEventListener(\"keydown\", this._onListboxKeyDownListener);\n      this._listboxEl.addEventListener(\"makeup-listbox-init\", this._onListboxInitListener);\n      this._listboxEl.addEventListener(\"makeup-listbox-change\", this._onListboxChangeListener);\n    }\n  }\n  collapse() {\n    const widget = this;\n    setTimeout(function() {\n      widget._unobserveMutations();\n      widget._expander.expanded = false;\n      widget._observeMutations();\n      widget._buttonEl.focus();\n    }, this._options.collapseTimeout);\n  }\n  destroy() {\n    this._destroyed = true;\n    this._unobserveEvents();\n    this._unobserveMutations();\n    this._onButtonFirstClickListener = null;\n    this._onListboxClickListener = null;\n    this._onListboxKeyDownListener = null;\n    this._onListboxInitListener = null;\n    this._onListboxChangeListener = null;\n    this._onMutationListener = null;\n  }\n}\nfunction _onButtonFirstClick() {\n  this.listbox.el.hidden = false;\n}\nfunction _onListboxKeyDown(e) {\n  if (e.keyCode === 13 || e.keyCode === 27 || e.keyCode === 32) {\n    this.collapse();\n  }\n}\nfunction _onListboxClick() {\n  this.collapse();\n}\nfunction _onListboxInit(e) {\n  this.el.dispatchEvent(new CustomEvent(\"makeup-listbox-button-init\", { detail: e.detail }));\n}\nfunction _onListboxChange(e) {\n  const toValue = e.detail.optionValue;\n  const {\n    listboxOptionIconSelector,\n    listboxOptionAriaLabelSelector,\n    buttonValueType,\n    floatingLabelAnimate,\n    floatingLabelInline\n  } = this._options;\n  const icon = e.detail.el.querySelector(listboxOptionIconSelector).cloneNode(true);\n  let btnContent = this._buttonPrefix ? `${this._buttonPrefix}${toValue}` : toValue;\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 (listboxOptionAriaLabelSelector) {\n    const selectorText = e.detail.el.querySelector(listboxOptionAriaLabelSelector)?.innerText.trim();\n    this._buttonEl.setAttribute(\n      \"aria-label\",\n      this._buttonPrefix ? `${this._buttonPrefix} ${selectorText}` : selectorText\n    );\n  }\n  this._buttonLabelEl.innerHTML = btnContent;\n  if (this._buttonFloatingLabelEl) {\n    if (toValue) {\n      this._buttonFloatingLabelEl.classList.add(floatingLabelAnimate);\n      this._buttonFloatingLabelEl.classList.remove(floatingLabelInline);\n    } else {\n      this._buttonFloatingLabelEl.classList.add(floatingLabelInline);\n    }\n  }\n  this.el.dispatchEvent(new CustomEvent(\"makeup-listbox-button-change\", { detail: e.detail }));\n}\nfunction _onMutation(mutationsList) {\n  for (const mutation of mutationsList) {\n    if (mutation.type === \"attributes\") {\n      this.el.dispatchEvent(\n        new CustomEvent(\"makeup-listbox-button-mutation\", {\n          detail: {\n            attributeName: mutation.attributeName\n          }\n        })\n      );\n    }\n  }\n}\nexport {\n  src_default as default\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 getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// 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/utility\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/listbox-button\");\nvar _makeupListboxButton = _interopRequireDefault(require(\"../../packages/makeup-listbox-button\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n// REQUIRE\n// const ListboxButton = require('../../packages/makeup-listbox-button').default;\n\n// IMPORT\n\nconst widgets = [];\nconst log = e => console.log(e.type, e.detail);\nwindow.onload = function () {\n  document.querySelectorAll(\".listbox-button\").forEach(function (el, i) {\n    const hasCustomLabel = el.classList.contains(\"listbox-button-with-icon-label\");\n    const hasIconText = el.classList.contains(\"listbox-button-with-iconText\");\n    const hasIcon = el.classList.contains(\"listbox-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 listboxOptionAriaLabelSelector = hasCustomLabel ? \".listbox-button__value span\" : null;\n    el.addEventListener(\"makeup-listbox-button-init\", log);\n    el.addEventListener(\"makeup-listbox-button-change\", log);\n    el.addEventListener(\"makeup-listbox-button-mutation\", log);\n    widgets.push(new _makeupListboxButton.default(el, {\n      autoSelect: el.dataset.makeupAutoSelect === \"false\" ? false : true,\n      buttonValueType,\n      listboxOptionAriaLabelSelector\n    }));\n  });\n};"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/packages/makeup-listbox-button/dist/cjs/index.js b/packages/makeup-listbox-button/dist/cjs/index.js
index 1fb845f..7f37266 100644
--- a/packages/makeup-listbox-button/dist/cjs/index.js
+++ b/packages/makeup-listbox-button/dist/cjs/index.js
@@ -19,7 +19,8 @@ const defaultOptions = {
   valueSelector: ".listbox-button__value",
   buttonValueType: "text",
   // ["text", "icon", "both"],
-  iconSelector: ".icon"
+  listboxOptionIconSelector: ".icon",
+  listboxOptionAriaLabelSelector: null
 };
 class _default {
   constructor(widgetEl, selectedOptions) {
@@ -141,29 +142,40 @@ function _onListboxInit(e) {
 }
 function _onListboxChange(e) {
   const toValue = e.detail.optionValue;
-  const icon = e.detail.el.querySelector(this._options.iconSelector).cloneNode(true);
-  let content = this._buttonPrefix ? "".concat(this._buttonPrefix, " ").concat(toValue) : toValue;
+  const {
+    listboxOptionIconSelector,
+    listboxOptionAriaLabelSelector,
+    buttonValueType,
+    floatingLabelAnimate,
+    floatingLabelInline
+  } = this._options;
+  const icon = e.detail.el.querySelector(listboxOptionIconSelector).cloneNode(true);
+  let btnContent = this._buttonPrefix ? "".concat(this._buttonPrefix).concat(toValue) : toValue;
   if (icon) {
-    switch (this._options.buttonValueType) {
+    switch (buttonValueType) {
       case "both":
-        content = "".concat(icon.outerHTML, " <span>").concat(content, "</span>");
+        btnContent = "".concat(icon.outerHTML, " <span>").concat(btnContent, "</span>");
         break;
       case "icon":
-        icon.setAttribute("aria-label", content);
-        icon.removeAttribute("aria-hidden");
-        content = icon.outerHTML;
+        this._buttonEl.setAttribute("aria-label", btnContent);
+        btnContent = icon.outerHTML;
         break;
       default:
         break;
     }
   }
-  this._buttonLabelEl.innerHTML = content;
+  if (listboxOptionAriaLabelSelector) {
+    var _e$detail$el$querySel;
+    const selectorText = (_e$detail$el$querySel = e.detail.el.querySelector(listboxOptionAriaLabelSelector)) === null || _e$detail$el$querySel === void 0 ? void 0 : _e$detail$el$querySel.innerText.trim();
+    this._buttonEl.setAttribute("aria-label", this._buttonPrefix ? "".concat(this._buttonPrefix, " ").concat(selectorText) : selectorText);
+  }
+  this._buttonLabelEl.innerHTML = btnContent;
   if (this._buttonFloatingLabelEl) {
     if (toValue) {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelAnimate);
-      this._buttonFloatingLabelEl.classList.remove(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelAnimate);
+      this._buttonFloatingLabelEl.classList.remove(floatingLabelInline);
     } else {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelInline);
     }
   }
   this.el.dispatchEvent(new CustomEvent("makeup-listbox-button-change", {
diff --git a/packages/makeup-listbox-button/dist/mjs/index.js b/packages/makeup-listbox-button/dist/mjs/index.js
index be27483..54ca40b 100644
--- a/packages/makeup-listbox-button/dist/mjs/index.js
+++ b/packages/makeup-listbox-button/dist/mjs/index.js
@@ -12,7 +12,8 @@ const defaultOptions = {
   valueSelector: ".listbox-button__value",
   buttonValueType: "text",
   // ["text", "icon", "both"],
-  iconSelector: ".icon"
+  listboxOptionIconSelector: ".icon",
+  listboxOptionAriaLabelSelector: null
 };
 class src_default {
   constructor(widgetEl, selectedOptions) {
@@ -126,29 +127,42 @@ function _onListboxInit(e) {
 }
 function _onListboxChange(e) {
   const toValue = e.detail.optionValue;
-  const icon = e.detail.el.querySelector(this._options.iconSelector).cloneNode(true);
-  let content = this._buttonPrefix ? `${this._buttonPrefix} ${toValue}` : toValue;
+  const {
+    listboxOptionIconSelector,
+    listboxOptionAriaLabelSelector,
+    buttonValueType,
+    floatingLabelAnimate,
+    floatingLabelInline
+  } = this._options;
+  const icon = e.detail.el.querySelector(listboxOptionIconSelector).cloneNode(true);
+  let btnContent = this._buttonPrefix ? `${this._buttonPrefix}${toValue}` : toValue;
   if (icon) {
-    switch (this._options.buttonValueType) {
+    switch (buttonValueType) {
       case "both":
-        content = `${icon.outerHTML} <span>${content}</span>`;
+        btnContent = `${icon.outerHTML} <span>${btnContent}</span>`;
         break;
       case "icon":
-        icon.setAttribute("aria-label", content);
-        icon.removeAttribute("aria-hidden");
-        content = icon.outerHTML;
+        this._buttonEl.setAttribute("aria-label", btnContent);
+        btnContent = icon.outerHTML;
         break;
       default:
         break;
     }
   }
-  this._buttonLabelEl.innerHTML = content;
+  if (listboxOptionAriaLabelSelector) {
+    const selectorText = e.detail.el.querySelector(listboxOptionAriaLabelSelector)?.innerText.trim();
+    this._buttonEl.setAttribute(
+      "aria-label",
+      this._buttonPrefix ? `${this._buttonPrefix} ${selectorText}` : selectorText
+    );
+  }
+  this._buttonLabelEl.innerHTML = btnContent;
   if (this._buttonFloatingLabelEl) {
     if (toValue) {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelAnimate);
-      this._buttonFloatingLabelEl.classList.remove(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelAnimate);
+      this._buttonFloatingLabelEl.classList.remove(floatingLabelInline);
     } else {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelInline);
     }
   }
   this.el.dispatchEvent(new CustomEvent("makeup-listbox-button-change", { detail: e.detail }));
diff --git a/packages/makeup-listbox-button/src/index.js b/packages/makeup-listbox-button/src/index.js
index ca210a2..47ef5aa 100644
--- a/packages/makeup-listbox-button/src/index.js
+++ b/packages/makeup-listbox-button/src/index.js
@@ -12,7 +12,8 @@ const defaultOptions = {
   floatingLabelAnimate: "btn__floating-label--animate",
   valueSelector: ".listbox-button__value",
   buttonValueType: "text", // ["text", "icon", "both"],
-  iconSelector: ".icon",
+  listboxOptionIconSelector: ".icon",
+  listboxOptionAriaLabelSelector: null,
 };
 
 export default class {
@@ -42,7 +43,7 @@ export default class {
       activeDescendantClassName: "listbox-button__option--active",
       autoReset: "ariaSelectedOrInteractive",
       autoSelect: this._options.autoSelect,
-      valueSelector: this._options.valueSelector
+      valueSelector: this._options.valueSelector,
     });
 
     this._expander = new Expander(this.el, {
@@ -148,31 +149,46 @@ function _onListboxInit(e) {
 
 function _onListboxChange(e) {
   const toValue = e.detail.optionValue;
-  const icon = e.detail.el.querySelector(this._options.iconSelector).cloneNode(true);
-  let content = this._buttonPrefix ? `${this._buttonPrefix} ${toValue}` : toValue;
+  const {
+    listboxOptionIconSelector,
+    listboxOptionAriaLabelSelector,
+    buttonValueType,
+    floatingLabelAnimate,
+    floatingLabelInline,
+  } = this._options;
+  const icon = e.detail.el.querySelector(listboxOptionIconSelector).cloneNode(true);
+  let btnContent = this._buttonPrefix ? `${this._buttonPrefix}${toValue}` : toValue;
 
   if (icon) {
-    switch (this._options.buttonValueType) {
+    switch (buttonValueType) {
       case "both":
-        content = `${icon.outerHTML} <span>${content}</span>`;
+        btnContent = `${icon.outerHTML} <span>${btnContent}</span>`;
         break;
       case "icon":
-        icon.setAttribute("aria-label", content);
-        icon.removeAttribute("aria-hidden");
-        content = icon.outerHTML;
+        this._buttonEl.setAttribute("aria-label", btnContent);
+        btnContent = icon.outerHTML;
         break;
       default:
         break;
     }
   }
-  this._buttonLabelEl.innerHTML = content;
+
+  if (listboxOptionAriaLabelSelector) {
+    const selectorText = e.detail.el.querySelector(listboxOptionAriaLabelSelector)?.innerText.trim();
+    this._buttonEl.setAttribute(
+      "aria-label",
+      this._buttonPrefix ? `${this._buttonPrefix} ${selectorText}` : selectorText,
+    );
+  }
+
+  this._buttonLabelEl.innerHTML = btnContent;
 
   if (this._buttonFloatingLabelEl) {
     if (toValue) {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelAnimate);
-      this._buttonFloatingLabelEl.classList.remove(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelAnimate);
+      this._buttonFloatingLabelEl.classList.remove(floatingLabelInline);
     } else {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelInline);
     }
   }