@ni/nimble-components 20.14.8 → 20.14.10

package/dist/all-components-bundle.js

@@ -10270,30 +10270,6 @@
     return isNodeMatchingSelectorFocusable(options, node);
   };
 
-  /**
-   * The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.
-   * @public
-   */
-  const listboxOptionTemplate = (context, definition) => html `
-    <template
-        aria-checked="${x => x.ariaChecked}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-posinset="${x => x.ariaPosInSet}"
-        aria-selected="${x => x.ariaSelected}"
-        aria-setsize="${x => x.ariaSetSize}"
-        class="${x => [x.checked && "checked", x.selected && "selected", x.disabled && "disabled"]
-    .filter(Boolean)
-    .join(" ")}"
-        role="option"
-    >
-        ${startSlotTemplate(context, definition)}
-        <span class="content" part="content">
-            <slot ${slotted("content")}></slot>
-        </span>
-        ${endSlotTemplate(context, definition)}
-    </template>
-`;
-
   /**
    * A Listbox Custom HTML Element.
    * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
@@ -16298,7 +16274,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 21 Nov 2023 19:01:43 GMT
+   * Generated on Mon, 27 Nov 2023 15:57:15 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16698,7 +16674,7 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$B = html `<slot></slot>`;
+  const template$C = html `<slot></slot>`;
 
   const styles$U = css `
     :host {
@@ -16818,7 +16794,7 @@
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
       styles: styles$U,
-      template: template$B
+      template: template$C
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -17104,7 +17080,7 @@
 `;
 
   // prettier-ignore
-  const template$A = (_context, definition) => html `<a
+  const template$B = (_context, definition) => html `<a
         class="control"
         part="control"
         download="${x => x.download}"
@@ -17194,7 +17170,7 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$A,
+      template: template$B,
       styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
@@ -17584,7 +17560,7 @@
     }
 `;
 
-  const template$z = (context, definition) => html `
+  const template$A = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17666,7 +17642,7 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$z,
+      template: template$A,
       styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
@@ -17752,7 +17728,7 @@
     }
 `;
 
-  const template$y = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17858,7 +17834,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$y,
+      template: template$z,
       styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
@@ -17999,7 +17975,7 @@
     }
 `;
 
-  const template$x = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18051,7 +18027,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$x,
+      template: template$y,
       styles: styles$P,
       shadowOptions: {
           delegatesFocus: true
@@ -18082,7 +18058,7 @@
     }
 `;
 
-  const template$w = (context, definition) => html `
+  const template$x = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18288,7 +18264,7 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$w,
+      template: template$x,
       styles: styles$O,
       shadowOptions: {
           delegatesFocus: false
@@ -18407,7 +18383,7 @@
     }
 `;
 
-  const template$v = (context, definition) => html `
+  const template$w = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18544,7 +18520,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$v,
+      template: template$w,
       styles: styles$N,
       shadowOptions: {
           delegatesFocus: true
@@ -19540,7 +19516,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$u = html `<div
+  const template$v = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -19599,7 +19575,7 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$u,
+          template: template$v,
           styles: styles$J,
           baseClass: iconClass
       });
@@ -19704,7 +19680,7 @@
   }).withDefault(coreLabelDefaults.informationIconLabel);
 
   // prettier-ignore
-  const template$t = html `
+  const template$u = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19820,7 +19796,7 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$t,
+      template: template$u,
       styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -19977,7 +19953,7 @@
     }
 `;
 
-  const template$s = html `
+  const template$t = 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>
@@ -19993,7 +19969,7 @@
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$s,
+      template: template$t,
       styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
@@ -20371,7 +20347,7 @@
     }
 `;
 
-  const template$r = (context, definition) => html `
+  const template$s = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20446,7 +20422,7 @@
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$r,
+      template: template$s,
       styles: styles$D,
       shadowOptions: {
           delegatesFocus: true
@@ -20826,8 +20802,63 @@
             }
         `));
 
+  /**
+   * The runtime behavior for template overflow detection.
+   * @public
+   */
+  class OverflowBehavior {
+      /**
+       * Creates an instance of OverflowBehavior.
+       * @param target - The element to check for overflow.
+       * @param propertyName - The name of the property to assign the overflow state to.
+       */
+      constructor(target, propertyName) {
+          this.target = target;
+          this.propertyName = propertyName;
+      }
+      /**
+       * Bind this behavior to the source.
+       * @param source - The source to bind to.
+       * @param context - The execution context that the binding is operating within.
+       */
+      bind(source) {
+          this.source = source;
+          this.setSourceValue(false);
+          this.mouseOverHandler = () => {
+              const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
+              this.setSourceValue(hasOverflow);
+          };
+          this.mouseOutHandler = () => {
+              this.setSourceValue(false);
+          };
+          this.target.addEventListener('mouseover', this.mouseOverHandler);
+          this.target.addEventListener('mouseout', this.mouseOutHandler);
+      }
+      /**
+       * Unbinds this behavior from the source.
+       * @param source - The source to unbind from.
+       */
+      unbind() {
+          this.source = undefined;
+          this.target.removeEventListener('mouseover', this.mouseOverHandler);
+          this.target.removeEventListener('mouseout', this.mouseOutHandler);
+      }
+      setSourceValue(value) {
+          // @ts-expect-error set property on source
+          this.source[this.propertyName] = value;
+      }
+  }
+  /**
+   * A directive that observes if an element has overflow and sets a flag.
+   * @param propertyName - The name of the property to assign the overflow flag.
+   * @public
+   */
+  function overflow(propertyName) {
+      return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
+  }
+
   // prettier-ignore
-  const template$q = (context, definition) => html `
+  const template$r = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -20858,6 +20889,8 @@
                     @input="${(x, c) => x.inputHandler(c.event)}"
                     @keyup="${(x, c) => x.keyupHandler(c.event)}"
                     ${ref('control')}
+                    ${overflow('hasOverflow')}
+                    title=${x => (x.hasOverflow && x.value ? x.value : null)}
                 />
                 <div class="indicator" part="indicator" aria-hidden="true">
                     <slot name="indicator">
@@ -20906,6 +20939,8 @@
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
+          /** @internal */
+          this.hasOverflow = false;
           this.valueUpdatedByInput = false;
       }
       get value() {
@@ -21095,10 +21130,13 @@
   __decorate$1([
       observable
   ], Combobox.prototype, "controlWrapper", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "hasOverflow", void 0);
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: Combobox$1,
-      template: template$q,
+      template: template$r,
       styles: styles$A,
       shadowOptions: {
           delegatesFocus: true
@@ -21246,7 +21284,7 @@
             }
         `));
 
-  const template$p = html `
+  const template$q = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21373,7 +21411,7 @@
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$p,
+      template: template$q,
       styles: styles$z,
       baseClass: Dialog
   });
@@ -21533,7 +21571,7 @@
             }
         `));
 
-  const template$o = html `
+  const template$p = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21647,7 +21685,7 @@
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$o,
+      template: template$p,
       styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -24031,6 +24069,9 @@
 
     .content {
         padding: 8px 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     :host([aria-selected='true']) {
@@ -24079,30 +24120,61 @@
     }
 `;
 
+  // Based on template in FAST repo: https://github.com/microsoft/fast/blob/2ea80697bc3a5193e6123fb08ac3be2a76571aeb/packages/web-components/fast-foundation/src/listbox-option/listbox-option.template.ts
+  /**
+   * The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.
+   * @public
+   */
+  // prettier-ignore
+  const template$o = (context, definition) => html `
+    <template
+        aria-checked="${x => x.ariaChecked}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-posinset="${x => x.ariaPosInSet}"
+        aria-selected="${x => x.ariaSelected}"
+        aria-setsize="${x => x.ariaSetSize}"
+        class="${x => [x.checked && 'checked', x.selected && 'selected', x.disabled && 'disabled']
+    .filter(Boolean)
+    .join(' ')}"
+        role="option"
+    >
+        ${startSlotTemplate(context, definition)}
+        <span
+            class="content"
+            part="content"
+            ${overflow('hasOverflow')}
+            title=${x => (x.hasOverflow && x.elementTextContent ? x.elementTextContent : null)}
+        >
+            <slot ${ref('contentSlot')} ${slotted('content')}></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </template>
+`;
+
   /**
    * A nimble-styled HTML listbox option
    */
   class ListOption extends ListboxOption {
-      // Workaround for https://github.com/microsoft/fast/issues/5219
-      get value() {
-          return super.value;
-      }
-      set value(value) {
-          // Coerce value to string
-          super.value = `${value}`;
-          if (this.$fastController.isConnected) {
-              this.setAttribute('value', this.value);
-          }
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.hasOverflow = false;
       }
-      connectedCallback() {
-          super.connectedCallback();
-          this.setAttribute('value', this.value);
+      /** @internal */
+      get elementTextContent() {
+          return this.contentSlot
+              .assignedNodes()
+              .map(node => node.textContent?.trim())
+              .join(' ');
       }
   }
+  __decorate$1([
+      observable
+  ], ListOption.prototype, "hasOverflow", void 0);
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: listboxOptionTemplate,
+      template: template$o,
       styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
@@ -58807,12 +58879,18 @@ img.ProseMirror-separator {
        * DOM structure using a DOMSerializer, and returns the serialized result.
        * If the markdown parser returns null, it will clear the viewer component by creating an empty document fragment.
        */
-      static parseMarkdownToDOM(value) {
-          const parsedMarkdownContent = this.markdownParser.parse(value);
-          if (parsedMarkdownContent === null) {
-              return document.createDocumentFragment();
+      static parseMarkdownToDOM(value, markdownParserMentionConfig) {
+          try {
+              this.mentionConfigs = markdownParserMentionConfig;
+              const parsedMarkdownContent = this.markdownParser.parse(value);
+              if (parsedMarkdownContent === null) {
+                  return document.createDocumentFragment();
+              }
+              return this.domSerializer.serializeFragment(parsedMarkdownContent.content);
+          }
+          finally {
+              this.mentionConfigs = undefined;
           }
-          return this.domSerializer.serializeFragment(parsedMarkdownContent.content);
       }
       static initializeMarkdownParser() {
           /**
@@ -58831,7 +58909,6 @@ img.ProseMirror-separator {
               'autolink',
               'newline'
           ]);
-          supportedTokenizerRules.validateLink = href => /^https?:\/\//i.test(href);
           /**
            * In order to display encoded characters, non-ASCII characters, emojis, and other special characters in their original form,
            * we bypass the default normalization of link text in markdown-it. This is done because we support only "AutoLink" feature in CommonMark flavor.
@@ -58843,7 +58920,7 @@ img.ProseMirror-separator {
           supportedTokenizerRules.normalizeLinkText = url => url;
           return new MarkdownParser(this.updatedSchema, supportedTokenizerRules, defaultMarkdownParser.tokens);
       }
-      static getSchemaWithLinkConfiguration() {
+      static getCustomSchemaConfiguration() {
           return new Schema({
               nodes: schema.spec.nodes,
               marks: {
@@ -58859,10 +58936,30 @@ img.ProseMirror-separator {
                       // See: https://github.com/ni/nimble/issues/1527
                       excludes: '_',
                       toDOM(node) {
+                          const href = node.attrs.href;
+                          const currentMention = RichTextMarkdownParser.mentionConfigs?.find(mention => mention.isValidMentionHref(href));
+                          const displayName = currentMention?.getDisplayName(href);
+                          if (currentMention && displayName) {
+                              return [
+                                  currentMention.viewElement,
+                                  {
+                                      'mention-href': href,
+                                      'mention-label': displayName,
+                                      'disable-editing': true
+                                  }
+                              ];
+                          }
                           return [
                               anchorTag,
                               {
-                                  href: node.attrs.href,
+                                  /**
+                                   * Both mention and absolute link markdown share the autolink format in CommonMark flavor.
+                                   * Absolute links with HTTP/HTTPS will be rendered as links. Absolute links that match the
+                                   * mention pattern will be rendered as mention view element. Absolute links without HTTP/HTTPS
+                                   * scheme and no matching mention pattern will be rendered as plain text (anchor with no href).
+                                   * 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
                               }
                           ];
@@ -58875,7 +58972,7 @@ img.ProseMirror-separator {
       }
   }
   _a$1 = RichTextMarkdownParser;
-  RichTextMarkdownParser.updatedSchema = _a$1.getSchemaWithLinkConfiguration();
+  RichTextMarkdownParser.updatedSchema = _a$1.getCustomSchemaConfiguration();
   RichTextMarkdownParser.markdownParser = _a$1.initializeMarkdownParser();
   RichTextMarkdownParser.domSerializer = DOMSerializer.fromSchema(_a$1.updatedSchema);
 
@@ -59445,7 +59542,9 @@ img.ProseMirror-separator {
   DesignSystem.tagFor(RichTextEditor);
 
   const template$k = html `
-    <div ${ref('viewer')} class="viewer"></div>
+    <template ${children$1({ property: 'childItems', filter: elements() })}>
+        <div ${ref('viewer')} class="viewer"></div>
+    </template>
 `;
 
   const styles$o = css `
@@ -59486,8 +59585,150 @@ img.ProseMirror-separator {
     li > p:empty {
         display: none;
     }
+
+    ${
+/**
+ * When an absolute link is not HTTPS/HTTP, the anchor tag renders without an `href`, appearing as plain text.
+ * However, the `nimble-anchor` displays differently in color when the `href` attribute is absent.
+ * To ensure a consistent appearance, the font color is forced to the default link color regardless of the `href`
+ * attribute's presence.
+ *
+ * See models/markdown-parser.ts where link elements are emitted for more info.
+ */ ''}
+    nimble-anchor::part(control) {
+        color: ${linkFontColor};
+    }
 `;
 
+  /**
+   * Internal mention state
+   */
+  class MentionInternals {
+      constructor(options) {
+          /**
+           * Whether this mention has a valid configuration.
+           */
+          this.validConfiguration = true;
+          this.icon = options.icon;
+          this.character = options.character;
+          this.viewElement = options.viewElement;
+      }
+  }
+  __decorate$1([
+      observable
+  ], MentionInternals.prototype, "mentionConfig", void 0);
+  __decorate$1([
+      observable
+  ], MentionInternals.prototype, "validConfiguration", void 0);
+
+  /**
+   * The base class for Mention configuration
+   */
+  class RichTextMention extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /**
+           * @internal
+           */
+          this.mentionInternals = new MentionInternals(this.getMentionInternalsOptions());
+          /** @internal */
+          this.validator = this.createValidator();
+          /** @internal */
+          this.mappingNotifiers = [];
+          /** @internal */
+          this.mappings = [];
+      }
+      checkValidity() {
+          return this.mentionInternals.validConfiguration;
+      }
+      get validity() {
+          return this.validator.getValidity();
+      }
+      /**
+       * @internal
+       */
+      handleChange(source, args) {
+          if (source instanceof Mapping$1 && typeof args === 'string') {
+              this.updateMentionConfig();
+          }
+      }
+      getMappingConfigs() {
+          const mappingConfigs = new Map();
+          this.mappings.forEach(mapping => {
+              const href = mapping.key ?? undefined;
+              if (href === undefined || typeof href !== 'string') {
+                  throw Error('mentionHref was invalid for type. Validation should have prevented this.');
+              }
+              const mappingConfig = this.createMappingConfig(mapping);
+              mappingConfigs.set(href, mappingConfig);
+          });
+          return mappingConfigs;
+      }
+      /**
+       * Called when any Mapping related state has changed.
+       */
+      updateMentionConfig() {
+          this.validator.validate(this.mappings, this.pattern);
+          this.mentionInternals.mentionConfig = this.validator.isValid()
+              ? this.createMentionConfig(this.getMappingConfigs())
+              : undefined;
+      }
+      mappingsChanged() {
+          this.updateMentionConfig();
+          this.observeMappings();
+      }
+      patternChanged() {
+          this.mentionInternals.pattern = this.pattern;
+          this.updateMentionConfig();
+      }
+      removeMappingObservers() {
+          this.mappingNotifiers.forEach(notifier => {
+              notifier.unsubscribe(this);
+          });
+          this.mappingNotifiers = [];
+      }
+      observeMappings() {
+          this.removeMappingObservers();
+          for (const mapping of this.mappings) {
+              const notifier = Observable.getNotifier(mapping);
+              notifier.subscribe(this);
+              this.mappingNotifiers.push(notifier);
+          }
+      }
+  }
+  __decorate$1([
+      attr
+  ], RichTextMention.prototype, "pattern", void 0);
+  __decorate$1([
+      observable
+  ], RichTextMention.prototype, "mappings", void 0);
+
+  /**
+   * A configuration object for a Markdown parser, to be used by the viewer and editor components.
+   * This object maintains the necessary internal values for handling mentions within the Markdown parser.
+   */
+  class MarkdownParserMentionConfiguration {
+      constructor(mentionInternals) {
+          this.regexPattern = new RegExp(mentionInternals.pattern ?? '');
+          this.mappingConfigs = mentionInternals.mentionConfig?.mappingConfigs;
+          this.viewElement = mentionInternals.viewElement;
+      }
+      isValidMentionHref(mentionHref) {
+          return this.regexPattern.test(mentionHref);
+      }
+      getDisplayName(mentionHref) {
+          const mentionMapping = this.mappingConfigs?.get(mentionHref);
+          const mentionId = this.extractMentionId(mentionHref);
+          return mentionMapping?.displayName ?? mentionId;
+      }
+      extractMentionId(mentionHref) {
+          const regexpArray = this.regexPattern.exec(mentionHref);
+          // Matches and gets the first group specified in the regex pattern
+          // that renders as an alternative to the display name if missing.
+          return regexpArray?.[1] ?? undefined;
+      }
+  }
+
   /**
    * A nimble styled rich text viewer
    */
@@ -59500,6 +59741,19 @@ img.ProseMirror-separator {
            * Markdown string to render its corresponding rich text content in the component.
            */
           this.markdown = '';
+          /**
+           * @internal
+           */
+          this.mentionElements = [];
+          /**
+           * @internal
+           */
+          this.mentionInternalsConfig = [];
+          /**
+           * @internal
+           */
+          this.childItems = [];
+          this.mentionInternalsNotifiers = [];
       }
       /**
        * @internal
@@ -59512,13 +59766,56 @@ img.ProseMirror-separator {
        * @internal
        */
       markdownChanged() {
-          if (this.$fastController.isConnected) {
-              this.updateView();
+          this.updateView();
+      }
+      /**
+       * @internal
+       */
+      handleChange(source, args) {
+          if (source instanceof MentionInternals && typeof args === 'string') {
+              this.updateMentionInternalsConfig();
+          }
+      }
+      childItemsChanged() {
+          void this.updateMentionsFromChildItems();
+      }
+      async updateMentionsFromChildItems() {
+          const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
+              ? customElements.whenDefined(item.localName)
+              : Promise.resolve()));
+          await Promise.all(definedElements);
+          this.mentionElements = this.childItems.filter((x) => x instanceof RichTextMention);
+          this.observeMentions();
+          this.updateMentionInternalsConfig();
+      }
+      observeMentions() {
+          this.removeMentionObservers();
+          for (const mention of this.mentionElements) {
+              const notifierInternals = Observable.getNotifier(mention.mentionInternals);
+              notifierInternals.subscribe(this);
+              this.mentionInternalsNotifiers.push(notifierInternals);
           }
       }
+      removeMentionObservers() {
+          this.mentionInternalsNotifiers.forEach(notifier => {
+              notifier.unsubscribe(this);
+          });
+          this.mentionInternalsNotifiers = [];
+      }
+      updateMentionInternalsConfig() {
+          // TODO: Add a rich text validator to check if the `mentionElements` contains duplicate configuration element
+          // For example, having two `nimble-rich-text-mention-users` within the children of rich text viewer or editor is an invalid configuration
+          this.mentionInternalsConfig = this.mentionElements
+              .filter(mention => mention.mentionInternals.validConfiguration)
+              .map(mention => new MarkdownParserMentionConfiguration(mention.mentionInternals));
+          this.updateView();
+      }
       updateView() {
+          if (!this.$fastController.isConnected) {
+              return;
+          }
           if (this.markdown) {
-              const serializedContent = RichTextMarkdownParser.parseMarkdownToDOM(this.markdown);
+              const serializedContent = RichTextMarkdownParser.parseMarkdownToDOM(this.markdown, this.mentionInternalsConfig);
               this.viewer.replaceChildren(serializedContent);
           }
           else {
@@ -59529,6 +59826,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], RichTextViewer.prototype, "markdown", void 0);
+  __decorate$1([
+      observable
+  ], RichTextViewer.prototype, "childItems", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$k,
@@ -59603,7 +59903,7 @@ img.ProseMirror-separator {
                 >
                     ${startSlotTemplate(context, definition)}
                     <slot name="button-container">
-                        <div class="selected-value" part="selected-value">
+                        <div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
                             <slot name="selected-value">${x => x.displayValue}</slot>
                         </div>
                         <div aria-hidden="true" class="indicator" part="indicator">
@@ -59654,6 +59954,8 @@ img.ProseMirror-separator {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
+          /** @internal */
+          this.hasOverflow = false;
       }
       // Workaround for https://github.com/microsoft/fast/issues/5123
       setPositioning() {
@@ -59704,6 +60006,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], Select.prototype, "region", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "hasOverflow", void 0);
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$1,
@@ -67512,61 +67817,6 @@ img.ProseMirror-separator {
     }
 `;
 
-  /**
-   * The runtime behavior for template overflow detection.
-   * @public
-   */
-  class OverflowBehavior {
-      /**
-       * Creates an instance of OverflowBehavior.
-       * @param target - The element to check for overflow.
-       * @param propertyName - The name of the property to assign the overflow state to.
-       */
-      constructor(target, propertyName) {
-          this.target = target;
-          this.propertyName = propertyName;
-      }
-      /**
-       * Bind this behavior to the source.
-       * @param source - The source to bind to.
-       * @param context - The execution context that the binding is operating within.
-       */
-      bind(source) {
-          this.source = source;
-          this.setSourceValue(false);
-          this.mouseOverHandler = () => {
-              const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
-              this.setSourceValue(hasOverflow);
-          };
-          this.mouseOutHandler = () => {
-              this.setSourceValue(false);
-          };
-          this.target.addEventListener('mouseover', this.mouseOverHandler);
-          this.target.addEventListener('mouseout', this.mouseOutHandler);
-      }
-      /**
-       * Unbinds this behavior from the source.
-       * @param source - The source to unbind from.
-       */
-      unbind() {
-          this.source = undefined;
-          this.target.removeEventListener('mouseover', this.mouseOverHandler);
-          this.target.removeEventListener('mouseout', this.mouseOutHandler);
-      }
-      setSourceValue(value) {
-          // @ts-expect-error set property on source
-          this.source[this.propertyName] = value;
-      }
-  }
-  /**
-   * A directive that observes if an element has overflow and sets a flag.
-   * @param propertyName - The name of the property to assign the overflow flag.
-   * @public
-   */
-  function overflow(propertyName) {
-      return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
-  }
-
   // Avoiding a wrapping <template> and be careful about starting and ending whitspace
   // so the template can be composed into other column header templates
   // prettier-ignore