@ni/nimble-components 20.16.2 → 20.16.3

package/dist/all-components-bundle.js

@@ -5372,7 +5372,7 @@
   const keyHome$1 = "Home";
   const keyEnd$1 = "End";
   const keySpace$1 = " ";
-  const keyTab = "Tab";
+  const keyTab$1 = "Tab";
   const ArrowKeys = {
       ArrowDown: keyArrowDown$1,
       ArrowLeft: keyArrowLeft$1,
@@ -7849,7 +7849,7 @@
    *
    * @public
    */
-  class Listbox extends FoundationElement {
+  let Listbox$1 = class Listbox extends FoundationElement {
       constructor() {
           super(...arguments);
           /**
@@ -8115,7 +8115,7 @@
                   this.selectLastOption();
                   break;
               }
-              case keyTab: {
+              case keyTab$1: {
                   this.focusAndScrollOptionIntoView();
                   return true;
               }
@@ -8312,35 +8312,35 @@
               this.typeaheadExpired = false;
           }
       }
-  }
+  };
   /**
    * A static filter to include only selectable options.
    *
    * @param n - element to filter
    * @public
    */
-  Listbox.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
+  Listbox$1.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
   /**
    * Typeahead timeout in milliseconds.
    *
    * @internal
    */
-  Listbox.TYPE_AHEAD_TIMEOUT_MS = 1000;
+  Listbox$1.TYPE_AHEAD_TIMEOUT_MS = 1000;
   __decorate([
       attr({ mode: "boolean" })
-  ], Listbox.prototype, "disabled", void 0);
+  ], Listbox$1.prototype, "disabled", void 0);
   __decorate([
       observable
-  ], Listbox.prototype, "selectedIndex", void 0);
+  ], Listbox$1.prototype, "selectedIndex", void 0);
   __decorate([
       observable
-  ], Listbox.prototype, "selectedOptions", void 0);
+  ], Listbox$1.prototype, "selectedOptions", void 0);
   __decorate([
       observable
-  ], Listbox.prototype, "slottedOptions", void 0);
+  ], Listbox$1.prototype, "slottedOptions", void 0);
   __decorate([
       observable
-  ], Listbox.prototype, "typeaheadBuffer", void 0);
+  ], Listbox$1.prototype, "typeaheadBuffer", void 0);
   /**
    * Includes ARIA states and properties relating to the ARIA listbox role
    *
@@ -8361,7 +8361,7 @@
       observable
   ], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
   applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
-  applyMixins(Listbox, DelegatesARIAListbox);
+  applyMixins(Listbox$1, DelegatesARIAListbox);
 
   /**
    * Positioning directions for the listbox when a select is open.
@@ -8372,7 +8372,7 @@
       below: "below",
   };
 
-  class _Combobox extends Listbox {
+  class _Combobox extends Listbox$1 {
   }
   /**
    * A form-associated base class for the {@link (Combobox:class)} component.
@@ -10276,7 +10276,7 @@
    *
    * @public
    */
-  class ListboxElement extends Listbox {
+  class ListboxElement extends Listbox$1 {
       constructor() {
           super(...arguments);
           /**
@@ -10571,7 +10571,7 @@
                   this.checkLastOption(shiftKey);
                   return;
               }
-              case keyTab: {
+              case keyTab$1: {
                   this.focusAndScrollOptionIntoView();
                   return true;
               }
@@ -10715,6 +10715,32 @@
       attr({ converter: nullableNumberConverter })
   ], ListboxElement.prototype, "size", void 0);
 
+  /**
+   * The template for the {@link @microsoft/fast-foundation#(Listbox:class)} component.
+   * @public
+   */
+  const listboxTemplate = (context, definition) => html `
+    <template
+        aria-activedescendant="${x => x.ariaActiveDescendant}"
+        aria-multiselectable="${x => x.ariaMultiSelectable}"
+        class="listbox"
+        role="listbox"
+        tabindex="${x => (!x.disabled ? "0" : null)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        @focusin="${(x, c) => x.focusinHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
+    >
+        <slot
+            ${slotted({
+    filter: ListboxElement.slottedOptionFilter,
+    flatten: true,
+    property: "slottedOptions",
+})}
+        ></slot>
+    </template>
+`;
+
   /**
    * Menu items roles.
    * @public
@@ -12895,7 +12921,7 @@
        */
       setDefaultSelectedOption() {
           var _a;
-          const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox.slottedOptionFilter);
+          const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox$1.slottedOptionFilter);
           const selectedIndex = options === null || options === void 0 ? void 0 : options.findIndex(el => el.hasAttribute("selected") || el.selected || el.value === this.value);
           if (selectedIndex !== -1) {
               this.selectedIndex = selectedIndex;
@@ -12954,7 +12980,7 @@
                   }
                   break;
               }
-              case keyTab: {
+              case keyTab$1: {
                   if (this.collapsible && this.open) {
                       e.preventDefault();
                       this.open = false;
@@ -16274,7 +16300,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 13 Dec 2023 13:12:27 GMT
+   * Generated on Wed, 13 Dec 2023 13:50:22 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16658,6 +16684,7 @@
   const keyHome = "Home";
   const keyShift = "Shift";
   const keySpace = " ";
+  const keyTab = "Tab";
 
   /**
    * Expose ltr and rtl strings
@@ -16676,9 +16703,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$D = html `<slot></slot>`;
+  const template$E = html `<slot></slot>`;
 
-  const styles$W = css `
+  const styles$Y = css `
     :host {
         display: contents;
     }
@@ -16795,8 +16822,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$W,
-      template: template$D
+      styles: styles$Y,
+      template: template$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -17001,7 +17028,7 @@
       }
   }
 
-  const styles$V = css `
+  const styles$X = css `
     ${display('inline')}
 
     :host {
@@ -17088,7 +17115,7 @@
 `;
 
   // prettier-ignore
-  const template$C = (_context, definition) => html `${
+  const template$D = (_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
@@ -17187,8 +17214,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$C,
-      styles: styles$V,
+      template: template$D,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17291,7 +17318,7 @@
     padding: 0;
 `;
 
-  const styles$U = css `
+  const styles$W = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17568,8 +17595,8 @@
             }
         `));
 
-  const styles$T = css `
-    ${styles$U}
+  const styles$V = css `
+    ${styles$W}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17577,7 +17604,7 @@
     }
 `;
 
-  const template$B = (context, definition) => html `
+  const template$C = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17659,8 +17686,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$B,
-      styles: styles$T,
+      template: template$C,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17668,7 +17695,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   DesignSystem.tagFor(AnchorButton);
 
-  const styles$S = css `
+  const styles$U = css `
     ${display('grid')}
 
     :host {
@@ -17745,7 +17772,7 @@
     }
 `;
 
-  const template$A = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17851,8 +17878,8 @@
   // 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$A,
-      styles: styles$S,
+      template: template$B,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17876,7 +17903,7 @@
       }
   });
 
-  const styles$R = css `
+  const styles$T = css `
     ${display('inline-flex')}
 
     :host {
@@ -17992,7 +18019,7 @@
     }
 `;
 
-  const template$z = (context, definition) => html `
+  const template$A = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18044,8 +18071,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$z,
-      styles: styles$R,
+      template: template$A,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18053,7 +18080,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
   DesignSystem.tagFor(AnchorTab);
 
-  const styles$Q = css `
+  const styles$S = css `
     ${display('grid')}
 
     :host {
@@ -18075,7 +18102,7 @@
     }
 `;
 
-  const template$y = (context, definition) => html `
+  const template$z = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18281,8 +18308,8 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$y,
-      styles: styles$Q,
+      template: template$z,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18299,7 +18326,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$P = css `
+  const styles$R = css `
     ${display('block')}
 
     :host {
@@ -18400,7 +18427,7 @@
     }
 `;
 
-  const template$x = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18537,8 +18564,8 @@
   // 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$x,
-      styles: styles$P,
+      template: template$y,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18548,7 +18575,7 @@
       .register(nimbleAnchorTreeItem());
   DesignSystem.tagFor(AnchorTreeItem);
 
-  const styles$O = css `
+  const styles$Q = css `
     :host {
         contain: layout;
         display: block;
@@ -18572,7 +18599,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$O
+      styles: styles$Q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18652,7 +18679,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$N = css `
+  const styles$P = css `
     ${display('flex')}
 
     :host {
@@ -18795,8 +18822,8 @@
             }
         `));
 
-  const styles$M = css `
-    ${styles$U}
+  const styles$O = css `
+    ${styles$W}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18842,7 +18869,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$M,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19553,13 +19580,13 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$w = html `<div
+  const template$x = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$L = css `
+  const styles$N = css `
     ${display('inline-flex')}
 
     :host {
@@ -19612,8 +19639,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$w,
-          styles: styles$L,
+          template: template$x,
+          styles: styles$N,
           baseClass: iconClass
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19717,7 +19744,7 @@
   }).withDefault(coreLabelDefaults.informationIconLabel);
 
   // prettier-ignore
-  const template$v = html `
+  const template$w = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19833,13 +19860,13 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$v,
-      styles: styles$N
+      template: template$w,
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
   DesignSystem.tagFor(Banner);
 
-  const styles$K = css `
+  const styles$M = css `
     ${display('inline-block')}
 
     :host {
@@ -19880,12 +19907,12 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$K
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
   DesignSystem.tagFor(Breadcrumb);
 
-  const styles$J = css `
+  const styles$L = css `
     ${display('inline-flex')}
 
     :host {
@@ -19959,7 +19986,7 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$J,
+      styles: styles$L,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
@@ -19967,7 +19994,7 @@
       .register(nimbleBreadcrumbItem());
   DesignSystem.tagFor(BreadcrumbItem);
 
-  const styles$I = css `
+  const styles$K = css `
     ${display('flex')}
 
     :host {
@@ -19991,7 +20018,7 @@
     }
 `;
 
-  const template$u = html `
+  const template$v = html `
     ${'' /* Explicitly set role to work around Lighthouse error. See https://github.com/ni/nimble/issues/1650. */}
     <section role="region" aria-labelledby="title-slot">
         <slot name="title" id="title-slot"></slot>
@@ -20007,13 +20034,13 @@
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$u,
-      styles: styles$I
+      template: template$v,
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
   DesignSystem.tagFor(Card);
 
-  const styles$H = css `
+  const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -20172,7 +20199,7 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$H,
+      styles: styles$J,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20180,7 +20207,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   DesignSystem.tagFor(CardButton);
 
-  const styles$G = css `
+  const styles$I = css `
     ${display('inline-flex')}
 
     :host {
@@ -20298,15 +20325,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: checkboxTemplate,
-      styles: styles$G,
+      styles: styles$I,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = DesignSystem.tagFor(Checkbox);
 
-  const styles$F = css `
-    ${styles$U}
+  const styles$H = css `
+    ${styles$W}
 
     @layer base {
         .control[aria-pressed='true'] {
@@ -20385,7 +20412,7 @@
     }
 `;
 
-  const template$t = (context, definition) => html `
+  const template$u = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20460,8 +20487,8 @@
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$t,
-      styles: styles$F,
+      template: template$u,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20498,7 +20525,7 @@
       block: 'block'
   };
 
-  const styles$E = css `
+  const styles$G = css `
     ${display('inline-flex')}
 
     :host {
@@ -20724,7 +20751,7 @@
             }
         `));
 
-  const styles$D = css `
+  const styles$F = css `
     .error-icon {
         display: none;
     }
@@ -20758,9 +20785,9 @@
     }
 `;
 
-  const styles$C = css `
-    ${styles$E}
-    ${styles$D}
+  const styles$E = css `
+    ${styles$G}
+    ${styles$F}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20896,7 +20923,7 @@
   }
 
   // prettier-ignore
-  const template$s = (context, definition) => html `
+  const template$t = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -20959,7 +20986,7 @@
             >
                 <slot
                     ${slotted({
-    filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
+    filter: (n) => n instanceof HTMLElement && Listbox$1.slottedOptionFilter(n),
     flatten: true,
     property: 'slottedOptions',
 })}
@@ -21174,8 +21201,8 @@
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: Combobox$1,
-      template: template$s,
-      styles: styles$C,
+      template: template$t,
+      styles: styles$E,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21220,7 +21247,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$B = css `
+  const styles$D = css `
     ${display('grid')}
 
     dialog {
@@ -21322,7 +21349,7 @@
             }
         `));
 
-  const template$r = html `
+  const template$s = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21449,14 +21476,14 @@
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$r,
-      styles: styles$B,
+      template: template$s,
+      styles: styles$D,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
   DesignSystem.tagFor(Dialog);
 
-  const styles$A = css `
+  const styles$C = css `
     ${display('block')}
 
     :host {
@@ -21609,7 +21636,7 @@
             }
         `));
 
-  const template$q = html `
+  const template$r = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21723,8 +21750,8 @@
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$q,
-      styles: styles$A
+      template: template$r,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
   DesignSystem.tagFor(Drawer);
@@ -24174,7 +24201,7 @@
       .register(nimbleLabelProviderTable());
   DesignSystem.tagFor(LabelProviderTable);
 
-  const styles$z = css `
+  const styles$B = css `
     ${display('flex')}
 
     :host {
@@ -24247,7 +24274,7 @@
    * @public
    */
   // prettier-ignore
-  const template$p = (context, definition) => html `
+  const template$q = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -24295,11 +24322,11 @@
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$p,
-      styles: styles$z
+      template: template$q,
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
-  DesignSystem.tagFor(ListOption);
+  const listOptionTag = DesignSystem.tagFor(ListOption);
 
   /**
    * Base class for mapping configuration elements
@@ -24310,7 +24337,7 @@
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$o = html `<template slot="mapping"></template>`;
+  const template$p = html `<template slot="mapping"></template>`;
 
   /**
    * Defines a mapping from one data value ('key' property) to display text ('text' property).
@@ -24324,7 +24351,7 @@
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$o
+      template: template$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
   DesignSystem.tagFor(MappingText);
@@ -24388,7 +24415,7 @@
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$o
+      template: template$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
   DesignSystem.tagFor(MappingIcon);
@@ -24405,12 +24432,12 @@
   ], MappingSpinner.prototype, "text", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$o
+      template: template$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
   DesignSystem.tagFor(MappingSpinner);
 
-  const styles$y = css `
+  const styles$A = css `
     ${display('grid')}
 
     :host {
@@ -24477,12 +24504,12 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$y
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   DesignSystem.tagFor(Menu);
 
-  const styles$x = css `
+  const styles$z = css `
     ${display('inline-block')}
 
     :host {
@@ -24501,7 +24528,7 @@
 `;
 
   // prettier-ignore
-  const template$n = html `
+  const template$o = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -24756,8 +24783,8 @@
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$n,
-      styles: styles$x,
+      template: template$o,
+      styles: styles$z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -24765,7 +24792,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-  const styles$w = css `
+  const styles$y = css `
     ${display('grid')}
 
     :host {
@@ -24863,7 +24890,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$w,
+      styles: styles$y,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -24878,9 +24905,9 @@
       block: 'block'
   };
 
-  const styles$v = css `
+  const styles$x = css `
     ${display('inline-block')}
-    ${styles$D}
+    ${styles$F}
 
     :host {
         font: ${bodyFont};
@@ -25094,7 +25121,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$v,
+      styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -25138,7 +25165,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
   DesignSystem.tagFor(NumberField);
 
-  const styles$u = css `
+  const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -25239,13 +25266,13 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$u,
+      styles: styles$w,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
   DesignSystem.tagFor(Radio);
 
-  const styles$t = css `
+  const styles$v = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -25280,7 +25307,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$t,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -42132,7 +42159,67 @@ img.ProseMirror-separator {
       return string.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
   }
 
-  const styles$s = css `
+  const HardBreak = Node$1.create({
+      name: 'hardBreak',
+      addOptions() {
+          return {
+              keepMarks: true,
+              HTMLAttributes: {},
+          };
+      },
+      inline: true,
+      group: 'inline',
+      selectable: false,
+      parseHTML() {
+          return [
+              { tag: 'br' },
+          ];
+      },
+      renderHTML({ HTMLAttributes }) {
+          return ['br', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+      },
+      renderText() {
+          return '\n';
+      },
+      addCommands() {
+          return {
+              setHardBreak: () => ({ commands, chain, state, editor, }) => {
+                  return commands.first([
+                      () => commands.exitCode(),
+                      () => commands.command(() => {
+                          const { selection, storedMarks } = state;
+                          if (selection.$from.parent.type.spec.isolating) {
+                              return false;
+                          }
+                          const { keepMarks } = this.options;
+                          const { splittableMarks } = editor.extensionManager;
+                          const marks = storedMarks
+                              || (selection.$to.parentOffset && selection.$from.marks());
+                          return chain()
+                              .insertContent({ type: this.name })
+                              .command(({ tr, dispatch }) => {
+                              if (dispatch && marks && keepMarks) {
+                                  const filteredMarks = marks
+                                      .filter(mark => splittableMarks.includes(mark.type.name));
+                                  tr.ensureMarks(filteredMarks);
+                              }
+                              return true;
+                          })
+                              .run();
+                      }),
+                  ]);
+              },
+          };
+      },
+      addKeyboardShortcuts() {
+          return {
+              'Mod-Enter': () => this.editor.commands.setHardBreak(),
+              'Shift-Enter': () => this.editor.commands.setHardBreak(),
+          };
+      },
+  });
+
+  const styles$u = css `
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
@@ -42167,7 +42254,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$s,
+      styles: styles$u,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -42199,9 +42286,337 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
+  const styles$t = css `
+    ${styles$G}
+
+    :host {
+        height: auto;
+    }
+
+    :host(:hover)::after,
+    :host(${focusVisible})::after {
+        width: auto;
+    }
+
+    .listbox {
+        min-width: ${menuMinWidth};
+        max-height: calc(5.5 * ${controlHeight});
+    }
+`;
+
+  const styles$s = css `
+    ${display('inline-flex')}
+
+    :host {
+        background: ${applicationBackgroundColor};
+        border: ${borderWidth} solid ${popupBorderColor};
+        flex-direction: column;
+        margin: 0;
+        min-width: ${menuMinWidth};
+        box-shadow: ${elevation2BoxShadow};
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+    }
+
+    :host(:focus) {
+        outline: 0px;
+    }
+
+    slot {
+        padding: ${smallPadding};
+        display: block;
+    }
+`;
+
+  /**
+   * A nimble-styled HTML list box
+   */
+  class Listbox extends ListboxElement {
+  }
+  const nimbleListbox = Listbox.compose({
+      baseName: 'listbox',
+      template: listboxTemplate,
+      styles: styles$s
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListbox());
+  DesignSystem.tagFor(Listbox);
+
+  // prettier-ignore
+  const template$n = html `
+    <template>
+        <${anchoredRegionTag}
+            ${ref('region')}
+            class="anchored-region"
+            fixed-placement
+            auto-update-mode="auto"
+            vertical-default-position="bottom"
+            vertical-positioning-mode="locktodefault"
+            horizontal-default-position="center"
+            horizontal-positioning-mode="locktodefault"
+            horizontal-scaling="anchor"
+            ?hidden="${x => !x.open}">
+            <div
+                class="listbox"
+                part="listbox"
+                role="listbox"
+                @click="${(x, c) => x.clickHandler(c.event)}"
+                ?disabled="${x => x.disabled}"
+            >
+                <slot
+                    ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
+                >
+                </slot>
+            </div>
+            </${anchoredRegionTag}>
+    </template>
+`;
+
+  /**
+   * Generic normalize method that removes the accents and special characters.
+   * This method can be used to normalize the string before performing diacritic-insensitive string comparisons
+   */
+  const diacriticInsensitiveStringNormalizer = (value) => {
+      // This implementation is based on the below reference.
+      // https://claritydev.net/blog/diacritic-insensitive-string-comparison-javascript
+      return value
+          .normalize('NFD')
+          .replace(/[\u0300-\u036f]/g, '')
+          .toLowerCase();
+  };
+
+  /**
+   * A rich text mention listbox which acts as a popup for "@mention" support in editor
+   */
+  class RichTextMentionListbox extends ListboxElement {
+      constructor() {
+          super(...arguments);
+          /**
+           * @internal
+           */
+          this.filter = '';
+          /**
+           * The collection of currently filtered options.
+           * The approach is defined based on the `Combobox.filteredOptions` implementation.
+           *
+           * @internal
+           */
+          this.filteredOptions = [];
+          this.anchorElementIntersectionObserver = new IntersectionObserver(entries => {
+              if (!entries[0]?.isIntersecting) {
+                  this.setOpen(false);
+              }
+          }, { threshold: 1.0, root: document });
+      }
+      /**
+       * @public
+       */
+      close() {
+          this.setOpen(false);
+      }
+      /**
+       * The list of options.
+       *
+       * @public
+       * @remarks
+       * Overrides `Listbox.options`.
+       */
+      get options() {
+          Observable.track(this, 'options');
+          return this.filteredOptions?.length ? this.filteredOptions : [];
+      }
+      set options(value) {
+          this._options = value;
+          Observable.notify(this, 'options');
+      }
+      /**
+       * Triggers when the mention plugin is activated upon pressing the `key`
+       *
+       * @public
+       */
+      show(options) {
+          this.filter = options.filter;
+          this.anchorElement = options.anchorNode;
+          this.setOpen(true);
+          this.filterOptions();
+      }
+      /**
+       * Handle keydown actions for listbox navigation and selection.
+       *
+       * @param e - the keyboard event
+       * @public
+       */
+      keydownHandler(event) {
+          if (!this.open) {
+              return false;
+          }
+          switch (event.key) {
+              case keyTab:
+              case keyEnter: {
+                  if (!this.hasSelectableOptions) {
+                      return false;
+                  }
+                  const mentionDetail = {
+                      href: this.firstSelectedOption.value,
+                      displayName: this.firstSelectedOption.text
+                  };
+                  this.emitMentionSelected(mentionDetail);
+                  return true;
+              }
+              case keyEscape: {
+                  this.setOpen(false);
+                  return false;
+              }
+              default: {
+                  super.keydownHandler(event);
+                  return false;
+              }
+          }
+      }
+      /**
+       * Filter available options by filter value.
+       * The method is defined based on the `Combobox.filterOptions` and `Combobox.inputHandler` implementation.
+       *
+       * @internal
+       */
+      filterOptions() {
+          if (!this.filter) {
+              this.filteredOptions = this._options;
+          }
+          else {
+              const normalizedFilter = diacriticInsensitiveStringNormalizer(this.filter);
+              this.filteredOptions = this._options.filter(o => diacriticInsensitiveStringNormalizer(o.text).includes(normalizedFilter));
+          }
+          this._options.forEach(o => {
+              o.hidden = !this.filteredOptions.includes(o);
+          });
+          if (this.filteredOptions.length) {
+              this.selectedOptions = [this.filteredOptions[0]];
+              this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+          }
+          else {
+              this.selectedOptions = [];
+              this.selectedIndex = -1;
+          }
+      }
+      /**
+       * Synchronize the form-associated proxy and update the value property of the element.
+       *
+       * @param prev - the previous collection of slotted option elements
+       * @param next - the next collection of slotted option elements
+       *
+       * @internal
+       */
+      slottedOptionsChanged(prev, next) {
+          super.slottedOptionsChanged(prev, next);
+          this.filterOptions();
+      }
+      /**
+       * Triggers the `suggestionProps` command to notify the tiptap editor to select the option.
+       * The method is defined based on the `Listbox.clickHandler` implementation.
+       *
+       * @internal
+       */
+      clickHandler(e) {
+          const capturedElement = e.target.closest('option,[role=option]');
+          const capturedListOption = capturedElement;
+          if (!capturedListOption || capturedListOption.disabled) {
+              return false;
+          }
+          const mentionDetail = {
+              href: capturedListOption.value,
+              displayName: capturedListOption.text
+          };
+          this.emitMentionSelected(mentionDetail);
+          return true;
+      }
+      /**
+       * Observes the anchor element using intersection observer.
+       * Once the anchor element intersects, the anchor region will be closed.
+       *
+       * @internal
+       */
+      anchorElementChanged(prev, next) {
+          if (prev) {
+              this.anchorElementIntersectionObserver.unobserve(prev);
+          }
+          if (this.region && this.anchorElement) {
+              this.region.anchorElement = this.anchorElement;
+              this.region.update();
+              this.anchorElementIntersectionObserver.observe(next);
+          }
+      }
+      /**
+       * Observes the anchor region.
+       *
+       * @internal
+       */
+      regionChanged() {
+          if (this.regionNotifier) {
+              this.regionNotifier.unsubscribe(this);
+          }
+          this.regionNotifier = Observable.getNotifier(this.region);
+          this.regionNotifier.subscribe(this);
+      }
+      /**
+       * Handles the events of the anchored region.
+       * Repositions the listbox scroll bar when the `initialLayoutComplete` event is triggered.
+       * Other events will be passed to the base class.
+       *
+       * @internal
+       */
+      handleChange(source, args) {
+          super.handleChange(source, args);
+          if (args === 'initialLayoutComplete') {
+              this.focusAndScrollOptionIntoView();
+          }
+      }
+      /**
+       * Focus the control and scroll the first selected option into view.
+       *
+       * @internal
+       * @remarks
+       * Overrides: `Listbox.focusAndScrollOptionIntoView`
+       */
+      focusAndScrollOptionIntoView() {
+          if (this.firstSelectedOption) {
+              requestAnimationFrame(() => {
+                  this.firstSelectedOption?.scrollIntoView({ block: 'nearest' });
+              });
+          }
+      }
+      emitMentionSelected(mentionDetail) {
+          this.$emit('mention-selected', mentionDetail);
+          this.setOpen(false);
+      }
+      setOpen(value) {
+          this.open = value;
+      }
+  }
+  __decorate$1([
+      observable
+  ], RichTextMentionListbox.prototype, "open", void 0);
+  __decorate$1([
+      observable
+  ], RichTextMentionListbox.prototype, "region", void 0);
+  __decorate$1([
+      observable
+  ], RichTextMentionListbox.prototype, "anchorElement", void 0);
+  const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
+      baseName: 'rich-text-mention-listbox',
+      template: template$n,
+      styles: styles$t
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleRichTextMentionListbox());
+  const richTextMentionListboxTag = DesignSystem.tagFor(RichTextMentionListbox);
+
   // prettier-ignore
   const template$m = html `
-    <template ${children$1({ property: 'childItems', filter: elements() })}>
+    <template
+        ${children$1({ property: 'childItems', filter: elements() })}
+        @focusout="${x => x.focusoutHandler()}"
+    >
         <div class="container">
             <section ${ref('editorContainer')} class="editor-container">
             </section>
@@ -42268,6 +42683,19 @@ img.ProseMirror-separator {
                         ${x => richTextToggleNumberedListLabel.getValueFor(x)}
                         <${iconNumberListTag} slot="start"></${iconNumberListTag}>
                     </${toggleButtonTag}>
+                    ${repeat(x => x.getMentionExtensionConfig(), html `
+                        <${buttonTag}
+                            appearance="ghost"
+                            content-hidden
+                            ?disabled="${(_x, c) => c.parent.disabled}"
+                            slot="start"
+                            title=${x => x.buttonLabel}
+                            @click=${(x, c) => c.parent.mentionButtonClick(x.character)}
+                        >
+                            ${x => x.buttonLabel}
+                            ${x => x.iconTemplate}
+                        </${buttonTag}>
+                    `)}
                 </${toolbarTag}>
                 <span class="footer-actions" part="footer-actions">
                     <slot name="footer-actions"></slot>
@@ -42275,6 +42703,14 @@ img.ProseMirror-separator {
             </section>
             ${errorTextTemplate}
         </div>
+        <${richTextMentionListboxTag}
+            ${ref('mentionListbox')}
+            @mention-selected=${(x, c) => x.onMentionSelect(c.event)}
+        >
+            ${repeat(x => Array.from(x.activeMappingConfigs?.values() ?? []), html `
+                <${listOptionTag} value="${x => x.mentionHref}">${x => x.displayName}</${listOptionTag}>
+            `, { recycle: false })}
+        </${richTextMentionListboxTag}>
     </template>
 `;
 
@@ -42339,6 +42775,10 @@ img.ProseMirror-separator {
         color: ${bodyDisabledFontColor};
     }
 
+    :host([disable-editing]) {
+        font: ${mentionFont};
+    }
+
     :host([disable-editing]) slot {
         display: none;
     }
@@ -42361,7 +42801,7 @@ img.ProseMirror-separator {
 
   const styles$q = css `
     ${display('inline-flex')}
-    ${styles$D}
+    ${styles$F}
 
     :host {
         font: ${bodyFont};
@@ -55872,7 +56312,11 @@ img.ProseMirror-separator {
                   link: {
                       attrs: {
                           href: {},
-                          rel: { default: 'noopener noreferrer' }
+                          rel: { default: 'noopener noreferrer' },
+                          // Adding `class` here is a workaround to render two mentions without a whitespace as display names
+                          // This attribute can be removed when the below issue is resolved
+                          // https://github.com/ni/nimble/issues/1707
+                          class: { default: '' }
                       },
                       // Inclusive can be updated when hyperlink support added
                       // See: https://github.com/ni/nimble/issues/1527
@@ -55906,7 +56350,11 @@ img.ProseMirror-separator {
                                    * With this, the user can click the links only when the scheme is HTTP/HTTPS
                                    */
                                   href: /^https?:\/\//i.test(href) ? href : null,
-                                  rel: node.attrs.rel
+                                  rel: node.attrs.rel,
+                                  // Adding `class` here is a workaround to render two mentions without a whitespace as display names
+                                  // This attribute can be removed when the below issue is resolved
+                                  // https://github.com/ni/nimble/issues/1707
+                                  class: href
                               }
                           ];
                       }
@@ -56021,7 +56469,7 @@ img.ProseMirror-separator {
            * Whether this mention has a valid configuration.
            */
           this.validConfiguration = true;
-          this.icon = options.icon;
+          this.iconTemplate = html `<${options.icon} slot="start"></${options.icon}>`;
           this.character = options.character;
           this.viewElement = options.viewElement;
           this.mentionUpdateEmitter = mentionUpdateEmitter;
@@ -56036,6 +56484,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], MentionInternals.prototype, "pattern", void 0);
+  __decorate$1([
+      observable
+  ], MentionInternals.prototype, "buttonLabel", void 0);
 
   /**
    * The base class for Mention configuration
@@ -56081,7 +56532,9 @@ img.ProseMirror-separator {
        * @internal
        */
       handleChange(source, args) {
-          if (source instanceof Mapping$1 && typeof args === 'string') {
+          if (source instanceof Mapping$1
+              && typeof args === 'string'
+              && this.getObservedMappingProperty().includes(args)) {
               this.updateMappingConfigs();
           }
       }
@@ -56111,6 +56564,9 @@ img.ProseMirror-separator {
           this.validator.validate(this.mappingElements, this.pattern);
           this.mentionInternals.pattern = this.pattern;
       }
+      buttonLabelChanged() {
+          this.mentionInternals.buttonLabel = this.buttonLabel;
+      }
       removeMappingElementObservers() {
           this.mappingNotifiers.forEach(notifier => {
               notifier.unsubscribe(this);
@@ -56129,6 +56585,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr
   ], RichTextMention.prototype, "pattern", void 0);
+  __decorate$1([
+      attr({ attribute: 'button-label' })
+  ], RichTextMention.prototype, "buttonLabel", void 0);
   __decorate$1([
       observable
   ], RichTextMention.prototype, "mappingElements", void 0);
@@ -56238,10 +56697,33 @@ img.ProseMirror-separator {
   ], RichText.prototype, "childItems", void 0);
   __decorate$1([
       observable
-  ], RichText.prototype, "configuration", void 0);
+  ], RichText.prototype, "mentionElements", void 0);
   __decorate$1([
       observable
-  ], RichText.prototype, "mentionElements", void 0);
+  ], RichText.prototype, "configuration", void 0);
+
+  /**
+   * A configuration object for a Mention extension, to be used by the editor for loading mention plugins in tiptap.
+   * This object maintains the necessary internal values for loading mention extension.
+   */
+  class MentionExtensionConfiguration {
+      constructor(mentionInternals) {
+          MentionExtensionConfiguration.instance += 1;
+          const key = `${mentionPluginPrefix}${MentionExtensionConfiguration.instance}`;
+          this.name = key;
+          this.key = key;
+          this.viewElement = mentionInternals.viewElement;
+          this.character = mentionInternals.character;
+          this.mappingConfigs = mentionInternals.mappingConfigs;
+          this.iconTemplate = mentionInternals.iconTemplate;
+          this.buttonLabel = mentionInternals.buttonLabel ?? '';
+          this.mentionUpdateEmitter = mentionInternals.mentionUpdateEmitter;
+      }
+      static isObservedMentionInternalsProperty(arg) {
+          return typeof arg === 'string' && ['buttonLabel'].includes(arg);
+      }
+  }
+  MentionExtensionConfiguration.instance = 0;
 
   const starInputRegex$1 = /(?:^|\s)((?:\*\*)((?:[^*]+))(?:\*\*))$/;
   const starPasteRegex$1 = /(?:^|\s)((?:\*\*)((?:[^*]+))(?:\*\*))/g;
@@ -59816,70 +60298,10 @@ img.ProseMirror-separator {
       },
   });
 
-  const HardBreak = Node$1.create({
-      name: 'hardBreak',
-      addOptions() {
-          return {
-              keepMarks: true,
-              HTMLAttributes: {},
-          };
-      },
-      inline: true,
-      group: 'inline',
-      selectable: false,
-      parseHTML() {
-          return [
-              { tag: 'br' },
-          ];
-      },
-      renderHTML({ HTMLAttributes }) {
-          return ['br', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
-      },
-      renderText() {
-          return '\n';
-      },
-      addCommands() {
-          return {
-              setHardBreak: () => ({ commands, chain, state, editor, }) => {
-                  return commands.first([
-                      () => commands.exitCode(),
-                      () => commands.command(() => {
-                          const { selection, storedMarks } = state;
-                          if (selection.$from.parent.type.spec.isolating) {
-                              return false;
-                          }
-                          const { keepMarks } = this.options;
-                          const { splittableMarks } = editor.extensionManager;
-                          const marks = storedMarks
-                              || (selection.$to.parentOffset && selection.$from.marks());
-                          return chain()
-                              .insertContent({ type: this.name })
-                              .command(({ tr, dispatch }) => {
-                              if (dispatch && marks && keepMarks) {
-                                  const filteredMarks = marks
-                                      .filter(mark => splittableMarks.includes(mark.type.name));
-                                  tr.ensureMarks(filteredMarks);
-                              }
-                              return true;
-                          })
-                              .run();
-                      }),
-                  ]);
-              },
-          };
-      },
-      addKeyboardShortcuts() {
-          return {
-              'Mod-Enter': () => this.editor.commands.setHardBreak(),
-              'Shift-Enter': () => this.editor.commands.setHardBreak(),
-          };
-      },
-  });
-
   const validAbsoluteLinkRegex = /^https?:\/\//i;
-  function createTiptapEditor(editor, mentionExtensionConfig, placeholder) {
+  function createTiptapEditor(activeMentionCharacterEmitter, activeMentionCommandEmitter, editor, mentionExtensionConfig, mentionListbox, placeholder) {
       const customLink = createCustomLinkExtension();
-      const mentionExtensions = mentionExtensionConfig.map(config => createCustomMentionExtension(config));
+      const mentionExtensions = mentionExtensionConfig.map(config => createCustomMentionExtension(config, activeMentionCharacterEmitter, activeMentionCommandEmitter, mentionListbox));
       /**
        * For more information on the extensions for the supported formatting options, refer to the links below.
        * Tiptap marks: https://tiptap.dev/api/marks
@@ -59973,7 +60395,11 @@ img.ProseMirror-separator {
           // eslint-disable-next-line @typescript-eslint/naming-convention
           HTMLAttributes: {
               rel: 'noopener noreferrer',
-              target: null
+              target: null,
+              // Adding `class` here is a workaround to render two mentions without a whitespace as display names
+              // This attribute can be removed when the below issue is resolved
+              // https://github.com/ni/nimble/issues/1707
+              class: ''
           },
           autolink: true,
           openOnClick: false,
@@ -59983,7 +60409,7 @@ img.ProseMirror-separator {
           validate: href => validAbsoluteLinkRegex.test(href)
       });
   }
-  function createCustomMentionExtension(config) {
+  function createCustomMentionExtension(config, activeMentionCharacterEmitter, activeMentionCommandEmitter, mentionListbox) {
       return Mention.extend({
           name: config.name,
           parseHTML() {
@@ -60016,12 +60442,16 @@ img.ProseMirror-separator {
               };
           },
           // eslint-disable-next-line @typescript-eslint/naming-convention
-          renderHTML({ HTMLAttributes }) {
+          renderHTML({ node, HTMLAttributes }) {
               return [
                   config.viewElement,
                   mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, 
                   // disable-editing is a boolean attribute
-                  { 'disable-editing': '' })
+                  { 'disable-editing': '' }),
+                  this.options.renderLabel({
+                      options: this.options,
+                      node
+                  })
               ];
           }
       }).configure({
@@ -60031,12 +60461,42 @@ img.ProseMirror-separator {
               pluginKey: new PluginKey(config.key),
               allowSpaces: true,
               render: () => {
+                  let inSuggestionMode = false;
                   return {
                       onStart: (props) => {
+                          inSuggestionMode = true;
                           config.mentionUpdateEmitter(props.query);
+                          activeMentionCharacterEmitter(props.text.slice(0, 1));
+                          activeMentionCommandEmitter(props.command);
+                          mentionListbox?.show({
+                              filter: props.query,
+                              anchorNode: props.decorationNode
+                          });
                       },
                       onUpdate: (props) => {
+                          if (!inSuggestionMode) {
+                              return;
+                          }
                           config.mentionUpdateEmitter(props.query);
+                          activeMentionCommandEmitter(props.command);
+                          mentionListbox?.show({
+                              filter: props.query,
+                              anchorNode: props.decorationNode
+                          });
+                      },
+                      onKeyDown: (props) => {
+                          if (!inSuggestionMode) {
+                              return false;
+                          }
+                          if (props.event.key === keyEscape) {
+                              inSuggestionMode = false;
+                          }
+                          return (mentionListbox?.keydownHandler(props.event) ?? false);
+                      },
+                      onExit: () => {
+                          activeMentionCharacterEmitter('');
+                          activeMentionCommandEmitter(undefined);
+                          mentionListbox?.close();
                       }
                   };
               }
@@ -60086,23 +60546,6 @@ img.ProseMirror-separator {
       return Fragment.fromArray(updatedNodes);
   }
 
-  /**
-   * A configuration object for a Mention extension, to be used by the editor for loading mention plugins in tiptap.
-   * This object maintains the necessary internal values for loading mention extension.
-   */
-  class MentionExtensionConfiguration {
-      constructor(mentionInternals) {
-          MentionExtensionConfiguration.instance += 1;
-          const key = `${mentionPluginPrefix}${MentionExtensionConfiguration.instance}`;
-          this.name = key;
-          this.key = key;
-          this.viewElement = mentionInternals.viewElement;
-          this.character = mentionInternals.character;
-          this.mentionUpdateEmitter = mentionInternals.mentionUpdateEmitter;
-      }
-  }
-  MentionExtensionConfiguration.instance = 0;
-
   /**
    * EditorConfiguration which will hold mentionExtensionConfig for configuring editor's mention extension and RichTextMarkdownSerializer
    */
@@ -60128,7 +60571,7 @@ img.ProseMirror-separator {
           /**
            * @internal
            */
-          this.tiptapEditor = createTiptapEditor(this.editor, [], this.placeholder);
+          this.tiptapEditor = createTiptapEditor(() => { }, () => { }, this.editor, [], this.mentionListbox, this.placeholder);
           /**
            * @internal
            */
@@ -60163,6 +60606,10 @@ img.ProseMirror-separator {
            * @internal
            */
           this.scrollbarWidth = -1;
+          /**
+           * @internal
+           */
+          this.activeMentionCharacter = '';
           this.updateScrollbarWidthQueued = false;
       }
       /**
@@ -60243,16 +60690,22 @@ img.ProseMirror-separator {
        */
       configurationChanged(prev, next) {
           if (this.isMentionExtensionConfigUnchanged(prev, next)) {
-              this.setMarkdown(this.getMarkdown());
+              this.refreshMarkdownContent();
           }
           else {
+              const mentionExtensionConfig = this.getMentionExtensionConfig();
               const currentStateMarkdown = this.getMarkdown();
-              this.richTextMarkdownSerializer = new RichTextMarkdownSerializer(this.configuration instanceof EditorConfiguration
-                  ? this.configuration.mentionExtensionConfig.map(config => config.name)
-                  : []);
+              this.richTextMarkdownSerializer = new RichTextMarkdownSerializer(mentionExtensionConfig.map(config => config.name));
               this.initializeEditor();
               this.setMarkdown(currentStateMarkdown);
           }
+          this.setActiveMappingConfigs();
+      }
+      /**
+       * @internal
+       */
+      activeMentionCharacterChanged() {
+          this.setActiveMappingConfigs();
       }
       /**
        * Toggle the bold mark and focus back to the editor
@@ -60326,6 +60779,17 @@ img.ProseMirror-separator {
           }
           return true;
       }
+      /**
+       * Inserts the mention character into the editor and focus back to the editor
+       * @internal
+       */
+      mentionButtonClick(character) {
+          this.tiptapEditor
+              .chain()
+              .insertContent(this.shouldInsertSpace() ? ` ${character}` : character)
+              .focus()
+              .run();
+      }
       /**
        * This function load tip tap editor with provided markdown content by parsing into html
        * @public
@@ -60359,6 +60823,46 @@ img.ProseMirror-separator {
           });
           return Array.from(mentionedHrefs);
       }
+      /**
+       * @internal
+       */
+      getMentionExtensionConfig() {
+          return this.configuration instanceof EditorConfiguration
+              ? this.configuration.mentionExtensionConfig
+              : [];
+      }
+      /**
+       * @internal
+       */
+      onMentionSelect(event) {
+          if (this.activeMentionCommand) {
+              this.activeMentionCommand({
+                  href: event.detail.href,
+                  label: event.detail.displayName
+              });
+          }
+      }
+      /**
+       * @internal
+       */
+      handleChange(source, args) {
+          if (source instanceof MentionInternals
+              && MentionExtensionConfiguration.isObservedMentionInternalsProperty(args)) {
+              this.configuration = this.createConfig();
+          }
+          else {
+              super.handleChange(source, args);
+          }
+      }
+      /**
+       * @internal
+       */
+      focusoutHandler() {
+          if (!this.mentionListbox?.open) {
+              return;
+          }
+          this.mentionListbox?.close();
+      }
       createConfig() {
           return new EditorConfiguration(this.mentionElements);
       }
@@ -60386,9 +60890,13 @@ img.ProseMirror-separator {
           this.unbindEditorUpdateEvent();
           this.unbindNativeInputEvent();
           this.tiptapEditor?.destroy();
-          this.tiptapEditor = createTiptapEditor(this.editor, this.configuration instanceof EditorConfiguration
+          this.tiptapEditor = createTiptapEditor(character => {
+              this.activeMentionCharacter = character;
+          }, command => {
+              this.activeMentionCommand = command;
+          }, this.editor, this.configuration instanceof EditorConfiguration
               ? this.configuration.mentionExtensionConfig
-              : [], this.placeholder);
+              : [], this.mentionListbox, this.placeholder);
           this.disableEditor();
           this.bindEditorTransactionEvent();
           this.bindEditorUpdateEvent();
@@ -60454,6 +60962,7 @@ img.ProseMirror-separator {
           this.tiptapEditor.setEditable(!this.disabled);
           this.setEditorTabIndex();
           this.editor.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+          this.mentionListbox?.close();
       }
       /**
        * Stopping the native input event propagation emitted by the contenteditable element in the Tiptap
@@ -60501,6 +61010,30 @@ img.ProseMirror-separator {
               }
           });
       }
+      setActiveMappingConfigs() {
+          this.activeMappingConfigs = this.activeMentionCharacter
+              ? this.getMentionExtensionConfigFromCharacter(this.activeMentionCharacter)?.mappingConfigs
+              : undefined;
+      }
+      shouldInsertSpace() {
+          const { $anchor, $head } = this.tiptapEditor.view.state.selection;
+          const isAtStartOfLine = $head.parentOffset === 0 || $anchor.parentOffset === 0;
+          const nodeBeforeSelection = $anchor.pos < $head.pos ? $anchor.nodeBefore : $head.nodeBefore;
+          const isHardBreakNode = nodeBeforeSelection?.type.name === HardBreak.name;
+          const hasWhitespaceBeforeCurrentPosition = nodeBeforeSelection?.textContent.endsWith(' ');
+          return (!isAtStartOfLine
+              && !isHardBreakNode
+              && !hasWhitespaceBeforeCurrentPosition);
+      }
+      getMentionExtensionConfigFromCharacter(character) {
+          return this.getMentionExtensionConfig().find(config => config.character === character);
+      }
+      // This method restore the cursor selection after setting the editor content when the editor is focused
+      refreshMarkdownContent() {
+          const { from, to } = this.tiptapEditor.view.state.selection;
+          this.setMarkdown(this.getMarkdown());
+          this.tiptapEditor.commands.setTextSelection({ from, to });
+      }
   }
   __decorate$1([
       attr({ mode: 'boolean' })
@@ -60532,11 +61065,20 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], RichTextEditor.prototype, "scrollbarWidth", void 0);
+  __decorate$1([
+      observable
+  ], RichTextEditor.prototype, "activeMentionCharacter", void 0);
+  __decorate$1([
+      observable
+  ], RichTextEditor.prototype, "activeMappingConfigs", void 0);
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$m,
-      styles: styles$q
+      styles: styles$q,
+      shadowOptions: {
+          delegatesFocus: true
+      }
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -60668,8 +61210,8 @@ img.ProseMirror-separator {
   DesignSystem.tagFor(RichTextViewer);
 
   const styles$o = css `
-    ${styles$E}
-    ${styles$D}
+    ${styles$G}
+    ${styles$F}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -60764,7 +61306,7 @@ img.ProseMirror-separator {
             >
                 <slot
                     ${slotted({
-    filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
+    filter: (n) => n instanceof HTMLElement && Listbox$1.slottedOptionFilter(n),
     flatten: true,
     property: 'slottedOptions',
 })}
@@ -70761,7 +71303,7 @@ img.ProseMirror-separator {
 
   const styles$5 = css `
     ${display('inline-flex')}
-    ${styles$D}
+    ${styles$F}
 
     :host {
         font: ${bodyFont};
@@ -71107,7 +71649,7 @@ img.ProseMirror-separator {
 
   const styles$4 = css `
     ${display('inline-block')}
-    ${styles$D}
+    ${styles$F}
 
     :host {
         font: ${bodyFont};