From 4f8d4edce175df40ebda23aaa72e9660016f22fc Mon Sep 17 00:00:00 2001
From: Eunsun Mota <eunsun.mota@alaskaair.com>
Date: Tue, 17 Dec 2024 14:12:39 -0500
Subject: [PATCH] feat: support loading state in combobox and menu

---
 components/combobox/apiExamples/loading.html |    6 +
 components/combobox/apiExamples/loading.js   |   34 +
 components/combobox/demo/api.html            |    1 +
 components/combobox/demo/api.js              |    2 +
 components/combobox/demo/api.md              |   70 +
 components/combobox/demo/api.min.js          | 1862 +++++++++---------
 components/combobox/demo/index.min.js        | 1822 ++++++++---------
 components/combobox/docs/partials/api.md     |   18 +
 components/combobox/src/auro-combobox.js     |   30 +-
 components/menu/demo/api.min.js              | 1770 ++++++++---------
 components/menu/demo/index.min.js            | 1770 ++++++++---------
 components/menu/src/auro-menu.js             |    2 -
 components/menu/src/styles/style-menu.scss   |    8 +-
 components/select/apiExamples/loading.js     |    9 +-
 components/select/demo/api.md                |    9 +-
 components/select/demo/api.min.js            |    9 +-
 16 files changed, 3659 insertions(+), 3763 deletions(-)
 create mode 100644 components/combobox/apiExamples/loading.html
 create mode 100644 components/combobox/apiExamples/loading.js

diff --git a/components/combobox/apiExamples/loading.html b/components/combobox/apiExamples/loading.html
new file mode 100644
index 00000000..9d0c43a2
--- /dev/null
+++ b/components/combobox/apiExamples/loading.html
@@ -0,0 +1,6 @@
+<auro-combobox id="loadingExample">
+  <span slot="label">Please select a preference</span>
+  <auro-menu id="loadingExampleComboboxMenu">
+    <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+  </auro-menu>
+</auro-combobox>
diff --git a/components/combobox/apiExamples/loading.js b/components/combobox/apiExamples/loading.js
new file mode 100644
index 00000000..d45f3f76
--- /dev/null
+++ b/components/combobox/apiExamples/loading.js
@@ -0,0 +1,34 @@
+export function auroMenuLoadingExample() {
+  const combobox = document.querySelector("#loadingExample");
+  const menu = document.querySelector("#loadingExampleComboboxMenu");
+  const emptyMenu = () => {
+    const menuoptions = menu.querySelectorAll('auro-menuoption');
+    menuoptions.forEach(mo => menu.removeChild(mo));
+  }
+  const fillMenu = () => {
+    menu.innerHTML += `
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    `;
+  }
+
+  const load = () => {
+    clearTimeout(load.id);
+    emptyMenu();
+    menu.setAttribute('loading', 'loading');
+    load.id = setTimeout(() => {
+      menu.removeAttribute('loading');
+      fillMenu();
+    }, 1000);
+
+  }
+  combobox.addEventListener("input", (e) => {
+    if (e.target.value) {
+      load();
+    }
+  });
+}
diff --git a/components/combobox/demo/api.html b/components/combobox/demo/api.html
index 428d497e..050d4a57 100644
--- a/components/combobox/demo/api.html
+++ b/components/combobox/demo/api.html
@@ -45,6 +45,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/auro-dialog__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/dist/auro-loader__bundled.js" type="module"></script>
 
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"
diff --git a/components/combobox/demo/api.js b/components/combobox/demo/api.js
index eb3eb943..18327340 100644
--- a/components/combobox/demo/api.js
+++ b/components/combobox/demo/api.js
@@ -4,6 +4,7 @@ import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
 import { valueExample } from '../apiExamples/value';
 import { focusExample } from '../apiExamples/focus';
 import { inDialogExample } from '../apiExamples/inDialog.js';
+import { auroMenuLoadingExample } from '../apiExamples/loading.js';
 
 
 import { AuroCombobox } from '../src/auro-combobox.js';
@@ -20,6 +21,7 @@ export function initExamples(initCount) {
     valueExample();
     focusExample();
     inDialogExample();
+    auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
diff --git a/components/combobox/demo/api.md b/components/combobox/demo/api.md
index 64b2f962..0c00d9b9 100644
--- a/components/combobox/demo/api.md
+++ b/components/combobox/demo/api.md
@@ -673,6 +673,76 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Loading<a name="loading"></a>
+While the content in menu is loading, you can either does not show anytning or show a loading placeholder
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/loading.html -->
+  <auro-combobox id="loadingExample">
+    <span slot="label">Please select a preference</span>
+    <auro-menu id="loadingExampleComboboxMenu">
+      <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+    </auro-menu>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/loading.js -->
+
+```js
+export function auroMenuLoadingExample() {
+  const combobox = document.querySelector("#loadingExample");
+  const menu = document.querySelector("#loadingExampleComboboxMenu");
+  const emptyMenu = () => {
+    const menuoptions = menu.querySelectorAll('auro-menuoption');
+    menuoptions.forEach(mo => menu.removeChild(mo));
+  }
+  const fillMenu = () => {
+    menu.innerHTML += `
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    `;
+  }
+
+  const load = () => {
+    clearTimeout(load.id);
+    emptyMenu();
+    menu.setAttribute('loading', 'loading');
+    load.id = setTimeout(() => {
+      menu.removeAttribute('loading');
+      fillMenu();
+    }, 1000);
+
+  }
+  combobox.addEventListener("input", (e) => {
+    if (e.target.value) {
+      load();
+    }
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/loading.html -->
+
+```html
+<auro-combobox id="loadingExample">
+  <span slot="label">Please select a preference</span>
+  <auro-menu id="loadingExampleComboboxMenu">
+    <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+  </auro-menu>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### in Dialog
 
 The component can be in a dialog.
diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js
index eeca73a2..ab532819 100644
--- a/components/combobox/demo/api.min.js
+++ b/components/combobox/demo/api.min.js
@@ -117,6 +117,41 @@ function inDialogExample() {
   });
 }
 
+function auroMenuLoadingExample() {
+  const combobox = document.querySelector("#loadingExample");
+  const menu = document.querySelector("#loadingExampleComboboxMenu");
+  const emptyMenu = () => {
+    const menuoptions = menu.querySelectorAll('auro-menuoption');
+    menuoptions.forEach(mo => menu.removeChild(mo));
+  };
+  const fillMenu = () => {
+    menu.innerHTML += `
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    `;
+  };
+
+  const load = () => {
+    clearTimeout(load.id);
+    emptyMenu();
+    menu.setAttribute('loading', 'loading');
+    load.id = setTimeout(() => {
+      menu.removeAttribute('loading');
+      fillMenu();
+    }, 1000);
+
+  };
+  combobox.addEventListener("input", (e) => {
+    if (e.target.value) {
+      load();
+    }
+  });
+}
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -2893,7 +2928,7 @@ var colorCss$1$2 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.
 
 var tokensCss$5 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$6 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin-top:var(--ds-size-50, 0.25rem)}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss$5 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin-top:var(--ds-size-50, 0.25rem)}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss$5 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -2931,7 +2966,7 @@ class AuroDropdownBib extends r$5 {
 
   static get styles() {
     return [
-      styleCss$6,
+      styleCss$5,
       colorCss$5,
       tokensCss$5
     ];
@@ -3491,7 +3526,7 @@ const t$4=globalThis,e$1$1=t$4.ShadowRoot&&(void 0===t$4.ShadyCSS||t$4.ShadyCSS.
 
 var styleCss$3$1 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`;
 
-var colorCss$3$1 = i$2`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
+var colorCss$3 = i$2`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
 
 var tokensCss$3 = i$2`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
@@ -5566,7 +5601,7 @@ class BaseInput extends r {
   static get styles() {
     return [
       i$2`${styleCss$3$1}`,
-      i$2`${colorCss$3$1}`,
+      i$2`${colorCss$3}`,
       i$2`${tokensCss$3}`
     ];
   }
@@ -6469,7 +6504,7 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
   }
 };
 
-var tokensCss$2$1 = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
+var tokensCss$2 = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
 
 var colorCss$2$1 = i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
@@ -6615,7 +6650,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
   static get styles() {
     return [
       super.styles,
-      i$2`${tokensCss$2$1}`,
+      i$2`${tokensCss$2}`,
       i$2`${styleCss$2$1}`,
       i$2`${colorCss$2$1}`
     ];
@@ -6687,7 +6722,7 @@ var colorCss$1$1 = i$2`[auro-loader]{color:var(--ds-auro-button-loader-color)}.a
 
 var tokensCss$1$1 = i$2`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`;
 
-var styleCss$5 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
+var styleCss$4 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
 
 var colorCss$4 = i$2`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
 
@@ -6716,7 +6751,7 @@ var tokensCss$4 = i$2`:host{--ds-auro-loader-background-color: currentcolor;--ds
  */
 
 // build the component class
-let AuroLoader$1 = class AuroLoader extends r {
+class AuroLoader extends r {
   constructor() {
     super();
 
@@ -6770,7 +6805,7 @@ let AuroLoader$1 = class AuroLoader extends r {
 
   static get styles() {
     return [
-      i$2`${styleCss$5}`,
+      i$2`${styleCss$4}`,
       i$2`${colorCss$4}`,
       i$2`${tokensCss$4}`
     ];
@@ -6833,9 +6868,9 @@ let AuroLoader$1 = class AuroLoader extends r {
       }
     `;
   }
-};
+}
 
-var loaderVersion$1 = '3.1.1';
+var loaderVersion = '3.1.1';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6895,7 +6930,7 @@ class AuroButton extends r {
     /**
      * @private
      */
-    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion$1, AuroLoader$1);
+    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
   }
 
   static get styles() {
@@ -7299,7 +7334,7 @@ AuroInput.register();
 
 var inputVersion = '4.2.0';
 
-var styleCss$4 = i$c`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}:host combobox-dropdown::part(trigger){padding-right:var(--ds-size-150, 0.75rem)}`;
+var styleCss$3 = i$c`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}:host combobox-dropdown::part(trigger){padding-right:var(--ds-size-150, 0.75rem)}`;
 
 // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -7453,7 +7488,7 @@ class AuroCombobox extends r$6 {
   }
 
   static get styles() {
-    return [styleCss$4];
+    return [styleCss$3];
   }
 
   /**
@@ -7483,7 +7518,7 @@ class AuroCombobox extends r$6 {
       this.noMatchOption = undefined;
 
       this.options.forEach((option) => {
-        let matchString = option.innerText.toLowerCase();
+        let matchString = option.textContent.toLowerCase();
 
         if (option.hasAttribute('nomatch')) {
           this.noMatchOption = option;
@@ -7559,7 +7594,7 @@ class AuroCombobox extends r$6 {
       return;
     }
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
-      if ((this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
+      if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
         this.dropdown.show();
       }
     }
@@ -7603,7 +7638,7 @@ class AuroCombobox extends r$6 {
       return;
     }
 
-    this.menu.shadowRoot.addEventListener('slotchange', () => this.handleSlotChange());
+    this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
 
     if (this.checkmark) {
       this.menu.removeAttribute('nocheckmark');
@@ -7892,19 +7927,23 @@ class AuroCombobox extends r$6 {
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
+   * @param {Event} event - slotchange event
    * @returns {void}
    */
-  handleSlotChange() {
-    this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
-    this.options.forEach((opt) => {
-      if (this.checkmark) {
-        opt.removeAttribute('nocheckmark');
-      } else {
-        opt.setAttribute('nocheckmark', '');
-      }
-    });
+  handleSlotChange(event) {
+    // treat only generic menuoptions
+    if (!event.target.name) {
+      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+      this.options.forEach((opt) => {
+        if (this.checkmark) {
+          opt.removeAttribute('nocheckmark');
+        } else {
+          opt.setAttribute('nocheckmark', '');
+        }
+      });
 
-    this.handleMenuOptions();
+      this.handleMenuOptions();
+    }
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -7956,1197 +7995,1063 @@ class AuroCombobox extends r$6 {
   }
 }
 
-var styleCss$3 = i$c`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]){padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption){padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}`;
-
-var colorCss$3 = i$c`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
+var styleCss$2 = i$c`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
 
-var tokensCss$2 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
+var colorCss$2 = i$c`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
 
-var styleCss$2 = i$c`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
+var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
 
-var colorCss$2 = i$c`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
-
-var tokensCss$1 = i$c`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`;
-
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * The auro-loader element is an easy to use animated loader component.
- *
- * @attr {Boolean} pulse - sets loader type
- * @attr {Boolean} ringworm - sets loader type
- * @attr {Boolean} laser - sets loader type
- * @attr {Boolean} orbit - sets loader type
- * @attr {Boolean} white - sets color of loader to white
- * @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
- * @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
- * @attr {Boolean} xs - sets size to extra small
- * @attr {Boolean} sm - sets size to small
- * @attr {Boolean} md - sets size to medium
- * @attr {Boolean} lg - sets size to large
- * @csspart element - apply style to adjust speed of animation
+ * The auro-menu element provides users a way to select from a list of options.
+ * @attr {Object} optionSelected - Specifies the current selected menuOption.
+ * @attr {String} matchWord - Specifies the a string used to highlight matched string parts in options.
+ * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
+ * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
+ * @attr {Boolean} loading - When true, loading slot will be showing
+ * @attr {String} value - Value selected for the menu.
+ * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
+ * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
+ * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
+ * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
+ * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
+ * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
+ * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
+ * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
+ * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @slot Slot for insertion of menu options.
  */
 
-// build the component class
-class AuroLoader extends r$6 {
+/* eslint-disable no-magic-numbers, max-lines */
+
+class AuroMenu extends r$6 {
   constructor() {
     super();
+    this.value = undefined;
+    this.optionSelected = undefined;
+    this.matchWord = undefined;
+    this.noCheckmark = false;
+    this.optionActive = undefined;
+    this.loading = false;
 
     /**
      * @private
      */
-    this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+    this.rootMenu = true;
 
     /**
      * @private
      */
-    this.mdCount = 3;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
     /**
      * @private
      */
-    this.smCount = 2;
+    this.nestingSpacer = '<span class="nestingSpacer"></span>';
 
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
-
-    this.orbit = false;
-    this.ringworm = false;
-    this.laser = false;
-    this.pulse = false;
+    this.loadingSlots = new Set();
   }
 
-  // function to define props used within the scope of this component
   static get properties() {
     return {
-      pulse: {
+      noCheckmark:    {
         type: Boolean,
         reflect: true
       },
-      orbit: {
+      disabled:    {
         type: Boolean,
         reflect: true
       },
-      ringworm: {
+      loading:     {
         type: Boolean,
         reflect: true
       },
-      laser: {
-        type: Boolean,
-        reflect: true
-      }
+      optionSelected: { type: Object },
+      optionActive:   { type: Object },
+      matchWord:      { type: String },
+      value:          { type: String }
     };
   }
 
   static get styles() {
     return [
-      i$c`${styleCss$2}`,
-      i$c`${colorCss$2}`,
-      i$c`${tokensCss$1}`
+      styleCss$2,
+      colorCss$2,
+      tokensCss$1
     ];
   }
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-loader"] - The name of element that you want to register to.
+   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
    *
    * @example
-   * AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
+   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
    *
    */
-  static register(name = "auro-loader") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
-  }
-
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
+  static register(name = "auro-menu") {
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenu);
   }
 
   /**
+   * Passes the noCheckmark attribute to all nested auro-menuoptions.
    * @private
-   * @returns {Array} Numbered array for template map.
+   * @returns {void}
    */
-  defineTemplate() {
-    let nodes = Array.from(Array(this.mdCount).keys());
-
-    if (this.orbit || this.laser) {
-      nodes = Array.from(Array(this.smCount).keys());
-    } else if (this.ringworm) {
-      nodes = Array.from(Array(0).keys());
-    }
+  handleNoCheckmarkAttr() {
+    if (this.noCheckmark) {
+      const menus = this.querySelectorAll('auro-menu, [auro-menu]');
 
-    return nodes;
-  }
+      menus.forEach((menu) => {
+        menu.setAttribute('noCheckmark', '');
+      });
 
-  // When using auroElement, use the following attribute and function when hiding content from screen readers.
-  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+      const options = this.querySelectorAll('auro-menuoption, [auro-menuoption]');
 
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    return x$2`
-      ${this.defineTemplate().map((idx) => x$2`
-        <span part="element" class="loader node-${idx}"></span>
-      `)}
+      options.forEach((option) => {
+        option.setAttribute('noCheckmark', '');
+      });
+    }
+  }
 
-      <div class="no-animation">Loading...</div>
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
-      ${this.ringworm ? x$2`
-        <svg  part="element" class="circular" viewBox="25 25 50 50">
-          <circle class="path" cx="50" cy="50" r="20" fill="none"/>
-        </svg>`
-        : ``
-      }
-    `;
+    this.addEventListener('keydown', this.handleKeyDown);
   }
-}
 
-var loaderVersion = '3.1.2';
-
-var styleCss$1 = i$c`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+  updated(changedProperties) {
+    if (changedProperties.has('matchWord')) {
+      this.markOptions();
+    }
 
-var colorCss$1 = i$c`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+    if (changedProperties.has('value')) {
+      this.selectByValue(this.value);
+    }
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+    if (changedProperties.has('disabled')) {
+      const options = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$2}});
+      for (const element of options) {
+        element.disabled = this.disabled;
+      }
+    }
+  }
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??E$2;
+  /**
+   * @private
+   * @param {Object} option - The menuoption to check for interactive state.
+   * @returns {Boolean} Returns true if the option is interactive.
+   */
+  optionInteractive(option) {
+    return !option.hasAttribute('hidden') && !option.hasAttribute('disabled') && !option.hasAttribute('static');
+  }
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+  /**
+   * @private
+   * @returns {void} When called will update the DOM with visible suggest text matches.
+   */
+  markOptions() {
+    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
 
+      // Escape special regex characters
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
 
-/**
- * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
- * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
- * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
- */
+      // Global, case-insensitive, unicode matching regex pattern
+      const regexWord = new RegExp(escapedWord, 'giu');
 
-class AuroElement extends r$6 {
+      this.items.forEach((item) => {
+        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
+          const nested = item.querySelectorAll('.nestingSpacer');
+          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
 
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      hidden:         { type: Boolean,
-                        reflect: true },
-      hiddenVisually: { type: Boolean,
-                        reflect: true },
-      hiddenAudible:  { type: Boolean,
-                        reflect: true },
-    };
+          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
+        }
+      });
+    }
   }
 
   /**
-   * @private Function that determines state of aria-hidden
+   * Reset the menu and all options.
    */
-  hideAudible(value) {
-    if (value) {
-      return 'true'
+  resetOptionsStates() {
+    this.optionSelected = undefined;
+    if (this.items) {
+      this.items.forEach((item) => {
+        item.classList.remove('active');
+        item.removeAttribute('selected');
+      });
     }
-
-    return 'false'
   }
-}
 
-var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
-
-/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
-
-const _fetchMap = new Map();
-
-/**
- * A callback to parse Response body.
- *
- * @callback ResponseParser
- * @param {Fetch.Response} response
- * @returns {Promise}
- */
+  /**
+   * Set the attributes on the selected menuoption, the menu value and stored option.
+   * @param {Object} option - The menuoption to be selected.
+   * @private
+   */
+  handleLocalSelectState(option) {
+    option.setAttribute('selected', '');
+    option.classList.add('active');
+    option.ariaSelected = true;
 
-/**
- * A minimal in-memory map to de-duplicate Fetch API media requests.
- *
- * @param {String} uri
- * @param {Object} [options={}]
- * @param {ResponseParser} [options.responseParser=(response) => response.text()]
- * @returns {Promise}
- */
-const cacheFetch = (uri, options = {}) => {
-  const responseParser = options.responseParser || ((response) => response.text());
-  if (!_fetchMap.has(uri)) {
-    _fetchMap.set(uri, fetch(uri).then(responseParser));
+    this.value = option.value;
+    this.optionSelected = option;
+    this.index = this.items.indexOf(option);
   }
-  return _fetchMap.get(uri);
-};
 
-var styleCss = i$c`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+  /**
+   * Notify selection change.
+   * @private
+   * @return {void}
+   */
+  notifySelectionChange() {
+    // this event needs to be removed after select and combobox are updated to use the new standard name
+    this.dispatchEvent(new CustomEvent('selectedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+    this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
 
+  /**
+   * Process actions for making making a menuoption selection.
+   */
+  makeSelection() {
+    if (!this.items) {
+      this.initItems();
+    }
 
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
- * @slot - Hidden from visibility, used for a11y if icon description is needed
- */
+    if (this.items[this.index] && !this.items[this.index].hasAttribute('disabled')) {
+      this.resetOptionsStates();
 
-// build the component class
-class BaseIcon extends AuroElement {
-  constructor() {
-    super();
-    this.onDark = false;
-  }
+      if (this.index >= 0) {
+        const option = this.items[this.index];
 
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      ...super.properties,
-      onDark: {
-        type: Boolean,
-        reflect: true
-      },
+        // only handle options that are not disabled, hidden or static
+        if (option && this.optionInteractive(option)) {
+          // fire custom event if defined otherwise make selection
+          if (option.hasAttribute('event')) {
+            this.dispatchEvent(new CustomEvent(option.getAttribute('event'), {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
 
-      /**
-       * @private
-       */
-      svg: {
-        attribute: false,
-        reflect: true
+            // this event needs to be removed after select and combobox are updated to use the new standard name
+            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
+
+            this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
+          } else {
+            this.handleLocalSelectState(option);
+          }
+        }
       }
-    };
-  }
+    }
 
-  static get styles() {
-    return i$c`
-      ${styleCss}
-    `;
+    this.notifySelectionChange();
   }
 
   /**
-   * Async function to fetch requested icon from npm CDN.
+   * Manage ArrowDown, ArrowUp and Enter keyboard events.
    * @private
-   * @param {string} category - Icon category.
-   * @param {string} name - Icon name.
-   * @returns {SVGElement} DOM - Ready HTML to be appended.
+   * @param {Object} event - Event object from the browser.
    */
-  async fetchIcon(category, name) {
-    let iconHTML = '';
+  handleKeyDown(event) {
+    event.preventDefault();
 
-    if (category === 'logos') {
-      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
-    } else {
-      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
-    }
+    // With ArrowDown/ArrowUp events, pass new value to selectNextItem()
+    // With Enter event, set value and apply attrs
+    switch (event.key) {
+      case "ArrowDown":
+        this.selectNextItem('down');
+        break;
 
-    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
+      case "ArrowUp":
+        this.selectNextItem('up');
+        break;
 
-    return dom.body.querySelector('svg');
+      case "Enter":
+        this.makeSelection();
+        break;
+    }
   }
 
-  // lifecycle function
-  async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+  /**
+   * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
+   * @private
+   */
+  initItems() {
+    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    this.handleNoCheckmarkAttr();
+  }
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+  /**
+   * Sets the index value of the selected item or first non-disabled menuoption.
+   * @private
+   */
+  getSelectedIndex() {
+    // find the first `selected` and not `disabled`, `hidden` or `static` option
+    const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
 
-        this.svg = penDOM.body.firstChild;
-      }
+    if (index >= 0) {
+      this.index = index;
+      this.makeSelection();
     }
   }
-}
 
-var tokensCss = i$c`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
+  /**
+   * Using value of current this.index evaluates index
+   * of next :focus to set based on array of this.items ignoring items
+   * with disabled attr.
+   *
+   * The event.target is not used as the function needs to know where to go,
+   * versus knowing where it is.
+   * @param {String} moveDirection - Up or Down based on keyboard event.
+   */
+  selectNextItem(moveDirection) {
+    if (this.index >= 0) {
+      this.items[this.index].classList.remove('active');
 
-var colorCss = i$c`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
+      // calculate which is the selection we should focus next
+      let increment = 0;
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+      if (moveDirection === 'down') {
+        increment = 1;
+      } else if (moveDirection === 'up') {
+        increment = -1;
+      }
 
+      this.index += increment;
 
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
- *
- * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
- * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
- * @attr {Boolean} customColor - Removes primary selector.
- * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
- * @attr {Boolean} label - Exposes content in slot as icon label.
- * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
- * @attr {Boolean} accent - Sets the icon to use the accent style.
- * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
- * @attr {Boolean} disabled - Sets the icon to use the disabled style.
- * @attr {Boolean} error - Sets the icon to use the error style.
- * @attr {Boolean} info - Sets the icon to use the info style.
- * @attr {Boolean} secondary - Sets the icon to use the secondary style.
- * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
- * @attr {Boolean} subtle - Sets the icon to use the subtle style.
- * @attr {Boolean} success - Sets the icon to use the success style.
- * @attr {Boolean} warning - Sets the icon to use the warning style.
- * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
- * @attr {String} uri - Set the uri for CDN used when fetching icons
- * @slot - Hidden from visibility, used for a11y if icon description is needed.
- * @slot svg - Used for custom SVG content.
- */
+      // keep looping inside the array of options
+      if (this.index > this.items.length - 1) {
+        this.index = 0;
+      } else if (this.index < 0) {
+        this.index = this.items.length - 1;
+      }
 
-// build the component class
-class AuroIcon extends BaseIcon {
-  constructor() {
-    super();
+      // check if new index is disabled, static or hidden, if so, execute again
+      if (!this.optionInteractive(this.items[this.index])) {
+        this.selectNextItem(moveDirection);
+      } else {
+        // apply focus to new index
+        this.updateActiveOption(this.index);
+      }
+    } else {
+      this.index = 0;
 
-    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
-
-    this.privateDefaults();
-  }
+      if (this.items[this.index].hasAttribute('hidden') || this.items[this.index].hasAttribute('disabled')) {
+        this.selectNextItem(moveDirection);
+      } else {
+        this.updateActiveOption(this.index);
+      }
+    }
+  }
 
   /**
-   * Internal Defaults.
+   * Used for applying indentation to each level of nested menu.
    * @private
-   * @returns {void}
+   * @param {String} menu - Root level menu object.
    */
-  privateDefaults() {
-    this.accent = false;
-    this.customColor = false;
-    this.customSvg = false;
-    this.disabled = false;
-    this.emphasis = false;
-    this.error = false;
-    this.info = false;
-    this.label = false;
-    this.primary = false;
-    this.secondary = false;
-    this.subtle = false;
-    this.success = false;
-    this.tertiary = false;
-    this.warning = false;
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
-  }
-
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      ...super.properties,
-      accent: {
-        type: Boolean,
-        reflect: true
-      },
-      ariaHidden: {
-        type: String,
-        reflect: true
-      },
-      category: {
-        type: String,
-        reflect: true
-      },
-      customColor: {
-        type: Boolean
-      },
-      customSvg: {
-        type: Boolean
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-      emphasis: {
-        type: Boolean,
-        reflect: true
-      },
-      error: {
-        type: Boolean,
-        reflect: true
-      },
-      info: {
-        type: Boolean,
-        reflect: true
-      },
-      label: {
-        type: Boolean,
-        reflect: true
-      },
-      name: {
-        type: String,
-        reflect: true
-      },
-      primary: {
-        type: Boolean,
-        reflect: true
-      },
-      secondary: {
-        type: Boolean,
-        reflect: true
-      },
-      subtle: {
-        type: Boolean,
-        reflect: true
-      },
-      success: {
-        type: Boolean,
-        reflect: true
-      },
-      tertiary: {
-        type: Boolean,
-        reflect: true
-      },
-      uri: {
-        type: String
-      },
-      warning: {
-        type: Boolean,
-        reflect: true
-      }
-    };
-  }
+  handleNestedMenus(menu) {
+    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu');
 
-  static get styles() {
-    return [
-      super.styles,
-      i$c`${tokensCss}`,
-      i$c`${styleCss}`,
-      i$c`${colorCss}`
-    ];
-  }
+    if (nestedMenus.length === 0) {
+      return;
+    }
 
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
-   *
-   */
-  static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
-  }
+    nestedMenus.forEach((nestedMenu) => {
+      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
 
-  connectedCallback() {
-    super.connectedCallback();
+      options.forEach((option) => {
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
+      });
 
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
+      this.handleNestedMenus(nestedMenu);
+    });
   }
 
   /**
-   * @returns {void} Exposes CSS parts for styling from parent components.
+   * Method to apply `selected` attribute to `menuoption` via `value`.
+   * @private
+   * @param {String} value - Must match a unique `menuoption` value.
    */
-  exposeCssParts() {
-    this.setAttribute('exportparts', 'svg:iconSvg');
-  }
-
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    const a11y = {
-      'labelContainer': true,
-      'util_displayHiddenVisually': !this.label
-    };
-
-    const classes = {
-      'label': this.label
-    };
-
-    return x$2`
-      <div
-        class="${e(classes)}"
-        title="${o(this.title || undefined)}">
-        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
-          ${this.customSvg ? x$2`
-              <slot name="svg"></slot>
-            ` : x$2`
-              ${this.svg}
-            `
-          }
-        </span>
-
-        <div class="${e(a11y)}">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-var iconVersion = '6.1.1';
-
-var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
-
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-
-/**
- * The auro-menu element provides users a way to define a menu option.
- *
- * @attr {String} value - Specifies the value to be sent to a server.
- * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
- * @attr {Boolean} selected - Specifies that an option is selected.
- * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
- * @slot Specifies text for an option, but is not the value.
- */
-class AuroMenuOption extends r$6 {
-  constructor() {
-    super();
-
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning$2();
-    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
-
-    this.selected = false;
-    this.nocheckmark = false;
-    this.disabled = false;
-
-    /**
-     * @private
-     */
-    this.tabIndex = -1;
+  selectByValue(value) {
+    let valueMatch = false;
+    if (!this.items) {
+      this.initItems();
+    }
 
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
-  }
+    this.index = undefined;
 
-  static get properties() {
-    return {
-      nocheckmark: {
-        type: Boolean,
-        reflect: true
-      },
-      selected:  {
-        type: Boolean,
-        reflect: true
-      },
-      disabled:  {
-        type: Boolean,
-        reflect: true
-      },
-      value: {
-        type: String,
-        reflect: true
-      },
-      tabIndex: {
-        type: Number,
-        reflect: true
+    if (this.value && this.value.length > 0) {
+      for (let index = 0; index < this.items.length; index += 1) {
+        if (this.items[index].value === value) {
+          valueMatch = true;
+          this.index = index;
+        }
       }
-    };
-  }
 
-  static get styles() {
-    return [
-      styleCss$1,
-      colorCss$1,
-      tokensCss$2
-    ];
-  }
-
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
-   *
-   */
-  static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenuOption);
-  }
+      if (!valueMatch) {
+        // reset the menu to no selection
+        this.index = undefined;
 
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+        // this event needs to be removed after select and combobox are updated to use the new standard name
+        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
 
-    this.setAttribute('role', 'option');
-    this.setAttribute('aria-selected', 'false');
+        this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
+      } else {
+        this.makeSelection();
+      }
+    } else {
+      this.resetOptionsStates();
 
-    this.addEventListener('mouseover', () => {
-      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
+      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
         bubbles: true,
         cancelable: false,
         composed: true,
-        detail: this
       }));
-    });
-  }
-
-  // observer for selected property changes
-  updated(changedProperties) {
-    if (changedProperties.has('selected')) {
-      this.setAttribute('aria-selected', this.selected.toString());
     }
   }
 
   /**
-   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
-   *
-   * @private
-   * @param {string} svgContent - The SVG content to be embedded.
-   * @returns {Element} The HTML element containing the SVG icon.
-   */
-  generateIconHtml(svgContent) {
-    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
-    const svg = dom.body.firstChild;
-
-    svg.setAttribute('slot', 'svg');
-
-    return u$6`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
-  }
-
-  render() {
-    return u$6`
-      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
-      <slot></slot>
-    `;
-  }
-}
-
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * The auro-menu element provides users a way to select from a list of options.
- * @attr {Object} optionSelected - Specifies the current selected menuOption.
- * @attr {String} matchWord - Specifies the a string used to highlight matched string parts in options.
- * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
- * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} loading - When true, loading slot will be showing
- * @attr {String} value - Value selected for the menu.
- * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
- * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
- * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
- * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
- * @slot Slot for insertion of menu options.
- */
-
-/* eslint-disable no-magic-numbers, max-lines */
-
-class AuroMenu extends r$6 {
-  constructor() {
-    super();
-    this.value = undefined;
-    this.optionSelected = undefined;
-    this.matchWord = undefined;
-    this.noCheckmark = false;
-    this.optionActive = undefined;
-    this.loading = false;
-
-    /**
-     * @private
-     */
-    this.rootMenu = true;
-
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
-
-    /**
-     * @private
-     */
-    this.nestingSpacer = '<span class="nestingSpacer"></span>';
-
-    const versioning = new AuroDependencyVersioning$2();
-    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
-  }
-
-  static get properties() {
-    return {
-      noCheckmark:    {
-        type: Boolean,
-        reflect: true
-      },
-      disabled:    {
-        type: Boolean,
-        reflect: true
-      },
-      loading:     {
-        type: Boolean,
-        reflect: true
-      },
-      optionSelected: { type: Object },
-      optionActive:   { type: Object },
-      matchWord:      { type: String },
-      value:          { type: String }
-    };
-  }
-
-  static get styles() {
-    return [
-      styleCss$3,
-      colorCss$3,
-      tokensCss$2
-    ];
-  }
-
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
-   *
-   */
-  static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenu);
-  }
-
-  /**
-   * Passes the noCheckmark attribute to all nested auro-menuoptions.
+   * Used to make the active state for options follow mouseover.
+   * @param {Number} index - Index of the menuoption that will be made active.
    * @private
-   * @returns {void}
    */
-  handleNoCheckmarkAttr() {
-    if (this.noCheckmark) {
-      const menus = this.querySelectorAll('auro-menu, [auro-menu]');
-
-      menus.forEach((menu) => {
-        menu.setAttribute('noCheckmark', '');
-      });
-
-      const options = this.querySelectorAll('auro-menuoption, [auro-menuoption]');
-
-      options.forEach((option) => {
-        option.setAttribute('noCheckmark', '');
-      });
-    }
-  }
-
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
-
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('matchWord')) {
-      this.markOptions();
-    }
-
-    if (changedProperties.has('value')) {
-      this.selectByValue(this.value);
-    }
+  updateActiveOption(index) {
+    this.items.forEach((item) => {
+      item.classList.remove('active');
+    });
+    this.items[index].classList.add('active');
+    this.optionActive = this.items[index];
 
-    if (changedProperties.has('disabled')) {
-      const options = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: this.items[index]
+    }));
 
-      for (const element of options) {
-        element.disabled = this.disabled;
-      }
-    }
+    this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: this.items[index]
+    }));
   }
 
   /**
+   * Used to only make a selection when a menuoption is receiving a mousedown event.
+   * @param {Event} evt - Mousedown event.
    * @private
-   * @param {Object} option - The menuoption to check for interactive state.
-   * @returns {Boolean} Returns true if the option is interactive.
    */
-  optionInteractive(option) {
-    return !option.hasAttribute('hidden') && !option.hasAttribute('disabled') && !option.hasAttribute('static');
+  handleMenuMouseDown(evt) {
+    if (evt.target !== this) {
+      this.makeSelection();
+    }
   }
 
   /**
+   * Used for @slotchange event on slotted loading placeholder element./**
    * @private
-   * @returns {void} When called will update the DOM with visible suggest text matches.
+   * @method handleLoadingSlotItems
+   * @param {Event} event - The event object containing information about the slot change.
    */
-  markOptions() {
-    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
-
-      // Escape special regex characters
-      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+  handleLoadingSlotItems(event) {
+    this.loadingSlots.add(event.target.getAttribute("name"), event.target.assignedNodes);
+    this.requestUpdate();
+  }
 
-      // Global, case-insensitive, unicode matching regex pattern
-      const regexWord = new RegExp(escapedWord, 'giu');
+  /**
+   * Used for @slotchange event on slotted element.
+   * @private
+   */
+  handleSlotItems() {
+    // Determine if this is the root of the menu/submenu layout.
+    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
+      this.rootMenu = false;
+    }
 
-      this.items.forEach((item) => {
-        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-          const nested = item.querySelectorAll('.nestingSpacer');
-          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+    // If this is the root menu (not a nested menu) handle events, states and styling.
+    if (this.rootMenu) {
+      this.initItems();
+      this.setAttribute('role', 'listbox');
+      this.setAttribute('root', '');
+      this.handleNestedMenus(this);
+      this.markOptions();
+      this.index = -1;
+      this.getSelectedIndex();
 
-          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
-        }
+      this.addEventListener('keydown', this.handleKeyDown);
+      this.addEventListener('mousedown', this.handleMenuMouseDown);
+      this.addEventListener('auroMenuOption-mouseover', (evt) => {
+        this.index = this.items.indexOf(evt.target);
+        this.updateActiveOption(this.index);
       });
+    } else {
+      // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
+      this.handleNoCheckmarkAttr();
     }
   }
 
-  /**
-   * Reset the menu and all options.
-   */
-  resetOptionsStates() {
-    this.optionSelected = undefined;
-    if (this.items) {
-      this.items.forEach((item) => {
-        item.classList.remove('active');
-        item.removeAttribute('selected');
-      });
+  render() {
+    if (this.loading) {
+      return x$2`
+        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+          <div>
+            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+          </div>
+        </auro-menuoption>
+      `;
     }
+    return x$2`<slot @slotchange=${this.handleSlotItems}></slot>`;
   }
+}
 
-  /**
-   * Set the attributes on the selected menuoption, the menu value and stored option.
-   * @param {Object} option - The menuoption to be selected.
-   * @private
-   */
-  handleLocalSelectState(option) {
-    option.setAttribute('selected', '');
-    option.classList.add('active');
-    option.ariaSelected = true;
+var styleCss$1 = i$c`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-    this.value = option.value;
-    this.optionSelected = option;
-    this.index = this.items.indexOf(option);
-  }
+var colorCss$1 = i$c`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
 
-  /**
-   * Notify selection change.
-   * @private
-   * @return {void}
-   */
-  notifySelectionChange() {
-    // this event needs to be removed after select and combobox are updated to use the new standard name
-    this.dispatchEvent(new CustomEvent('selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
 
-    this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$2}});
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o=o=>o??E$2;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+class AuroElement extends r$6 {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
   }
 
   /**
-   * Process actions for making making a menuoption selection.
+   * @private Function that determines state of aria-hidden
    */
-  makeSelection() {
-    if (!this.items) {
-      this.initItems();
+  hideAudible(value) {
+    if (value) {
+      return 'true'
     }
 
-    if (this.items[this.index] && !this.items[this.index].hasAttribute('disabled')) {
-      this.resetOptionsStates();
+    return 'false'
+  }
+}
 
-      if (this.index >= 0) {
-        const option = this.items[this.index];
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
-        // only handle options that are not disabled, hidden or static
-        if (option && this.optionInteractive(option)) {
-          // fire custom event if defined otherwise make selection
-          if (option.hasAttribute('event')) {
-            this.dispatchEvent(new CustomEvent(option.getAttribute('event'), {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
+/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
-            // this event needs to be removed after select and combobox are updated to use the new standard name
-            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
+const _fetchMap = new Map();
 
-            this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
-          } else {
-            this.handleLocalSelectState(option);
-          }
-        }
+/**
+ * A callback to parse Response body.
+ *
+ * @callback ResponseParser
+ * @param {Fetch.Response} response
+ * @returns {Promise}
+ */
+
+/**
+ * A minimal in-memory map to de-duplicate Fetch API media requests.
+ *
+ * @param {String} uri
+ * @param {Object} [options={}]
+ * @param {ResponseParser} [options.responseParser=(response) => response.text()]
+ * @returns {Promise}
+ */
+const cacheFetch = (uri, options = {}) => {
+  const responseParser = options.responseParser || ((response) => response.text());
+  if (!_fetchMap.has(uri)) {
+    _fetchMap.set(uri, fetch(uri).then(responseParser));
+  }
+  return _fetchMap.get(uri);
+};
+
+var styleCss = i$c`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
+ */
+
+// build the component class
+class BaseIcon extends AuroElement {
+  constructor() {
+    super();
+    this.onDark = false;
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      svg: {
+        attribute: false,
+        reflect: true
       }
-    }
+    };
+  }
 
-    this.notifySelectionChange();
+  static get styles() {
+    return i$c`
+      ${styleCss}
+    `;
   }
 
   /**
-   * Manage ArrowDown, ArrowUp and Enter keyboard events.
+   * Async function to fetch requested icon from npm CDN.
    * @private
-   * @param {Object} event - Event object from the browser.
+   * @param {string} category - Icon category.
+   * @param {string} name - Icon name.
+   * @returns {SVGElement} DOM - Ready HTML to be appended.
    */
-  handleKeyDown(event) {
-    event.preventDefault();
+  async fetchIcon(category, name) {
+    let iconHTML = '';
 
-    // With ArrowDown/ArrowUp events, pass new value to selectNextItem()
-    // With Enter event, set value and apply attrs
-    switch (event.key) {
-      case "ArrowDown":
-        this.selectNextItem('down');
-        break;
+    if (category === 'logos') {
+      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
+    } else {
+      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
+    }
 
-      case "ArrowUp":
-        this.selectNextItem('up');
-        break;
+    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
 
-      case "Enter":
-        this.makeSelection();
-        break;
+    return dom.body.querySelector('svg');
+  }
+
+  // lifecycle function
+  async firstUpdated() {
+    if (!this.customSvg) {
+      const svg = await this.fetchIcon(this.category, this.name);
+
+      if (svg) {
+        this.svg = svg;
+      } else if (!svg) {
+        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+
+        this.svg = penDOM.body.firstChild;
+      }
     }
   }
+}
 
-  /**
-   * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
-   * @private
-   */
-  initItems() {
-    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
-    this.handleNoCheckmarkAttr();
+var tokensCss = i$c`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
+
+var colorCss = i$c`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
+ *
+ * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
+ * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
+ * @attr {Boolean} customColor - Removes primary selector.
+ * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
+ * @attr {Boolean} label - Exposes content in slot as icon label.
+ * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
+ * @attr {Boolean} accent - Sets the icon to use the accent style.
+ * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
+ * @attr {Boolean} disabled - Sets the icon to use the disabled style.
+ * @attr {Boolean} error - Sets the icon to use the error style.
+ * @attr {Boolean} info - Sets the icon to use the info style.
+ * @attr {Boolean} secondary - Sets the icon to use the secondary style.
+ * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
+ * @attr {Boolean} subtle - Sets the icon to use the subtle style.
+ * @attr {Boolean} success - Sets the icon to use the success style.
+ * @attr {Boolean} warning - Sets the icon to use the warning style.
+ * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
+ * @attr {String} uri - Set the uri for CDN used when fetching icons
+ * @slot - Hidden from visibility, used for a11y if icon description is needed.
+ * @slot svg - Used for custom SVG content.
+ */
+
+// build the component class
+class AuroIcon extends BaseIcon {
+  constructor() {
+    super();
+
+    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+
+    this.privateDefaults();
   }
 
   /**
-   * Sets the index value of the selected item or first non-disabled menuoption.
+   * Internal Defaults.
    * @private
+   * @returns {void}
    */
-  getSelectedIndex() {
-    // find the first `selected` and not `disabled`, `hidden` or `static` option
-    const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
+  privateDefaults() {
+    this.accent = false;
+    this.customColor = false;
+    this.customSvg = false;
+    this.disabled = false;
+    this.emphasis = false;
+    this.error = false;
+    this.info = false;
+    this.label = false;
+    this.primary = false;
+    this.secondary = false;
+    this.subtle = false;
+    this.success = false;
+    this.tertiary = false;
+    this.warning = false;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+  }
 
-    if (index >= 0) {
-      this.index = index;
-      this.makeSelection();
-    }
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      accent: {
+        type: Boolean,
+        reflect: true
+      },
+      ariaHidden: {
+        type: String,
+        reflect: true
+      },
+      category: {
+        type: String,
+        reflect: true
+      },
+      customColor: {
+        type: Boolean
+      },
+      customSvg: {
+        type: Boolean
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      emphasis: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      info: {
+        type: Boolean,
+        reflect: true
+      },
+      label: {
+        type: Boolean,
+        reflect: true
+      },
+      name: {
+        type: String,
+        reflect: true
+      },
+      primary: {
+        type: Boolean,
+        reflect: true
+      },
+      secondary: {
+        type: Boolean,
+        reflect: true
+      },
+      subtle: {
+        type: Boolean,
+        reflect: true
+      },
+      success: {
+        type: Boolean,
+        reflect: true
+      },
+      tertiary: {
+        type: Boolean,
+        reflect: true
+      },
+      uri: {
+        type: String
+      },
+      warning: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      i$c`${tokensCss}`,
+      i$c`${styleCss}`,
+      i$c`${colorCss}`
+    ];
   }
 
   /**
-   * Using value of current this.index evaluates index
-   * of next :focus to set based on array of this.items ignoring items
-   * with disabled attr.
+   * This will register this element with the browser.
+   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
    *
-   * The event.target is not used as the function needs to know where to go,
-   * versus knowing where it is.
-   * @param {String} moveDirection - Up or Down based on keyboard event.
    */
-  selectNextItem(moveDirection) {
-    if (this.index >= 0) {
-      this.items[this.index].classList.remove('active');
-
-      // calculate which is the selection we should focus next
-      let increment = 0;
-
-      if (moveDirection === 'down') {
-        increment = 1;
-      } else if (moveDirection === 'up') {
-        increment = -1;
-      }
-
-      this.index += increment;
-
-      // keep looping inside the array of options
-      if (this.index > this.items.length - 1) {
-        this.index = 0;
-      } else if (this.index < 0) {
-        this.index = this.items.length - 1;
-      }
-
-      // check if new index is disabled, static or hidden, if so, execute again
-      if (!this.optionInteractive(this.items[this.index])) {
-        this.selectNextItem(moveDirection);
-      } else {
-        // apply focus to new index
-        this.updateActiveOption(this.index);
-      }
-    } else {
-      this.index = 0;
+  static register(name = "auro-icon") {
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
+  }
 
-      if (this.items[this.index].hasAttribute('hidden') || this.items[this.index].hasAttribute('disabled')) {
-        this.selectNextItem(moveDirection);
-      } else {
-        this.updateActiveOption(this.index);
-      }
-    }
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
   }
 
   /**
-   * Used for applying indentation to each level of nested menu.
-   * @private
-   * @param {String} menu - Root level menu object.
+   * @returns {void} Exposes CSS parts for styling from parent components.
    */
-  handleNestedMenus(menu) {
-    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu');
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'svg:iconSvg');
+  }
 
-    if (nestedMenus.length === 0) {
-      return;
-    }
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const a11y = {
+      'labelContainer': true,
+      'util_displayHiddenVisually': !this.label
+    };
 
-    nestedMenus.forEach((nestedMenu) => {
-      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
+    const classes = {
+      'label': this.label
+    };
 
-      options.forEach((option) => {
-        option.innerHTML = this.nestingSpacer + option.innerHTML;
-      });
+    return x$2`
+      <div
+        class="${e(classes)}"
+        title="${o(this.title || undefined)}">
+        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
+          ${this.customSvg ? x$2`
+              <slot name="svg"></slot>
+            ` : x$2`
+              ${this.svg}
+            `
+          }
+        </span>
 
-      this.handleNestedMenus(nestedMenu);
-    });
+        <div class="${e(a11y)}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
+}
 
-  /**
-   * Method to apply `selected` attribute to `menuoption` via `value`.
-   * @private
-   * @param {String} value - Must match a unique `menuoption` value.
-   */
-  selectByValue(value) {
-    let valueMatch = false;
-    if (!this.items) {
-      this.initItems();
-    }
+var iconVersion = '6.1.1';
 
-    this.index = undefined;
+var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
-    if (this.value && this.value.length > 0) {
-      for (let index = 0; index < this.items.length; index += 1) {
-        if (this.items[index].value === value) {
-          valueMatch = true;
-          this.index = index;
-        }
-      }
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-      if (!valueMatch) {
-        // reset the menu to no selection
-        this.index = undefined;
 
-        // this event needs to be removed after select and combobox are updated to use the new standard name
-        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
+/**
+ * The auro-menu element provides users a way to define a menu option.
+ *
+ * @attr {String} value - Specifies the value to be sent to a server.
+ * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
+ * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
+ * @attr {Boolean} selected - Specifies that an option is selected.
+ * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
+ * @slot Specifies text for an option, but is not the value.
+ */
+class AuroMenuOption extends r$6 {
+  constructor() {
+    super();
 
-        this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
-      } else {
-        this.makeSelection();
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning$2();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+
+    this.selected = false;
+    this.nocheckmark = false;
+    this.disabled = false;
+
+    /**
+     * @private
+     */
+    this.tabIndex = -1;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+  }
+
+  static get properties() {
+    return {
+      nocheckmark: {
+        type: Boolean,
+        reflect: true
+      },
+      selected:  {
+        type: Boolean,
+        reflect: true
+      },
+      disabled:  {
+        type: Boolean,
+        reflect: true
+      },
+      value: {
+        type: String,
+        reflect: true
+      },
+      tabIndex: {
+        type: Number,
+        reflect: true
       }
-    } else {
-      this.resetOptionsStates();
+    };
+  }
 
-      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
-    }
+  static get styles() {
+    return [
+      styleCss$1,
+      colorCss$1,
+      tokensCss$1
+    ];
   }
 
   /**
-   * Used to make the active state for options follow mouseover.
-   * @param {Number} index - Index of the menuoption that will be made active.
-   * @private
+   * This will register this element with the browser.
+   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
+   *
    */
-  updateActiveOption(index) {
-    this.items.forEach((item) => {
-      item.classList.remove('active');
-    });
-    this.items[index].classList.add('active');
-    this.optionActive = this.items[index];
+  static register(name = "auro-menuoption") {
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenuOption);
+  }
 
-    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
-    this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
+
+    this.addEventListener('mouseover', () => {
+      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+        detail: this
+      }));
+    });
   }
 
-  /**
-   * Used to only make a selection when a menuoption is receiving a mousedown event.
-   * @param {Event} evt - Mousedown event.
-   * @private
-   */
-  handleMenuMouseDown(evt) {
-    if (evt.target !== this) {
-      this.makeSelection();
+  // observer for selected property changes
+  updated(changedProperties) {
+    if (changedProperties.has('selected')) {
+      this.setAttribute('aria-selected', this.selected.toString());
     }
   }
 
   /**
-   * Used for @slotchange event on slotted element.
+   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
+   *
    * @private
+   * @param {string} svgContent - The SVG content to be embedded.
+   * @returns {Element} The HTML element containing the SVG icon.
    */
-  handleSlotItems() {
-    // Determine if this is the root of the menu/submenu layout.
-    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
-      this.rootMenu = false;
-    }
+  generateIconHtml(svgContent) {
+    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
+    const svg = dom.body.firstChild;
 
-    // If this is the root menu (not a nested menu) handle events, states and styling.
-    if (this.rootMenu) {
-      this.initItems();
-      this.setAttribute('role', 'listbox');
-      this.setAttribute('root', '');
-      this.handleNestedMenus(this);
-      this.markOptions();
-      this.index = -1;
-      this.getSelectedIndex();
+    svg.setAttribute('slot', 'svg');
 
-      this.addEventListener('keydown', this.handleKeyDown);
-      this.addEventListener('mousedown', this.handleMenuMouseDown);
-      this.addEventListener('auroMenuOption-mouseover', (evt) => {
-        this.index = this.items.indexOf(evt.target);
-        this.updateActiveOption(this.index);
-      });
-    } else {
-      // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
-      this.handleNoCheckmarkAttr();
-    }
+    return u$6`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
   }
 
   render() {
-    if (this.loading) {
-      return x$2`
-        <auro-menuoption disabled><${this.loaderTag} orbit xs></${this.loaderTag}><slot name="loading"></slot></auro-menuoption>
-      `;
-    }
-    return x$2`
-      <slot @slotchange=${this.handleSlotItems}></slot>
+    return u$6`
+      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
+      <slot></slot>
     `;
   }
 }
@@ -9168,6 +9073,7 @@ function initExamples(initCount) {
     valueExample();
     focusExample();
     inDialogExample();
+    auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
diff --git a/components/combobox/demo/index.min.js b/components/combobox/demo/index.min.js
index 3c350096..295d02f6 100644
--- a/components/combobox/demo/index.min.js
+++ b/components/combobox/demo/index.min.js
@@ -2797,7 +2797,7 @@ var colorCss$1$2 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.
 
 var tokensCss$5 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$6 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin-top:var(--ds-size-50, 0.25rem)}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss$5 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin-top:var(--ds-size-50, 0.25rem)}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss$5 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -2835,7 +2835,7 @@ class AuroDropdownBib extends r$5 {
 
   static get styles() {
     return [
-      styleCss$6,
+      styleCss$5,
       colorCss$5,
       tokensCss$5
     ];
@@ -3395,7 +3395,7 @@ const t$4=globalThis,e$1$1=t$4.ShadowRoot&&(void 0===t$4.ShadyCSS||t$4.ShadyCSS.
 
 var styleCss$3$1 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`;
 
-var colorCss$3$1 = i$2`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
+var colorCss$3 = i$2`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
 
 var tokensCss$3 = i$2`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
@@ -5470,7 +5470,7 @@ class BaseInput extends r {
   static get styles() {
     return [
       i$2`${styleCss$3$1}`,
-      i$2`${colorCss$3$1}`,
+      i$2`${colorCss$3}`,
       i$2`${tokensCss$3}`
     ];
   }
@@ -6373,7 +6373,7 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
   }
 };
 
-var tokensCss$2$1 = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
+var tokensCss$2 = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
 
 var colorCss$2$1 = i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
@@ -6519,7 +6519,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
   static get styles() {
     return [
       super.styles,
-      i$2`${tokensCss$2$1}`,
+      i$2`${tokensCss$2}`,
       i$2`${styleCss$2$1}`,
       i$2`${colorCss$2$1}`
     ];
@@ -6591,7 +6591,7 @@ var colorCss$1$1 = i$2`[auro-loader]{color:var(--ds-auro-button-loader-color)}.a
 
 var tokensCss$1$1 = i$2`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`;
 
-var styleCss$5 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
+var styleCss$4 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
 
 var colorCss$4 = i$2`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
 
@@ -6620,7 +6620,7 @@ var tokensCss$4 = i$2`:host{--ds-auro-loader-background-color: currentcolor;--ds
  */
 
 // build the component class
-let AuroLoader$1 = class AuroLoader extends r {
+class AuroLoader extends r {
   constructor() {
     super();
 
@@ -6674,7 +6674,7 @@ let AuroLoader$1 = class AuroLoader extends r {
 
   static get styles() {
     return [
-      i$2`${styleCss$5}`,
+      i$2`${styleCss$4}`,
       i$2`${colorCss$4}`,
       i$2`${tokensCss$4}`
     ];
@@ -6737,9 +6737,9 @@ let AuroLoader$1 = class AuroLoader extends r {
       }
     `;
   }
-};
+}
 
-var loaderVersion$1 = '3.1.1';
+var loaderVersion = '3.1.1';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6799,7 +6799,7 @@ class AuroButton extends r {
     /**
      * @private
      */
-    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion$1, AuroLoader$1);
+    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
   }
 
   static get styles() {
@@ -7203,7 +7203,7 @@ AuroInput.register();
 
 var inputVersion = '4.2.0';
 
-var styleCss$4 = i$c`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}:host combobox-dropdown::part(trigger){padding-right:var(--ds-size-150, 0.75rem)}`;
+var styleCss$3 = i$c`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}:host combobox-dropdown::part(trigger){padding-right:var(--ds-size-150, 0.75rem)}`;
 
 // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -7357,7 +7357,7 @@ class AuroCombobox extends r$6 {
   }
 
   static get styles() {
-    return [styleCss$4];
+    return [styleCss$3];
   }
 
   /**
@@ -7387,7 +7387,7 @@ class AuroCombobox extends r$6 {
       this.noMatchOption = undefined;
 
       this.options.forEach((option) => {
-        let matchString = option.innerText.toLowerCase();
+        let matchString = option.textContent.toLowerCase();
 
         if (option.hasAttribute('nomatch')) {
           this.noMatchOption = option;
@@ -7463,7 +7463,7 @@ class AuroCombobox extends r$6 {
       return;
     }
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
-      if ((this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
+      if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
         this.dropdown.show();
       }
     }
@@ -7507,7 +7507,7 @@ class AuroCombobox extends r$6 {
       return;
     }
 
-    this.menu.shadowRoot.addEventListener('slotchange', () => this.handleSlotChange());
+    this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
 
     if (this.checkmark) {
       this.menu.removeAttribute('nocheckmark');
@@ -7796,19 +7796,23 @@ class AuroCombobox extends r$6 {
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
+   * @param {Event} event - slotchange event
    * @returns {void}
    */
-  handleSlotChange() {
-    this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
-    this.options.forEach((opt) => {
-      if (this.checkmark) {
-        opt.removeAttribute('nocheckmark');
-      } else {
-        opt.setAttribute('nocheckmark', '');
-      }
-    });
+  handleSlotChange(event) {
+    // treat only generic menuoptions
+    if (!event.target.name) {
+      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+      this.options.forEach((opt) => {
+        if (this.checkmark) {
+          opt.removeAttribute('nocheckmark');
+        } else {
+          opt.setAttribute('nocheckmark', '');
+        }
+      });
 
-    this.handleMenuOptions();
+      this.handleMenuOptions();
+    }
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -7860,1197 +7864,1063 @@ class AuroCombobox extends r$6 {
   }
 }
 
-var styleCss$3 = i$c`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]){padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption){padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}`;
-
-var colorCss$3 = i$c`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
-
-var tokensCss$2 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
-
-var styleCss$2 = i$c`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
+var styleCss$2 = i$c`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
 
-var colorCss$2 = i$c`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
+var colorCss$2 = i$c`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
 
-var tokensCss$1 = i$c`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`;
+var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * The auro-loader element is an easy to use animated loader component.
- *
- * @attr {Boolean} pulse - sets loader type
- * @attr {Boolean} ringworm - sets loader type
- * @attr {Boolean} laser - sets loader type
- * @attr {Boolean} orbit - sets loader type
- * @attr {Boolean} white - sets color of loader to white
- * @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
- * @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
- * @attr {Boolean} xs - sets size to extra small
- * @attr {Boolean} sm - sets size to small
- * @attr {Boolean} md - sets size to medium
- * @attr {Boolean} lg - sets size to large
- * @csspart element - apply style to adjust speed of animation
+ * The auro-menu element provides users a way to select from a list of options.
+ * @attr {Object} optionSelected - Specifies the current selected menuOption.
+ * @attr {String} matchWord - Specifies the a string used to highlight matched string parts in options.
+ * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
+ * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
+ * @attr {Boolean} loading - When true, loading slot will be showing
+ * @attr {String} value - Value selected for the menu.
+ * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
+ * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
+ * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
+ * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
+ * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
+ * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
+ * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
+ * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
+ * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @slot Slot for insertion of menu options.
  */
 
-// build the component class
-class AuroLoader extends r$6 {
+/* eslint-disable no-magic-numbers, max-lines */
+
+class AuroMenu extends r$6 {
   constructor() {
     super();
+    this.value = undefined;
+    this.optionSelected = undefined;
+    this.matchWord = undefined;
+    this.noCheckmark = false;
+    this.optionActive = undefined;
+    this.loading = false;
 
     /**
      * @private
      */
-    this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+    this.rootMenu = true;
 
     /**
      * @private
      */
-    this.mdCount = 3;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
     /**
      * @private
      */
-    this.smCount = 2;
+    this.nestingSpacer = '<span class="nestingSpacer"></span>';
 
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
-
-    this.orbit = false;
-    this.ringworm = false;
-    this.laser = false;
-    this.pulse = false;
+    this.loadingSlots = new Set();
   }
 
-  // function to define props used within the scope of this component
   static get properties() {
     return {
-      pulse: {
+      noCheckmark:    {
         type: Boolean,
         reflect: true
       },
-      orbit: {
+      disabled:    {
         type: Boolean,
         reflect: true
       },
-      ringworm: {
+      loading:     {
         type: Boolean,
         reflect: true
       },
-      laser: {
-        type: Boolean,
-        reflect: true
-      }
+      optionSelected: { type: Object },
+      optionActive:   { type: Object },
+      matchWord:      { type: String },
+      value:          { type: String }
     };
   }
 
   static get styles() {
     return [
-      i$c`${styleCss$2}`,
-      i$c`${colorCss$2}`,
-      i$c`${tokensCss$1}`
+      styleCss$2,
+      colorCss$2,
+      tokensCss$1
     ];
   }
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-loader"] - The name of element that you want to register to.
+   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
    *
    * @example
-   * AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
+   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
    *
    */
-  static register(name = "auro-loader") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
-  }
-
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
+  static register(name = "auro-menu") {
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenu);
   }
 
   /**
+   * Passes the noCheckmark attribute to all nested auro-menuoptions.
    * @private
-   * @returns {Array} Numbered array for template map.
+   * @returns {void}
    */
-  defineTemplate() {
-    let nodes = Array.from(Array(this.mdCount).keys());
-
-    if (this.orbit || this.laser) {
-      nodes = Array.from(Array(this.smCount).keys());
-    } else if (this.ringworm) {
-      nodes = Array.from(Array(0).keys());
-    }
+  handleNoCheckmarkAttr() {
+    if (this.noCheckmark) {
+      const menus = this.querySelectorAll('auro-menu, [auro-menu]');
 
-    return nodes;
-  }
+      menus.forEach((menu) => {
+        menu.setAttribute('noCheckmark', '');
+      });
 
-  // When using auroElement, use the following attribute and function when hiding content from screen readers.
-  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+      const options = this.querySelectorAll('auro-menuoption, [auro-menuoption]');
 
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    return x$2`
-      ${this.defineTemplate().map((idx) => x$2`
-        <span part="element" class="loader node-${idx}"></span>
-      `)}
+      options.forEach((option) => {
+        option.setAttribute('noCheckmark', '');
+      });
+    }
+  }
 
-      <div class="no-animation">Loading...</div>
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
-      ${this.ringworm ? x$2`
-        <svg  part="element" class="circular" viewBox="25 25 50 50">
-          <circle class="path" cx="50" cy="50" r="20" fill="none"/>
-        </svg>`
-        : ``
-      }
-    `;
+    this.addEventListener('keydown', this.handleKeyDown);
   }
-}
 
-var loaderVersion = '3.1.2';
-
-var styleCss$1 = i$c`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+  updated(changedProperties) {
+    if (changedProperties.has('matchWord')) {
+      this.markOptions();
+    }
 
-var colorCss$1 = i$c`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+    if (changedProperties.has('value')) {
+      this.selectByValue(this.value);
+    }
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+    if (changedProperties.has('disabled')) {
+      const options = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$2}});
+      for (const element of options) {
+        element.disabled = this.disabled;
+      }
+    }
+  }
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??E$2;
+  /**
+   * @private
+   * @param {Object} option - The menuoption to check for interactive state.
+   * @returns {Boolean} Returns true if the option is interactive.
+   */
+  optionInteractive(option) {
+    return !option.hasAttribute('hidden') && !option.hasAttribute('disabled') && !option.hasAttribute('static');
+  }
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+  /**
+   * @private
+   * @returns {void} When called will update the DOM with visible suggest text matches.
+   */
+  markOptions() {
+    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
 
+      // Escape special regex characters
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
 
-/**
- * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
- * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
- * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
- */
+      // Global, case-insensitive, unicode matching regex pattern
+      const regexWord = new RegExp(escapedWord, 'giu');
 
-class AuroElement extends r$6 {
+      this.items.forEach((item) => {
+        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
+          const nested = item.querySelectorAll('.nestingSpacer');
+          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
 
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      hidden:         { type: Boolean,
-                        reflect: true },
-      hiddenVisually: { type: Boolean,
-                        reflect: true },
-      hiddenAudible:  { type: Boolean,
-                        reflect: true },
-    };
+          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
+        }
+      });
+    }
   }
 
   /**
-   * @private Function that determines state of aria-hidden
+   * Reset the menu and all options.
    */
-  hideAudible(value) {
-    if (value) {
-      return 'true'
+  resetOptionsStates() {
+    this.optionSelected = undefined;
+    if (this.items) {
+      this.items.forEach((item) => {
+        item.classList.remove('active');
+        item.removeAttribute('selected');
+      });
     }
-
-    return 'false'
   }
-}
-
-var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
-/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
+  /**
+   * Set the attributes on the selected menuoption, the menu value and stored option.
+   * @param {Object} option - The menuoption to be selected.
+   * @private
+   */
+  handleLocalSelectState(option) {
+    option.setAttribute('selected', '');
+    option.classList.add('active');
+    option.ariaSelected = true;
 
-const _fetchMap = new Map();
+    this.value = option.value;
+    this.optionSelected = option;
+    this.index = this.items.indexOf(option);
+  }
 
-/**
- * A callback to parse Response body.
- *
- * @callback ResponseParser
- * @param {Fetch.Response} response
- * @returns {Promise}
- */
+  /**
+   * Notify selection change.
+   * @private
+   * @return {void}
+   */
+  notifySelectionChange() {
+    // this event needs to be removed after select and combobox are updated to use the new standard name
+    this.dispatchEvent(new CustomEvent('selectedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
 
-/**
- * A minimal in-memory map to de-duplicate Fetch API media requests.
- *
- * @param {String} uri
- * @param {Object} [options={}]
- * @param {ResponseParser} [options.responseParser=(response) => response.text()]
- * @returns {Promise}
- */
-const cacheFetch = (uri, options = {}) => {
-  const responseParser = options.responseParser || ((response) => response.text());
-  if (!_fetchMap.has(uri)) {
-    _fetchMap.set(uri, fetch(uri).then(responseParser));
+    this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
   }
-  return _fetchMap.get(uri);
-};
-
-var styleCss = i$c`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+  /**
+   * Process actions for making making a menuoption selection.
+   */
+  makeSelection() {
+    if (!this.items) {
+      this.initItems();
+    }
 
+    if (this.items[this.index] && !this.items[this.index].hasAttribute('disabled')) {
+      this.resetOptionsStates();
 
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
- * @slot - Hidden from visibility, used for a11y if icon description is needed
- */
+      if (this.index >= 0) {
+        const option = this.items[this.index];
 
-// build the component class
-class BaseIcon extends AuroElement {
-  constructor() {
-    super();
-    this.onDark = false;
-  }
+        // only handle options that are not disabled, hidden or static
+        if (option && this.optionInteractive(option)) {
+          // fire custom event if defined otherwise make selection
+          if (option.hasAttribute('event')) {
+            this.dispatchEvent(new CustomEvent(option.getAttribute('event'), {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
 
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      ...super.properties,
-      onDark: {
-        type: Boolean,
-        reflect: true
-      },
+            // this event needs to be removed after select and combobox are updated to use the new standard name
+            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
 
-      /**
-       * @private
-       */
-      svg: {
-        attribute: false,
-        reflect: true
+            this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
+          } else {
+            this.handleLocalSelectState(option);
+          }
+        }
       }
-    };
-  }
+    }
 
-  static get styles() {
-    return i$c`
-      ${styleCss}
-    `;
+    this.notifySelectionChange();
   }
 
   /**
-   * Async function to fetch requested icon from npm CDN.
+   * Manage ArrowDown, ArrowUp and Enter keyboard events.
    * @private
-   * @param {string} category - Icon category.
-   * @param {string} name - Icon name.
-   * @returns {SVGElement} DOM - Ready HTML to be appended.
+   * @param {Object} event - Event object from the browser.
    */
-  async fetchIcon(category, name) {
-    let iconHTML = '';
+  handleKeyDown(event) {
+    event.preventDefault();
 
-    if (category === 'logos') {
-      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
-    } else {
-      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
-    }
+    // With ArrowDown/ArrowUp events, pass new value to selectNextItem()
+    // With Enter event, set value and apply attrs
+    switch (event.key) {
+      case "ArrowDown":
+        this.selectNextItem('down');
+        break;
 
-    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
+      case "ArrowUp":
+        this.selectNextItem('up');
+        break;
 
-    return dom.body.querySelector('svg');
+      case "Enter":
+        this.makeSelection();
+        break;
+    }
   }
 
-  // lifecycle function
-  async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+  /**
+   * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
+   * @private
+   */
+  initItems() {
+    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    this.handleNoCheckmarkAttr();
+  }
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+  /**
+   * Sets the index value of the selected item or first non-disabled menuoption.
+   * @private
+   */
+  getSelectedIndex() {
+    // find the first `selected` and not `disabled`, `hidden` or `static` option
+    const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
 
-        this.svg = penDOM.body.firstChild;
-      }
+    if (index >= 0) {
+      this.index = index;
+      this.makeSelection();
     }
   }
-}
 
-var tokensCss = i$c`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
-
-var colorCss = i$c`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
+  /**
+   * Using value of current this.index evaluates index
+   * of next :focus to set based on array of this.items ignoring items
+   * with disabled attr.
+   *
+   * The event.target is not used as the function needs to know where to go,
+   * versus knowing where it is.
+   * @param {String} moveDirection - Up or Down based on keyboard event.
+   */
+  selectNextItem(moveDirection) {
+    if (this.index >= 0) {
+      this.items[this.index].classList.remove('active');
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+      // calculate which is the selection we should focus next
+      let increment = 0;
 
+      if (moveDirection === 'down') {
+        increment = 1;
+      } else if (moveDirection === 'up') {
+        increment = -1;
+      }
 
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
- *
- * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
- * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
- * @attr {Boolean} customColor - Removes primary selector.
- * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
- * @attr {Boolean} label - Exposes content in slot as icon label.
- * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
- * @attr {Boolean} accent - Sets the icon to use the accent style.
- * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
- * @attr {Boolean} disabled - Sets the icon to use the disabled style.
- * @attr {Boolean} error - Sets the icon to use the error style.
- * @attr {Boolean} info - Sets the icon to use the info style.
- * @attr {Boolean} secondary - Sets the icon to use the secondary style.
- * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
- * @attr {Boolean} subtle - Sets the icon to use the subtle style.
- * @attr {Boolean} success - Sets the icon to use the success style.
- * @attr {Boolean} warning - Sets the icon to use the warning style.
- * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
- * @attr {String} uri - Set the uri for CDN used when fetching icons
- * @slot - Hidden from visibility, used for a11y if icon description is needed.
- * @slot svg - Used for custom SVG content.
- */
+      this.index += increment;
 
-// build the component class
-class AuroIcon extends BaseIcon {
-  constructor() {
-    super();
+      // keep looping inside the array of options
+      if (this.index > this.items.length - 1) {
+        this.index = 0;
+      } else if (this.index < 0) {
+        this.index = this.items.length - 1;
+      }
 
-    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+      // check if new index is disabled, static or hidden, if so, execute again
+      if (!this.optionInteractive(this.items[this.index])) {
+        this.selectNextItem(moveDirection);
+      } else {
+        // apply focus to new index
+        this.updateActiveOption(this.index);
+      }
+    } else {
+      this.index = 0;
 
-    this.privateDefaults();
+      if (this.items[this.index].hasAttribute('hidden') || this.items[this.index].hasAttribute('disabled')) {
+        this.selectNextItem(moveDirection);
+      } else {
+        this.updateActiveOption(this.index);
+      }
+    }
   }
 
   /**
-   * Internal Defaults.
+   * Used for applying indentation to each level of nested menu.
    * @private
-   * @returns {void}
+   * @param {String} menu - Root level menu object.
    */
-  privateDefaults() {
-    this.accent = false;
-    this.customColor = false;
-    this.customSvg = false;
-    this.disabled = false;
-    this.emphasis = false;
-    this.error = false;
-    this.info = false;
-    this.label = false;
-    this.primary = false;
-    this.secondary = false;
-    this.subtle = false;
-    this.success = false;
-    this.tertiary = false;
-    this.warning = false;
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
-  }
-
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      ...super.properties,
-      accent: {
-        type: Boolean,
-        reflect: true
-      },
-      ariaHidden: {
-        type: String,
-        reflect: true
-      },
-      category: {
-        type: String,
-        reflect: true
-      },
-      customColor: {
-        type: Boolean
-      },
-      customSvg: {
-        type: Boolean
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-      emphasis: {
-        type: Boolean,
-        reflect: true
-      },
-      error: {
-        type: Boolean,
-        reflect: true
-      },
-      info: {
-        type: Boolean,
-        reflect: true
-      },
-      label: {
-        type: Boolean,
-        reflect: true
-      },
-      name: {
-        type: String,
-        reflect: true
-      },
-      primary: {
-        type: Boolean,
-        reflect: true
-      },
-      secondary: {
-        type: Boolean,
-        reflect: true
-      },
-      subtle: {
-        type: Boolean,
-        reflect: true
-      },
-      success: {
-        type: Boolean,
-        reflect: true
-      },
-      tertiary: {
-        type: Boolean,
-        reflect: true
-      },
-      uri: {
-        type: String
-      },
-      warning: {
-        type: Boolean,
-        reflect: true
-      }
-    };
-  }
+  handleNestedMenus(menu) {
+    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu');
 
-  static get styles() {
-    return [
-      super.styles,
-      i$c`${tokensCss}`,
-      i$c`${styleCss}`,
-      i$c`${colorCss}`
-    ];
-  }
+    if (nestedMenus.length === 0) {
+      return;
+    }
 
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
-   *
-   */
-  static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
-  }
+    nestedMenus.forEach((nestedMenu) => {
+      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
 
-  connectedCallback() {
-    super.connectedCallback();
+      options.forEach((option) => {
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
+      });
 
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
+      this.handleNestedMenus(nestedMenu);
+    });
   }
 
   /**
-   * @returns {void} Exposes CSS parts for styling from parent components.
+   * Method to apply `selected` attribute to `menuoption` via `value`.
+   * @private
+   * @param {String} value - Must match a unique `menuoption` value.
    */
-  exposeCssParts() {
-    this.setAttribute('exportparts', 'svg:iconSvg');
-  }
-
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    const a11y = {
-      'labelContainer': true,
-      'util_displayHiddenVisually': !this.label
-    };
-
-    const classes = {
-      'label': this.label
-    };
-
-    return x$2`
-      <div
-        class="${e(classes)}"
-        title="${o(this.title || undefined)}">
-        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
-          ${this.customSvg ? x$2`
-              <slot name="svg"></slot>
-            ` : x$2`
-              ${this.svg}
-            `
-          }
-        </span>
-
-        <div class="${e(a11y)}">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-var iconVersion = '6.1.1';
-
-var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
-
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-
-/**
- * The auro-menu element provides users a way to define a menu option.
- *
- * @attr {String} value - Specifies the value to be sent to a server.
- * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
- * @attr {Boolean} selected - Specifies that an option is selected.
- * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
- * @slot Specifies text for an option, but is not the value.
- */
-class AuroMenuOption extends r$6 {
-  constructor() {
-    super();
-
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning$2();
-    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
-
-    this.selected = false;
-    this.nocheckmark = false;
-    this.disabled = false;
-
-    /**
-     * @private
-     */
-    this.tabIndex = -1;
+  selectByValue(value) {
+    let valueMatch = false;
+    if (!this.items) {
+      this.initItems();
+    }
 
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
-  }
+    this.index = undefined;
 
-  static get properties() {
-    return {
-      nocheckmark: {
-        type: Boolean,
-        reflect: true
-      },
-      selected:  {
-        type: Boolean,
-        reflect: true
-      },
-      disabled:  {
-        type: Boolean,
-        reflect: true
-      },
-      value: {
-        type: String,
-        reflect: true
-      },
-      tabIndex: {
-        type: Number,
-        reflect: true
+    if (this.value && this.value.length > 0) {
+      for (let index = 0; index < this.items.length; index += 1) {
+        if (this.items[index].value === value) {
+          valueMatch = true;
+          this.index = index;
+        }
       }
-    };
-  }
-
-  static get styles() {
-    return [
-      styleCss$1,
-      colorCss$1,
-      tokensCss$2
-    ];
-  }
 
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
-   *
-   */
-  static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenuOption);
-  }
+      if (!valueMatch) {
+        // reset the menu to no selection
+        this.index = undefined;
 
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+        // this event needs to be removed after select and combobox are updated to use the new standard name
+        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
 
-    this.setAttribute('role', 'option');
-    this.setAttribute('aria-selected', 'false');
+        this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
+      } else {
+        this.makeSelection();
+      }
+    } else {
+      this.resetOptionsStates();
 
-    this.addEventListener('mouseover', () => {
-      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
+      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
         bubbles: true,
         cancelable: false,
         composed: true,
-        detail: this
       }));
-    });
-  }
-
-  // observer for selected property changes
-  updated(changedProperties) {
-    if (changedProperties.has('selected')) {
-      this.setAttribute('aria-selected', this.selected.toString());
     }
   }
 
   /**
-   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
-   *
-   * @private
-   * @param {string} svgContent - The SVG content to be embedded.
-   * @returns {Element} The HTML element containing the SVG icon.
-   */
-  generateIconHtml(svgContent) {
-    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
-    const svg = dom.body.firstChild;
-
-    svg.setAttribute('slot', 'svg');
-
-    return u$6`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
-  }
-
-  render() {
-    return u$6`
-      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
-      <slot></slot>
-    `;
-  }
-}
-
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * The auro-menu element provides users a way to select from a list of options.
- * @attr {Object} optionSelected - Specifies the current selected menuOption.
- * @attr {String} matchWord - Specifies the a string used to highlight matched string parts in options.
- * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
- * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} loading - When true, loading slot will be showing
- * @attr {String} value - Value selected for the menu.
- * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
- * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
- * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
- * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
- * @slot Slot for insertion of menu options.
- */
-
-/* eslint-disable no-magic-numbers, max-lines */
-
-class AuroMenu extends r$6 {
-  constructor() {
-    super();
-    this.value = undefined;
-    this.optionSelected = undefined;
-    this.matchWord = undefined;
-    this.noCheckmark = false;
-    this.optionActive = undefined;
-    this.loading = false;
-
-    /**
-     * @private
-     */
-    this.rootMenu = true;
-
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
-
-    /**
-     * @private
-     */
-    this.nestingSpacer = '<span class="nestingSpacer"></span>';
-
-    const versioning = new AuroDependencyVersioning$2();
-    this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
-  }
-
-  static get properties() {
-    return {
-      noCheckmark:    {
-        type: Boolean,
-        reflect: true
-      },
-      disabled:    {
-        type: Boolean,
-        reflect: true
-      },
-      loading:     {
-        type: Boolean,
-        reflect: true
-      },
-      optionSelected: { type: Object },
-      optionActive:   { type: Object },
-      matchWord:      { type: String },
-      value:          { type: String }
-    };
-  }
-
-  static get styles() {
-    return [
-      styleCss$3,
-      colorCss$3,
-      tokensCss$2
-    ];
-  }
-
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
-   *
-   */
-  static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenu);
-  }
-
-  /**
-   * Passes the noCheckmark attribute to all nested auro-menuoptions.
+   * Used to make the active state for options follow mouseover.
+   * @param {Number} index - Index of the menuoption that will be made active.
    * @private
-   * @returns {void}
    */
-  handleNoCheckmarkAttr() {
-    if (this.noCheckmark) {
-      const menus = this.querySelectorAll('auro-menu, [auro-menu]');
-
-      menus.forEach((menu) => {
-        menu.setAttribute('noCheckmark', '');
-      });
-
-      const options = this.querySelectorAll('auro-menuoption, [auro-menuoption]');
-
-      options.forEach((option) => {
-        option.setAttribute('noCheckmark', '');
-      });
-    }
-  }
-
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
-
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('matchWord')) {
-      this.markOptions();
-    }
-
-    if (changedProperties.has('value')) {
-      this.selectByValue(this.value);
-    }
+  updateActiveOption(index) {
+    this.items.forEach((item) => {
+      item.classList.remove('active');
+    });
+    this.items[index].classList.add('active');
+    this.optionActive = this.items[index];
 
-    if (changedProperties.has('disabled')) {
-      const options = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: this.items[index]
+    }));
 
-      for (const element of options) {
-        element.disabled = this.disabled;
-      }
-    }
+    this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: this.items[index]
+    }));
   }
 
   /**
+   * Used to only make a selection when a menuoption is receiving a mousedown event.
+   * @param {Event} evt - Mousedown event.
    * @private
-   * @param {Object} option - The menuoption to check for interactive state.
-   * @returns {Boolean} Returns true if the option is interactive.
    */
-  optionInteractive(option) {
-    return !option.hasAttribute('hidden') && !option.hasAttribute('disabled') && !option.hasAttribute('static');
+  handleMenuMouseDown(evt) {
+    if (evt.target !== this) {
+      this.makeSelection();
+    }
   }
 
   /**
+   * Used for @slotchange event on slotted loading placeholder element./**
    * @private
-   * @returns {void} When called will update the DOM with visible suggest text matches.
+   * @method handleLoadingSlotItems
+   * @param {Event} event - The event object containing information about the slot change.
    */
-  markOptions() {
-    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
-
-      // Escape special regex characters
-      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+  handleLoadingSlotItems(event) {
+    this.loadingSlots.add(event.target.getAttribute("name"), event.target.assignedNodes);
+    this.requestUpdate();
+  }
 
-      // Global, case-insensitive, unicode matching regex pattern
-      const regexWord = new RegExp(escapedWord, 'giu');
+  /**
+   * Used for @slotchange event on slotted element.
+   * @private
+   */
+  handleSlotItems() {
+    // Determine if this is the root of the menu/submenu layout.
+    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
+      this.rootMenu = false;
+    }
 
-      this.items.forEach((item) => {
-        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-          const nested = item.querySelectorAll('.nestingSpacer');
-          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+    // If this is the root menu (not a nested menu) handle events, states and styling.
+    if (this.rootMenu) {
+      this.initItems();
+      this.setAttribute('role', 'listbox');
+      this.setAttribute('root', '');
+      this.handleNestedMenus(this);
+      this.markOptions();
+      this.index = -1;
+      this.getSelectedIndex();
 
-          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
-        }
+      this.addEventListener('keydown', this.handleKeyDown);
+      this.addEventListener('mousedown', this.handleMenuMouseDown);
+      this.addEventListener('auroMenuOption-mouseover', (evt) => {
+        this.index = this.items.indexOf(evt.target);
+        this.updateActiveOption(this.index);
       });
+    } else {
+      // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
+      this.handleNoCheckmarkAttr();
     }
   }
 
-  /**
-   * Reset the menu and all options.
-   */
-  resetOptionsStates() {
-    this.optionSelected = undefined;
-    if (this.items) {
-      this.items.forEach((item) => {
-        item.classList.remove('active');
-        item.removeAttribute('selected');
-      });
+  render() {
+    if (this.loading) {
+      return x$2`
+        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+          <div>
+            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+          </div>
+        </auro-menuoption>
+      `;
     }
+    return x$2`<slot @slotchange=${this.handleSlotItems}></slot>`;
   }
+}
 
-  /**
-   * Set the attributes on the selected menuoption, the menu value and stored option.
-   * @param {Object} option - The menuoption to be selected.
-   * @private
-   */
-  handleLocalSelectState(option) {
-    option.setAttribute('selected', '');
-    option.classList.add('active');
-    option.ariaSelected = true;
+var styleCss$1 = i$c`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-    this.value = option.value;
-    this.optionSelected = option;
-    this.index = this.items.indexOf(option);
-  }
+var colorCss$1 = i$c`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
 
-  /**
-   * Notify selection change.
-   * @private
-   * @return {void}
-   */
-  notifySelectionChange() {
-    // this event needs to be removed after select and combobox are updated to use the new standard name
-    this.dispatchEvent(new CustomEvent('selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
 
-    this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$2}});
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o=o=>o??E$2;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+class AuroElement extends r$6 {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
   }
 
   /**
-   * Process actions for making making a menuoption selection.
+   * @private Function that determines state of aria-hidden
    */
-  makeSelection() {
-    if (!this.items) {
-      this.initItems();
+  hideAudible(value) {
+    if (value) {
+      return 'true'
     }
 
-    if (this.items[this.index] && !this.items[this.index].hasAttribute('disabled')) {
-      this.resetOptionsStates();
+    return 'false'
+  }
+}
 
-      if (this.index >= 0) {
-        const option = this.items[this.index];
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
-        // only handle options that are not disabled, hidden or static
-        if (option && this.optionInteractive(option)) {
-          // fire custom event if defined otherwise make selection
-          if (option.hasAttribute('event')) {
-            this.dispatchEvent(new CustomEvent(option.getAttribute('event'), {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
+/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
-            // this event needs to be removed after select and combobox are updated to use the new standard name
-            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
+const _fetchMap = new Map();
 
-            this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
-          } else {
-            this.handleLocalSelectState(option);
-          }
-        }
+/**
+ * A callback to parse Response body.
+ *
+ * @callback ResponseParser
+ * @param {Fetch.Response} response
+ * @returns {Promise}
+ */
+
+/**
+ * A minimal in-memory map to de-duplicate Fetch API media requests.
+ *
+ * @param {String} uri
+ * @param {Object} [options={}]
+ * @param {ResponseParser} [options.responseParser=(response) => response.text()]
+ * @returns {Promise}
+ */
+const cacheFetch = (uri, options = {}) => {
+  const responseParser = options.responseParser || ((response) => response.text());
+  if (!_fetchMap.has(uri)) {
+    _fetchMap.set(uri, fetch(uri).then(responseParser));
+  }
+  return _fetchMap.get(uri);
+};
+
+var styleCss = i$c`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
+ */
+
+// build the component class
+class BaseIcon extends AuroElement {
+  constructor() {
+    super();
+    this.onDark = false;
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      svg: {
+        attribute: false,
+        reflect: true
       }
-    }
+    };
+  }
 
-    this.notifySelectionChange();
+  static get styles() {
+    return i$c`
+      ${styleCss}
+    `;
   }
 
   /**
-   * Manage ArrowDown, ArrowUp and Enter keyboard events.
+   * Async function to fetch requested icon from npm CDN.
    * @private
-   * @param {Object} event - Event object from the browser.
+   * @param {string} category - Icon category.
+   * @param {string} name - Icon name.
+   * @returns {SVGElement} DOM - Ready HTML to be appended.
    */
-  handleKeyDown(event) {
-    event.preventDefault();
+  async fetchIcon(category, name) {
+    let iconHTML = '';
 
-    // With ArrowDown/ArrowUp events, pass new value to selectNextItem()
-    // With Enter event, set value and apply attrs
-    switch (event.key) {
-      case "ArrowDown":
-        this.selectNextItem('down');
-        break;
+    if (category === 'logos') {
+      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
+    } else {
+      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
+    }
 
-      case "ArrowUp":
-        this.selectNextItem('up');
-        break;
+    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
 
-      case "Enter":
-        this.makeSelection();
-        break;
+    return dom.body.querySelector('svg');
+  }
+
+  // lifecycle function
+  async firstUpdated() {
+    if (!this.customSvg) {
+      const svg = await this.fetchIcon(this.category, this.name);
+
+      if (svg) {
+        this.svg = svg;
+      } else if (!svg) {
+        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+
+        this.svg = penDOM.body.firstChild;
+      }
     }
   }
+}
 
-  /**
-   * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
-   * @private
-   */
-  initItems() {
-    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
-    this.handleNoCheckmarkAttr();
+var tokensCss = i$c`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
+
+var colorCss = i$c`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
+ *
+ * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
+ * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
+ * @attr {Boolean} customColor - Removes primary selector.
+ * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
+ * @attr {Boolean} label - Exposes content in slot as icon label.
+ * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
+ * @attr {Boolean} accent - Sets the icon to use the accent style.
+ * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
+ * @attr {Boolean} disabled - Sets the icon to use the disabled style.
+ * @attr {Boolean} error - Sets the icon to use the error style.
+ * @attr {Boolean} info - Sets the icon to use the info style.
+ * @attr {Boolean} secondary - Sets the icon to use the secondary style.
+ * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
+ * @attr {Boolean} subtle - Sets the icon to use the subtle style.
+ * @attr {Boolean} success - Sets the icon to use the success style.
+ * @attr {Boolean} warning - Sets the icon to use the warning style.
+ * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
+ * @attr {String} uri - Set the uri for CDN used when fetching icons
+ * @slot - Hidden from visibility, used for a11y if icon description is needed.
+ * @slot svg - Used for custom SVG content.
+ */
+
+// build the component class
+class AuroIcon extends BaseIcon {
+  constructor() {
+    super();
+
+    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+
+    this.privateDefaults();
   }
 
   /**
-   * Sets the index value of the selected item or first non-disabled menuoption.
+   * Internal Defaults.
    * @private
+   * @returns {void}
    */
-  getSelectedIndex() {
-    // find the first `selected` and not `disabled`, `hidden` or `static` option
-    const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
+  privateDefaults() {
+    this.accent = false;
+    this.customColor = false;
+    this.customSvg = false;
+    this.disabled = false;
+    this.emphasis = false;
+    this.error = false;
+    this.info = false;
+    this.label = false;
+    this.primary = false;
+    this.secondary = false;
+    this.subtle = false;
+    this.success = false;
+    this.tertiary = false;
+    this.warning = false;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+  }
 
-    if (index >= 0) {
-      this.index = index;
-      this.makeSelection();
-    }
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      accent: {
+        type: Boolean,
+        reflect: true
+      },
+      ariaHidden: {
+        type: String,
+        reflect: true
+      },
+      category: {
+        type: String,
+        reflect: true
+      },
+      customColor: {
+        type: Boolean
+      },
+      customSvg: {
+        type: Boolean
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      emphasis: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      info: {
+        type: Boolean,
+        reflect: true
+      },
+      label: {
+        type: Boolean,
+        reflect: true
+      },
+      name: {
+        type: String,
+        reflect: true
+      },
+      primary: {
+        type: Boolean,
+        reflect: true
+      },
+      secondary: {
+        type: Boolean,
+        reflect: true
+      },
+      subtle: {
+        type: Boolean,
+        reflect: true
+      },
+      success: {
+        type: Boolean,
+        reflect: true
+      },
+      tertiary: {
+        type: Boolean,
+        reflect: true
+      },
+      uri: {
+        type: String
+      },
+      warning: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      i$c`${tokensCss}`,
+      i$c`${styleCss}`,
+      i$c`${colorCss}`
+    ];
   }
 
   /**
-   * Using value of current this.index evaluates index
-   * of next :focus to set based on array of this.items ignoring items
-   * with disabled attr.
+   * This will register this element with the browser.
+   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
    *
-   * The event.target is not used as the function needs to know where to go,
-   * versus knowing where it is.
-   * @param {String} moveDirection - Up or Down based on keyboard event.
    */
-  selectNextItem(moveDirection) {
-    if (this.index >= 0) {
-      this.items[this.index].classList.remove('active');
-
-      // calculate which is the selection we should focus next
-      let increment = 0;
-
-      if (moveDirection === 'down') {
-        increment = 1;
-      } else if (moveDirection === 'up') {
-        increment = -1;
-      }
-
-      this.index += increment;
-
-      // keep looping inside the array of options
-      if (this.index > this.items.length - 1) {
-        this.index = 0;
-      } else if (this.index < 0) {
-        this.index = this.items.length - 1;
-      }
-
-      // check if new index is disabled, static or hidden, if so, execute again
-      if (!this.optionInteractive(this.items[this.index])) {
-        this.selectNextItem(moveDirection);
-      } else {
-        // apply focus to new index
-        this.updateActiveOption(this.index);
-      }
-    } else {
-      this.index = 0;
+  static register(name = "auro-icon") {
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
+  }
 
-      if (this.items[this.index].hasAttribute('hidden') || this.items[this.index].hasAttribute('disabled')) {
-        this.selectNextItem(moveDirection);
-      } else {
-        this.updateActiveOption(this.index);
-      }
-    }
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
   }
 
   /**
-   * Used for applying indentation to each level of nested menu.
-   * @private
-   * @param {String} menu - Root level menu object.
+   * @returns {void} Exposes CSS parts for styling from parent components.
    */
-  handleNestedMenus(menu) {
-    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu');
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'svg:iconSvg');
+  }
 
-    if (nestedMenus.length === 0) {
-      return;
-    }
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const a11y = {
+      'labelContainer': true,
+      'util_displayHiddenVisually': !this.label
+    };
 
-    nestedMenus.forEach((nestedMenu) => {
-      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
+    const classes = {
+      'label': this.label
+    };
 
-      options.forEach((option) => {
-        option.innerHTML = this.nestingSpacer + option.innerHTML;
-      });
+    return x$2`
+      <div
+        class="${e(classes)}"
+        title="${o(this.title || undefined)}">
+        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
+          ${this.customSvg ? x$2`
+              <slot name="svg"></slot>
+            ` : x$2`
+              ${this.svg}
+            `
+          }
+        </span>
 
-      this.handleNestedMenus(nestedMenu);
-    });
+        <div class="${e(a11y)}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
+}
 
-  /**
-   * Method to apply `selected` attribute to `menuoption` via `value`.
-   * @private
-   * @param {String} value - Must match a unique `menuoption` value.
-   */
-  selectByValue(value) {
-    let valueMatch = false;
-    if (!this.items) {
-      this.initItems();
-    }
+var iconVersion = '6.1.1';
 
-    this.index = undefined;
+var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
-    if (this.value && this.value.length > 0) {
-      for (let index = 0; index < this.items.length; index += 1) {
-        if (this.items[index].value === value) {
-          valueMatch = true;
-          this.index = index;
-        }
-      }
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-      if (!valueMatch) {
-        // reset the menu to no selection
-        this.index = undefined;
 
-        // this event needs to be removed after select and combobox are updated to use the new standard name
-        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
+/**
+ * The auro-menu element provides users a way to define a menu option.
+ *
+ * @attr {String} value - Specifies the value to be sent to a server.
+ * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
+ * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
+ * @attr {Boolean} selected - Specifies that an option is selected.
+ * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
+ * @slot Specifies text for an option, but is not the value.
+ */
+class AuroMenuOption extends r$6 {
+  constructor() {
+    super();
 
-        this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
-      } else {
-        this.makeSelection();
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning$2();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+
+    this.selected = false;
+    this.nocheckmark = false;
+    this.disabled = false;
+
+    /**
+     * @private
+     */
+    this.tabIndex = -1;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+  }
+
+  static get properties() {
+    return {
+      nocheckmark: {
+        type: Boolean,
+        reflect: true
+      },
+      selected:  {
+        type: Boolean,
+        reflect: true
+      },
+      disabled:  {
+        type: Boolean,
+        reflect: true
+      },
+      value: {
+        type: String,
+        reflect: true
+      },
+      tabIndex: {
+        type: Number,
+        reflect: true
       }
-    } else {
-      this.resetOptionsStates();
+    };
+  }
 
-      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
-    }
+  static get styles() {
+    return [
+      styleCss$1,
+      colorCss$1,
+      tokensCss$1
+    ];
   }
 
   /**
-   * Used to make the active state for options follow mouseover.
-   * @param {Number} index - Index of the menuoption that will be made active.
-   * @private
+   * This will register this element with the browser.
+   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
+   *
    */
-  updateActiveOption(index) {
-    this.items.forEach((item) => {
-      item.classList.remove('active');
-    });
-    this.items[index].classList.add('active');
-    this.optionActive = this.items[index];
+  static register(name = "auro-menuoption") {
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenuOption);
+  }
 
-    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
-    this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
+
+    this.addEventListener('mouseover', () => {
+      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+        detail: this
+      }));
+    });
   }
 
-  /**
-   * Used to only make a selection when a menuoption is receiving a mousedown event.
-   * @param {Event} evt - Mousedown event.
-   * @private
-   */
-  handleMenuMouseDown(evt) {
-    if (evt.target !== this) {
-      this.makeSelection();
+  // observer for selected property changes
+  updated(changedProperties) {
+    if (changedProperties.has('selected')) {
+      this.setAttribute('aria-selected', this.selected.toString());
     }
   }
 
   /**
-   * Used for @slotchange event on slotted element.
+   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
+   *
    * @private
+   * @param {string} svgContent - The SVG content to be embedded.
+   * @returns {Element} The HTML element containing the SVG icon.
    */
-  handleSlotItems() {
-    // Determine if this is the root of the menu/submenu layout.
-    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
-      this.rootMenu = false;
-    }
+  generateIconHtml(svgContent) {
+    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
+    const svg = dom.body.firstChild;
 
-    // If this is the root menu (not a nested menu) handle events, states and styling.
-    if (this.rootMenu) {
-      this.initItems();
-      this.setAttribute('role', 'listbox');
-      this.setAttribute('root', '');
-      this.handleNestedMenus(this);
-      this.markOptions();
-      this.index = -1;
-      this.getSelectedIndex();
+    svg.setAttribute('slot', 'svg');
 
-      this.addEventListener('keydown', this.handleKeyDown);
-      this.addEventListener('mousedown', this.handleMenuMouseDown);
-      this.addEventListener('auroMenuOption-mouseover', (evt) => {
-        this.index = this.items.indexOf(evt.target);
-        this.updateActiveOption(this.index);
-      });
-    } else {
-      // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
-      this.handleNoCheckmarkAttr();
-    }
+    return u$6`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
   }
 
   render() {
-    if (this.loading) {
-      return x$2`
-        <auro-menuoption disabled><${this.loaderTag} orbit xs></${this.loaderTag}><slot name="loading"></slot></auro-menuoption>
-      `;
-    }
-    return x$2`
-      <slot @slotchange=${this.handleSlotItems}></slot>
+    return u$6`
+      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
+      <slot></slot>
     `;
   }
 }
diff --git a/components/combobox/docs/partials/api.md b/components/combobox/docs/partials/api.md
index 17986acc..a6cf1d29 100644
--- a/components/combobox/docs/partials/api.md
+++ b/components/combobox/docs/partials/api.md
@@ -224,6 +224,24 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
 
 </auro-accordion>
 
+#### Loading<a name="loading"></a>
+While the content in menu is loading, you can either does not show anytning or show a loading placeholder
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.js) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
 
 #### in Dialog
 
diff --git a/components/combobox/src/auro-combobox.js b/components/combobox/src/auro-combobox.js
index 6dd4c91d..758ba02d 100644
--- a/components/combobox/src/auro-combobox.js
+++ b/components/combobox/src/auro-combobox.js
@@ -200,7 +200,7 @@ export class AuroCombobox extends LitElement {
       this.noMatchOption = undefined;
 
       this.options.forEach((option) => {
-        let matchString = option.innerText.toLowerCase();
+        let matchString = option.textContent.toLowerCase();
 
         if (option.hasAttribute('nomatch')) {
           this.noMatchOption = option;
@@ -276,7 +276,7 @@ export class AuroCombobox extends LitElement {
       return;
     }
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
-      if ((this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
+      if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
         this.dropdown.show();
       }
     }
@@ -320,7 +320,7 @@ export class AuroCombobox extends LitElement {
       return;
     }
 
-    this.menu.shadowRoot.addEventListener('slotchange', () => this.handleSlotChange());
+    this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
 
     if (this.checkmark) {
       this.menu.removeAttribute('nocheckmark');
@@ -609,19 +609,23 @@ export class AuroCombobox extends LitElement {
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
+   * @param {Event} event - slotchange event
    * @returns {void}
    */
-  handleSlotChange() {
-    this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
-    this.options.forEach((opt) => {
-      if (this.checkmark) {
-        opt.removeAttribute('nocheckmark');
-      } else {
-        opt.setAttribute('nocheckmark', '');
-      }
-    });
+  handleSlotChange(event) {
+    // treat only generic menuoptions
+    if (!event.target.name) {
+      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+      this.options.forEach((opt) => {
+        if (this.checkmark) {
+          opt.removeAttribute('nocheckmark');
+        } else {
+          opt.setAttribute('nocheckmark', '');
+        }
+      });
 
-    this.handleMenuOptions();
+      this.handleMenuOptions();
+    }
   }
 
   // function that renders the HTML and CSS into  the scope of the component
diff --git a/components/menu/demo/api.min.js b/components/menu/demo/api.min.js
index d1f6e56a..8ed48533 100644
--- a/components/menu/demo/api.min.js
+++ b/components/menu/demo/api.min.js
@@ -64,7 +64,7 @@ const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{c
  * SPDX-License-Identifier: BSD-3-Clause
  */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i$2=globalThis.litElementPolyfillSupport;i$2?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
 
-var styleCss$2 = i$5`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]){padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption){padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem));color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
+var styleCss$2 = i$5`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$2 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
 
@@ -140,1105 +140,1105 @@ class AuroLibraryRuntimeUtils {
   }
 }
 
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * The auro-menu element provides users a way to select from a list of options.
+ * @attr {Object} optionSelected - Specifies the current selected menuOption.
+ * @attr {String} matchWord - Specifies the a string used to highlight matched string parts in options.
+ * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
+ * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
+ * @attr {Boolean} loading - When true, loading slot will be showing
+ * @attr {String} value - Value selected for the menu.
+ * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
+ * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
+ * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
+ * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
+ * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
+ * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
+ * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
+ * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
+ * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @slot Slot for insertion of menu options.
  */
-const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=!0;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
 
-var styleCss$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+/* eslint-disable no-magic-numbers, max-lines */
 
-var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+class AuroMenu extends r {
+  constructor() {
+    super();
+    this.value = undefined;
+    this.optionSelected = undefined;
+    this.matchWord = undefined;
+    this.noCheckmark = false;
+    this.optionActive = undefined;
+    this.loading = false;
 
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+    /**
+     * @private
+     */
+    this.rootMenu = true;
 
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
 
-class AuroDependencyVersioning {
+    /**
+     * @private
+     */
+    this.nestingSpacer = '<span class="nestingSpacer"></span>';
 
-  /**
-   * Generates a unique string to be used for child auro element naming.
-   * @private
-   * @param {string} baseName - Defines the first part of the unique element name.
-   * @param {string} version - Version of the component that will be appended to the baseName.
-   * @returns {string} - Unique string to be used for naming.
-   */
-  generateElementName(baseName, version) {
-    let result = baseName;
+    /**
+     * @private
+     */
+    this.loadingSlots = new Set();
+  }
 
-    result += '-';
-    result += version.replace(/[.]/g, '_');
+  static get properties() {
+    return {
+      noCheckmark:    {
+        type: Boolean,
+        reflect: true
+      },
+      disabled:    {
+        type: Boolean,
+        reflect: true
+      },
+      loading:     {
+        type: Boolean,
+        reflect: true
+      },
+      optionSelected: { type: Object },
+      optionActive:   { type: Object },
+      matchWord:      { type: String },
+      value:          { type: String }
+    };
+  }
 
-    return result;
+  static get styles() {
+    return [
+      styleCss$2,
+      colorCss$2,
+      tokensCss$1
+    ];
   }
 
   /**
-   * Generates a unique string to be used for child auro element naming.
-   * @param {string} baseName - Defines the first part of the unique element name.
-   * @param {string} version - Version of the component that will be appended to the baseName.
-   * @returns {string} - Unique string to be used for naming.
+   * This will register this element with the browser.
+   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
+   *
    */
-  generateTag(baseName, version, tagClass) {
-    const elementName = this.generateElementName(baseName, version);
-    const tag = i$1`${s(elementName)}`;
+  static register(name = "auro-menu") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
+  }
 
-    if (!customElements.get(elementName)) {
-      customElements.define(elementName, class extends tagClass {});
-    }
+  /**
+   * Passes the noCheckmark attribute to all nested auro-menuoptions.
+   * @private
+   * @returns {void}
+   */
+  handleNoCheckmarkAttr() {
+    if (this.noCheckmark) {
+      const menus = this.querySelectorAll('auro-menu, [auro-menu]');
 
-    return tag;
-  }
-}
+      menus.forEach((menu) => {
+        menu.setAttribute('noCheckmark', '');
+      });
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+      const options = this.querySelectorAll('auro-menuoption, [auro-menuoption]');
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
+      options.forEach((option) => {
+        option.setAttribute('noCheckmark', '');
+      });
+    }
+  }
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??E;
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
 
+  updated(changedProperties) {
+    if (changedProperties.has('matchWord')) {
+      this.markOptions();
+    }
 
-/**
- * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
- * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
- * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
- */
+    if (changedProperties.has('value')) {
+      this.selectByValue(this.value);
+    }
 
-class AuroElement extends r {
+    if (changedProperties.has('disabled')) {
+      const options = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
 
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      hidden:         { type: Boolean,
-                        reflect: true },
-      hiddenVisually: { type: Boolean,
-                        reflect: true },
-      hiddenAudible:  { type: Boolean,
-                        reflect: true },
-    };
+      for (const element of options) {
+        element.disabled = this.disabled;
+      }
+    }
   }
 
   /**
-   * @private Function that determines state of aria-hidden
+   * @private
+   * @param {Object} option - The menuoption to check for interactive state.
+   * @returns {Boolean} Returns true if the option is interactive.
    */
-  hideAudible(value) {
-    if (value) {
-      return 'true'
-    }
-
-    return 'false'
+  optionInteractive(option) {
+    return !option.hasAttribute('hidden') && !option.hasAttribute('disabled') && !option.hasAttribute('static');
   }
-}
 
-var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+  /**
+   * @private
+   * @returns {void} When called will update the DOM with visible suggest text matches.
+   */
+  markOptions() {
+    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
 
-/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
+      // Escape special regex characters
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
 
-const _fetchMap = new Map();
+      // Global, case-insensitive, unicode matching regex pattern
+      const regexWord = new RegExp(escapedWord, 'giu');
 
-/**
- * A callback to parse Response body.
- *
- * @callback ResponseParser
- * @param {Fetch.Response} response
- * @returns {Promise}
- */
+      this.items.forEach((item) => {
+        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
+          const nested = item.querySelectorAll('.nestingSpacer');
+          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
 
-/**
- * A minimal in-memory map to de-duplicate Fetch API media requests.
- *
- * @param {String} uri
- * @param {Object} [options={}]
- * @param {ResponseParser} [options.responseParser=(response) => response.text()]
- * @returns {Promise}
- */
-const cacheFetch = (uri, options = {}) => {
-  const responseParser = options.responseParser || ((response) => response.text());
-  if (!_fetchMap.has(uri)) {
-    _fetchMap.set(uri, fetch(uri).then(responseParser));
+          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
+        }
+      });
+    }
   }
-  return _fetchMap.get(uri);
-};
 
-var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+  /**
+   * Reset the menu and all options.
+   */
+  resetOptionsStates() {
+    this.optionSelected = undefined;
+    if (this.items) {
+      this.items.forEach((item) => {
+        item.classList.remove('active');
+        item.removeAttribute('selected');
+      });
+    }
+  }
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+  /**
+   * Set the attributes on the selected menuoption, the menu value and stored option.
+   * @param {Object} option - The menuoption to be selected.
+   * @private
+   */
+  handleLocalSelectState(option) {
+    option.setAttribute('selected', '');
+    option.classList.add('active');
+    option.ariaSelected = true;
 
+    this.value = option.value;
+    this.optionSelected = option;
+    this.index = this.items.indexOf(option);
+  }
 
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
- * @slot - Hidden from visibility, used for a11y if icon description is needed
- */
+  /**
+   * Notify selection change.
+   * @private
+   * @return {void}
+   */
+  notifySelectionChange() {
+    // this event needs to be removed after select and combobox are updated to use the new standard name
+    this.dispatchEvent(new CustomEvent('selectedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
 
-// build the component class
-class BaseIcon extends AuroElement {
-  constructor() {
-    super();
-    this.onDark = false;
+    this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
   }
 
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      ...super.properties,
-      onDark: {
-        type: Boolean,
-        reflect: true
-      },
+  /**
+   * Process actions for making making a menuoption selection.
+   */
+  makeSelection() {
+    if (!this.items) {
+      this.initItems();
+    }
 
-      /**
-       * @private
-       */
-      svg: {
-        attribute: false,
-        reflect: true
+    if (this.items[this.index] && !this.items[this.index].hasAttribute('disabled')) {
+      this.resetOptionsStates();
+
+      if (this.index >= 0) {
+        const option = this.items[this.index];
+
+        // only handle options that are not disabled, hidden or static
+        if (option && this.optionInteractive(option)) {
+          // fire custom event if defined otherwise make selection
+          if (option.hasAttribute('event')) {
+            this.dispatchEvent(new CustomEvent(option.getAttribute('event'), {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
+
+            // this event needs to be removed after select and combobox are updated to use the new standard name
+            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
+
+            this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
+          } else {
+            this.handleLocalSelectState(option);
+          }
+        }
       }
-    };
-  }
+    }
 
-  static get styles() {
-    return i$5`
-      ${styleCss}
-    `;
+    this.notifySelectionChange();
   }
 
   /**
-   * Async function to fetch requested icon from npm CDN.
+   * Manage ArrowDown, ArrowUp and Enter keyboard events.
    * @private
-   * @param {string} category - Icon category.
-   * @param {string} name - Icon name.
-   * @returns {SVGElement} DOM - Ready HTML to be appended.
+   * @param {Object} event - Event object from the browser.
    */
-  async fetchIcon(category, name) {
-    let iconHTML = '';
+  handleKeyDown(event) {
+    event.preventDefault();
 
-    if (category === 'logos') {
-      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
-    } else {
-      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
-    }
+    // With ArrowDown/ArrowUp events, pass new value to selectNextItem()
+    // With Enter event, set value and apply attrs
+    switch (event.key) {
+      case "ArrowDown":
+        this.selectNextItem('down');
+        break;
 
-    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
+      case "ArrowUp":
+        this.selectNextItem('up');
+        break;
 
-    return dom.body.querySelector('svg');
+      case "Enter":
+        this.makeSelection();
+        break;
+    }
   }
 
-  // lifecycle function
-  async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+  /**
+   * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
+   * @private
+   */
+  initItems() {
+    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    this.handleNoCheckmarkAttr();
+  }
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+  /**
+   * Sets the index value of the selected item or first non-disabled menuoption.
+   * @private
+   */
+  getSelectedIndex() {
+    // find the first `selected` and not `disabled`, `hidden` or `static` option
+    const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
 
-        this.svg = penDOM.body.firstChild;
-      }
+    if (index >= 0) {
+      this.index = index;
+      this.makeSelection();
     }
   }
-}
-
-var tokensCss = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
 
-var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
+  /**
+   * Using value of current this.index evaluates index
+   * of next :focus to set based on array of this.items ignoring items
+   * with disabled attr.
+   *
+   * The event.target is not used as the function needs to know where to go,
+   * versus knowing where it is.
+   * @param {String} moveDirection - Up or Down based on keyboard event.
+   */
+  selectNextItem(moveDirection) {
+    if (this.index >= 0) {
+      this.items[this.index].classList.remove('active');
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+      // calculate which is the selection we should focus next
+      let increment = 0;
 
+      if (moveDirection === 'down') {
+        increment = 1;
+      } else if (moveDirection === 'up') {
+        increment = -1;
+      }
 
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
- *
- * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
- * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
- * @attr {Boolean} customColor - Removes primary selector.
- * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
- * @attr {Boolean} label - Exposes content in slot as icon label.
- * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
- * @attr {Boolean} accent - Sets the icon to use the accent style.
- * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
- * @attr {Boolean} disabled - Sets the icon to use the disabled style.
- * @attr {Boolean} error - Sets the icon to use the error style.
- * @attr {Boolean} info - Sets the icon to use the info style.
- * @attr {Boolean} secondary - Sets the icon to use the secondary style.
- * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
- * @attr {Boolean} subtle - Sets the icon to use the subtle style.
- * @attr {Boolean} success - Sets the icon to use the success style.
- * @attr {Boolean} warning - Sets the icon to use the warning style.
- * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
- * @attr {String} uri - Set the uri for CDN used when fetching icons
- * @slot - Hidden from visibility, used for a11y if icon description is needed.
- * @slot svg - Used for custom SVG content.
- */
+      this.index += increment;
 
-// build the component class
-class AuroIcon extends BaseIcon {
-  constructor() {
-    super();
+      // keep looping inside the array of options
+      if (this.index > this.items.length - 1) {
+        this.index = 0;
+      } else if (this.index < 0) {
+        this.index = this.items.length - 1;
+      }
 
-    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+      // check if new index is disabled, static or hidden, if so, execute again
+      if (!this.optionInteractive(this.items[this.index])) {
+        this.selectNextItem(moveDirection);
+      } else {
+        // apply focus to new index
+        this.updateActiveOption(this.index);
+      }
+    } else {
+      this.index = 0;
 
-    this.privateDefaults();
+      if (this.items[this.index].hasAttribute('hidden') || this.items[this.index].hasAttribute('disabled')) {
+        this.selectNextItem(moveDirection);
+      } else {
+        this.updateActiveOption(this.index);
+      }
+    }
   }
 
   /**
-   * Internal Defaults.
+   * Used for applying indentation to each level of nested menu.
    * @private
-   * @returns {void}
+   * @param {String} menu - Root level menu object.
    */
-  privateDefaults() {
-    this.accent = false;
-    this.customColor = false;
-    this.customSvg = false;
-    this.disabled = false;
-    this.emphasis = false;
-    this.error = false;
-    this.info = false;
-    this.label = false;
-    this.primary = false;
-    this.secondary = false;
-    this.subtle = false;
-    this.success = false;
-    this.tertiary = false;
-    this.warning = false;
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-  }
-
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      ...super.properties,
-      accent: {
-        type: Boolean,
-        reflect: true
-      },
-      ariaHidden: {
-        type: String,
-        reflect: true
-      },
-      category: {
-        type: String,
-        reflect: true
-      },
-      customColor: {
-        type: Boolean
-      },
-      customSvg: {
-        type: Boolean
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-      emphasis: {
-        type: Boolean,
-        reflect: true
-      },
-      error: {
-        type: Boolean,
-        reflect: true
-      },
-      info: {
-        type: Boolean,
-        reflect: true
-      },
-      label: {
-        type: Boolean,
-        reflect: true
-      },
-      name: {
-        type: String,
-        reflect: true
-      },
-      primary: {
-        type: Boolean,
-        reflect: true
-      },
-      secondary: {
-        type: Boolean,
-        reflect: true
-      },
-      subtle: {
-        type: Boolean,
-        reflect: true
-      },
-      success: {
-        type: Boolean,
-        reflect: true
-      },
-      tertiary: {
-        type: Boolean,
-        reflect: true
-      },
-      uri: {
-        type: String
-      },
-      warning: {
-        type: Boolean,
-        reflect: true
-      }
-    };
-  }
+  handleNestedMenus(menu) {
+    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu');
 
-  static get styles() {
-    return [
-      super.styles,
-      i$5`${tokensCss}`,
-      i$5`${styleCss}`,
-      i$5`${colorCss}`
-    ];
-  }
+    if (nestedMenus.length === 0) {
+      return;
+    }
 
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
-   *
-   */
-  static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
-  }
+    nestedMenus.forEach((nestedMenu) => {
+      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
 
-  connectedCallback() {
-    super.connectedCallback();
+      options.forEach((option) => {
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
+      });
 
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
+      this.handleNestedMenus(nestedMenu);
+    });
   }
 
   /**
-   * @returns {void} Exposes CSS parts for styling from parent components.
+   * Method to apply `selected` attribute to `menuoption` via `value`.
+   * @private
+   * @param {String} value - Must match a unique `menuoption` value.
    */
-  exposeCssParts() {
-    this.setAttribute('exportparts', 'svg:iconSvg');
-  }
-
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    const a11y = {
-      'labelContainer': true,
-      'util_displayHiddenVisually': !this.label
-    };
-
-    const classes = {
-      'label': this.label
-    };
-
-    return x`
-      <div
-        class="${e(classes)}"
-        title="${o(this.title || undefined)}">
-        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
-          ${this.customSvg ? x`
-              <slot name="svg"></slot>
-            ` : x`
-              ${this.svg}
-            `
-          }
-        </span>
-
-        <div class="${e(a11y)}">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-var iconVersion = '6.1.1';
-
-var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
-
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-
-/**
- * The auro-menu element provides users a way to define a menu option.
- *
- * @attr {String} value - Specifies the value to be sent to a server.
- * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
- * @attr {Boolean} selected - Specifies that an option is selected.
- * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
- * @slot Specifies text for an option, but is not the value.
- */
-class AuroMenuOption extends r {
-  constructor() {
-    super();
+  selectByValue(value) {
+    let valueMatch = false;
+    if (!this.items) {
+      this.initItems();
+    }
 
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning();
-    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+    this.index = undefined;
 
-    this.selected = false;
-    this.nocheckmark = false;
-    this.disabled = false;
+    if (this.value && this.value.length > 0) {
+      for (let index = 0; index < this.items.length; index += 1) {
+        if (this.items[index].value === value) {
+          valueMatch = true;
+          this.index = index;
+        }
+      }
 
-    /**
-     * @private
-     */
-    this.tabIndex = -1;
+      if (!valueMatch) {
+        // reset the menu to no selection
+        this.index = undefined;
 
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-  }
+        // this event needs to be removed after select and combobox are updated to use the new standard name
+        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
 
-  static get properties() {
-    return {
-      nocheckmark: {
-        type: Boolean,
-        reflect: true
-      },
-      selected:  {
-        type: Boolean,
-        reflect: true
-      },
-      disabled:  {
-        type: Boolean,
-        reflect: true
-      },
-      value: {
-        type: String,
-        reflect: true
-      },
-      tabIndex: {
-        type: Number,
-        reflect: true
+        this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
+      } else {
+        this.makeSelection();
       }
-    };
-  }
+    } else {
+      this.resetOptionsStates();
 
-  static get styles() {
-    return [
-      styleCss$1,
-      colorCss$1,
-      tokensCss$1
-    ];
+      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      }));
+    }
   }
 
   /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
-   *
+   * Used to make the active state for options follow mouseover.
+   * @param {Number} index - Index of the menuoption that will be made active.
+   * @private
    */
-  static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
-  }
-
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  updateActiveOption(index) {
+    this.items.forEach((item) => {
+      item.classList.remove('active');
+    });
+    this.items[index].classList.add('active');
+    this.optionActive = this.items[index];
 
-    this.setAttribute('role', 'option');
-    this.setAttribute('aria-selected', 'false');
+    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: this.items[index]
+    }));
 
-    this.addEventListener('mouseover', () => {
-      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-        detail: this
-      }));
-    });
+    this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: this.items[index]
+    }));
   }
 
-  // observer for selected property changes
-  updated(changedProperties) {
-    if (changedProperties.has('selected')) {
-      this.setAttribute('aria-selected', this.selected.toString());
+  /**
+   * Used to only make a selection when a menuoption is receiving a mousedown event.
+   * @param {Event} evt - Mousedown event.
+   * @private
+   */
+  handleMenuMouseDown(evt) {
+    if (evt.target !== this) {
+      this.makeSelection();
     }
   }
 
   /**
-   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
-   *
+   * Used for @slotchange event on slotted loading placeholder element./**
    * @private
-   * @param {string} svgContent - The SVG content to be embedded.
-   * @returns {Element} The HTML element containing the SVG icon.
+   * @method handleLoadingSlotItems
+   * @param {Event} event - The event object containing information about the slot change.
    */
-  generateIconHtml(svgContent) {
-    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
-    const svg = dom.body.firstChild;
+  handleLoadingSlotItems(event) {
+    this.loadingSlots.add(event.target.getAttribute("name"), event.target.assignedNodes);
+    this.requestUpdate();
+  }
 
-    svg.setAttribute('slot', 'svg');
+  /**
+   * Used for @slotchange event on slotted element.
+   * @private
+   */
+  handleSlotItems() {
+    // Determine if this is the root of the menu/submenu layout.
+    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
+      this.rootMenu = false;
+    }
 
-    return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
+    // If this is the root menu (not a nested menu) handle events, states and styling.
+    if (this.rootMenu) {
+      this.initItems();
+      this.setAttribute('role', 'listbox');
+      this.setAttribute('root', '');
+      this.handleNestedMenus(this);
+      this.markOptions();
+      this.index = -1;
+      this.getSelectedIndex();
+
+      this.addEventListener('keydown', this.handleKeyDown);
+      this.addEventListener('mousedown', this.handleMenuMouseDown);
+      this.addEventListener('auroMenuOption-mouseover', (evt) => {
+        this.index = this.items.indexOf(evt.target);
+        this.updateActiveOption(this.index);
+      });
+    } else {
+      // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
+      this.handleNoCheckmarkAttr();
+    }
   }
 
   render() {
-    return u`
-      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
-      <slot></slot>
-    `;
+    if (this.loading) {
+      return x`
+        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+          <div>
+            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+          </div>
+        </auro-menuoption>
+      `;
+    }
+    return x`<slot @slotchange=${this.handleSlotItems}></slot>`;
   }
 }
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * The auro-menu element provides users a way to select from a list of options.
- * @attr {Object} optionSelected - Specifies the current selected menuOption.
- * @attr {String} matchWord - Specifies the a string used to highlight matched string parts in options.
- * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
- * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} loading - When true, loading slot will be showing
- * @attr {String} value - Value selected for the menu.
- * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
- * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
- * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
- * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
- * @slot Slot for insertion of menu options.
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
  */
+const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=!0;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
 
-/* eslint-disable no-magic-numbers, max-lines */
-
-class AuroMenu extends r {
-  constructor() {
-    super();
-    this.value = undefined;
-    this.optionSelected = undefined;
-    this.matchWord = undefined;
-    this.noCheckmark = false;
-    this.optionActive = undefined;
-    this.loading = false;
-
-    /**
-     * @private
-     */
-    this.rootMenu = true;
-
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-
-    /**
-     * @private
-     */
-    this.nestingSpacer = '<span class="nestingSpacer"></span>';
+var styleCss$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-    /**
-     * @private
-     */
-    this.loadingSlots = new Set();
-  }
+var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
 
-  static get properties() {
-    return {
-      noCheckmark:    {
-        type: Boolean,
-        reflect: true
-      },
-      disabled:    {
-        type: Boolean,
-        reflect: true
-      },
-      loading:     {
-        type: Boolean,
-        reflect: true
-      },
-      optionSelected: { type: Object },
-      optionActive:   { type: Object },
-      matchWord:      { type: String },
-      value:          { type: String }
-    };
-  }
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-  static get styles() {
-    return [
-      styleCss$2,
-      colorCss$2,
-      tokensCss$1
-    ];
-  }
 
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
-   *
-   */
-  static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
-  }
+class AuroDependencyVersioning {
 
   /**
-   * Passes the noCheckmark attribute to all nested auro-menuoptions.
+   * Generates a unique string to be used for child auro element naming.
    * @private
-   * @returns {void}
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
    */
-  handleNoCheckmarkAttr() {
-    if (this.noCheckmark) {
-      const menus = this.querySelectorAll('auro-menu, [auro-menu]');
+  generateElementName(baseName, version) {
+    let result = baseName;
+
+    result += '-';
+    result += version.replace(/[.]/g, '_');
 
-      menus.forEach((menu) => {
-        menu.setAttribute('noCheckmark', '');
-      });
+    return result;
+  }
 
-      const options = this.querySelectorAll('auro-menuoption, [auro-menuoption]');
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateTag(baseName, version, tagClass) {
+    const elementName = this.generateElementName(baseName, version);
+    const tag = i$1`${s(elementName)}`;
 
-      options.forEach((option) => {
-        option.setAttribute('noCheckmark', '');
-      });
+    if (!customElements.get(elementName)) {
+      customElements.define(elementName, class extends tagClass {});
     }
+
+    return tag;
   }
+}
 
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
 
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
 
-  updated(changedProperties) {
-    if (changedProperties.has('matchWord')) {
-      this.markOptions();
-    }
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o=o=>o??E;
 
-    if (changedProperties.has('value')) {
-      this.selectByValue(this.value);
-    }
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-    if (changedProperties.has('disabled')) {
-      const options = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
 
-      for (const element of options) {
-        element.disabled = this.disabled;
-      }
-    }
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+class AuroElement extends r {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
   }
 
   /**
-   * @private
-   * @param {Object} option - The menuoption to check for interactive state.
-   * @returns {Boolean} Returns true if the option is interactive.
+   * @private Function that determines state of aria-hidden
    */
-  optionInteractive(option) {
-    return !option.hasAttribute('hidden') && !option.hasAttribute('disabled') && !option.hasAttribute('static');
+  hideAudible(value) {
+    if (value) {
+      return 'true'
+    }
+
+    return 'false'
   }
+}
 
-  /**
-   * @private
-   * @returns {void} When called will update the DOM with visible suggest text matches.
-   */
-  markOptions() {
-    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
-      // Escape special regex characters
-      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
-      // Global, case-insensitive, unicode matching regex pattern
-      const regexWord = new RegExp(escapedWord, 'giu');
+const _fetchMap = new Map();
 
-      this.items.forEach((item) => {
-        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-          const nested = item.querySelectorAll('.nestingSpacer');
-          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+/**
+ * A callback to parse Response body.
+ *
+ * @callback ResponseParser
+ * @param {Fetch.Response} response
+ * @returns {Promise}
+ */
 
-          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
-        }
-      });
-    }
+/**
+ * A minimal in-memory map to de-duplicate Fetch API media requests.
+ *
+ * @param {String} uri
+ * @param {Object} [options={}]
+ * @param {ResponseParser} [options.responseParser=(response) => response.text()]
+ * @returns {Promise}
+ */
+const cacheFetch = (uri, options = {}) => {
+  const responseParser = options.responseParser || ((response) => response.text());
+  if (!_fetchMap.has(uri)) {
+    _fetchMap.set(uri, fetch(uri).then(responseParser));
   }
+  return _fetchMap.get(uri);
+};
 
-  /**
-   * Reset the menu and all options.
-   */
-  resetOptionsStates() {
-    this.optionSelected = undefined;
-    if (this.items) {
-      this.items.forEach((item) => {
-        item.classList.remove('active');
-        item.removeAttribute('selected');
-      });
-    }
-  }
+var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
 
-  /**
-   * Set the attributes on the selected menuoption, the menu value and stored option.
-   * @param {Object} option - The menuoption to be selected.
-   * @private
-   */
-  handleLocalSelectState(option) {
-    option.setAttribute('selected', '');
-    option.classList.add('active');
-    option.ariaSelected = true;
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-    this.value = option.value;
-    this.optionSelected = option;
-    this.index = this.items.indexOf(option);
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
+ */
+
+// build the component class
+class BaseIcon extends AuroElement {
+  constructor() {
+    super();
+    this.onDark = false;
   }
 
-  /**
-   * Notify selection change.
-   * @private
-   * @return {void}
-   */
-  notifySelectionChange() {
-    // this event needs to be removed after select and combobox are updated to use the new standard name
-    this.dispatchEvent(new CustomEvent('selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
 
-    this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
+      /**
+       * @private
+       */
+      svg: {
+        attribute: false,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return i$5`
+      ${styleCss}
+    `;
   }
 
   /**
-   * Process actions for making making a menuoption selection.
+   * Async function to fetch requested icon from npm CDN.
+   * @private
+   * @param {string} category - Icon category.
+   * @param {string} name - Icon name.
+   * @returns {SVGElement} DOM - Ready HTML to be appended.
    */
-  makeSelection() {
-    if (!this.items) {
-      this.initItems();
+  async fetchIcon(category, name) {
+    let iconHTML = '';
+
+    if (category === 'logos') {
+      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
+    } else {
+      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
     }
 
-    if (this.items[this.index] && !this.items[this.index].hasAttribute('disabled')) {
-      this.resetOptionsStates();
+    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
 
-      if (this.index >= 0) {
-        const option = this.items[this.index];
+    return dom.body.querySelector('svg');
+  }
 
-        // only handle options that are not disabled, hidden or static
-        if (option && this.optionInteractive(option)) {
-          // fire custom event if defined otherwise make selection
-          if (option.hasAttribute('event')) {
-            this.dispatchEvent(new CustomEvent(option.getAttribute('event'), {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
+  // lifecycle function
+  async firstUpdated() {
+    if (!this.customSvg) {
+      const svg = await this.fetchIcon(this.category, this.name);
 
-            // this event needs to be removed after select and combobox are updated to use the new standard name
-            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
+      if (svg) {
+        this.svg = svg;
+      } else if (!svg) {
+        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-            this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
-          } else {
-            this.handleLocalSelectState(option);
-          }
-        }
+        this.svg = penDOM.body.firstChild;
       }
     }
-
-    this.notifySelectionChange();
   }
+}
 
-  /**
-   * Manage ArrowDown, ArrowUp and Enter keyboard events.
-   * @private
-   * @param {Object} event - Event object from the browser.
-   */
-  handleKeyDown(event) {
-    event.preventDefault();
+var tokensCss = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
 
-    // With ArrowDown/ArrowUp events, pass new value to selectNextItem()
-    // With Enter event, set value and apply attrs
-    switch (event.key) {
-      case "ArrowDown":
-        this.selectNextItem('down');
-        break;
+var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
-      case "ArrowUp":
-        this.selectNextItem('up');
-        break;
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-      case "Enter":
-        this.makeSelection();
-        break;
-    }
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
+ *
+ * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
+ * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
+ * @attr {Boolean} customColor - Removes primary selector.
+ * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
+ * @attr {Boolean} label - Exposes content in slot as icon label.
+ * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
+ * @attr {Boolean} accent - Sets the icon to use the accent style.
+ * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
+ * @attr {Boolean} disabled - Sets the icon to use the disabled style.
+ * @attr {Boolean} error - Sets the icon to use the error style.
+ * @attr {Boolean} info - Sets the icon to use the info style.
+ * @attr {Boolean} secondary - Sets the icon to use the secondary style.
+ * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
+ * @attr {Boolean} subtle - Sets the icon to use the subtle style.
+ * @attr {Boolean} success - Sets the icon to use the success style.
+ * @attr {Boolean} warning - Sets the icon to use the warning style.
+ * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
+ * @attr {String} uri - Set the uri for CDN used when fetching icons
+ * @slot - Hidden from visibility, used for a11y if icon description is needed.
+ * @slot svg - Used for custom SVG content.
+ */
+
+// build the component class
+class AuroIcon extends BaseIcon {
+  constructor() {
+    super();
+
+    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+
+    this.privateDefaults();
   }
 
   /**
-   * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
+   * Internal Defaults.
    * @private
+   * @returns {void}
    */
-  initItems() {
-    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
-    this.handleNoCheckmarkAttr();
+  privateDefaults() {
+    this.accent = false;
+    this.customColor = false;
+    this.customSvg = false;
+    this.disabled = false;
+    this.emphasis = false;
+    this.error = false;
+    this.info = false;
+    this.label = false;
+    this.primary = false;
+    this.secondary = false;
+    this.subtle = false;
+    this.success = false;
+    this.tertiary = false;
+    this.warning = false;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
-  /**
-   * Sets the index value of the selected item or first non-disabled menuoption.
-   * @private
-   */
-  getSelectedIndex() {
-    // find the first `selected` and not `disabled`, `hidden` or `static` option
-    const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      accent: {
+        type: Boolean,
+        reflect: true
+      },
+      ariaHidden: {
+        type: String,
+        reflect: true
+      },
+      category: {
+        type: String,
+        reflect: true
+      },
+      customColor: {
+        type: Boolean
+      },
+      customSvg: {
+        type: Boolean
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      emphasis: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      info: {
+        type: Boolean,
+        reflect: true
+      },
+      label: {
+        type: Boolean,
+        reflect: true
+      },
+      name: {
+        type: String,
+        reflect: true
+      },
+      primary: {
+        type: Boolean,
+        reflect: true
+      },
+      secondary: {
+        type: Boolean,
+        reflect: true
+      },
+      subtle: {
+        type: Boolean,
+        reflect: true
+      },
+      success: {
+        type: Boolean,
+        reflect: true
+      },
+      tertiary: {
+        type: Boolean,
+        reflect: true
+      },
+      uri: {
+        type: String
+      },
+      warning: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
 
-    if (index >= 0) {
-      this.index = index;
-      this.makeSelection();
-    }
+  static get styles() {
+    return [
+      super.styles,
+      i$5`${tokensCss}`,
+      i$5`${styleCss}`,
+      i$5`${colorCss}`
+    ];
   }
 
   /**
-   * Using value of current this.index evaluates index
-   * of next :focus to set based on array of this.items ignoring items
-   * with disabled attr.
+   * This will register this element with the browser.
+   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
    *
-   * The event.target is not used as the function needs to know where to go,
-   * versus knowing where it is.
-   * @param {String} moveDirection - Up or Down based on keyboard event.
    */
-  selectNextItem(moveDirection) {
-    if (this.index >= 0) {
-      this.items[this.index].classList.remove('active');
+  static register(name = "auro-icon") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
+  }
 
-      // calculate which is the selection we should focus next
-      let increment = 0;
+  connectedCallback() {
+    super.connectedCallback();
 
-      if (moveDirection === 'down') {
-        increment = 1;
-      } else if (moveDirection === 'up') {
-        increment = -1;
-      }
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
+  }
 
-      this.index += increment;
+  /**
+   * @returns {void} Exposes CSS parts for styling from parent components.
+   */
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'svg:iconSvg');
+  }
 
-      // keep looping inside the array of options
-      if (this.index > this.items.length - 1) {
-        this.index = 0;
-      } else if (this.index < 0) {
-        this.index = this.items.length - 1;
-      }
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const a11y = {
+      'labelContainer': true,
+      'util_displayHiddenVisually': !this.label
+    };
 
-      // check if new index is disabled, static or hidden, if so, execute again
-      if (!this.optionInteractive(this.items[this.index])) {
-        this.selectNextItem(moveDirection);
-      } else {
-        // apply focus to new index
-        this.updateActiveOption(this.index);
-      }
-    } else {
-      this.index = 0;
+    const classes = {
+      'label': this.label
+    };
+
+    return x`
+      <div
+        class="${e(classes)}"
+        title="${o(this.title || undefined)}">
+        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
+          ${this.customSvg ? x`
+              <slot name="svg"></slot>
+            ` : x`
+              ${this.svg}
+            `
+          }
+        </span>
 
-      if (this.items[this.index].hasAttribute('hidden') || this.items[this.index].hasAttribute('disabled')) {
-        this.selectNextItem(moveDirection);
-      } else {
-        this.updateActiveOption(this.index);
-      }
-    }
+        <div class="${e(a11y)}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
+}
 
-  /**
-   * Used for applying indentation to each level of nested menu.
-   * @private
-   * @param {String} menu - Root level menu object.
-   */
-  handleNestedMenus(menu) {
-    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu');
-
-    if (nestedMenus.length === 0) {
-      return;
-    }
+var iconVersion = '6.1.1';
 
-    nestedMenus.forEach((nestedMenu) => {
-      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
+var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
-      options.forEach((option) => {
-        option.innerHTML = this.nestingSpacer + option.innerHTML;
-      });
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-      this.handleNestedMenus(nestedMenu);
-    });
-  }
 
-  /**
-   * Method to apply `selected` attribute to `menuoption` via `value`.
-   * @private
-   * @param {String} value - Must match a unique `menuoption` value.
-   */
-  selectByValue(value) {
-    let valueMatch = false;
-    if (!this.items) {
-      this.initItems();
-    }
+/**
+ * The auro-menu element provides users a way to define a menu option.
+ *
+ * @attr {String} value - Specifies the value to be sent to a server.
+ * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
+ * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
+ * @attr {Boolean} selected - Specifies that an option is selected.
+ * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
+ * @slot Specifies text for an option, but is not the value.
+ */
+class AuroMenuOption extends r {
+  constructor() {
+    super();
 
-    this.index = undefined;
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
 
-    if (this.value && this.value.length > 0) {
-      for (let index = 0; index < this.items.length; index += 1) {
-        if (this.items[index].value === value) {
-          valueMatch = true;
-          this.index = index;
-        }
-      }
+    this.selected = false;
+    this.nocheckmark = false;
+    this.disabled = false;
 
-      if (!valueMatch) {
-        // reset the menu to no selection
-        this.index = undefined;
+    /**
+     * @private
+     */
+    this.tabIndex = -1;
 
-        // this event needs to be removed after select and combobox are updated to use the new standard name
-        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
 
-        this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
-      } else {
-        this.makeSelection();
+  static get properties() {
+    return {
+      nocheckmark: {
+        type: Boolean,
+        reflect: true
+      },
+      selected:  {
+        type: Boolean,
+        reflect: true
+      },
+      disabled:  {
+        type: Boolean,
+        reflect: true
+      },
+      value: {
+        type: String,
+        reflect: true
+      },
+      tabIndex: {
+        type: Number,
+        reflect: true
       }
-    } else {
-      this.resetOptionsStates();
+    };
+  }
 
-      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
-    }
+  static get styles() {
+    return [
+      styleCss$1,
+      colorCss$1,
+      tokensCss$1
+    ];
   }
 
   /**
-   * Used to make the active state for options follow mouseover.
-   * @param {Number} index - Index of the menuoption that will be made active.
-   * @private
+   * This will register this element with the browser.
+   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
+   *
    */
-  updateActiveOption(index) {
-    this.items.forEach((item) => {
-      item.classList.remove('active');
-    });
-    this.items[index].classList.add('active');
-    this.optionActive = this.items[index];
+  static register(name = "auro-menuoption") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
+  }
 
-    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
-    this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
-  }
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
 
-  /**
-   * Used to only make a selection when a menuoption is receiving a mousedown event.
-   * @param {Event} evt - Mousedown event.
-   * @private
-   */
-  handleMenuMouseDown(evt) {
-    if (evt.target !== this) {
-      this.makeSelection();
-    }
+    this.addEventListener('mouseover', () => {
+      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+        detail: this
+      }));
+    });
   }
 
-  /**
-   * Used for @slotchange event on slotted loading placeholder element./**
-   * @private
-   * @method handleLoadingSlotItems
-   * @param {Event} event - The event object containing information about the slot change.
-   */
-  handleLoadingSlotItems(event) {
-    this.loadingSlots.add(event.target.getAttribute("name"), event.target.assignedNodes);
-    this.requestUpdate();
+  // observer for selected property changes
+  updated(changedProperties) {
+    if (changedProperties.has('selected')) {
+      this.setAttribute('aria-selected', this.selected.toString());
+    }
   }
 
   /**
-   * Used for @slotchange event on slotted element.
+   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
+   *
    * @private
+   * @param {string} svgContent - The SVG content to be embedded.
+   * @returns {Element} The HTML element containing the SVG icon.
    */
-  handleSlotItems() {
-    // Determine if this is the root of the menu/submenu layout.
-    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
-      this.rootMenu = false;
-    }
+  generateIconHtml(svgContent) {
+    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
+    const svg = dom.body.firstChild;
 
-    // If this is the root menu (not a nested menu) handle events, states and styling.
-    if (this.rootMenu) {
-      this.initItems();
-      this.setAttribute('role', 'listbox');
-      this.setAttribute('root', '');
-      this.handleNestedMenus(this);
-      this.markOptions();
-      this.index = -1;
-      this.getSelectedIndex();
+    svg.setAttribute('slot', 'svg');
 
-      this.addEventListener('keydown', this.handleKeyDown);
-      this.addEventListener('mousedown', this.handleMenuMouseDown);
-      this.addEventListener('auroMenuOption-mouseover', (evt) => {
-        this.index = this.items.indexOf(evt.target);
-        this.updateActiveOption(this.index);
-      });
-    } else {
-      // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
-      this.handleNoCheckmarkAttr();
-    }
+    return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
   }
 
   render() {
-    if (this.loading) {
-      return x`
-        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
-          <div>
-            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
-            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
-          </div>
-        </auro-menuoption>
-      `;
-    }
-    return x`<slot @slotchange=${this.handleSlotItems}></slot>`;
+    return u`
+      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
+      <slot></slot>
+    `;
   }
 }
 
diff --git a/components/menu/demo/index.min.js b/components/menu/demo/index.min.js
index 40a54825..25cf846d 100644
--- a/components/menu/demo/index.min.js
+++ b/components/menu/demo/index.min.js
@@ -24,7 +24,7 @@ const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{c
  * SPDX-License-Identifier: BSD-3-Clause
  */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i$2=globalThis.litElementPolyfillSupport;i$2?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
 
-var styleCss$2 = i$5`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]){padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption){padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem));color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
+var styleCss$2 = i$5`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$2 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
 
@@ -100,1105 +100,1105 @@ class AuroLibraryRuntimeUtils {
   }
 }
 
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * The auro-menu element provides users a way to select from a list of options.
+ * @attr {Object} optionSelected - Specifies the current selected menuOption.
+ * @attr {String} matchWord - Specifies the a string used to highlight matched string parts in options.
+ * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
+ * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
+ * @attr {Boolean} loading - When true, loading slot will be showing
+ * @attr {String} value - Value selected for the menu.
+ * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
+ * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
+ * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
+ * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
+ * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
+ * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
+ * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
+ * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
+ * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @slot Slot for insertion of menu options.
  */
-const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=!0;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
 
-var styleCss$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+/* eslint-disable no-magic-numbers, max-lines */
 
-var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+class AuroMenu extends r {
+  constructor() {
+    super();
+    this.value = undefined;
+    this.optionSelected = undefined;
+    this.matchWord = undefined;
+    this.noCheckmark = false;
+    this.optionActive = undefined;
+    this.loading = false;
 
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+    /**
+     * @private
+     */
+    this.rootMenu = true;
 
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
 
-class AuroDependencyVersioning {
+    /**
+     * @private
+     */
+    this.nestingSpacer = '<span class="nestingSpacer"></span>';
 
-  /**
-   * Generates a unique string to be used for child auro element naming.
-   * @private
-   * @param {string} baseName - Defines the first part of the unique element name.
-   * @param {string} version - Version of the component that will be appended to the baseName.
-   * @returns {string} - Unique string to be used for naming.
-   */
-  generateElementName(baseName, version) {
-    let result = baseName;
+    /**
+     * @private
+     */
+    this.loadingSlots = new Set();
+  }
 
-    result += '-';
-    result += version.replace(/[.]/g, '_');
+  static get properties() {
+    return {
+      noCheckmark:    {
+        type: Boolean,
+        reflect: true
+      },
+      disabled:    {
+        type: Boolean,
+        reflect: true
+      },
+      loading:     {
+        type: Boolean,
+        reflect: true
+      },
+      optionSelected: { type: Object },
+      optionActive:   { type: Object },
+      matchWord:      { type: String },
+      value:          { type: String }
+    };
+  }
 
-    return result;
+  static get styles() {
+    return [
+      styleCss$2,
+      colorCss$2,
+      tokensCss$1
+    ];
   }
 
   /**
-   * Generates a unique string to be used for child auro element naming.
-   * @param {string} baseName - Defines the first part of the unique element name.
-   * @param {string} version - Version of the component that will be appended to the baseName.
-   * @returns {string} - Unique string to be used for naming.
+   * This will register this element with the browser.
+   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
+   *
    */
-  generateTag(baseName, version, tagClass) {
-    const elementName = this.generateElementName(baseName, version);
-    const tag = i$1`${s(elementName)}`;
+  static register(name = "auro-menu") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
+  }
 
-    if (!customElements.get(elementName)) {
-      customElements.define(elementName, class extends tagClass {});
-    }
+  /**
+   * Passes the noCheckmark attribute to all nested auro-menuoptions.
+   * @private
+   * @returns {void}
+   */
+  handleNoCheckmarkAttr() {
+    if (this.noCheckmark) {
+      const menus = this.querySelectorAll('auro-menu, [auro-menu]');
 
-    return tag;
-  }
-}
+      menus.forEach((menu) => {
+        menu.setAttribute('noCheckmark', '');
+      });
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+      const options = this.querySelectorAll('auro-menuoption, [auro-menuoption]');
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
+      options.forEach((option) => {
+        option.setAttribute('noCheckmark', '');
+      });
+    }
+  }
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??E;
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
 
+  updated(changedProperties) {
+    if (changedProperties.has('matchWord')) {
+      this.markOptions();
+    }
 
-/**
- * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
- * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
- * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
- */
+    if (changedProperties.has('value')) {
+      this.selectByValue(this.value);
+    }
 
-class AuroElement extends r {
+    if (changedProperties.has('disabled')) {
+      const options = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
 
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      hidden:         { type: Boolean,
-                        reflect: true },
-      hiddenVisually: { type: Boolean,
-                        reflect: true },
-      hiddenAudible:  { type: Boolean,
-                        reflect: true },
-    };
+      for (const element of options) {
+        element.disabled = this.disabled;
+      }
+    }
   }
 
   /**
-   * @private Function that determines state of aria-hidden
+   * @private
+   * @param {Object} option - The menuoption to check for interactive state.
+   * @returns {Boolean} Returns true if the option is interactive.
    */
-  hideAudible(value) {
-    if (value) {
-      return 'true'
-    }
-
-    return 'false'
+  optionInteractive(option) {
+    return !option.hasAttribute('hidden') && !option.hasAttribute('disabled') && !option.hasAttribute('static');
   }
-}
 
-var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+  /**
+   * @private
+   * @returns {void} When called will update the DOM with visible suggest text matches.
+   */
+  markOptions() {
+    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
 
-/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
+      // Escape special regex characters
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
 
-const _fetchMap = new Map();
+      // Global, case-insensitive, unicode matching regex pattern
+      const regexWord = new RegExp(escapedWord, 'giu');
 
-/**
- * A callback to parse Response body.
- *
- * @callback ResponseParser
- * @param {Fetch.Response} response
- * @returns {Promise}
- */
+      this.items.forEach((item) => {
+        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
+          const nested = item.querySelectorAll('.nestingSpacer');
+          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
 
-/**
- * A minimal in-memory map to de-duplicate Fetch API media requests.
- *
- * @param {String} uri
- * @param {Object} [options={}]
- * @param {ResponseParser} [options.responseParser=(response) => response.text()]
- * @returns {Promise}
- */
-const cacheFetch = (uri, options = {}) => {
-  const responseParser = options.responseParser || ((response) => response.text());
-  if (!_fetchMap.has(uri)) {
-    _fetchMap.set(uri, fetch(uri).then(responseParser));
+          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
+        }
+      });
+    }
   }
-  return _fetchMap.get(uri);
-};
 
-var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+  /**
+   * Reset the menu and all options.
+   */
+  resetOptionsStates() {
+    this.optionSelected = undefined;
+    if (this.items) {
+      this.items.forEach((item) => {
+        item.classList.remove('active');
+        item.removeAttribute('selected');
+      });
+    }
+  }
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+  /**
+   * Set the attributes on the selected menuoption, the menu value and stored option.
+   * @param {Object} option - The menuoption to be selected.
+   * @private
+   */
+  handleLocalSelectState(option) {
+    option.setAttribute('selected', '');
+    option.classList.add('active');
+    option.ariaSelected = true;
 
+    this.value = option.value;
+    this.optionSelected = option;
+    this.index = this.items.indexOf(option);
+  }
 
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
- * @slot - Hidden from visibility, used for a11y if icon description is needed
- */
+  /**
+   * Notify selection change.
+   * @private
+   * @return {void}
+   */
+  notifySelectionChange() {
+    // this event needs to be removed after select and combobox are updated to use the new standard name
+    this.dispatchEvent(new CustomEvent('selectedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
 
-// build the component class
-class BaseIcon extends AuroElement {
-  constructor() {
-    super();
-    this.onDark = false;
+    this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
   }
 
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      ...super.properties,
-      onDark: {
-        type: Boolean,
-        reflect: true
-      },
+  /**
+   * Process actions for making making a menuoption selection.
+   */
+  makeSelection() {
+    if (!this.items) {
+      this.initItems();
+    }
 
-      /**
-       * @private
-       */
-      svg: {
-        attribute: false,
-        reflect: true
+    if (this.items[this.index] && !this.items[this.index].hasAttribute('disabled')) {
+      this.resetOptionsStates();
+
+      if (this.index >= 0) {
+        const option = this.items[this.index];
+
+        // only handle options that are not disabled, hidden or static
+        if (option && this.optionInteractive(option)) {
+          // fire custom event if defined otherwise make selection
+          if (option.hasAttribute('event')) {
+            this.dispatchEvent(new CustomEvent(option.getAttribute('event'), {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
+
+            // this event needs to be removed after select and combobox are updated to use the new standard name
+            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
+
+            this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+            }));
+          } else {
+            this.handleLocalSelectState(option);
+          }
+        }
       }
-    };
-  }
+    }
 
-  static get styles() {
-    return i$5`
-      ${styleCss}
-    `;
+    this.notifySelectionChange();
   }
 
   /**
-   * Async function to fetch requested icon from npm CDN.
+   * Manage ArrowDown, ArrowUp and Enter keyboard events.
    * @private
-   * @param {string} category - Icon category.
-   * @param {string} name - Icon name.
-   * @returns {SVGElement} DOM - Ready HTML to be appended.
+   * @param {Object} event - Event object from the browser.
    */
-  async fetchIcon(category, name) {
-    let iconHTML = '';
+  handleKeyDown(event) {
+    event.preventDefault();
 
-    if (category === 'logos') {
-      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
-    } else {
-      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
-    }
+    // With ArrowDown/ArrowUp events, pass new value to selectNextItem()
+    // With Enter event, set value and apply attrs
+    switch (event.key) {
+      case "ArrowDown":
+        this.selectNextItem('down');
+        break;
 
-    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
+      case "ArrowUp":
+        this.selectNextItem('up');
+        break;
 
-    return dom.body.querySelector('svg');
+      case "Enter":
+        this.makeSelection();
+        break;
+    }
   }
 
-  // lifecycle function
-  async firstUpdated() {
-    if (!this.customSvg) {
-      const svg = await this.fetchIcon(this.category, this.name);
+  /**
+   * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
+   * @private
+   */
+  initItems() {
+    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    this.handleNoCheckmarkAttr();
+  }
 
-      if (svg) {
-        this.svg = svg;
-      } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+  /**
+   * Sets the index value of the selected item or first non-disabled menuoption.
+   * @private
+   */
+  getSelectedIndex() {
+    // find the first `selected` and not `disabled`, `hidden` or `static` option
+    const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
 
-        this.svg = penDOM.body.firstChild;
-      }
+    if (index >= 0) {
+      this.index = index;
+      this.makeSelection();
     }
   }
-}
-
-var tokensCss = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
 
-var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
+  /**
+   * Using value of current this.index evaluates index
+   * of next :focus to set based on array of this.items ignoring items
+   * with disabled attr.
+   *
+   * The event.target is not used as the function needs to know where to go,
+   * versus knowing where it is.
+   * @param {String} moveDirection - Up or Down based on keyboard event.
+   */
+  selectNextItem(moveDirection) {
+    if (this.index >= 0) {
+      this.items[this.index].classList.remove('active');
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+      // calculate which is the selection we should focus next
+      let increment = 0;
 
+      if (moveDirection === 'down') {
+        increment = 1;
+      } else if (moveDirection === 'up') {
+        increment = -1;
+      }
 
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
- *
- * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
- * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
- * @attr {Boolean} customColor - Removes primary selector.
- * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
- * @attr {Boolean} label - Exposes content in slot as icon label.
- * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
- * @attr {Boolean} accent - Sets the icon to use the accent style.
- * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
- * @attr {Boolean} disabled - Sets the icon to use the disabled style.
- * @attr {Boolean} error - Sets the icon to use the error style.
- * @attr {Boolean} info - Sets the icon to use the info style.
- * @attr {Boolean} secondary - Sets the icon to use the secondary style.
- * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
- * @attr {Boolean} subtle - Sets the icon to use the subtle style.
- * @attr {Boolean} success - Sets the icon to use the success style.
- * @attr {Boolean} warning - Sets the icon to use the warning style.
- * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
- * @attr {String} uri - Set the uri for CDN used when fetching icons
- * @slot - Hidden from visibility, used for a11y if icon description is needed.
- * @slot svg - Used for custom SVG content.
- */
+      this.index += increment;
 
-// build the component class
-class AuroIcon extends BaseIcon {
-  constructor() {
-    super();
+      // keep looping inside the array of options
+      if (this.index > this.items.length - 1) {
+        this.index = 0;
+      } else if (this.index < 0) {
+        this.index = this.items.length - 1;
+      }
 
-    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+      // check if new index is disabled, static or hidden, if so, execute again
+      if (!this.optionInteractive(this.items[this.index])) {
+        this.selectNextItem(moveDirection);
+      } else {
+        // apply focus to new index
+        this.updateActiveOption(this.index);
+      }
+    } else {
+      this.index = 0;
 
-    this.privateDefaults();
+      if (this.items[this.index].hasAttribute('hidden') || this.items[this.index].hasAttribute('disabled')) {
+        this.selectNextItem(moveDirection);
+      } else {
+        this.updateActiveOption(this.index);
+      }
+    }
   }
 
   /**
-   * Internal Defaults.
+   * Used for applying indentation to each level of nested menu.
    * @private
-   * @returns {void}
+   * @param {String} menu - Root level menu object.
    */
-  privateDefaults() {
-    this.accent = false;
-    this.customColor = false;
-    this.customSvg = false;
-    this.disabled = false;
-    this.emphasis = false;
-    this.error = false;
-    this.info = false;
-    this.label = false;
-    this.primary = false;
-    this.secondary = false;
-    this.subtle = false;
-    this.success = false;
-    this.tertiary = false;
-    this.warning = false;
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-  }
-
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      ...super.properties,
-      accent: {
-        type: Boolean,
-        reflect: true
-      },
-      ariaHidden: {
-        type: String,
-        reflect: true
-      },
-      category: {
-        type: String,
-        reflect: true
-      },
-      customColor: {
-        type: Boolean
-      },
-      customSvg: {
-        type: Boolean
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-      emphasis: {
-        type: Boolean,
-        reflect: true
-      },
-      error: {
-        type: Boolean,
-        reflect: true
-      },
-      info: {
-        type: Boolean,
-        reflect: true
-      },
-      label: {
-        type: Boolean,
-        reflect: true
-      },
-      name: {
-        type: String,
-        reflect: true
-      },
-      primary: {
-        type: Boolean,
-        reflect: true
-      },
-      secondary: {
-        type: Boolean,
-        reflect: true
-      },
-      subtle: {
-        type: Boolean,
-        reflect: true
-      },
-      success: {
-        type: Boolean,
-        reflect: true
-      },
-      tertiary: {
-        type: Boolean,
-        reflect: true
-      },
-      uri: {
-        type: String
-      },
-      warning: {
-        type: Boolean,
-        reflect: true
-      }
-    };
-  }
+  handleNestedMenus(menu) {
+    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu');
 
-  static get styles() {
-    return [
-      super.styles,
-      i$5`${tokensCss}`,
-      i$5`${styleCss}`,
-      i$5`${colorCss}`
-    ];
-  }
+    if (nestedMenus.length === 0) {
+      return;
+    }
 
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
-   *
-   */
-  static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
-  }
+    nestedMenus.forEach((nestedMenu) => {
+      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
 
-  connectedCallback() {
-    super.connectedCallback();
+      options.forEach((option) => {
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
+      });
 
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
+      this.handleNestedMenus(nestedMenu);
+    });
   }
 
   /**
-   * @returns {void} Exposes CSS parts for styling from parent components.
+   * Method to apply `selected` attribute to `menuoption` via `value`.
+   * @private
+   * @param {String} value - Must match a unique `menuoption` value.
    */
-  exposeCssParts() {
-    this.setAttribute('exportparts', 'svg:iconSvg');
-  }
-
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    const a11y = {
-      'labelContainer': true,
-      'util_displayHiddenVisually': !this.label
-    };
-
-    const classes = {
-      'label': this.label
-    };
-
-    return x`
-      <div
-        class="${e(classes)}"
-        title="${o(this.title || undefined)}">
-        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
-          ${this.customSvg ? x`
-              <slot name="svg"></slot>
-            ` : x`
-              ${this.svg}
-            `
-          }
-        </span>
-
-        <div class="${e(a11y)}">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-var iconVersion = '6.1.1';
-
-var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
-
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-
-/**
- * The auro-menu element provides users a way to define a menu option.
- *
- * @attr {String} value - Specifies the value to be sent to a server.
- * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
- * @attr {Boolean} selected - Specifies that an option is selected.
- * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
- * @slot Specifies text for an option, but is not the value.
- */
-class AuroMenuOption extends r {
-  constructor() {
-    super();
+  selectByValue(value) {
+    let valueMatch = false;
+    if (!this.items) {
+      this.initItems();
+    }
 
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning();
-    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+    this.index = undefined;
 
-    this.selected = false;
-    this.nocheckmark = false;
-    this.disabled = false;
+    if (this.value && this.value.length > 0) {
+      for (let index = 0; index < this.items.length; index += 1) {
+        if (this.items[index].value === value) {
+          valueMatch = true;
+          this.index = index;
+        }
+      }
 
-    /**
-     * @private
-     */
-    this.tabIndex = -1;
+      if (!valueMatch) {
+        // reset the menu to no selection
+        this.index = undefined;
 
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-  }
+        // this event needs to be removed after select and combobox are updated to use the new standard name
+        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
 
-  static get properties() {
-    return {
-      nocheckmark: {
-        type: Boolean,
-        reflect: true
-      },
-      selected:  {
-        type: Boolean,
-        reflect: true
-      },
-      disabled:  {
-        type: Boolean,
-        reflect: true
-      },
-      value: {
-        type: String,
-        reflect: true
-      },
-      tabIndex: {
-        type: Number,
-        reflect: true
+        this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        }));
+      } else {
+        this.makeSelection();
       }
-    };
-  }
+    } else {
+      this.resetOptionsStates();
 
-  static get styles() {
-    return [
-      styleCss$1,
-      colorCss$1,
-      tokensCss$1
-    ];
+      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      }));
+    }
   }
 
   /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
-   *
+   * Used to make the active state for options follow mouseover.
+   * @param {Number} index - Index of the menuoption that will be made active.
+   * @private
    */
-  static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
-  }
-
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  updateActiveOption(index) {
+    this.items.forEach((item) => {
+      item.classList.remove('active');
+    });
+    this.items[index].classList.add('active');
+    this.optionActive = this.items[index];
 
-    this.setAttribute('role', 'option');
-    this.setAttribute('aria-selected', 'false');
+    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: this.items[index]
+    }));
 
-    this.addEventListener('mouseover', () => {
-      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-        detail: this
-      }));
-    });
+    this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: this.items[index]
+    }));
   }
 
-  // observer for selected property changes
-  updated(changedProperties) {
-    if (changedProperties.has('selected')) {
-      this.setAttribute('aria-selected', this.selected.toString());
+  /**
+   * Used to only make a selection when a menuoption is receiving a mousedown event.
+   * @param {Event} evt - Mousedown event.
+   * @private
+   */
+  handleMenuMouseDown(evt) {
+    if (evt.target !== this) {
+      this.makeSelection();
     }
   }
 
   /**
-   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
-   *
+   * Used for @slotchange event on slotted loading placeholder element./**
    * @private
-   * @param {string} svgContent - The SVG content to be embedded.
-   * @returns {Element} The HTML element containing the SVG icon.
+   * @method handleLoadingSlotItems
+   * @param {Event} event - The event object containing information about the slot change.
    */
-  generateIconHtml(svgContent) {
-    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
-    const svg = dom.body.firstChild;
+  handleLoadingSlotItems(event) {
+    this.loadingSlots.add(event.target.getAttribute("name"), event.target.assignedNodes);
+    this.requestUpdate();
+  }
 
-    svg.setAttribute('slot', 'svg');
+  /**
+   * Used for @slotchange event on slotted element.
+   * @private
+   */
+  handleSlotItems() {
+    // Determine if this is the root of the menu/submenu layout.
+    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
+      this.rootMenu = false;
+    }
 
-    return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
+    // If this is the root menu (not a nested menu) handle events, states and styling.
+    if (this.rootMenu) {
+      this.initItems();
+      this.setAttribute('role', 'listbox');
+      this.setAttribute('root', '');
+      this.handleNestedMenus(this);
+      this.markOptions();
+      this.index = -1;
+      this.getSelectedIndex();
+
+      this.addEventListener('keydown', this.handleKeyDown);
+      this.addEventListener('mousedown', this.handleMenuMouseDown);
+      this.addEventListener('auroMenuOption-mouseover', (evt) => {
+        this.index = this.items.indexOf(evt.target);
+        this.updateActiveOption(this.index);
+      });
+    } else {
+      // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
+      this.handleNoCheckmarkAttr();
+    }
   }
 
   render() {
-    return u`
-      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
-      <slot></slot>
-    `;
+    if (this.loading) {
+      return x`
+        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+          <div>
+            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+          </div>
+        </auro-menuoption>
+      `;
+    }
+    return x`<slot @slotchange=${this.handleSlotItems}></slot>`;
   }
 }
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * The auro-menu element provides users a way to select from a list of options.
- * @attr {Object} optionSelected - Specifies the current selected menuOption.
- * @attr {String} matchWord - Specifies the a string used to highlight matched string parts in options.
- * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
- * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} loading - When true, loading slot will be showing
- * @attr {String} value - Value selected for the menu.
- * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
- * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
- * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
- * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
- * @slot Slot for insertion of menu options.
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
  */
+const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=!0;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
 
-/* eslint-disable no-magic-numbers, max-lines */
-
-class AuroMenu extends r {
-  constructor() {
-    super();
-    this.value = undefined;
-    this.optionSelected = undefined;
-    this.matchWord = undefined;
-    this.noCheckmark = false;
-    this.optionActive = undefined;
-    this.loading = false;
-
-    /**
-     * @private
-     */
-    this.rootMenu = true;
-
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-
-    /**
-     * @private
-     */
-    this.nestingSpacer = '<span class="nestingSpacer"></span>';
+var styleCss$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-    /**
-     * @private
-     */
-    this.loadingSlots = new Set();
-  }
+var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
 
-  static get properties() {
-    return {
-      noCheckmark:    {
-        type: Boolean,
-        reflect: true
-      },
-      disabled:    {
-        type: Boolean,
-        reflect: true
-      },
-      loading:     {
-        type: Boolean,
-        reflect: true
-      },
-      optionSelected: { type: Object },
-      optionActive:   { type: Object },
-      matchWord:      { type: String },
-      value:          { type: String }
-    };
-  }
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-  static get styles() {
-    return [
-      styleCss$2,
-      colorCss$2,
-      tokensCss$1
-    ];
-  }
 
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
-   *
-   */
-  static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
-  }
+class AuroDependencyVersioning {
 
   /**
-   * Passes the noCheckmark attribute to all nested auro-menuoptions.
+   * Generates a unique string to be used for child auro element naming.
    * @private
-   * @returns {void}
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
    */
-  handleNoCheckmarkAttr() {
-    if (this.noCheckmark) {
-      const menus = this.querySelectorAll('auro-menu, [auro-menu]');
+  generateElementName(baseName, version) {
+    let result = baseName;
+
+    result += '-';
+    result += version.replace(/[.]/g, '_');
 
-      menus.forEach((menu) => {
-        menu.setAttribute('noCheckmark', '');
-      });
+    return result;
+  }
 
-      const options = this.querySelectorAll('auro-menuoption, [auro-menuoption]');
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateTag(baseName, version, tagClass) {
+    const elementName = this.generateElementName(baseName, version);
+    const tag = i$1`${s(elementName)}`;
 
-      options.forEach((option) => {
-        option.setAttribute('noCheckmark', '');
-      });
+    if (!customElements.get(elementName)) {
+      customElements.define(elementName, class extends tagClass {});
     }
+
+    return tag;
   }
+}
 
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
 
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
 
-  updated(changedProperties) {
-    if (changedProperties.has('matchWord')) {
-      this.markOptions();
-    }
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o=o=>o??E;
 
-    if (changedProperties.has('value')) {
-      this.selectByValue(this.value);
-    }
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-    if (changedProperties.has('disabled')) {
-      const options = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
 
-      for (const element of options) {
-        element.disabled = this.disabled;
-      }
-    }
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+class AuroElement extends r {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
   }
 
   /**
-   * @private
-   * @param {Object} option - The menuoption to check for interactive state.
-   * @returns {Boolean} Returns true if the option is interactive.
+   * @private Function that determines state of aria-hidden
    */
-  optionInteractive(option) {
-    return !option.hasAttribute('hidden') && !option.hasAttribute('disabled') && !option.hasAttribute('static');
+  hideAudible(value) {
+    if (value) {
+      return 'true'
+    }
+
+    return 'false'
   }
+}
 
-  /**
-   * @private
-   * @returns {void} When called will update the DOM with visible suggest text matches.
-   */
-  markOptions() {
-    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
+var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
-      // Escape special regex characters
-      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
-      // Global, case-insensitive, unicode matching regex pattern
-      const regexWord = new RegExp(escapedWord, 'giu');
+const _fetchMap = new Map();
 
-      this.items.forEach((item) => {
-        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-          const nested = item.querySelectorAll('.nestingSpacer');
-          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+/**
+ * A callback to parse Response body.
+ *
+ * @callback ResponseParser
+ * @param {Fetch.Response} response
+ * @returns {Promise}
+ */
 
-          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
-        }
-      });
-    }
+/**
+ * A minimal in-memory map to de-duplicate Fetch API media requests.
+ *
+ * @param {String} uri
+ * @param {Object} [options={}]
+ * @param {ResponseParser} [options.responseParser=(response) => response.text()]
+ * @returns {Promise}
+ */
+const cacheFetch = (uri, options = {}) => {
+  const responseParser = options.responseParser || ((response) => response.text());
+  if (!_fetchMap.has(uri)) {
+    _fetchMap.set(uri, fetch(uri).then(responseParser));
   }
+  return _fetchMap.get(uri);
+};
 
-  /**
-   * Reset the menu and all options.
-   */
-  resetOptionsStates() {
-    this.optionSelected = undefined;
-    if (this.items) {
-      this.items.forEach((item) => {
-        item.classList.remove('active');
-        item.removeAttribute('selected');
-      });
-    }
-  }
+var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
 
-  /**
-   * Set the attributes on the selected menuoption, the menu value and stored option.
-   * @param {Object} option - The menuoption to be selected.
-   * @private
-   */
-  handleLocalSelectState(option) {
-    option.setAttribute('selected', '');
-    option.classList.add('active');
-    option.ariaSelected = true;
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-    this.value = option.value;
-    this.optionSelected = option;
-    this.index = this.items.indexOf(option);
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
+ */
+
+// build the component class
+class BaseIcon extends AuroElement {
+  constructor() {
+    super();
+    this.onDark = false;
   }
 
-  /**
-   * Notify selection change.
-   * @private
-   * @return {void}
-   */
-  notifySelectionChange() {
-    // this event needs to be removed after select and combobox are updated to use the new standard name
-    this.dispatchEvent(new CustomEvent('selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
 
-    this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
+      /**
+       * @private
+       */
+      svg: {
+        attribute: false,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return i$5`
+      ${styleCss}
+    `;
   }
 
   /**
-   * Process actions for making making a menuoption selection.
+   * Async function to fetch requested icon from npm CDN.
+   * @private
+   * @param {string} category - Icon category.
+   * @param {string} name - Icon name.
+   * @returns {SVGElement} DOM - Ready HTML to be appended.
    */
-  makeSelection() {
-    if (!this.items) {
-      this.initItems();
+  async fetchIcon(category, name) {
+    let iconHTML = '';
+
+    if (category === 'logos') {
+      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
+    } else {
+      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
     }
 
-    if (this.items[this.index] && !this.items[this.index].hasAttribute('disabled')) {
-      this.resetOptionsStates();
+    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
 
-      if (this.index >= 0) {
-        const option = this.items[this.index];
+    return dom.body.querySelector('svg');
+  }
 
-        // only handle options that are not disabled, hidden or static
-        if (option && this.optionInteractive(option)) {
-          // fire custom event if defined otherwise make selection
-          if (option.hasAttribute('event')) {
-            this.dispatchEvent(new CustomEvent(option.getAttribute('event'), {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
+  // lifecycle function
+  async firstUpdated() {
+    if (!this.customSvg) {
+      const svg = await this.fetchIcon(this.category, this.name);
 
-            // this event needs to be removed after select and combobox are updated to use the new standard name
-            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
+      if (svg) {
+        this.svg = svg;
+      } else if (!svg) {
+        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
 
-            this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
-          } else {
-            this.handleLocalSelectState(option);
-          }
-        }
+        this.svg = penDOM.body.firstChild;
       }
     }
-
-    this.notifySelectionChange();
   }
+}
 
-  /**
-   * Manage ArrowDown, ArrowUp and Enter keyboard events.
-   * @private
-   * @param {Object} event - Event object from the browser.
-   */
-  handleKeyDown(event) {
-    event.preventDefault();
+var tokensCss = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
 
-    // With ArrowDown/ArrowUp events, pass new value to selectNextItem()
-    // With Enter event, set value and apply attrs
-    switch (event.key) {
-      case "ArrowDown":
-        this.selectNextItem('down');
-        break;
+var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
-      case "ArrowUp":
-        this.selectNextItem('up');
-        break;
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-      case "Enter":
-        this.makeSelection();
-        break;
-    }
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
+ *
+ * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
+ * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
+ * @attr {Boolean} customColor - Removes primary selector.
+ * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
+ * @attr {Boolean} label - Exposes content in slot as icon label.
+ * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
+ * @attr {Boolean} accent - Sets the icon to use the accent style.
+ * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
+ * @attr {Boolean} disabled - Sets the icon to use the disabled style.
+ * @attr {Boolean} error - Sets the icon to use the error style.
+ * @attr {Boolean} info - Sets the icon to use the info style.
+ * @attr {Boolean} secondary - Sets the icon to use the secondary style.
+ * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
+ * @attr {Boolean} subtle - Sets the icon to use the subtle style.
+ * @attr {Boolean} success - Sets the icon to use the success style.
+ * @attr {Boolean} warning - Sets the icon to use the warning style.
+ * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
+ * @attr {String} uri - Set the uri for CDN used when fetching icons
+ * @slot - Hidden from visibility, used for a11y if icon description is needed.
+ * @slot svg - Used for custom SVG content.
+ */
+
+// build the component class
+class AuroIcon extends BaseIcon {
+  constructor() {
+    super();
+
+    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+
+    this.privateDefaults();
   }
 
   /**
-   * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
+   * Internal Defaults.
    * @private
+   * @returns {void}
    */
-  initItems() {
-    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
-    this.handleNoCheckmarkAttr();
+  privateDefaults() {
+    this.accent = false;
+    this.customColor = false;
+    this.customSvg = false;
+    this.disabled = false;
+    this.emphasis = false;
+    this.error = false;
+    this.info = false;
+    this.label = false;
+    this.primary = false;
+    this.secondary = false;
+    this.subtle = false;
+    this.success = false;
+    this.tertiary = false;
+    this.warning = false;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
-  /**
-   * Sets the index value of the selected item or first non-disabled menuoption.
-   * @private
-   */
-  getSelectedIndex() {
-    // find the first `selected` and not `disabled`, `hidden` or `static` option
-    const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      accent: {
+        type: Boolean,
+        reflect: true
+      },
+      ariaHidden: {
+        type: String,
+        reflect: true
+      },
+      category: {
+        type: String,
+        reflect: true
+      },
+      customColor: {
+        type: Boolean
+      },
+      customSvg: {
+        type: Boolean
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      emphasis: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      info: {
+        type: Boolean,
+        reflect: true
+      },
+      label: {
+        type: Boolean,
+        reflect: true
+      },
+      name: {
+        type: String,
+        reflect: true
+      },
+      primary: {
+        type: Boolean,
+        reflect: true
+      },
+      secondary: {
+        type: Boolean,
+        reflect: true
+      },
+      subtle: {
+        type: Boolean,
+        reflect: true
+      },
+      success: {
+        type: Boolean,
+        reflect: true
+      },
+      tertiary: {
+        type: Boolean,
+        reflect: true
+      },
+      uri: {
+        type: String
+      },
+      warning: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
 
-    if (index >= 0) {
-      this.index = index;
-      this.makeSelection();
-    }
+  static get styles() {
+    return [
+      super.styles,
+      i$5`${tokensCss}`,
+      i$5`${styleCss}`,
+      i$5`${colorCss}`
+    ];
   }
 
   /**
-   * Using value of current this.index evaluates index
-   * of next :focus to set based on array of this.items ignoring items
-   * with disabled attr.
+   * This will register this element with the browser.
+   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
    *
-   * The event.target is not used as the function needs to know where to go,
-   * versus knowing where it is.
-   * @param {String} moveDirection - Up or Down based on keyboard event.
    */
-  selectNextItem(moveDirection) {
-    if (this.index >= 0) {
-      this.items[this.index].classList.remove('active');
+  static register(name = "auro-icon") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
+  }
 
-      // calculate which is the selection we should focus next
-      let increment = 0;
+  connectedCallback() {
+    super.connectedCallback();
 
-      if (moveDirection === 'down') {
-        increment = 1;
-      } else if (moveDirection === 'up') {
-        increment = -1;
-      }
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
+  }
 
-      this.index += increment;
+  /**
+   * @returns {void} Exposes CSS parts for styling from parent components.
+   */
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'svg:iconSvg');
+  }
 
-      // keep looping inside the array of options
-      if (this.index > this.items.length - 1) {
-        this.index = 0;
-      } else if (this.index < 0) {
-        this.index = this.items.length - 1;
-      }
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const a11y = {
+      'labelContainer': true,
+      'util_displayHiddenVisually': !this.label
+    };
 
-      // check if new index is disabled, static or hidden, if so, execute again
-      if (!this.optionInteractive(this.items[this.index])) {
-        this.selectNextItem(moveDirection);
-      } else {
-        // apply focus to new index
-        this.updateActiveOption(this.index);
-      }
-    } else {
-      this.index = 0;
+    const classes = {
+      'label': this.label
+    };
+
+    return x`
+      <div
+        class="${e(classes)}"
+        title="${o(this.title || undefined)}">
+        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
+          ${this.customSvg ? x`
+              <slot name="svg"></slot>
+            ` : x`
+              ${this.svg}
+            `
+          }
+        </span>
 
-      if (this.items[this.index].hasAttribute('hidden') || this.items[this.index].hasAttribute('disabled')) {
-        this.selectNextItem(moveDirection);
-      } else {
-        this.updateActiveOption(this.index);
-      }
-    }
+        <div class="${e(a11y)}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
+}
 
-  /**
-   * Used for applying indentation to each level of nested menu.
-   * @private
-   * @param {String} menu - Root level menu object.
-   */
-  handleNestedMenus(menu) {
-    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu');
-
-    if (nestedMenus.length === 0) {
-      return;
-    }
+var iconVersion = '6.1.1';
 
-    nestedMenus.forEach((nestedMenu) => {
-      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
+var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
-      options.forEach((option) => {
-        option.innerHTML = this.nestingSpacer + option.innerHTML;
-      });
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-      this.handleNestedMenus(nestedMenu);
-    });
-  }
 
-  /**
-   * Method to apply `selected` attribute to `menuoption` via `value`.
-   * @private
-   * @param {String} value - Must match a unique `menuoption` value.
-   */
-  selectByValue(value) {
-    let valueMatch = false;
-    if (!this.items) {
-      this.initItems();
-    }
+/**
+ * The auro-menu element provides users a way to define a menu option.
+ *
+ * @attr {String} value - Specifies the value to be sent to a server.
+ * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
+ * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
+ * @attr {Boolean} selected - Specifies that an option is selected.
+ * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
+ * @slot Specifies text for an option, but is not the value.
+ */
+class AuroMenuOption extends r {
+  constructor() {
+    super();
 
-    this.index = undefined;
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
 
-    if (this.value && this.value.length > 0) {
-      for (let index = 0; index < this.items.length; index += 1) {
-        if (this.items[index].value === value) {
-          valueMatch = true;
-          this.index = index;
-        }
-      }
+    this.selected = false;
+    this.nocheckmark = false;
+    this.disabled = false;
 
-      if (!valueMatch) {
-        // reset the menu to no selection
-        this.index = undefined;
+    /**
+     * @private
+     */
+    this.tabIndex = -1;
 
-        // this event needs to be removed after select and combobox are updated to use the new standard name
-        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
 
-        this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
-      } else {
-        this.makeSelection();
+  static get properties() {
+    return {
+      nocheckmark: {
+        type: Boolean,
+        reflect: true
+      },
+      selected:  {
+        type: Boolean,
+        reflect: true
+      },
+      disabled:  {
+        type: Boolean,
+        reflect: true
+      },
+      value: {
+        type: String,
+        reflect: true
+      },
+      tabIndex: {
+        type: Number,
+        reflect: true
       }
-    } else {
-      this.resetOptionsStates();
+    };
+  }
 
-      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
-    }
+  static get styles() {
+    return [
+      styleCss$1,
+      colorCss$1,
+      tokensCss$1
+    ];
   }
 
   /**
-   * Used to make the active state for options follow mouseover.
-   * @param {Number} index - Index of the menuoption that will be made active.
-   * @private
+   * This will register this element with the browser.
+   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
+   *
    */
-  updateActiveOption(index) {
-    this.items.forEach((item) => {
-      item.classList.remove('active');
-    });
-    this.items[index].classList.add('active');
-    this.optionActive = this.items[index];
+  static register(name = "auro-menuoption") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
+  }
 
-    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
-    this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
-  }
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
 
-  /**
-   * Used to only make a selection when a menuoption is receiving a mousedown event.
-   * @param {Event} evt - Mousedown event.
-   * @private
-   */
-  handleMenuMouseDown(evt) {
-    if (evt.target !== this) {
-      this.makeSelection();
-    }
+    this.addEventListener('mouseover', () => {
+      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+        detail: this
+      }));
+    });
   }
 
-  /**
-   * Used for @slotchange event on slotted loading placeholder element./**
-   * @private
-   * @method handleLoadingSlotItems
-   * @param {Event} event - The event object containing information about the slot change.
-   */
-  handleLoadingSlotItems(event) {
-    this.loadingSlots.add(event.target.getAttribute("name"), event.target.assignedNodes);
-    this.requestUpdate();
+  // observer for selected property changes
+  updated(changedProperties) {
+    if (changedProperties.has('selected')) {
+      this.setAttribute('aria-selected', this.selected.toString());
+    }
   }
 
   /**
-   * Used for @slotchange event on slotted element.
+   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
+   *
    * @private
+   * @param {string} svgContent - The SVG content to be embedded.
+   * @returns {Element} The HTML element containing the SVG icon.
    */
-  handleSlotItems() {
-    // Determine if this is the root of the menu/submenu layout.
-    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
-      this.rootMenu = false;
-    }
+  generateIconHtml(svgContent) {
+    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
+    const svg = dom.body.firstChild;
 
-    // If this is the root menu (not a nested menu) handle events, states and styling.
-    if (this.rootMenu) {
-      this.initItems();
-      this.setAttribute('role', 'listbox');
-      this.setAttribute('root', '');
-      this.handleNestedMenus(this);
-      this.markOptions();
-      this.index = -1;
-      this.getSelectedIndex();
+    svg.setAttribute('slot', 'svg');
 
-      this.addEventListener('keydown', this.handleKeyDown);
-      this.addEventListener('mousedown', this.handleMenuMouseDown);
-      this.addEventListener('auroMenuOption-mouseover', (evt) => {
-        this.index = this.items.indexOf(evt.target);
-        this.updateActiveOption(this.index);
-      });
-    } else {
-      // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
-      this.handleNoCheckmarkAttr();
-    }
+    return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
   }
 
   render() {
-    if (this.loading) {
-      return x`
-        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
-          <div>
-            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
-            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
-          </div>
-        </auro-menuoption>
-      `;
-    }
-    return x`<slot @slotchange=${this.handleSlotItems}></slot>`;
+    return u`
+      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
+      <slot></slot>
+    `;
   }
 }
 
diff --git a/components/menu/src/auro-menu.js b/components/menu/src/auro-menu.js
index c6a0796c..a5f99eee 100644
--- a/components/menu/src/auro-menu.js
+++ b/components/menu/src/auro-menu.js
@@ -11,8 +11,6 @@ import tokensCss from "./styles/tokens-css.js";
 
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-import './auro-menuoption.js';
-
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-menu element provides users a way to select from a list of options.
diff --git a/components/menu/src/styles/style-menu.scss b/components/menu/src/styles/style-menu.scss
index 6fb936fb..221967de 100644
--- a/components/menu/src/styles/style-menu.scss
+++ b/components/menu/src/styles/style-menu.scss
@@ -23,7 +23,8 @@
   vertical-align: middle;
 
   ::slotted(auro-menuoption),
-  ::slotted([auro-menuoption]) {
+  ::slotted([auro-menuoption]),
+  auro-menuoption[loadingplaceholder] {
     padding-left: calc(var(--ds-size-150, $ds-size-150) + 24px + var(--ds-size-100, $ds-size-100));
   }
 
@@ -48,7 +49,8 @@
 }
 
 :host([nocheckmark]) {
-  ::slotted(auro-menuoption) {
+  ::slotted(auro-menuoption),
+  auro-menuoption[loadingplaceholder] {
     padding-left: var(--ds-size-200, $ds-size-200);
   }
 }
@@ -58,7 +60,7 @@
 }
 
 [loadingplaceholder] {
-  padding-left: calc(var(--ds-size-150, $ds-size-150) + 24px + var(--ds-size-100, $ds-size-100));
+  // padding-left: calc(var(--ds-size-150, $ds-size-150) + 24px + var(--ds-size-100, $ds-size-100));
   color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
 
   &.empty {
diff --git a/components/select/apiExamples/loading.js b/components/select/apiExamples/loading.js
index 3e88529b..44032f81 100644
--- a/components/select/apiExamples/loading.js
+++ b/components/select/apiExamples/loading.js
@@ -2,13 +2,8 @@ export function auroMenuLoadingExample() {
   const select = document.querySelector("#loadingExample");
   const menu = document.querySelector("#loadingExampleSelectMenu");
   const emptyMenu = () => {
-
-    const menuoptions = menu.children;
-    for (let i = menuoptions.length - 1; i >= 0; i--) {
-      if (menuoptions[i].value) {
-        menu.removeChild(menuoptions[i]);
-      }
-    }
+    const menuoptions = menu.querySelectorAll('auro-menuoption');
+    menuoptions.forEach(mo => menu.removeChild(mo));
   }
   const fillMenu = () => {
       menu.innerHTML += `
diff --git a/components/select/demo/api.md b/components/select/demo/api.md
index 43cd0636..17bc1817 100644
--- a/components/select/demo/api.md
+++ b/components/select/demo/api.md
@@ -686,13 +686,8 @@ export function auroMenuLoadingExample() {
   const select = document.querySelector("#loadingExample");
   const menu = document.querySelector("#loadingExampleSelectMenu");
   const emptyMenu = () => {
-
-    const menuoptions = menu.children;
-    for (let i = menuoptions.length - 1; i >= 0; i--) {
-      if (menuoptions[i].value) {
-        menu.removeChild(menuoptions[i]);
-      }
-    }
+    const menuoptions = menu.querySelectorAll('auro-menuoption');
+    menuoptions.forEach(mo => menu.removeChild(mo));
   }
   const fillMenu = () => {
       menu.innerHTML += `
diff --git a/components/select/demo/api.min.js b/components/select/demo/api.min.js
index 53c7cc8d..e25c4385 100644
--- a/components/select/demo/api.min.js
+++ b/components/select/demo/api.min.js
@@ -61,13 +61,8 @@ function auroMenuLoadingExample() {
   const select = document.querySelector("#loadingExample");
   const menu = document.querySelector("#loadingExampleSelectMenu");
   const emptyMenu = () => {
-
-    const menuoptions = menu.children;
-    for (let i = menuoptions.length - 1; i >= 0; i--) {
-      if (menuoptions[i].value) {
-        menu.removeChild(menuoptions[i]);
-      }
-    }
+    const menuoptions = menu.querySelectorAll('auro-menuoption');
+    menuoptions.forEach(mo => menu.removeChild(mo));
   };
   const fillMenu = () => {
       menu.innerHTML += `