@ni/nimble-components 30.1.3 → 30.1.5

package/dist/all-components-bundle.js

@@ -5281,14 +5281,14 @@
   /**
    * A test that ensures that all arguments are HTML Elements
    */
-  function isHTMLElement(...args) {
+  function isHTMLElement$1(...args) {
       return args.every((arg) => arg instanceof HTMLElement);
   }
   /**
    * Returns all displayed elements inside of a root node that match a provided selector
    */
   function getDisplayedNodes(rootNode, selector) {
-      if (!rootNode || !selector || !isHTMLElement(rootNode)) {
+      if (!rootNode || !selector || !isHTMLElement$1(rootNode)) {
           return;
       }
       const nodes = Array.from(rootNode.querySelectorAll(selector));
@@ -7687,7 +7687,7 @@
    * @public
    */
   function isListboxOption(el) {
-      return (isHTMLElement(el) &&
+      return (isHTMLElement$1(el) &&
           (el.getAttribute("role") === "option" ||
               el instanceof HTMLOptionElement));
   }
@@ -11098,307 +11098,6 @@
     </template>
 `;
 
-  /**
-   * The template for the {@link @microsoft/fast-foundation#Menu} component.
-   * @public
-   */
-  const menuTemplate = (context, definition) => html `
-    <template
-        slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0)}"
-        role="menu"
-        @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
-        @focusout="${(x, c) => x.handleFocusOut(c.event)}"
-    >
-        <slot ${slotted("items")}></slot>
-    </template>
-`;
-
-  /**
-   * A Menu Custom HTML Element.
-   * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
-   *
-   * @slot - The default slot for the menu items
-   *
-   * @public
-   */
-  let Menu$1 = class Menu extends FoundationElement {
-      constructor() {
-          super(...arguments);
-          this.expandedItem = null;
-          /**
-           * The index of the focusable element in the items array
-           * defaults to -1
-           */
-          this.focusIndex = -1;
-          /**
-           * @internal
-           */
-          this.isNestedMenu = () => {
-              return (this.parentElement !== null &&
-                  isHTMLElement(this.parentElement) &&
-                  this.parentElement.getAttribute("role") === "menuitem");
-          };
-          /**
-           * if focus is moving out of the menu, reset to a stable initial state
-           * @internal
-           */
-          this.handleFocusOut = (e) => {
-              if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
-                  this.collapseExpandedItem();
-                  // find our first focusable element
-                  const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
-                  // set the current focus index's tabindex to -1
-                  this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-                  // set the first focusable element tabindex to 0
-                  this.menuItems[focusIndex].setAttribute("tabindex", "0");
-                  // set the focus index
-                  this.focusIndex = focusIndex;
-              }
-          };
-          this.handleItemFocus = (e) => {
-              const targetItem = e.target;
-              if (this.menuItems !== undefined &&
-                  targetItem !== this.menuItems[this.focusIndex]) {
-                  this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-                  this.focusIndex = this.menuItems.indexOf(targetItem);
-                  targetItem.setAttribute("tabindex", "0");
-              }
-          };
-          this.handleExpandedChanged = (e) => {
-              if (e.defaultPrevented ||
-                  e.target === null ||
-                  this.menuItems === undefined ||
-                  this.menuItems.indexOf(e.target) < 0) {
-                  return;
-              }
-              e.preventDefault();
-              const changedItem = e.target;
-              // closing an expanded item without opening another
-              if (this.expandedItem !== null &&
-                  changedItem === this.expandedItem &&
-                  changedItem.expanded === false) {
-                  this.expandedItem = null;
-                  return;
-              }
-              if (changedItem.expanded) {
-                  if (this.expandedItem !== null && this.expandedItem !== changedItem) {
-                      this.expandedItem.expanded = false;
-                  }
-                  this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-                  this.expandedItem = changedItem;
-                  this.focusIndex = this.menuItems.indexOf(changedItem);
-                  changedItem.setAttribute("tabindex", "0");
-              }
-          };
-          this.removeItemListeners = () => {
-              if (this.menuItems !== undefined) {
-                  this.menuItems.forEach((item) => {
-                      item.removeEventListener("expanded-change", this.handleExpandedChanged);
-                      item.removeEventListener("focus", this.handleItemFocus);
-                  });
-              }
-          };
-          this.setItems = () => {
-              const newItems = this.domChildren();
-              this.removeItemListeners();
-              this.menuItems = newItems;
-              const menuItems = this.menuItems.filter(this.isMenuItemElement);
-              // if our focus index is not -1 we have items
-              if (menuItems.length) {
-                  this.focusIndex = 0;
-              }
-              function elementIndent(el) {
-                  const role = el.getAttribute("role");
-                  const startSlot = el.querySelector("[slot=start]");
-                  if (role !== MenuItemRole.menuitem && startSlot === null) {
-                      return 1;
-                  }
-                  else if (role === MenuItemRole.menuitem && startSlot !== null) {
-                      return 1;
-                  }
-                  else if (role !== MenuItemRole.menuitem && startSlot !== null) {
-                      return 2;
-                  }
-                  else {
-                      return 0;
-                  }
-              }
-              const indent = menuItems.reduce((accum, current) => {
-                  const elementValue = elementIndent(current);
-                  return accum > elementValue ? accum : elementValue;
-              }, 0);
-              menuItems.forEach((item, index) => {
-                  item.setAttribute("tabindex", index === 0 ? "0" : "-1");
-                  item.addEventListener("expanded-change", this.handleExpandedChanged);
-                  item.addEventListener("focus", this.handleItemFocus);
-                  if (item instanceof MenuItem$1 || "startColumnCount" in item) {
-                      item.startColumnCount = indent;
-                  }
-              });
-          };
-          /**
-           * handle change from child element
-           */
-          this.changeHandler = (e) => {
-              if (this.menuItems === undefined) {
-                  return;
-              }
-              const changedMenuItem = e.target;
-              const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
-              if (changeItemIndex === -1) {
-                  return;
-              }
-              if (changedMenuItem.role === "menuitemradio" &&
-                  changedMenuItem.checked === true) {
-                  for (let i = changeItemIndex - 1; i >= 0; --i) {
-                      const item = this.menuItems[i];
-                      const role = item.getAttribute("role");
-                      if (role === MenuItemRole.menuitemradio) {
-                          item.checked = false;
-                      }
-                      if (role === "separator") {
-                          break;
-                      }
-                  }
-                  const maxIndex = this.menuItems.length - 1;
-                  for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
-                      const item = this.menuItems[i];
-                      const role = item.getAttribute("role");
-                      if (role === MenuItemRole.menuitemradio) {
-                          item.checked = false;
-                      }
-                      if (role === "separator") {
-                          break;
-                      }
-                  }
-              }
-          };
-          /**
-           * check if the item is a menu item
-           */
-          this.isMenuItemElement = (el) => {
-              return (isHTMLElement(el) &&
-                  Menu.focusableElementRoles.hasOwnProperty(el.getAttribute("role")));
-          };
-          /**
-           * check if the item is focusable
-           */
-          this.isFocusableElement = (el) => {
-              return this.isMenuItemElement(el);
-          };
-      }
-      itemsChanged(oldValue, newValue) {
-          // only update children after the component is connected and
-          // the setItems has run on connectedCallback
-          // (menuItems is undefined until then)
-          if (this.$fastController.isConnected && this.menuItems !== undefined) {
-              this.setItems();
-          }
-      }
-      /**
-       * @internal
-       */
-      connectedCallback() {
-          super.connectedCallback();
-          DOM.queueUpdate(() => {
-              // wait until children have had a chance to
-              // connect before setting/checking their props/attributes
-              this.setItems();
-          });
-          this.addEventListener("change", this.changeHandler);
-      }
-      /**
-       * @internal
-       */
-      disconnectedCallback() {
-          super.disconnectedCallback();
-          this.removeItemListeners();
-          this.menuItems = undefined;
-          this.removeEventListener("change", this.changeHandler);
-      }
-      /**
-       * Focuses the first item in the menu.
-       *
-       * @public
-       */
-      focus() {
-          this.setFocus(0, 1);
-      }
-      /**
-       * Collapses any expanded menu items.
-       *
-       * @public
-       */
-      collapseExpandedItem() {
-          if (this.expandedItem !== null) {
-              this.expandedItem.expanded = false;
-              this.expandedItem = null;
-          }
-      }
-      /**
-       * @internal
-       */
-      handleMenuKeyDown(e) {
-          if (e.defaultPrevented || this.menuItems === undefined) {
-              return;
-          }
-          switch (e.key) {
-              case keyArrowDown$1:
-                  // go forward one index
-                  this.setFocus(this.focusIndex + 1, 1);
-                  return;
-              case keyArrowUp$1:
-                  // go back one index
-                  this.setFocus(this.focusIndex - 1, -1);
-                  return;
-              case keyEnd$1:
-                  // set focus on last item
-                  this.setFocus(this.menuItems.length - 1, -1);
-                  return;
-              case keyHome$1:
-                  // set focus on first item
-                  this.setFocus(0, 1);
-                  return;
-              default:
-                  // if we are not handling the event, do not prevent default
-                  return true;
-          }
-      }
-      /**
-       * get an array of valid DOM children
-       */
-      domChildren() {
-          return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
-      }
-      setFocus(focusIndex, adjustment) {
-          if (this.menuItems === undefined) {
-              return;
-          }
-          while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
-              const child = this.menuItems[focusIndex];
-              if (this.isFocusableElement(child)) {
-                  // change the previous index to -1
-                  if (this.focusIndex > -1 &&
-                      this.menuItems.length >= this.focusIndex - 1) {
-                      this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-                  }
-                  // update the focus index
-                  this.focusIndex = focusIndex;
-                  // update the tabindex of next focusable element
-                  child.setAttribute("tabindex", "0");
-                  // focus the element
-                  child.focus();
-                  break;
-              }
-              focusIndex += adjustment;
-          }
-      }
-  };
-  Menu$1.focusableElementRoles = roleForMenuItem;
-  __decorate([
-      observable
-  ], Menu$1.prototype, "items", void 0);
-
   /**
    * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
    * @public
@@ -14779,7 +14478,7 @@
    * determines if element is an HTMLElement and if it has the role treeitem
    */
   function isTreeItemElement(el) {
-      return isHTMLElement(el) && el.getAttribute("role") === "treeitem";
+      return isHTMLElement$1(el) && el.getAttribute("role") === "treeitem";
   }
   /**
    * A Tree item Custom HTML Element.
@@ -15139,7 +14838,7 @@
               return;
           }
           const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-          if (isHTMLElement(focusItem)) {
+          if (isHTMLElement$1(focusItem)) {
               TreeItem$1.focusItem(focusItem);
           }
       }
@@ -16333,7 +16032,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 30 Jul 2024 14:18:21 GMT
+   * Generated on Tue, 30 Jul 2024 18:01:26 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16734,6 +16433,13 @@
       return -1;
   }
 
+  /**
+   * A test that ensures that all arguments are HTML Elements
+   */
+  function isHTMLElement(...args) {
+      return args.every((arg) => arg instanceof HTMLElement);
+  }
+
   /**
    * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
    * and should include all non-deprecated and non-experimental Standard events
@@ -16788,7 +16494,7 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$K = html `<slot></slot>`;
+  const template$L = html `<slot></slot>`;
 
   const styles$10 = css `
     ${display('contents')}
@@ -16906,7 +16612,7 @@
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
       styles: styles$10,
-      template: template$K
+      template: template$L
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -17178,7 +16884,7 @@
 `;
 
   // prettier-ignore
-  const template$J = (_context, definition) => html `${
+  const template$K = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -17281,7 +16987,7 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$J,
+      template: template$K,
       styles: styles$$,
       shadowOptions: {
           delegatesFocus: true
@@ -17698,7 +17404,7 @@
     }
 `;
 
-  const template$I = (context, definition) => html `
+  const template$J = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17780,7 +17486,7 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$I,
+      template: template$J,
       styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
@@ -17872,7 +17578,7 @@
     }
 `;
 
-  const template$H = (context, definition) => html `
+  const template$I = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17973,7 +17679,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$H,
+      template: template$I,
       styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
@@ -18100,7 +17806,7 @@
     }
 `;
 
-  const template$G = (context, definition) => html `
+  const template$H = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18152,7 +17858,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$G,
+      template: template$H,
       styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
@@ -18181,7 +17887,7 @@
     }
 `;
 
-  const template$F = (context, definition) => html `
+  const template$G = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18387,7 +18093,7 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$F,
+      template: template$G,
       styles: styles$W,
       shadowOptions: {
           delegatesFocus: false
@@ -18509,7 +18215,7 @@
     }
 `;
 
-  const template$E = (context, definition) => html `
+  const template$F = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18646,7 +18352,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$E,
+      template: template$F,
       styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
@@ -18895,7 +18601,7 @@
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$D = (context, definition) => html `
+  const template$E = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -18986,7 +18692,7 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$D,
+      template: template$E,
       styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
@@ -19790,7 +19496,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$C = html `<div
+  const template$D = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -19849,7 +19555,7 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$C,
+          template: template$D,
           styles: styles$R
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19968,7 +19674,7 @@
   }).withDefault(coreLabelDefaults.loadingLabel);
 
   // prettier-ignore
-  const template$B = html `
+  const template$C = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -20086,7 +19792,7 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$B,
+      template: template$C,
       styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -20253,7 +19959,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$A = html `
+  const template$B = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20268,7 +19974,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$A,
+      template: template$B,
       styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
@@ -20546,7 +20252,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$z = (_context, definition) => html `
+  const template$A = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20595,7 +20301,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$z,
+      template: template$A,
       styles: styles$M,
       checkedIndicator: checkLarge16X16.data,
       indeterminateIndicator: minus16X16.data
@@ -20653,7 +20359,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$y = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20749,7 +20455,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$y,
+      template: template$z,
       styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
@@ -21230,7 +20936,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$x = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21376,16 +21082,16 @@ so this becomes the fallback color for the slot */ ''}
           return this._value;
       }
       set value(next) {
-          const prev = `${this._value}`;
+          const prev = this._value;
           let updatedValue = next;
           if (this.$fastController.isConnected && this.options) {
-              const selectedIndex = this.options.findIndex(el => el.text.toLowerCase() === next.toLowerCase());
+              const selectedIndex = this.findIndexOfValidOption(next);
               const prevSelectedValue = this.options[this.selectedIndex]?.text;
               const nextSelectedValue = this.options[selectedIndex]?.text;
-              this.selectedIndex = prevSelectedValue !== nextSelectedValue
-                  ? selectedIndex
-                  : this.selectedIndex;
-              updatedValue = this.firstSelectedOption?.text || next;
+              if (prevSelectedValue !== nextSelectedValue) {
+                  this.selectedIndex = selectedIndex;
+              }
+              updatedValue = this.firstSelectedOption?.text || updatedValue;
           }
           if (prev !== updatedValue) {
               this._value = updatedValue;
@@ -21395,9 +21101,7 @@ so this becomes the fallback color for the slot */ ''}
           // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749
           this.filter = next;
           this.filterOptions();
-          this.selectedIndex = this.options
-              .map(option => option.text)
-              .indexOf(this.value);
+          this.selectedIndex = this.findIndexOfValidOption(this.value);
       }
       /**
        * The list of options.
@@ -21406,7 +21110,7 @@ so this becomes the fallback color for the slot */ ''}
        */
       get options() {
           Observable.track(this, 'options');
-          return this.filteredOptions?.length
+          return this.filteredOptions && this.filter
               ? this.filteredOptions
               : this._options;
       }
@@ -21510,8 +21214,6 @@ so this becomes the fallback color for the slot */ ''}
                   o.visuallyHidden = !this.filteredOptions.includes(o);
               });
           }
-          const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
-          this.filteredOptions = enabledOptions;
       }
       /**
        * @internal
@@ -21520,11 +21222,9 @@ so this becomes the fallback color for the slot */ ''}
           this.filter = this.control.value;
           this.filterOptions();
           if (!this.isAutocompleteInline) {
-              this.selectedIndex = this.options
-                  .map(option => option.text)
-                  .indexOf(this.control.value);
+              this.selectedIndex = this.findIndexOfValidOption(this.control.value);
           }
-          if (!(e.inputType.includes('deleteContent') || !this.filter.length)) {
+          if (!e.inputType.includes('deleteContent') && this.filter.length) {
               if (this.isAutocompleteList && !this.open) {
                   this.open = true;
               }
@@ -21669,7 +21369,8 @@ so this becomes the fallback color for the slot */ ''}
        */
       setDefaultSelectedOption() {
           if (this.$fastController.isConnected && this.options) {
-              const selectedIndex = this.options.findIndex(el => el.getAttribute('selected') !== null || el.selected);
+              const selectedIndex = this.options.findIndex(el => !el.disabled
+                  && (el.getAttribute('selected') !== null || el.selected));
               this.selectedIndex = selectedIndex;
               if (!this.dirtyValue && this.firstSelectedOption) {
                   this.value = this.firstSelectedOption.text;
@@ -21682,13 +21383,21 @@ so this becomes the fallback color for the slot */ ''}
        */
       selectedIndexChanged(prev, next) {
           if (this.$fastController.isConnected) {
-              const pinnedSelectedIndex = limit(-1, this.options.length - 1, next);
+              let pinnedSelectedIndex = limit(-1, this.options.length - 1, next);
+              // Ensure selectedIndex doesn't get set to a disabled option
+              if (this.options[pinnedSelectedIndex]?.disabled) {
+                  pinnedSelectedIndex = -1;
+              }
               // we only want to call the super method when the selectedIndex is in range
               if (pinnedSelectedIndex !== this.selectedIndex) {
                   this.selectedIndex = pinnedSelectedIndex;
                   return;
               }
               super.selectedIndexChanged(prev, pinnedSelectedIndex);
+              // the base class doesn't call this when no option is selected, but we need to,
+              // otherwise selectedOptions, ariaActiveDescendant, and the previously selected
+              // option's selected state won't be updated
+              this.setSelectedOptions();
           }
       }
       /**
@@ -21702,16 +21411,42 @@ so this becomes the fallback color for the slot */ ''}
           }
           this.ariaDisabled = this.disabled ? 'true' : 'false';
       }
+      /**
+       * Move focus to the next selectable option.
+       *
+       * @internal
+       * @remarks Has the same behavior as `Listbox.selectNextOption` except it skips disabled options.
+       * Overrides `Listbox.selectNextOption`
+       */
+      selectNextOption() {
+          if (!this.disabled) {
+              let newIndex = this.selectedIndex;
+              do {
+                  if (newIndex + 1 >= this.options.length) {
+                      return;
+                  }
+                  newIndex += 1;
+              } while (this.options[newIndex].disabled);
+              this.selectedIndex = newIndex;
+          }
+      }
       /**
        * Move focus to the previous selectable option.
        *
        * @internal
-       * @remarks
+       * @remarks Has the same behavior as `Listbox.selectPreviousOption` except it skips disabled options and allows moving focus to the input.
        * Overrides `Listbox.selectPreviousOption`
        */
       selectPreviousOption() {
-          if (!this.disabled && this.selectedIndex >= 0) {
-              this.selectedIndex -= 1;
+          if (!this.disabled) {
+              let newIndex = this.selectedIndex;
+              do {
+                  newIndex -= 1;
+                  if (newIndex < 0) {
+                      break;
+                  }
+              } while (this.options[newIndex].disabled);
+              this.selectedIndex = newIndex;
           }
       }
       /**
@@ -21786,6 +21521,17 @@ so this becomes the fallback color for the slot */ ''}
               this.proxy.placeholder = this.placeholder ?? '';
           }
       }
+      /**
+       * Need to update even when options is empty.
+       * @internal
+       * @remarks Same as `Listbox.setSelectedOptions` except does not check if options is non-empty.
+       * Overrides: `Listbox.setSelectedOptions`
+       */
+      setSelectedOptions() {
+          this.selectedOptions = this.selectedIndex > -1 ? [this.options[this.selectedIndex]] : [];
+          this.ariaActiveDescendant = this.firstSelectedOption?.id ?? '';
+          this.focusAndScrollOptionIntoView();
+      }
       /**
        * Ensure that the entire list of options is used when setting the selected property.
        * @internal
@@ -21887,6 +21633,9 @@ so this becomes the fallback color for the slot */ ''}
               this.valueUpdatedByInput = false;
           }
       }
+      findIndexOfValidOption(optionText) {
+          return this.options.findIndex(o => !o.disabled && o.text === optionText);
+      }
   }
   __decorate$1([
       attr
@@ -21939,7 +21688,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$x,
+      template: template$y,
       styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
@@ -22091,7 +21840,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$w = html `
+  const template$x = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22239,7 +21988,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$w,
+      template: template$x,
       styles: styles$H,
       baseClass: Dialog
   });
@@ -22397,7 +22146,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$v = html `
+  const template$w = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22540,7 +22289,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$v,
+      template: template$w,
       styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -25230,7 +24979,7 @@ so this becomes the fallback color for the slot */ ''}
    * @public
    */
   // prettier-ignore
-  const template$u = (context, definition) => html `
+  const template$v = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25335,7 +25084,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$u,
+      template: template$v,
       styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
@@ -25404,7 +25153,7 @@ so this becomes the fallback color for the slot */ ''}
       return n instanceof ListOption;
   };
   // prettier-ignore
-  const template$t = html `
+  const template$u = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -25550,7 +25299,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$t,
+      template: template$u,
       styles: styles$D
   });
   DesignSystem.getOrCreate()
@@ -25566,7 +25315,7 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$s = html `<template slot="mapping"></template>`;
+  const template$t = html `<template slot="mapping"></template>`;
 
   const styles$C = css `
     ${display('none')}
@@ -25584,7 +25333,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$s,
+      template: template$t,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
@@ -25655,7 +25404,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$s,
+      template: template$t,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
@@ -25679,7 +25428,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$s,
+      template: template$t,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
@@ -25696,11 +25445,330 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$s,
+      template: template$t,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
+  /**
+   * A Menu Custom HTML Element.
+   * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+   *
+   * @slot - The default slot for the menu items
+   *
+   * @public
+   */
+  let Menu$1 = class Menu extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.expandedItem = null;
+          /**
+           * The index of the focusable element in the items array
+           * defaults to -1
+           */
+          this.focusIndex = -1;
+          /**
+           * @internal
+           */
+          this.isNestedMenu = () => {
+              return (this.parentElement !== null
+                  && isHTMLElement(this.parentElement)
+                  && this.parentElement.getAttribute('role') === 'menuitem');
+          };
+          /**
+           * if focus is moving out of the menu, reset to a stable initial state
+           * @internal
+           */
+          this.handleFocusOut = (e) => {
+              if (!this.contains(e.relatedTarget)
+                  && this.menuItems !== undefined) {
+                  this.collapseExpandedItem();
+                  // find our first focusable element
+                  const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
+                  // set the current focus index's tabindex to -1
+                  this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');
+                  // set the first focusable element tabindex to 0
+                  this.menuItems[focusIndex]?.setAttribute('tabindex', '0');
+                  // set the focus index
+                  this.focusIndex = focusIndex;
+              }
+          };
+          this.handleItemFocus = (e) => {
+              const targetItem = e.target;
+              if (this.menuItems !== undefined
+                  && targetItem !== this.menuItems[this.focusIndex]) {
+                  this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');
+                  this.focusIndex = this.menuItems.indexOf(targetItem);
+                  targetItem.setAttribute('tabindex', '0');
+              }
+          };
+          this.handleExpandedChanged = (e) => {
+              if (e.defaultPrevented
+                  || e.target === null
+                  || this.menuItems === undefined
+                  || !this.menuItems.includes(e.target)) {
+                  return;
+              }
+              e.preventDefault();
+              const changedItem = e.target;
+              // closing an expanded item without opening another
+              if (this.expandedItem !== null
+                  && changedItem === this.expandedItem
+                  && changedItem.expanded === false) {
+                  this.expandedItem = null;
+                  return;
+              }
+              if (changedItem.expanded) {
+                  if (this.expandedItem !== null
+                      && this.expandedItem !== changedItem) {
+                      this.expandedItem.expanded = false;
+                  }
+                  this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');
+                  this.expandedItem = changedItem;
+                  this.focusIndex = this.menuItems.indexOf(changedItem);
+                  changedItem.setAttribute('tabindex', '0');
+              }
+          };
+          this.removeItemListeners = () => {
+              if (this.menuItems !== undefined) {
+                  this.menuItems.forEach((item) => {
+                      item.removeEventListener('expanded-change', this.handleExpandedChanged);
+                      item.removeEventListener('focus', this.handleItemFocus);
+                  });
+              }
+          };
+          this.setItems = () => {
+              const newItems = this.domChildren();
+              this.removeItemListeners();
+              this.menuItems = newItems;
+              const menuItems = this.menuItems.filter(this.isMenuItemElement);
+              // if our focus index is not -1 we have items
+              if (menuItems.length) {
+                  this.focusIndex = 0;
+              }
+              function elementIndent(el) {
+                  const role = el.getAttribute('role');
+                  const startSlot = el.querySelector('[slot=start]');
+                  if (role !== MenuItemRole.menuitem && startSlot === null) {
+                      return 1;
+                  }
+                  if (role === MenuItemRole.menuitem && startSlot !== null) {
+                      return 1;
+                  }
+                  if (role !== MenuItemRole.menuitem && startSlot !== null) {
+                      return 2;
+                  }
+                  return 0;
+              }
+              const indent = menuItems.reduce((accum, current) => {
+                  const elementValue = elementIndent(current);
+                  return accum > elementValue ? accum : elementValue;
+              }, 0);
+              menuItems.forEach((item, index) => {
+                  item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+                  item.addEventListener('expanded-change', this.handleExpandedChanged);
+                  item.addEventListener('focus', this.handleItemFocus);
+                  if (item instanceof MenuItem$1 || 'startColumnCount' in item) {
+                      item.startColumnCount = indent;
+                  }
+              });
+          };
+          /**
+           * handle change from child element
+           */
+          this.changeHandler = (e) => {
+              if (this.menuItems === undefined) {
+                  return;
+              }
+              const changedMenuItem = e.target;
+              const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+              if (changeItemIndex === -1) {
+                  return;
+              }
+              if (changedMenuItem.role === 'menuitemradio'
+                  && changedMenuItem.checked === true) {
+                  for (let i = changeItemIndex - 1; i >= 0; --i) {
+                      const item = this.menuItems[i];
+                      const role = item.getAttribute('role');
+                      if (role === MenuItemRole.menuitemradio) {
+                          item.checked = false;
+                      }
+                      if (role === 'separator') {
+                          break;
+                      }
+                  }
+                  const maxIndex = this.menuItems.length - 1;
+                  for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
+                      const item = this.menuItems[i];
+                      const role = item.getAttribute('role');
+                      if (role === MenuItemRole.menuitemradio) {
+                          item.checked = false;
+                      }
+                      if (role === 'separator') {
+                          break;
+                      }
+                  }
+              }
+          };
+          /**
+           * check if the item is a menu item
+           */
+          this.isMenuItemElement = (el) => {
+              return (isHTMLElement(el)
+                  && Object.prototype.hasOwnProperty.call(Menu.focusableElementRoles, el.getAttribute('role')));
+          };
+          /**
+           * check if the item is focusable
+           */
+          this.isFocusableElement = (el) => {
+              return this.isMenuItemElement(el);
+          };
+      }
+      /**
+       * @internal
+       */
+      connectedCallback() {
+          super.connectedCallback();
+          DOM.queueUpdate(() => {
+              // wait until children have had a chance to
+              // connect before setting/checking their props/attributes
+              this.setItems();
+          });
+          this.addEventListener('change', this.changeHandler);
+      }
+      /**
+       * @internal
+       */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.removeItemListeners();
+          this.menuItems = undefined;
+          this.removeEventListener('change', this.changeHandler);
+      }
+      /**
+       * Focuses the first item in the menu.
+       *
+       * @public
+       */
+      focus() {
+          this.setFocus(0, 1);
+      }
+      /**
+       * Collapses any expanded menu items.
+       *
+       * @public
+       */
+      collapseExpandedItem() {
+          if (this.expandedItem !== null) {
+              this.expandedItem.expanded = false;
+              this.expandedItem = null;
+          }
+      }
+      /**
+       * @internal
+       */
+      handleMenuKeyDown(e) {
+          if (e.defaultPrevented || this.menuItems === undefined) {
+              return false;
+          }
+          switch (e.key) {
+              case keyArrowDown:
+                  // go forward one index
+                  this.setFocus(this.focusIndex + 1, 1);
+                  return false;
+              case keyArrowUp:
+                  // go back one index
+                  this.setFocus(this.focusIndex - 1, -1);
+                  return false;
+              case keyEnd:
+                  // set focus on last item
+                  this.setFocus(this.menuItems.length - 1, -1);
+                  return false;
+              case keyHome:
+                  // set focus on first item
+                  this.setFocus(0, 1);
+                  return false;
+              default:
+                  // if we are not handling the event, do not prevent default
+                  return true;
+          }
+      }
+      itemsChanged() {
+          // only update children after the component is connected and
+          // the setItems has run on connectedCallback
+          // (menuItems is undefined until then)
+          if (this.$fastController.isConnected && this.menuItems !== undefined) {
+              this.setItems();
+          }
+      }
+      itemIconsChanged(oldIcons, newIcons) {
+          // must check if set of icon elements is actually different
+          if (this.$fastController.isConnected
+              && this.menuItems !== undefined
+              && (oldIcons.length !== newIcons.length
+                  || new Set(oldIcons.concat(newIcons)).size !== oldIcons.length)) {
+              this.setItems();
+          }
+      }
+      /**
+       * get an array of valid DOM children
+       */
+      domChildren() {
+          return Array.from(this.children).filter(child => !child.hasAttribute('hidden'));
+      }
+      setFocus(focusIndex, adjustment) {
+          if (this.menuItems === undefined) {
+              return;
+          }
+          let updatedIndex = focusIndex;
+          while (updatedIndex >= 0 && updatedIndex < this.menuItems.length) {
+              const child = this.menuItems[updatedIndex];
+              if (this.isFocusableElement(child)) {
+                  // change the previous index to -1
+                  if (this.focusIndex > -1
+                      && this.menuItems.length >= this.focusIndex - 1) {
+                      this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');
+                  }
+                  // update the focus index
+                  this.focusIndex = updatedIndex;
+                  // update the tabindex of next focusable element
+                  child.setAttribute('tabindex', '0');
+                  // focus the element
+                  child.focus();
+                  break;
+              }
+              updatedIndex += adjustment;
+          }
+      }
+  };
+  Menu$1.focusableElementRoles = roleForMenuItem;
+  __decorate$1([
+      observable
+  ], Menu$1.prototype, "items", void 0);
+  __decorate$1([
+      observable
+  ], Menu$1.prototype, "itemIcons", void 0);
+
+  /* eslint-disable @typescript-eslint/indent */
+  // prettier-ignore
+  const template$s = () => html `
+    <template
+        slot="${x => {
+    if (x.slot) {
+        return x.slot;
+    }
+    return x.isNestedMenu() ? 'submenu' : undefined;
+}}"
+        role="menu"
+        @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
+        @focusout="${(x, c) => x.handleFocusOut(c.event)}"
+        ${children$1({ property: 'itemIcons', subtree: true, attributeFilter: ['slot'], selector: ':scope > * > [slot="start"]' })}
+    >
+        <slot ${slotted('items')}></slot>
+    </template>
+`;
+  /* eslint-enable @typescript-eslint/indent */
+
   const styles$B = css `
     ${display('grid')}
 
@@ -25772,7 +25840,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: menuTemplate,
+      template: template$s,
       styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());