@ni/nimble-components 20.16.5 → 20.17.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 04 Jan 2024 16:35:43 GMT
+   * Generated on Thu, 04 Jan 2024 21:07:51 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16704,9 +16704,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$E = html `<slot></slot>`;
+  const template$D = html `<slot></slot>`;
 
-  const styles$Y = css `
+  const styles$X = css `
     :host {
         display: contents;
     }
@@ -16823,8 +16823,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$Y,
-      template: template$E
+      styles: styles$X,
+      template: template$D
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16932,7 +16932,7 @@
   const [tooltipCaptionFont, tooltipCaptionFontColor, tooltipCaptionDisabledFontColor, tooltipCaptionFontFamily, tooltipCaptionFontWeight, tooltipCaptionFontSize, tooltipCaptionFontLineHeight, tooltipCaptionFallbackFontFamily] = createFontTokens(tokenNames.tooltipCaptionFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight, TooltipCaptionFallbackFontFamily);
   const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight, errorTextFallbackFontFamily] = createFontTokens(tokenNames.errorTextFont, (element) => getFailColorForTheme(element), (element) => hexToRgbaCssColor(getFailColorForTheme(element), 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight, ErrorLightUiFallbackFontFamily);
   const [tableHeaderFont, tableHeaderFontColor, tableHeaderDisabledFontColor, tableHeaderFontFamily, tableHeaderFontWeight, tableHeaderFontSize, tableHeaderFontLineHeight, tableHeaderFallbackFontFamily] = createFontTokens(tokenNames.tableHeaderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GridHeaderFamily, GridHeaderWeight, GridHeaderSize, TooltipCaptionLineHeight, GridHeaderFallbackFontFamily);
-  const [mentionFont, mentionFontColor, mentionDisabledFontColor, mentionFontFamily, mentionFontWeight, mentionFontSize, mentionFontLineHeight, mentionFallbackFontFamily] = createFontTokens(tokenNames.mentionFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyEmphasizedWeight, BodySize, BodyLineHeight, BodyFallbackFontFamily);
+  createFontTokens(tokenNames.mentionFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyEmphasizedWeight, BodySize, BodyLineHeight, BodyFallbackFontFamily);
   // Font Transform Tokens
   const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
   // Animation Tokens
@@ -17029,7 +17029,7 @@
       }
   }
 
-  const styles$X = css `
+  const styles$W = css `
     ${display('inline')}
 
     :host {
@@ -17116,7 +17116,7 @@
 `;
 
   // prettier-ignore
-  const template$D = (_context, definition) => html `${
+  const template$C = (_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
@@ -17215,8 +17215,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$D,
-      styles: styles$X,
+      template: template$C,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17319,7 +17319,7 @@
     padding: 0;
 `;
 
-  const styles$W = css `
+  const styles$V = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17596,8 +17596,8 @@
             }
         `));
 
-  const styles$V = css `
-    ${styles$W}
+  const styles$U = css `
+    ${styles$V}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17605,7 +17605,7 @@
     }
 `;
 
-  const template$C = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17687,8 +17687,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$C,
-      styles: styles$V,
+      template: template$B,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17696,7 +17696,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   DesignSystem.tagFor(AnchorButton);
 
-  const styles$U = css `
+  const styles$T = css `
     ${display('grid')}
 
     :host {
@@ -17773,7 +17773,7 @@
     }
 `;
 
-  const template$B = (context, definition) => html `
+  const template$A = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17879,8 +17879,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$B,
-      styles: styles$U,
+      template: template$A,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17904,7 +17904,7 @@
       }
   });
 
-  const styles$T = css `
+  const styles$S = css `
     ${display('inline-flex')}
 
     :host {
@@ -18020,7 +18020,7 @@
     }
 `;
 
-  const template$A = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18072,8 +18072,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$A,
-      styles: styles$T,
+      template: template$z,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18081,7 +18081,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
   DesignSystem.tagFor(AnchorTab);
 
-  const styles$S = css `
+  const styles$R = css `
     ${display('grid')}
 
     :host {
@@ -18103,7 +18103,7 @@
     }
 `;
 
-  const template$z = (context, definition) => html `
+  const template$y = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18309,8 +18309,8 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$z,
-      styles: styles$S,
+      template: template$y,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18327,7 +18327,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$R = css `
+  const styles$Q = css `
     ${display('block')}
 
     :host {
@@ -18428,7 +18428,7 @@
     }
 `;
 
-  const template$y = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18565,8 +18565,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$y,
-      styles: styles$R,
+      template: template$x,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18576,7 +18576,7 @@
       .register(nimbleAnchorTreeItem());
   DesignSystem.tagFor(AnchorTreeItem);
 
-  const styles$Q = css `
+  const styles$P = css `
     :host {
         contain: layout;
         display: block;
@@ -18600,7 +18600,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$Q
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18680,7 +18680,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$P = css `
+  const styles$O = css `
     ${display('flex')}
 
     :host {
@@ -18823,8 +18823,8 @@
             }
         `));
 
-  const styles$O = css `
-    ${styles$W}
+  const styles$N = css `
+    ${styles$V}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18870,7 +18870,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$O,
+      styles: styles$N,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19581,13 +19581,13 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$x = html `<div
+  const template$w = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$N = css `
+  const styles$M = css `
     ${display('inline-flex')}
 
     :host {
@@ -19640,8 +19640,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$x,
-          styles: styles$N,
+          template: template$w,
+          styles: styles$M,
           baseClass: iconClass
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19745,7 +19745,7 @@
   }).withDefault(coreLabelDefaults.informationIconLabel);
 
   // prettier-ignore
-  const template$w = html `
+  const template$v = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19861,13 +19861,13 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$w,
-      styles: styles$P
+      template: template$v,
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
   DesignSystem.tagFor(Banner);
 
-  const styles$M = css `
+  const styles$L = css `
     ${display('inline-block')}
 
     :host {
@@ -19908,12 +19908,12 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$M
+      styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
   DesignSystem.tagFor(Breadcrumb);
 
-  const styles$L = css `
+  const styles$K = css `
     ${display('inline-flex')}
 
     :host {
@@ -19987,7 +19987,7 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$L,
+      styles: styles$K,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
@@ -19995,7 +19995,7 @@
       .register(nimbleBreadcrumbItem());
   DesignSystem.tagFor(BreadcrumbItem);
 
-  const styles$K = css `
+  const styles$J = css `
     ${display('flex')}
 
     :host {
@@ -20019,7 +20019,7 @@
     }
 `;
 
-  const template$v = html `
+  const template$u = 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>
@@ -20035,13 +20035,13 @@
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$v,
-      styles: styles$K
+      template: template$u,
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
   DesignSystem.tagFor(Card);
 
-  const styles$J = css `
+  const styles$I = css `
     ${display('inline-flex')}
 
     :host {
@@ -20200,7 +20200,7 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$J,
+      styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20208,7 +20208,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   DesignSystem.tagFor(CardButton);
 
-  const styles$I = css `
+  const styles$H = css `
     ${display('inline-flex')}
 
     :host {
@@ -20326,15 +20326,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: checkboxTemplate,
-      styles: styles$I,
+      styles: styles$H,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = DesignSystem.tagFor(Checkbox);
 
-  const styles$H = css `
-    ${styles$W}
+  const styles$G = css `
+    ${styles$V}
 
     @layer base {
         .control[aria-pressed='true'] {
@@ -20413,7 +20413,7 @@
     }
 `;
 
-  const template$u = (context, definition) => html `
+  const template$t = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20488,8 +20488,8 @@
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$u,
-      styles: styles$H,
+      template: template$t,
+      styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20526,7 +20526,7 @@
       block: 'block'
   };
 
-  const styles$G = css `
+  const styles$F = css `
     ${display('inline-flex')}
 
     :host {
@@ -20752,7 +20752,7 @@
             }
         `));
 
-  const styles$F = css `
+  const styles$E = css `
     .error-icon {
         display: none;
     }
@@ -20786,9 +20786,9 @@
     }
 `;
 
-  const styles$E = css `
-    ${styles$G}
+  const styles$D = css `
     ${styles$F}
+    ${styles$E}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20924,7 +20924,7 @@
   }
 
   // prettier-ignore
-  const template$t = (context, definition) => html `
+  const template$s = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21202,8 +21202,8 @@
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: Combobox$1,
-      template: template$t,
-      styles: styles$E,
+      template: template$s,
+      styles: styles$D,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21248,7 +21248,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$D = css `
+  const styles$C = css `
     ${display('grid')}
 
     dialog {
@@ -21350,7 +21350,7 @@
             }
         `));
 
-  const template$s = html `
+  const template$r = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21477,14 +21477,14 @@
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$s,
-      styles: styles$D,
+      template: template$r,
+      styles: styles$C,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
   DesignSystem.tagFor(Dialog);
 
-  const styles$C = css `
+  const styles$B = css `
     ${display('block')}
 
     :host {
@@ -21637,7 +21637,7 @@
             }
         `));
 
-  const template$r = html `
+  const template$q = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21751,8 +21751,8 @@
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$r,
-      styles: styles$C
+      template: template$q,
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
   DesignSystem.tagFor(Drawer);
@@ -24202,7 +24202,7 @@
       .register(nimbleLabelProviderTable());
   DesignSystem.tagFor(LabelProviderTable);
 
-  const styles$B = css `
+  const styles$A = css `
     ${display('flex')}
 
     :host {
@@ -24275,7 +24275,7 @@
    * @public
    */
   // prettier-ignore
-  const template$q = (context, definition) => html `
+  const template$p = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -24323,8 +24323,8 @@
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$q,
-      styles: styles$B
+      template: template$p,
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = DesignSystem.tagFor(ListOption);
@@ -24338,7 +24338,7 @@
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$p = html `<template slot="mapping"></template>`;
+  const template$o = html `<template slot="mapping"></template>`;
 
   /**
    * Defines a mapping from one data value ('key' property) to display text ('text' property).
@@ -24352,7 +24352,7 @@
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$p
+      template: template$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
   DesignSystem.tagFor(MappingText);
@@ -24416,7 +24416,7 @@
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$p
+      template: template$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
   DesignSystem.tagFor(MappingIcon);
@@ -24433,12 +24433,12 @@
   ], MappingSpinner.prototype, "text", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$p
+      template: template$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
   DesignSystem.tagFor(MappingSpinner);
 
-  const styles$A = css `
+  const styles$z = css `
     ${display('grid')}
 
     :host {
@@ -24505,12 +24505,12 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$A
+      styles: styles$z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   DesignSystem.tagFor(Menu);
 
-  const styles$z = css `
+  const styles$y = css `
     ${display('inline-block')}
 
     :host {
@@ -24529,7 +24529,7 @@
 `;
 
   // prettier-ignore
-  const template$o = html `
+  const template$n = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -24784,8 +24784,8 @@
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$o,
-      styles: styles$z,
+      template: template$n,
+      styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -24793,7 +24793,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-  const styles$y = css `
+  const styles$x = css `
     ${display('grid')}
 
     :host {
@@ -24891,7 +24891,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$y,
+      styles: styles$x,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -24906,9 +24906,9 @@
       block: 'block'
   };
 
-  const styles$x = css `
+  const styles$w = css `
     ${display('inline-block')}
-    ${styles$F}
+    ${styles$E}
 
     :host {
         font: ${bodyFont};
@@ -25122,7 +25122,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$x,
+      styles: styles$w,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -25166,7 +25166,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
   DesignSystem.tagFor(NumberField);
 
-  const styles$w = css `
+  const styles$v = css `
     ${display('inline-flex')}
 
     :host {
@@ -25267,13 +25267,13 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$w,
+      styles: styles$v,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
   DesignSystem.tagFor(Radio);
 
-  const styles$v = css `
+  const styles$u = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -25308,7 +25308,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$v,
+      styles: styles$u,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -42215,7 +42215,7 @@ img.ProseMirror-separator {
       },
   });
 
-  const styles$u = css `
+  const styles$t = css `
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
@@ -42250,7 +42250,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$u,
+      styles: styles$t,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -42282,8 +42282,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$t = css `
-    ${styles$G}
+  const styles$s = css `
+    ${styles$F}
 
     :host {
         height: auto;
@@ -42300,7 +42300,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const styles$s = css `
+  const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -42332,13 +42332,13 @@ img.ProseMirror-separator {
   const nimbleListbox = Listbox.compose({
       baseName: 'listbox',
       template: listboxTemplate,
-      styles: styles$s
+      styles: styles$r
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListbox());
   DesignSystem.tagFor(Listbox);
 
   // prettier-ignore
-  const template$n = html `
+  const template$m = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -42599,8 +42599,8 @@ img.ProseMirror-separator {
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$n,
-      styles: styles$t
+      template: template$m,
+      styles: styles$s
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -42608,7 +42608,7 @@ img.ProseMirror-separator {
   const richTextMentionListboxTag = DesignSystem.tagFor(RichTextMentionListbox);
 
   // prettier-ignore
-  const template$m = html `
+  const template$l = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -42710,94 +42710,9 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  /**
-   * The base class for Mention View Node
-   */
-  class RichTextMentionView extends FoundationElement {
-      constructor() {
-          super(...arguments);
-          /**
-           * Whether to render the mention node in view mode or in edit mode
-           *
-           * @public
-           * HTML Attribute: disable-editing
-           */
-          this.disableEditing = false;
-      }
-  }
-  __decorate$1([
-      attr({ attribute: 'mention-href' })
-  ], RichTextMentionView.prototype, "mentionHref", void 0);
-  __decorate$1([
-      attr({ attribute: 'mention-label' })
-  ], RichTextMentionView.prototype, "mentionLabel", void 0);
-  __decorate$1([
-      attr({ mode: 'boolean', attribute: 'disable-editing' })
-  ], RichTextMentionView.prototype, "disableEditing", void 0);
-
-  // Setting `contenteditable="true"` on the slot serves as a workaround to address the issue in the Chrome browser
-  // that arises when the mention user view is activated at the end of a line in the rich text editor while in edit mode.
-  // This can be removed when the below issue is resolved
-  // See: https://github.com/ni/nimble/issues/1659
-  const template$l = html `<span class="control"
-        >@${x => x.mentionLabel}</span
-    ><slot contenteditable="true"></slot>`;
-
-  const styles$r = css `
-    ${display('inline-block')}
-
-    :host {
-        box-sizing: border-box;
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: pre-wrap;
-    }
-
-    .control {
-        font: ${mentionFont};
-        color: var(--ni-nimble-private-mention-font-color);
-        display: none;
-    }
-
-    :host([disable-editing]) .control {
-        display: inline;
-    }
-
-    :host([disabled]) .control {
-        color: ${mentionDisabledFontColor};
-    }
-
-    :host([disabled]) {
-        color: ${bodyDisabledFontColor};
-    }
-
-    :host([disable-editing]) {
-        font: ${mentionFont};
-    }
-
-    :host([disable-editing]) slot {
-        display: none;
-    }
-`;
-
-  /**
-   * A nimble styled rich text mention users view
-   */
-  class RichTextMentionUsersView extends RichTextMentionView {
-  }
-  const nimbleRichTextMentionUsersView = RichTextMentionUsersView.compose({
-      baseName: 'rich-text-mention-users-view',
-      template: template$l,
-      styles: styles$r
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(nimbleRichTextMentionUsersView());
-  const richTextMentionUsersViewTag = DesignSystem.tagFor(RichTextMentionUsersView);
-
   const styles$q = css `
     ${display('inline-flex')}
-    ${styles$F}
+    ${styles$E}
 
     :host {
         font: ${bodyFont};
@@ -42807,7 +42722,6 @@ img.ProseMirror-separator {
         --ni-private-rich-text-editor-hover-indicator-width: calc(
             ${borderWidth} + 1px
         );
-        --ni-nimble-private-mention-font-color: ${mentionFontColor};
 
         ${
 /** Initial height of rich text editor with one line space when the footer is visible. */ ''}
@@ -42854,11 +42768,6 @@ img.ProseMirror-separator {
     :host([disabled]) .container {
         color: ${bodyDisabledFontColor};
         border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);
-        --ni-nimble-private-mention-font-color: ${mentionDisabledFontColor};
-    }
-
-    :host([disabled]) ${richTextMentionUsersViewTag} {
-        color: ${bodyDisabledFontColor};
     }
 
     :host([error-visible]) .container {
@@ -56433,6 +56342,15 @@ img.ProseMirror-separator {
                               'mention-label': attributes.label
                           };
                       }
+                  },
+                  disabled: {
+                      default: null,
+                      parseHTML: element => element.getAttribute('disabled'),
+                      renderHTML: attributes => {
+                          return {
+                              disabled: attributes.disabled
+                          };
+                      }
                   }
               };
           },
@@ -56452,7 +56370,13 @@ img.ProseMirror-separator {
       }).configure({
           suggestion: {
               char: config.character,
-              decorationTag: config.viewElement,
+              /**
+               * When rendering the view element as a decoration tag for suggestions,
+               * it leads to the deletion of the entire suggested word in Safari when pressing backspace.
+               * See: https://github.com/ni/nimble/issues/1716
+               * When addressed, re-enable the view element as follows:
+               * decorationTag: config.viewElement,
+               */
               pluginKey: new PluginKey(config.key),
               allowSpaces: true,
               render: () => {
@@ -56667,6 +56591,7 @@ img.ProseMirror-separator {
        */
       disabledChanged() {
           this.disableEditor();
+          this.disableMentionViewElement();
       }
       /**
        * Update the placeholder text and view of the editor.
@@ -56801,6 +56726,7 @@ img.ProseMirror-separator {
       setMarkdown(markdown) {
           const html = this.getHtmlContent(markdown);
           this.tiptapEditor.commands.setContent(html);
+          this.disableMentionViewElement();
       }
       /**
        * This function returns markdown string by serializing tiptap editor document using prosemirror MarkdownSerializer
@@ -56902,6 +56828,7 @@ img.ProseMirror-separator {
               ? this.configuration.mentionExtensionConfig
               : [], this.mentionListbox, this.placeholder);
           this.disableEditor();
+          this.disableMentionViewElement();
           this.bindEditorTransactionEvent();
           this.bindEditorUpdateEvent();
           this.stopNativeInputEventPropagation();
@@ -56968,6 +56895,20 @@ img.ProseMirror-separator {
           this.editor.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
           this.mentionListbox?.close();
       }
+      disableMentionViewElement() {
+          this.tiptapEditor.state.doc.descendants((node, pos) => {
+              if (node.type.name.startsWith(mentionPluginPrefix)) {
+                  const updatedAttrs = {
+                      ...node.attrs,
+                      disabled: this.disabled ? '' : null
+                  };
+                  const updatedNode = this.tiptapEditor.schema.node(node.type.name, updatedAttrs, node.content);
+                  const updatedTransaction = this.tiptapEditor.state.tr.replaceWith(pos, pos + node.nodeSize, updatedNode);
+                  this.tiptapEditor.view.dispatch(updatedTransaction);
+              }
+              return true;
+          });
+      }
       /**
        * Stopping the native input event propagation emitted by the contenteditable element in the Tiptap
        * since there is an issue (linked below) in ProseMirror where selecting the text and removing it
@@ -57078,7 +57019,7 @@ img.ProseMirror-separator {
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$m,
+      template: template$l,
       styles: styles$q,
       shadowOptions: {
           delegatesFocus: true
@@ -57105,7 +57046,6 @@ img.ProseMirror-separator {
         width: auto;
         overflow: auto;
         height: 100%;
-        --ni-nimble-private-mention-font-color: ${mentionFontColor};
     }
 
     .viewer {
@@ -57214,8 +57154,8 @@ img.ProseMirror-separator {
   DesignSystem.tagFor(RichTextViewer);
 
   const styles$o = css `
-    ${styles$G}
     ${styles$F}
+    ${styles$E}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -67309,7 +67249,7 @@ img.ProseMirror-separator {
 
   const styles$5 = css `
     ${display('inline-flex')}
-    ${styles$F}
+    ${styles$E}
 
     :host {
         font: ${bodyFont};
@@ -67655,7 +67595,7 @@ img.ProseMirror-separator {
 
   const styles$4 = css `
     ${display('inline-block')}
-    ${styles$F}
+    ${styles$E}
 
     :host {
         font: ${bodyFont};