@ni/nimble-components 29.1.6 → 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 Tue, 28 May 2024 20:00:12 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
       }
@@ -17334,7 +17308,7 @@
     padding: 0;
 `;
 
-  const styles$Z = css `
+  const styles$Y = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17612,8 +17586,8 @@
             }
         `));
 
-  const styles$Y = css `
-    ${styles$Z}
+  const styles$X = css `
+    ${styles$Y}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17716,7 +17690,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$F,
-      styles: styles$Y,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17724,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 {
@@ -17910,7 +17884,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$E,
-      styles: styles$X,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17920,7 +17894,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$W = css `
+  const styles$V = css `
     ${display('inline-flex')}
 
     :host {
@@ -18090,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 {
@@ -18326,7 +18300,7 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$C,
-      styles: styles$V,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18342,7 +18316,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$U = css `
+  const styles$T = css `
     ${display('block')}
 
     :host {
@@ -18586,7 +18560,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$B,
-      styles: styles$U,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18602,7 +18576,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$T = css `
+  const styles$S = css `
     ${display('block')}
 
     :host {
@@ -18633,7 +18607,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$T
+      styles: styles$S
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18713,7 +18687,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$S = css `
+  const styles$R = css `
     ${display('flex')}
 
     :host {
@@ -18828,8 +18802,8 @@
             }
         `));
 
-  const styles$R = css `
-    ${styles$Z}
+  const styles$Q = css `
+    ${styles$Y}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18925,7 +18899,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: template$A,
-      styles: styles$R,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19682,7 +19656,7 @@
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$Q = css `
+  const styles$P = css `
     ${display('inline-flex')}
 
     :host {
@@ -19736,7 +19710,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$z,
-          styles: styles$Q
+          styles: styles$P
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19968,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 {
@@ -20013,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 {
@@ -20095,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 {
@@ -20142,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 {
@@ -20305,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 {
@@ -20471,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 {
@@ -20625,7 +20599,7 @@
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$v,
-      styles: styles$K,
+      styles: styles$J,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20662,7 +20636,7 @@
       block: 'block'
   };
 
-  const styles$J = css `
+  const styles$I = css `
     ${display('inline-flex')}
 
     :host {
@@ -20882,7 +20856,7 @@
             }
         `));
 
-  const styles$I = css `
+  const styles$H = css `
     .error-icon {
         display: none;
     }
@@ -20929,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;
@@ -21130,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',
 })}
@@ -21773,7 +21747,7 @@
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$u,
-      styles: styles$H,
+      styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21818,7 +21792,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$G = css `
+  const styles$F = css `
     ${display('grid')}
 
     dialog {
@@ -22073,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 {
@@ -22375,7 +22349,7 @@
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$s,
-      styles: styles$F
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24605,7 +24579,7 @@
       }
   }
 
-  const styles$E = css `
+  const styles$D = css `
     ${display('none')}
 `;
 
@@ -24654,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')
@@ -24821,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 {
@@ -25000,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';
@@ -25016,7 +24990,7 @@
 
   const template$q = html `<template slot="mapping"></template>`;
 
-  const styles$C = css `
+  const styles$B = css `
     ${display('none')}
 `;
 
@@ -25033,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());
 
@@ -25104,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());
 
@@ -25128,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());
 
@@ -25145,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 {
@@ -25221,7 +25195,7 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$B
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -25238,7 +25212,7 @@
       auto: 'auto'
   };
 
-  const styles$A = css `
+  const styles$z = css `
     ${display('inline-block')}
 
     :host {
@@ -25508,7 +25482,7 @@
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$p,
-      styles: styles$A,
+      styles: styles$z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -25516,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 {
@@ -25614,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());
@@ -25628,9 +25602,9 @@
       block: 'block'
   };
 
-  const styles$y = css `
+  const styles$x = css `
     ${display('inline-block')}
-    ${styles$I}
+    ${styles$H}
 
     :host {
         font: ${bodyFont};
@@ -25844,7 +25818,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$y,
+      styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -25887,7 +25861,7 @@
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$x = css `
+  const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -25988,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 {
@@ -26028,7 +26002,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$w,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43693,7 +43667,7 @@ img.ProseMirror-separator {
       },
   });
 
-  const styles$v = css `
+  const styles$u = css `
     ${display('inline')}
 
     .positioning-region {
@@ -43730,7 +43704,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$v,
+      styles: styles$u,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43762,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;
@@ -43780,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>
@@ -43838,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>
@@ -44079,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')
@@ -44191,7 +44129,7 @@ img.ProseMirror-separator {
 
   const styles$s = css `
     ${display('inline-flex')}
-    ${styles$I}
+    ${styles$H}
 
     :host {
         font: ${bodyFont};
@@ -59068,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,
@@ -70772,7 +70710,7 @@ img.ProseMirror-separator {
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$I}
+    ${styles$H}
 
     :host {
         font: ${bodyFont};
@@ -71118,7 +71056,7 @@ img.ProseMirror-separator {
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$I}
+    ${styles$H}
 
     :host {
         font: ${bodyFont};