@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

package/components/menu/demo/api.min.js

@@ -21,49 +21,6 @@ function auroMenuMatchWordExample() {
   matchWordInput.addEventListener('keyup', updateMatch);
 }
 
-function auroMenuCustomEventExample() {
-  let menuCustomEventEl = document.querySelector('auro-menu#customEvent');
-
-  if (menuCustomEventEl) {
-    menuCustomEventEl.addEventListener('mycustomevent', () => {
-      console.warn('My Custom Event Fired');
-      alert(`My Custom Event Fired`);
-    });
-  }
-}
-
-function auroMenuLoadingExample() {
-  document.querySelector("#loadingExampleToggleButton").addEventListener("click", () => {
-    document.querySelectorAll("#loadingExampleTable auro-menu").forEach(menu => menu.toggleAttribute("loading"));
-  });
-}
-
-const initSelectAllMatchingOptionsExample = () => {
-
-  const selectAllBtn = document.getElementById('selectAllBtn');
-  const selectAllMenu = document.getElementById('selectAllMenu');
-  const selectFirstBtn = document.getElementById('selectFirstBtn');
-  const selectFirstMenu = document.getElementById('selectFirstMenu');
-  const resetAllBtn = document.getElementById('resetAllBtn');
-  const resetFirstBtn = document.getElementById('resetFirstBtn');
-
-  selectAllBtn.addEventListener('click', () => {
-    selectAllMenu.value = 'stops';
-  });
-
-  resetAllBtn.addEventListener('click', () => {
-    selectAllMenu.reset();
-  });
-
-  selectFirstBtn.addEventListener('click', () => {
-    selectFirstMenu.value = 'stops';
-  });
-
-  resetFirstBtn.addEventListener('click', () => {
-    selectFirstMenu.reset();
-  });
-};
-
 function initKeysExample() {
   const menu = document.getElementById('keys-menu');
   const stopsButton = document.getElementById('stopsButton');
@@ -101,6 +58,38 @@ function initKeysExample() {
   });
 }
 
+function auroMenuLoadingExample() {
+  document.querySelector("#loadingExampleToggleButton").addEventListener("click", () => {
+    document.querySelectorAll("#loadingExampleTable auro-menu").forEach(menu => menu.toggleAttribute("loading"));
+  });
+}
+
+const initSelectAllMatchingOptionsExample = () => {
+
+  const selectAllBtn = document.getElementById('selectAllBtn');
+  const selectAllMenu = document.getElementById('selectAllMenu');
+  const selectFirstBtn = document.getElementById('selectFirstBtn');
+  const selectFirstMenu = document.getElementById('selectFirstMenu');
+  const resetAllBtn = document.getElementById('resetAllBtn');
+  const resetFirstBtn = document.getElementById('resetFirstBtn');
+
+  selectAllBtn.addEventListener('click', () => {
+    selectAllMenu.value = 'stops';
+  });
+
+  resetAllBtn.addEventListener('click', () => {
+    selectAllMenu.reset();
+  });
+
+  selectFirstBtn.addEventListener('click', () => {
+    selectFirstMenu.value = 'stops';
+  });
+
+  resetFirstBtn.addEventListener('click', () => {
+    selectFirstMenu.reset();
+  });
+};
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -423,7 +412,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
  * SPDX-License-Identifier: BSD-3-Clause
  */const o=o=>o??E;
 
-class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<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>';class m extends i$3{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=i$6`: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, .75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}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}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, .25rem);line-height:1.8}
+class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<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>';class m extends i$3{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=i$6`: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, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}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}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
 `;class z extends m{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}i$6`.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}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
 `;var y=i$6`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
 `;var k=i$6`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
@@ -480,12 +469,9 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 
 
 /**
- * The auro-menu element provides users a way to define a menu option.
+ * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
- * @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.
  */
@@ -493,7 +479,7 @@ class AuroMenuOption extends AuroElement {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
+   * @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
    *
    * @example
    * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
@@ -536,7 +522,7 @@ class AuroMenuOption extends AuroElement {
     this.iconTag = versioning.generateTag('auro-formkit-menuoption-icon', iconVersion, x);
 
     this.selected = false;
-    this.nocheckmark = false;
+    this.noCheckmark = false;
     this.disabled = false;
 
     /**
@@ -557,38 +543,81 @@ class AuroMenuOption extends AuroElement {
   static get properties() {
     return {
       ...super.properties,
+
+      /**
+       * When true, disables the menu option.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * @private
+       */
       event: {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
+      /**
+       * Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used.
+       */
       key: {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
       menuService: {
         type: Object,
         state: true
       },
+
+      /**
+       * @private
+       */
       matchWord: {
         type: String,
         state: true
       },
-      nocheckmark: {
+
+      /**
+       * @private
+       */
+      noCheckmark: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Specifies that an option is selected.
+       */
       selected: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Specifies the tab index of the menu option.
+       */
       tabIndex: {
         type: Number,
         reflect: true
       },
+
+      /**
+       * Specifies the value to be sent to a server.
+       */
       value: {
         type: String,
         reflect: true
@@ -912,7 +941,7 @@ class AuroMenuOption extends AuroElement {
 
     return u$1`
       <div class="${classes}">
-        ${this.selected && !this.nocheckmark
+        ${this.selected && !this.noCheckmark
         ? this.generateIconHtml(checkmarkIcon.svg)
         : undefined}
         <slot></slot>
@@ -954,6 +983,15 @@ class MenuService {
     return this.multiSelect ? values : values[0];
   }
 
+  /**
+   * Gets the label(s) of the currently selected option(s).
+   * @returns {string}
+   */
+  get currentLabel() {
+    const labels = (this.selectedOptions || []).map(option => option.textContent);
+    return this.multiSelect ? labels.join(", ") : labels[0] || '';
+  }
+
   /**
    * Gets the string representation of the current value(s).
    * For multi-select, this is a JSON stringified array.
@@ -1385,7 +1423,8 @@ class MenuService {
       value: this.currentValue,
       stringValue: this.stringValue,
       keys: this.currentKeys,
-      options: this.selectedOptions
+      options: this.selectedOptions,
+      label: this.currentLabel
     };
 
     // If only one option is selected, include its index
@@ -1529,19 +1568,9 @@ const MenuContext = n$1('menu-context');
 
 
 /**
- * The auro-menu element provides users a way to select from a list of options.
- * @attr {HTMLElement|Array<HTMLElement>} optionSelected - An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
- * @attr {object} optionactive - Specifies the current active menuOption.
- * @attr {string} matchword - Specifies 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, displays a loading state using the loadingIcon and loadingText slots if provided.
- * @attr {boolean} multiselect - When true, the selected option can be multiple options.
- * @attr {boolean} selectAllMatchingOptions - When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
- * @attr {string} value - The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
- * @prop {string} size - Sets the size of the menu. Accepted values are 'sm' and 'md'. Default is 'sm'.
- * @prop {string} shape - Sets the shape of the menu options. Accepted values are 'box' and 'round'. Default is 'box'.
- * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
+ * The `auro-menu` element provides users a way to select from a list of options.
+ * @customElement auro-menu
+ *
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
@@ -1632,58 +1661,87 @@ class AuroMenu extends AuroElement {
         type: Boolean,
         reflect: true,
       },
-      noCheckmark: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'nocheckmark'
-      },
+
+      /**
+       * When true, the entire menu and all options are disabled.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
+       */
+      hasLoadingPlaceholder: {
+        type: Boolean
+      },
+
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
+      /**
+       * Indent level for submenus.
+       * @private
+       */
+      level: {
+        type: Number,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * When true, displays a loading state using the loadingIcon and loadingText slots if provided.
+       */
       loading: {
         type: Boolean,
         reflect: true
       },
-      optionSelected: {
-        // Allow HTMLElement, HTMLElement[] arrays and undefined
-        type: Object
-      },
-      optionActive: {
-        type: Object,
-        attribute: 'optionactive'
-      },
+
+      /**
+       * Specifies a string used to highlight matched string parts in options.
+       */
       matchWord: {
         type: String,
         attribute: 'matchword'
       },
+
+      /**
+       * When true, the selected option can be multiple options.
+       */
       multiSelect: {
         type: Boolean,
         reflect: true,
         attribute: 'multiselect'
       },
-      selectAllMatchingOptions: {
+
+      /**
+       * When true, selected option will not show the checkmark.
+       */
+      noCheckmark: {
         type: Boolean,
         reflect: true,
+        attribute: 'nocheckmark'
       },
 
       /**
-       * Value selected for the component.
+       * Specifies the current active menuOption.
        */
-      value: {
-        type: String,
-        reflect: true,
-        attribute: 'value'
+      optionActive: {
+        type: Object,
+        attribute: 'optionactive'
       },
 
       /**
-       * Indent level for submenus.
-       * @private
+       * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
        */
-      level: {
-        type: Number,
-        reflect: false,
-        attribute: false
+      optionSelected: {
+        // Allow HTMLElement, HTMLElement[] arrays and undefined
+        type: Object
       },
 
       /**
@@ -1694,6 +1752,43 @@ class AuroMenu extends AuroElement {
         type: Array,
         reflect: false,
         attribute: false
+      },
+
+      /**
+       * Sets the size of the menu.
+       * @type {'sm' | 'md'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
+       */
+      selectAllMatchingOptions: {
+        type: Boolean,
+        reflect: true,
+      },
+
+      /**
+       * Sets the shape of the menu.
+       * @type {'box' | 'round'}
+       * @default 'box'
+       */
+      shape: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
+       */
+      value: {
+        type: String,
+        reflect: true,
+        attribute: 'value'
       }
     };
   }
@@ -1706,6 +1801,14 @@ class AuroMenu extends AuroElement {
     ];
   }
 
+  /**
+   * @readonly
+   * @returns {string} - Returns the label of the currently selected option(s).
+   */
+  get currentLabel() {
+    return this.menuService.currentLabel;
+  };
+
   /**
    * @readonly
    * @returns {Array<HTMLElement>} - Returns the array of available menu options.
@@ -1731,7 +1834,7 @@ class AuroMenu extends AuroElement {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
+   * @param {string} [name="auro-menu"] - The name of the element that you want to register.
    *
    * @example
    * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
@@ -2149,12 +2252,11 @@ function initExamples(initCount) {
 
   try {
     // javascript example function calls to be added here upon creation to test examples
-    auroMenuResetExample();
-    auroMenuMatchWordExample();
-    auroMenuCustomEventExample();
+    initKeysExample();
     auroMenuLoadingExample();
+    auroMenuMatchWordExample();
     initSelectAllMatchingOptionsExample();
-    initKeysExample();
+    auroMenuResetExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/menu/demo/index.js

@@ -1,10 +1,7 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
-// import { auroMenuResetExample } from '../apiExamples/reset';
-
 import { AuroMenu } from '../src/auro-menu.js';
 import { AuroMenuOption } from '../src/auro-menuoption.js';
-import { initKeysExample } from '../apiExamples/keys.js';
 
 AuroMenu.register();
 AuroMenuOption.register();
@@ -16,8 +13,6 @@ export function initExamples(initCount) {
 
   try {
     // javascript example function calls to be added here upon creation to test examples
-    // auroMenuResetExample();
-    initKeysExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called