@ni/nimble-components 29.1.5 → 29.1.7

package/dist/all-components-bundle.js

@@ -7829,7 +7829,7 @@
    *
    * @public
    */
-  let Listbox$1 = class Listbox extends FoundationElement {
+  class Listbox extends FoundationElement {
       constructor() {
           super(...arguments);
           /**
@@ -8292,35 +8292,35 @@
               this.typeaheadExpired = false;
           }
       }
-  };
+  }
   /**
    * A static filter to include only selectable options.
    *
    * @param n - element to filter
    * @public
    */
-  Listbox$1.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
+  Listbox.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
   /**
    * Typeahead timeout in milliseconds.
    *
    * @internal
    */
-  Listbox$1.TYPE_AHEAD_TIMEOUT_MS = 1000;
+  Listbox.TYPE_AHEAD_TIMEOUT_MS = 1000;
   __decorate([
       attr({ mode: "boolean" })
-  ], Listbox$1.prototype, "disabled", void 0);
+  ], Listbox.prototype, "disabled", void 0);
   __decorate([
       observable
-  ], Listbox$1.prototype, "selectedIndex", void 0);
+  ], Listbox.prototype, "selectedIndex", void 0);
   __decorate([
       observable
-  ], Listbox$1.prototype, "selectedOptions", void 0);
+  ], Listbox.prototype, "selectedOptions", void 0);
   __decorate([
       observable
-  ], Listbox$1.prototype, "slottedOptions", void 0);
+  ], Listbox.prototype, "slottedOptions", void 0);
   __decorate([
       observable
-  ], Listbox$1.prototype, "typeaheadBuffer", void 0);
+  ], Listbox.prototype, "typeaheadBuffer", void 0);
   /**
    * Includes ARIA states and properties relating to the ARIA listbox role
    *
@@ -8341,7 +8341,7 @@
       observable
   ], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
   applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
-  applyMixins(Listbox$1, DelegatesARIAListbox);
+  applyMixins(Listbox, DelegatesARIAListbox);
 
   /**
    * Positioning directions for the listbox when a select is open.
@@ -8352,7 +8352,7 @@
       below: "below",
   };
 
-  class _Combobox extends Listbox$1 {
+  class _Combobox extends Listbox {
   }
   /**
    * A form-associated base class for the {@link (Combobox:class)} component.
@@ -10261,7 +10261,7 @@
    *
    * @public
    */
-  class ListboxElement extends Listbox$1 {
+  class ListboxElement extends Listbox {
       constructor() {
           super(...arguments);
           /**
@@ -10700,32 +10700,6 @@
       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
@@ -12906,7 +12880,7 @@
        */
       setDefaultSelectedOption() {
           var _a;
-          const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox$1.slottedOptionFilter);
+          const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox.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;
@@ -16304,7 +16278,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 22 May 2024 18:18:46 GMT
+   * Generated on Fri, 31 May 2024 15:10:22 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16737,7 +16711,7 @@
 
   const template$H = html `<slot></slot>`;
 
-  const styles$$ = css `
+  const styles$_ = css `
     ${display('contents')}
 `;
 
@@ -16852,7 +16826,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$$,
+      styles: styles$_,
       template: template$H
   });
   DesignSystem.getOrCreate()
@@ -17038,7 +17012,7 @@
       }
   }
 
-  const styles$_ = css `
+  const styles$Z = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -17222,7 +17196,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$G,
-      styles: styles$_,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17239,6 +17213,15 @@
       ghost: 'ghost',
       block: 'block'
   };
+  /**
+   * Types of button appearance variants.
+   * @public
+   */
+  const ButtonAppearanceVariant = {
+      default: undefined,
+      primary: 'primary',
+      accent: 'accent'
+  };
 
   /**
    * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
@@ -17325,7 +17308,7 @@
     padding: 0;
 `;
 
-  const styles$Z = css `
+  const styles$Y = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17603,8 +17586,8 @@
             }
         `));
 
-  const styles$Y = css `
-    ${styles$Z}
+  const styles$X = css `
+    ${styles$Y}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17707,7 +17690,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$F,
-      styles: styles$Y,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17715,7 +17698,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$X = css `
+  const styles$W = css `
     ${display('grid')}
 
     :host {
@@ -17901,7 +17884,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$E,
-      styles: styles$X,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17911,7 +17894,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$W = css `
+  const styles$V = css `
     ${display('inline-flex')}
 
     :host {
@@ -18081,14 +18064,14 @@
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$D,
-      styles: styles$W,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$V = css `
+  const styles$U = css `
     ${display('grid')}
 
     :host {
@@ -18317,7 +18300,7 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$C,
-      styles: styles$V,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18333,7 +18316,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$U = css `
+  const styles$T = css `
     ${display('block')}
 
     :host {
@@ -18577,7 +18560,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$B,
-      styles: styles$U,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18593,7 +18576,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$T = css `
+  const styles$S = css `
     ${display('block')}
 
     :host {
@@ -18624,7 +18607,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$T
+      styles: styles$S
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18704,7 +18687,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$S = css `
+  const styles$R = css `
     ${display('flex')}
 
     :host {
@@ -18712,8 +18695,6 @@
         font-size: 12.8px;
         align-items: top;
         overflow: hidden;
-        color: ${White};
-        ${iconColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
     }
 
     :host(:not([open])) {
@@ -18721,6 +18702,7 @@
     }
 
     .container {
+        color: ${bodyFontColor};
         display: flex;
         width: 100%;
     }
@@ -18731,6 +18713,7 @@
         justify-content: center;
         margin-top: 8px;
         flex: 0 0 auto;
+        opacity: 0.6;
     }
 
     .text {
@@ -18757,6 +18740,8 @@
         align-items: center;
         justify-content: center;
         align-self: flex-start;
+        margin-top: ${smallPadding};
+        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};
     }
 
     slot[name='action'] {
@@ -18767,44 +18752,14 @@
     }
 
     slot[name='action']::slotted(nimble-anchor) {
-        ${linkFontColor.cssCustomProperty}: ${White};
-        ${linkDisabledFontColor.cssCustomProperty}: ${White};
-        ${linkActiveFontColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
         font-size: 12.8px;
     }
 
-    slot[name='action']::slotted(nimble-button) {
-        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};
-        ${buttonLabelFontColor.cssCustomProperty}: ${White};
-        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
-        ${borderHoverColor.cssCustomProperty}: ${White};
-    }
-
-    slot[name='action']::slotted(nimble-button[appearance='outline']) {
-        ${actionRgbPartialColor.cssCustomProperty}: ${White}
-    }
-
     .dismiss {
         width: 48px;
         display: flex;
         justify-content: center;
     }
-
-    .dismiss nimble-button {
-        ${controlHeight.cssCustomProperty}: 16px;
-        ${iconSize.cssCustomProperty}: 14px;
-        ${buttonLabelFontColor.cssCustomProperty}: ${White};
-        ${borderHoverColor.cssCustomProperty}: transparent;
-        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
-    }
-
-    .dismiss nimble-button:focus-within {
-        outline: 2px solid ${White};
-    }
-
-    .dismiss nimble-button:hover {
-        background: ${hexToRgbaCssColor(White, 0.2)};
-    }
 `.withBehaviors(themeBehavior(Theme.light, css `
             :host {
                 background: ${Black75};
@@ -18847,8 +18802,8 @@
             }
         `));
 
-  const styles$R = css `
-    ${styles$Z}
+  const styles$Q = css `
+    ${styles$Y}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18944,7 +18899,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: template$A,
-      styles: styles$R,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19701,7 +19656,7 @@
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$Q = css `
+  const styles$P = css `
     ${display('inline-flex')}
 
     :host {
@@ -19755,7 +19710,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$z,
-          styles: styles$Q
+          styles: styles$P
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19802,15 +19757,15 @@
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
-   * The icon component for the 'xmark' icon
+   * The icon component for the 'times' icon
    */
-  class IconXmark extends Icon {
+  class IconTimes extends Icon {
       constructor() {
-          super(xmark16X16);
+          super(times16X16);
       }
   }
-  registerIcon('icon-xmark', IconXmark);
-  const iconXmarkTag = 'nimble-icon-xmark';
+  registerIcon('icon-times', IconTimes);
+  const iconTimesTag = 'nimble-icon-times';
 
   /**
    * Severities of banners.
@@ -19869,56 +19824,58 @@
 
   // prettier-ignore
   const template$y = html `
-    <div class="container"
-        role="status"
-        aria-atomic="${x => x.ariaAtomic}"
-        aria-busy="${x => x.ariaBusy}"
-        aria-controls="${x => x.ariaControls}"
-        aria-current="${x => x.ariaCurrent}"
-        aria-describedby="${x => x.ariaDescribedby}"
-        aria-details="${x => x.ariaDetails}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-errormessage="${x => x.ariaErrormessage}"
-        aria-expanded="${x => x.ariaExpanded}"
-        aria-flowto="${x => x.ariaFlowto}"
-        aria-haspopup="${x => x.ariaHaspopup}"
-        aria-hidden="${x => x.ariaHidden}"
-        aria-invalid="${x => x.ariaInvalid}"
-        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-        aria-label="${x => x.ariaLabel}"
-        aria-labelledby="titleSlot"
-        aria-live="${x => x.ariaLive}"
-        aria-owns="${x => x.ariaOwns}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-    >
-        <div class="icon">
-            ${when(x => x.severity === BannerSeverity.error, html `
-                <${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>
-            `)}
-            ${when(x => x.severity === BannerSeverity.warning, html `
-                <${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>
-            `)}
-            ${when(x => x.severity === BannerSeverity.information, html `
-                <${iconInfoTag} role="img" aria-label="${x => popupIconInformationLabel.getValueFor(x)}"></${iconInfoTag}>
-            `)}
-        </div>
-        <div class="text">
-            <slot name="title" id="titleSlot"></slot>
-            <slot></slot>
-        </div>
-        <div class="controls">
-            <slot name="action"></slot>
-            <div class="dismiss">
-                ${when(x => !x.preventDismiss, html `
-                    <${buttonTag} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
-                        <${iconXmarkTag} slot="start"></${iconXmarkTag}>
-                        ${x => popupDismissLabel.getValueFor(x)}
-                    </${buttonTag}>
+    <${themeProviderTag} theme="${Theme.color}">
+        <div class="container"
+            role="status"
+            aria-atomic="${x => x.ariaAtomic}"
+            aria-busy="${x => x.ariaBusy}"
+            aria-controls="${x => x.ariaControls}"
+            aria-current="${x => x.ariaCurrent}"
+            aria-describedby="${x => x.ariaDescribedby}"
+            aria-details="${x => x.ariaDetails}"
+            aria-disabled="${x => x.ariaDisabled}"
+            aria-errormessage="${x => x.ariaErrormessage}"
+            aria-expanded="${x => x.ariaExpanded}"
+            aria-flowto="${x => x.ariaFlowto}"
+            aria-haspopup="${x => x.ariaHaspopup}"
+            aria-hidden="${x => x.ariaHidden}"
+            aria-invalid="${x => x.ariaInvalid}"
+            aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+            aria-label="${x => x.ariaLabel}"
+            aria-labelledby="titleSlot"
+            aria-live="${x => x.ariaLive}"
+            aria-owns="${x => x.ariaOwns}"
+            aria-relevant="${x => x.ariaRelevant}"
+            aria-roledescription="${x => x.ariaRoledescription}"
+        >
+            <div class="icon">
+                ${when(x => x.severity === BannerSeverity.error, html `
+                    <${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>
+                `)}
+                ${when(x => x.severity === BannerSeverity.warning, html `
+                    <${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>
                 `)}
+                ${when(x => x.severity === BannerSeverity.information, html `
+                    <${iconInfoTag} role="img" aria-label="${x => popupIconInformationLabel.getValueFor(x)}"></${iconInfoTag}>
+                `)}
+            </div>
+            <div class="text">
+                <slot name="title" id="titleSlot"></slot>
+                <slot></slot>
+            </div>
+            <div class="controls">
+                <slot name="action"></slot>
+                <div class="dismiss">
+                    ${when(x => !x.preventDismiss, html `
+                        <${buttonTag} appearance="${ButtonAppearance.ghost}" appearance-variant="${ButtonAppearanceVariant.primary}" content-hidden @click="${x => x.dismissBanner()}">
+                            <${iconTimesTag} slot="start"></${iconTimesTag}>
+                            ${x => popupDismissLabel.getValueFor(x)}
+                        </${buttonTag}>
+                    `)}
+                </div>
             </div>
         </div>
-    </div>
+    </${themeProviderTag}>
 `;
 
   /**
@@ -19985,11 +19942,11 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$y,
-      styles: styles$S
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$P = css `
+  const styles$O = css `
     ${display('inline-block')}
 
     :host {
@@ -20030,11 +19987,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$P
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$O = css `
+  const styles$N = css `
     ${display('inline-flex')}
 
     :host {
@@ -20112,14 +20069,14 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$O,
+      styles: styles$N,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$N = css `
+  const styles$M = css `
     ${display('flex')}
 
     :host {
@@ -20159,11 +20116,11 @@
       baseName: 'card',
       baseClass: Card$1,
       template: template$x,
-      styles: styles$N
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$M = css `
+  const styles$L = css `
     ${display('inline-flex')}
 
     :host {
@@ -20322,14 +20279,14 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$M,
+      styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$L = css `
+  const styles$K = css `
     ${display('inline-flex')}
 
     :host {
@@ -20488,15 +20445,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: template$w,
-      styles: styles$L,
+      styles: styles$K,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$K = css `
-    ${styles$Z}
+  const styles$J = css `
+    ${styles$Y}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20642,7 +20599,7 @@
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$v,
-      styles: styles$K,
+      styles: styles$J,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20679,7 +20636,7 @@
       block: 'block'
   };
 
-  const styles$J = css `
+  const styles$I = css `
     ${display('inline-flex')}
 
     :host {
@@ -20899,7 +20856,7 @@
             }
         `));
 
-  const styles$I = css `
+  const styles$H = css `
     .error-icon {
         display: none;
     }
@@ -20946,9 +20903,9 @@
       standard: 'standard'
   };
 
-  const styles$H = css `
-    ${styles$J}
+  const styles$G = css `
     ${styles$I}
+    ${styles$H}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21147,7 +21104,7 @@
             >
                 <slot
                     ${slotted({
-    filter: (n) => n instanceof HTMLElement && Listbox$1.slottedOptionFilter(n),
+    filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
     flatten: true,
     property: 'slottedOptions',
 })}
@@ -21790,7 +21747,7 @@
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$u,
-      styles: styles$H,
+      styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21835,7 +21792,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$G = css `
+  const styles$F = css `
     ${display('grid')}
 
     dialog {
@@ -22090,12 +22047,12 @@
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$t,
-      styles: styles$G,
+      styles: styles$F,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$F = css `
+  const styles$E = css `
     ${display('block')}
 
     :host {
@@ -22392,7 +22349,7 @@
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$s,
-      styles: styles$F
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24327,19 +24284,6 @@
   }
   registerIcon('icon-tile-size', IconTileSize);
 
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * The icon component for the 'times' icon
-   */
-  class IconTimes extends Icon {
-      constructor() {
-          super(times16X16);
-      }
-  }
-  registerIcon('icon-times', IconTimes);
-  const iconTimesTag = 'nimble-icon-times';
-
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -24558,6 +24502,18 @@
   }
   registerIcon('icon-wrench-hammer', IconWrenchHammer);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'xmark' icon
+   */
+  class IconXmark extends Icon {
+      constructor() {
+          super(xmark16X16);
+      }
+  }
+  registerIcon('icon-xmark', IconXmark);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -24623,7 +24579,7 @@
       }
   }
 
-  const styles$E = css `
+  const styles$D = css `
     ${display('none')}
 `;
 
@@ -24672,7 +24628,7 @@
   ], LabelProviderCore.prototype, "filterNoResults", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$E
+      styles: styles$D
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -24839,13 +24795,13 @@
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$E
+      styles: styles$D
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$D = css `
+  const styles$C = css `
     ${display('flex')}
 
     :host {
@@ -25018,7 +24974,7 @@
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$r,
-      styles: styles$D
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
@@ -25034,7 +24990,7 @@
 
   const template$q = html `<template slot="mapping"></template>`;
 
-  const styles$C = css `
+  const styles$B = css `
     ${display('none')}
 `;
 
@@ -25051,7 +25007,7 @@
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
       template: template$q,
-      styles: styles$C
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -25122,7 +25078,7 @@
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
       template: template$q,
-      styles: styles$C
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -25146,7 +25102,7 @@
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
       template: template$q,
-      styles: styles$C
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -25163,11 +25119,11 @@
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
       template: template$q,
-      styles: styles$C
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
-  const styles$B = css `
+  const styles$A = css `
     ${display('grid')}
 
     :host {
@@ -25239,7 +25195,7 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$B
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -25256,7 +25212,7 @@
       auto: 'auto'
   };
 
-  const styles$A = css `
+  const styles$z = css `
     ${display('inline-block')}
 
     :host {
@@ -25526,7 +25482,7 @@
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$p,
-      styles: styles$A,
+      styles: styles$z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -25534,7 +25490,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$z = css `
+  const styles$y = css `
     ${display('grid')}
 
     :host {
@@ -25632,7 +25588,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$z,
+      styles: styles$y,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -25646,9 +25602,9 @@
       block: 'block'
   };
 
-  const styles$y = css `
+  const styles$x = css `
     ${display('inline-block')}
-    ${styles$I}
+    ${styles$H}
 
     :host {
         font: ${bodyFont};
@@ -25862,7 +25818,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$y,
+      styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -25905,7 +25861,7 @@
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$x = css `
+  const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -26006,12 +25962,12 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$x,
+      styles: styles$w,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$w = css `
+  const styles$v = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -26046,7 +26002,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$w,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43711,7 +43667,7 @@ img.ProseMirror-separator {
       },
   });
 
-  const styles$v = css `
+  const styles$u = css `
     ${display('inline')}
 
     .positioning-region {
@@ -43748,7 +43704,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$v,
+      styles: styles$u,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43780,8 +43736,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$u = css `
-    ${styles$J}
+  const styles$t = css `
+    ${styles$I}
 
     :host {
         height: auto;
@@ -43798,42 +43754,6 @@ img.ProseMirror-separator {
     }
 `;
 
-  const styles$t = 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$t
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListbox());
-
   // prettier-ignore
   const template$o = html `
     <template>
@@ -43856,7 +43776,7 @@ img.ProseMirror-separator {
                 ?disabled="${x => x.disabled}"
             >
                 <slot
-                    ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
+                    ${slotted({ filter: (n) => n instanceof HTMLElement && ListboxElement.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
                 >
                 </slot>
             </div>
@@ -44097,7 +44017,7 @@ img.ProseMirror-separator {
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
       template: template$o,
-      styles: styles$u
+      styles: styles$t
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -44209,7 +44129,7 @@ img.ProseMirror-separator {
 
   const styles$s = css `
     ${display('inline-flex')}
-    ${styles$I}
+    ${styles$H}
 
     :host {
         font: ${bodyFont};
@@ -59086,8 +59006,8 @@ img.ProseMirror-separator {
       .register(nimbleRichTextViewer());
 
   const styles$q = css `
-    ${styles$J}
     ${styles$I}
+    ${styles$H}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -70790,7 +70710,7 @@ img.ProseMirror-separator {
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$I}
+    ${styles$H}
 
     :host {
         font: ${bodyFont};
@@ -71136,7 +71056,7 @@ img.ProseMirror-separator {
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$I}
+    ${styles$H}
 
     :host {
         font: ${bodyFont};