@ni/nimble-components 29.0.0 → 29.1.1

package/dist/all-components-bundle.js

@@ -15200,7 +15200,7 @@
    * @param display - The CSS display property value
    * @public
    */
-  function display(displayValue) {
+  function display$1(displayValue) {
       return `${hidden}:host{display:${displayValue}}`;
   }
 
@@ -15219,6 +15219,12 @@
   class AnchorBase extends Anchor$1 {
   }
 
+  /**
+   * This utility will generate the appropriate display style, as well as a style rule
+   * to hide the host element when its `hidden` attribute is set.
+   */
+  const display = (displayValue) => `${display$1(displayValue)}`;
+
   /**
    * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
    */
@@ -16333,7 +16339,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 14 May 2024 21:30:59 GMT
+   * Generated on Thu, 16 May 2024 18:32:42 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16766,10 +16772,8 @@
 
   const template$F = html `<slot></slot>`;
 
-  const styles$Y = css `
-    :host {
-        display: contents;
-    }
+  const styles$$ = css `
+    ${display('contents')}
 `;
 
   /**
@@ -16883,7 +16887,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$Y,
+      styles: styles$$,
       template: template$F
   });
   DesignSystem.getOrCreate()
@@ -17069,7 +17073,7 @@
       }
   }
 
-  const styles$X = css `
+  const styles$_ = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -17248,7 +17252,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$E,
-      styles: styles$X,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17351,7 +17355,7 @@
     padding: 0;
 `;
 
-  const styles$W = css `
+  const styles$Z = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17629,8 +17633,8 @@
             }
         `));
 
-  const styles$V = css `
-    ${styles$W}
+  const styles$Y = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17733,7 +17737,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$D,
-      styles: styles$V,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17741,7 +17745,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$U = css `
+  const styles$X = css `
     ${display('grid')}
 
     :host {
@@ -17927,7 +17931,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$C,
-      styles: styles$U,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17937,7 +17941,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$T = css `
+  const styles$W = css `
     ${display('inline-flex')}
 
     :host {
@@ -18107,14 +18111,14 @@
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$B,
-      styles: styles$T,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$S = css `
+  const styles$V = css `
     ${display('grid')}
 
     :host {
@@ -18343,7 +18347,7 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$A,
-      styles: styles$S,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18359,7 +18363,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$R = css `
+  const styles$U = css `
     ${display('block')}
 
     :host {
@@ -18603,7 +18607,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$z,
-      styles: styles$R,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18619,15 +18623,17 @@
       zIndex1000: '1000'
   };
 
-  const styles$Q = css `
+  const styles$T = css `
+    ${display('block')}
+
     :host {
-        /* Avoid using the 'display' helper to customize hidden behavior */
-        display: block;
         contain: layout;
         z-index: ${ZIndexLevels.zIndex1000};
     }
 
+    ${'' /* Override 'display' helper hidden behavior */}
     :host([hidden]) {
+        display: block;
         visibility: hidden;
     }
 `;
@@ -18648,7 +18654,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$Q
+      styles: styles$T
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18728,7 +18734,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$P = css `
+  const styles$S = css `
     ${display('flex')}
 
     :host {
@@ -18871,8 +18877,8 @@
             }
         `));
 
-  const styles$O = css `
-    ${styles$W}
+  const styles$R = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18918,7 +18924,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$O,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19675,7 +19681,7 @@
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$N = css `
+  const styles$Q = css `
     ${display('inline-flex')}
 
     :host {
@@ -19729,8 +19735,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$y,
-          styles: styles$N,
-          baseClass: iconClass
+          styles: styles$Q
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19960,11 +19965,11 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$x,
-      styles: styles$P
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$M = css `
+  const styles$P = css `
     ${display('inline-block')}
 
     :host {
@@ -20005,11 +20010,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$M
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$L = css `
+  const styles$O = css `
     ${display('inline-flex')}
 
     :host {
@@ -20087,14 +20092,14 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$L,
+      styles: styles$O,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$K = css `
+  const styles$N = css `
     ${display('flex')}
 
     :host {
@@ -20134,11 +20139,11 @@
       baseName: 'card',
       baseClass: Card$1,
       template: template$w,
-      styles: styles$K
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$J = css `
+  const styles$M = css `
     ${display('inline-flex')}
 
     :host {
@@ -20297,14 +20302,14 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$J,
+      styles: styles$M,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$I = css `
+  const styles$L = css `
     ${display('inline-flex')}
 
     :host {
@@ -20422,15 +20427,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: checkboxTemplate,
-      styles: styles$I,
+      styles: styles$L,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$H = css `
-    ${styles$W}
+  const styles$K = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20556,7 +20561,7 @@
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$v,
-      styles: styles$H,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20593,7 +20598,7 @@
       block: 'block'
   };
 
-  const styles$G = css `
+  const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -20755,7 +20760,7 @@
 
     .indicator {
         flex: none;
-        margin-inline-start: 1em;
+        margin-left: ${smallPadding};
         padding-right: 8px;
         display: flex;
         justify-content: center;
@@ -20813,7 +20818,7 @@
             }
         `));
 
-  const styles$F = css `
+  const styles$I = css `
     .error-icon {
         display: none;
     }
@@ -20860,9 +20865,9 @@
       standard: 'standard'
   };
 
-  const styles$E = css `
-    ${styles$G}
-    ${styles$F}
+  const styles$H = css `
+    ${styles$J}
+    ${styles$I}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21704,7 +21709,7 @@
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$u,
-      styles: styles$E,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21749,7 +21754,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$D = css `
+  const styles$G = css `
     ${display('grid')}
 
     dialog {
@@ -22004,12 +22009,12 @@
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$t,
-      styles: styles$D,
+      styles: styles$G,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$C = css `
+  const styles$F = css `
     ${display('block')}
 
     :host {
@@ -22306,7 +22311,7 @@
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$s,
-      styles: styles$C
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24536,6 +24541,10 @@
       }
   }
 
+  const styles$E = css `
+    ${display('none')}
+`;
+
   const supportedLabels$1 = {
       popupDismiss: popupDismissLabel,
       numericDecrement: numericDecrementLabel,
@@ -24580,7 +24589,8 @@
       attr({ attribute: 'filter-no-results' })
   ], LabelProviderCore.prototype, "filterNoResults", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
-      baseName: 'label-provider-core'
+      baseName: 'label-provider-core',
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -24746,13 +24756,14 @@
       attr({ attribute: 'group-row-placeholder-empty' })
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
-      baseName: 'label-provider-table'
+      baseName: 'label-provider-table',
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$B = css `
+  const styles$D = css `
     ${display('flex')}
 
     :host {
@@ -24925,7 +24936,7 @@
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$r,
-      styles: styles$B
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
@@ -24941,6 +24952,10 @@
 
   const template$q = html `<template slot="mapping"></template>`;
 
+  const styles$C = css `
+    ${display('none')}
+`;
+
   /**
    * Maps data values to text.
    * One or more may be added as children of a nimble-table-column-mapping element. The
@@ -24953,7 +24968,8 @@
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$q
+      template: template$q,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -25023,7 +25039,8 @@
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$q
+      template: template$q,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -25046,7 +25063,8 @@
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$q
+      template: template$q,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -25062,11 +25080,12 @@
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$q
+      template: template$q,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
-  const styles$A = css `
+  const styles$B = css `
     ${display('grid')}
 
     :host {
@@ -25138,7 +25157,7 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$A
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -25155,7 +25174,7 @@
       auto: 'auto'
   };
 
-  const styles$z = css `
+  const styles$A = css `
     ${display('inline-block')}
 
     :host {
@@ -25421,7 +25440,7 @@
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$p,
-      styles: styles$z,
+      styles: styles$A,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -25429,7 +25448,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$y = css `
+  const styles$z = css `
     ${display('grid')}
 
     :host {
@@ -25527,7 +25546,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$y,
+      styles: styles$z,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -25541,9 +25560,9 @@
       block: 'block'
   };
 
-  const styles$x = css `
+  const styles$y = css `
     ${display('inline-block')}
-    ${styles$F}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -25757,7 +25776,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$x,
+      styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -25800,7 +25819,7 @@
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$w = css `
+  const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -25901,12 +25920,12 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$w,
+      styles: styles$x,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$v = css `
+  const styles$w = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -25941,7 +25960,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$v,
+      styles: styles$w,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43380,7 +43399,9 @@ img.ProseMirror-separator {
       },
   });
 
-  const styles$u = css `
+  const styles$v = css `
+    ${display('inline')}
+
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
@@ -43415,7 +43436,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$u,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43447,8 +43468,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$t = css `
-    ${styles$G}
+  const styles$u = css `
+    ${styles$J}
 
     :host {
         height: auto;
@@ -43465,7 +43486,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const styles$s = css `
+  const styles$t = css `
     ${display('inline-flex')}
 
     :host {
@@ -43497,7 +43518,7 @@ img.ProseMirror-separator {
   const nimbleListbox = Listbox.compose({
       baseName: 'listbox',
       template: listboxTemplate,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListbox());
 
@@ -43764,7 +43785,7 @@ img.ProseMirror-separator {
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
       template: template$o,
-      styles: styles$t
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -43874,9 +43895,9 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$r = css `
+  const styles$s = css `
     ${display('inline-flex')}
-    ${styles$F}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -58489,7 +58510,7 @@ img.ProseMirror-separator {
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$n,
-      styles: styles$r,
+      styles: styles$s,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -58504,7 +58525,7 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$q = css `
+  const styles$r = css `
     ${display('flex')}
 
     :host {
@@ -58617,15 +58638,15 @@ img.ProseMirror-separator {
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$m,
-      styles: styles$q
+      styles: styles$r
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$p = css `
-    ${styles$G}
-    ${styles$F}
+  const styles$q = css `
+    ${styles$J}
+    ${styles$I}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -58639,8 +58660,15 @@ img.ProseMirror-separator {
         order: 1;
     }
 
-    [part='indicator'] {
+    .clear-button {
         order: 3;
+        width: auto;
+        height: auto;
+        margin-left: ${smallPadding};
+    }
+
+    [part='indicator'] {
+        order: 4;
     }
 
     .error-icon {
@@ -58776,7 +58804,6 @@ img.ProseMirror-separator {
         role="combobox"
         tabindex="${x => (!x.disabled ? '0' : null)}"
         @click="${(x, c) => x.clickHandler(c.event)}"
-        @change="${x => x.changeValueHandler()}"
         @contentchange="${x => x.updateDisplayValue()}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -58795,6 +58822,17 @@ img.ProseMirror-separator {
                     <div class="selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
                         <slot name="selected-value">${x => x.displayValue}</slot>
                     </div>
+                    ${when(x => !x.disabled && x.clearable && !x.displayPlaceholder && x.selectedIndex >= 0, html `
+                        <${buttonTag} 
+                            class="clear-button"
+                            tabindex="-1"
+                            part="clear-button"
+                            content-hidden
+                            appearance="ghost"
+                            @click="${(x, c) => x.clearClickHandler(c.event)}">
+                            <${iconXmarkTag} slot="start"></${iconXmarkTag}>
+                        </${buttonTag}>
+                    `)}
                     <div aria-hidden="true" class="indicator" part="indicator">
                         <slot name="indicator">
                             ${definition.indicator || ''}
@@ -58889,6 +58927,9 @@ img.ProseMirror-separator {
   const isOptionSelectable = (el) => {
       return !el.visuallyHidden && !el.disabled && !el.hidden;
   };
+  const isOptionPlaceholder = (el) => {
+      return el.disabled && el.hidden;
+  };
   /**
    * A nimble-styled HTML select.
    */
@@ -58898,6 +58939,7 @@ img.ProseMirror-separator {
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
           this.filterMode = FilterMode.none;
+          this.clearable = false;
           /**
            * @internal
            */
@@ -58970,13 +59012,8 @@ img.ProseMirror-separator {
           if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
               this._value = newValue;
               super.valueChanged(prev, newValue);
-              if (!this.open) {
-                  this.committedSelectedOption = this.options.find(o => o.value === newValue);
-              }
               Observable.notify(this, 'value');
-              if (this.collapsible) {
-                  Observable.notify(this, 'displayValue');
-              }
+              this.updateDisplayValue();
           }
       }
       /**
@@ -58984,7 +59021,7 @@ img.ProseMirror-separator {
        */
       get displayValue() {
           Observable.track(this, 'displayValue');
-          return this.committedSelectedOption?.text ?? '';
+          return this.firstSelectedOption?.text ?? '';
       }
       /**
        * @internal
@@ -59028,7 +59065,6 @@ img.ProseMirror-separator {
           if (value) {
               this.value = value;
           }
-          this.committedSelectedOption = this.options[this.selectedIndex];
       }
       /**
        * @internal
@@ -59073,11 +59109,13 @@ img.ProseMirror-separator {
                   break;
               }
               case 'selected': {
-                  if (isNimbleListOption(sourceElement)) {
+                  if (isNimbleListOption(sourceElement)
+                      && sourceElement.selected) {
                       this.selectedIndex = this.options.indexOf(sourceElement);
                   }
-                  this.setSelectedOptions();
-                  this.updateDisplayValue();
+                  else {
+                      this.clearSelect();
+                  }
                   break;
               }
               case 'hidden': {
@@ -59134,24 +59172,25 @@ img.ProseMirror-separator {
       /**
        * @internal
        */
-      changeValueHandler() {
-          this.committedSelectedOption = this.options.find(option => option.selected);
+      clearClickHandler(e) {
+          this.open = false;
+          this.clearSelect();
+          this.updateValue(true);
+          e.stopPropagation();
       }
       /**
        * @internal
        */
       updateDisplayValue() {
-          if (this.committedSelectedOption?.disabled
-              && this.committedSelectedOption?.hidden
-              && this.committedSelectedOption?.selected) {
+          const placeholderOption = this.getPlaceholderOption();
+          if (placeholderOption
+              && this.firstSelectedOption === placeholderOption) {
               this.displayPlaceholder = true;
           }
           else {
               this.displayPlaceholder = false;
           }
-          if (this.collapsible) {
-              Observable.notify(this, 'displayValue');
-          }
+          Observable.notify(this, 'displayValue');
       }
       /**
        * Handle content changes on the control input.
@@ -59241,6 +59280,11 @@ img.ProseMirror-separator {
               }
               case keyEscape: {
                   if (!this.open) {
+                      if (this.clearable) {
+                          this.clearSelect();
+                          this.updateValue(true);
+                          return true;
+                      }
                       break;
                   }
                   if (this.collapsible && this.open) {
@@ -59385,10 +59429,10 @@ img.ProseMirror-separator {
           // for more info.
           this.options.push(option);
       }
-      // Prevents parent classes from resetting selectedIndex to a positive
-      // value while filtering, which can result in a disabled option being
-      // selected.
       setSelectedOptions() {
+          // Prevents parent classes from resetting selectedIndex to a positive
+          // value while filtering, which can result in a disabled option being
+          // selected.
           if (this.open && this.selectedIndex === -1) {
               return;
           }
@@ -59484,12 +59528,17 @@ img.ProseMirror-separator {
           };
           let selectedIndex = -1;
           let firstValidOptionIndex = -1;
+          let placeholderIndex = -1;
           for (let i = 0; i < options?.length; i++) {
               const option = options[i];
-              if (optionIsSelected(option) || option?.value === this.value) {
+              if (optionIsSelected(option) || option.value === this.value) {
                   selectedIndex = i;
+                  break;
+              }
+              else if (placeholderIndex === -1 && isOptionPlaceholder(option)) {
+                  placeholderIndex = i;
               }
-              if (firstValidOptionIndex === -1
+              else if (firstValidOptionIndex === -1
                   && isOptionSelectable(option)) {
                   firstValidOptionIndex = i;
               }
@@ -59497,13 +59546,15 @@ img.ProseMirror-separator {
           if (selectedIndex !== -1) {
               this.selectedIndex = selectedIndex;
           }
+          else if (placeholderIndex !== -1) {
+              this.selectedIndex = placeholderIndex;
+          }
           else if (firstValidOptionIndex !== -1) {
               this.selectedIndex = firstValidOptionIndex;
           }
           else {
               this.selectedIndex = 0;
           }
-          this.committedSelectedOption = options[this.selectedIndex];
       }
       setActiveOption(newActiveIndex) {
           const activeOption = this.options[newActiveIndex];
@@ -59539,8 +59590,8 @@ img.ProseMirror-separator {
               });
           }
       }
-      committedSelectedOptionChanged() {
-          this.updateDisplayValue();
+      getPlaceholderOption() {
+          return this.options.find(o => o.hidden && o.disabled);
       }
       setPositioning() {
           if (!this.$fastController.isConnected) {
@@ -59615,6 +59666,12 @@ img.ProseMirror-separator {
               });
           }
       }
+      clearSelect() {
+          const placeholder = this.getPlaceholderOption();
+          this.selectedIndex = placeholder
+              ? this.options.indexOf(placeholder)
+              : -1;
+      }
       /**
        * Resets and fills the proxy to match the component's options.
        *
@@ -59641,7 +59698,6 @@ img.ProseMirror-separator {
           this.updateListboxMaxHeightCssVariable();
       }
       initializeOpenState() {
-          this.committedSelectedOption = this.options[this.selectedIndex];
           this.setActiveOption(this.selectedIndex);
           this.ariaControls = this.listboxId;
           this.ariaExpanded = 'true';
@@ -59669,6 +59725,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'filter-mode' })
   ], Select.prototype, "filterMode", void 0);
+  __decorate$1([
+      attr({ attribute: 'clearable', mode: 'boolean' })
+  ], Select.prototype, "clearable", void 0);
   __decorate$1([
       observable
   ], Select.prototype, "displayPlaceholder", void 0);
@@ -59699,9 +59758,6 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], Select.prototype, "filter", void 0);
-  __decorate$1([
-      observable
-  ], Select.prototype, "committedSelectedOption", void 0);
   __decorate$1([
       observable
   ], Select.prototype, "maxHeight", void 0);
@@ -59715,7 +59771,7 @@ img.ProseMirror-separator {
       baseName: 'select',
       baseClass: Select$2,
       template: template$l,
-      styles: styles$p,
+      styles: styles$q,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -59728,7 +59784,7 @@ img.ProseMirror-separator {
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$o = css `
+  const styles$p = css `
     ${display('inline-grid')}
 
     :host {
@@ -59946,12 +60002,12 @@ img.ProseMirror-separator {
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
       template: template$k,
-      styles: styles$o
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
 
-  const styles$n = css `
+  const styles$o = css `
     ${display('inline-flex')}
 
     :host {
@@ -60160,11 +60216,11 @@ img.ProseMirror-separator {
       baseClass: Switch$1,
       baseName: 'switch',
       template: template$j,
-      styles: styles$n
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$m = css `
+  const styles$n = css `
     ${display('inline-flex')}
 
     :host {
@@ -60275,11 +60331,11 @@ img.ProseMirror-separator {
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$m
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$l = css `
+  const styles$m = css `
     ${display('block')}
 
     :host {
@@ -60299,7 +60355,7 @@ img.ProseMirror-separator {
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$l
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -63995,7 +64051,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$k = css `
+  const styles$l = css `
     ${display('flex')}
 
     :host {
@@ -64179,7 +64235,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$j = css `
+  const styles$k = css `
     ${display('flex')}
 
     :host {
@@ -64283,12 +64339,12 @@ img.ProseMirror-separator {
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
       template: template$i,
-      styles: styles$j
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$i = css `
+  const styles$j = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -64313,9 +64369,9 @@ img.ProseMirror-separator {
     }
 `;
 
-  const styles$h = css `
-    ${styles$i}
+  const styles$i = css `
     ${display('flex')}
+    ${styles$j}
 
     :host {
         width: fit-content;
@@ -64436,7 +64492,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$g = css `
+  const styles$h = css `
     ${display('flex')}
 
     :host {
@@ -64454,8 +64510,6 @@ img.ProseMirror-separator {
 
     .cell-view {
         overflow: hidden;
-        display: flex;
-        align-items: center;
     }
 
     .action-menu {
@@ -64539,7 +64593,7 @@ img.ProseMirror-separator {
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
       template: template$h,
-      styles: styles$g
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -64881,14 +64935,14 @@ img.ProseMirror-separator {
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
       template: template$g,
-      styles: styles$h
+      styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$f = css `
+  const styles$g = css `
     ${display('grid')}
-    ${styles$i}
+    ${styles$j}
 
     :host {
         align-items: center;
@@ -64942,7 +64996,6 @@ img.ProseMirror-separator {
         padding-left: ${mediumPadding};
         ${userSelectNone}
         overflow: hidden;
-        display: flex;
     }
 
     .group-row-child-count {
@@ -65114,7 +65167,7 @@ img.ProseMirror-separator {
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
       template: template$f,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -67903,14 +67956,12 @@ img.ProseMirror-separator {
   const nimbleTable = Table.compose({
       baseName: 'table',
       template: template$e,
-      styles: styles$k
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$e = css `
-    :host {
-        display: contents;
-    }
+  const styles$f = css `
+    ${display('contents')}
 
     .header-content {
         white-space: nowrap;
@@ -68013,12 +68064,15 @@ img.ProseMirror-separator {
       return ColumnWithPlaceholder;
   }
 
-  const styles$d = css `
+  const styles$e = css `
+    ${display('flex')}
+
     :host {
         width: fit-content;
         max-width: 100%;
         height: fit-content;
         align-self: center;
+        align-items: center;
     }
 
     nimble-anchor {
@@ -68124,7 +68178,7 @@ img.ProseMirror-separator {
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
       template: template$c,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -68210,7 +68264,9 @@ img.ProseMirror-separator {
     </span>
 `;
 
-  const styles$c = css `
+  const styles$d = css `
+    ${display('flex')}
+
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -68233,7 +68289,7 @@ img.ProseMirror-separator {
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
       template: template$b,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68352,7 +68408,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
       template: template$d,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68405,7 +68461,7 @@ img.ProseMirror-separator {
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
       template: template$b,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68437,7 +68493,13 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$b = css `
+  const styles$c = css `
+    ${display('flex')}
+
+    :host {
+        align-items: center;
+    }
+
     :host(.right-align) {
         margin-left: auto;
     }
@@ -68534,7 +68596,7 @@ img.ProseMirror-separator {
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
       template: template$a,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -68795,7 +68857,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
       template: template$d,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68812,7 +68874,7 @@ img.ProseMirror-separator {
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
       template: template$a,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68914,7 +68976,7 @@ img.ProseMirror-separator {
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
       template: template$b,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68967,7 +69029,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
       template: template$d,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69075,8 +69137,8 @@ img.ProseMirror-separator {
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$a = css `
-    ${styles$e}
+  const styles$b = css `
+    ${styles$f}
 
     slot[name='mapping'] {
         display: none;
@@ -69169,7 +69231,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$9 = css `
+  const styles$a = css `
     ${display('inline-flex')}
 
     :host {
@@ -69344,14 +69406,14 @@ img.ProseMirror-separator {
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
       template: template$8,
-      styles: styles$9
+      styles: styles$a
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$8 = css `
+  const styles$9 = css `
     ${display('inline-flex')}
 
     :host {
@@ -69464,7 +69526,7 @@ img.ProseMirror-separator {
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
       template: template$7,
-      styles: styles$8
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -69549,7 +69611,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
       template: template$9,
-      styles: styles$a
+      styles: styles$b
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69578,7 +69640,7 @@ img.ProseMirror-separator {
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
       template: template$b,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69600,7 +69662,7 @@ img.ProseMirror-separator {
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
       template: template$a,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -70141,7 +70203,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
       template: template$6,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -70160,7 +70222,7 @@ img.ProseMirror-separator {
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
       template: template$a,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -70188,13 +70250,13 @@ img.ProseMirror-separator {
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
       template: template$d,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$7 = css `
+  const styles$8 = css `
     ${display('grid')}
 
     :host {
@@ -70237,11 +70299,11 @@ img.ProseMirror-separator {
       baseName: 'tabs',
       baseClass: Tabs$1,
       template: tabsTemplate,
-      styles: styles$7
+      styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$6 = css `
+  const styles$7 = css `
     ${display('flex')}
 
     :host {
@@ -70276,7 +70338,7 @@ img.ProseMirror-separator {
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
       template: template$5,
-      styles: styles$6
+      styles: styles$7
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
 
@@ -70285,9 +70347,9 @@ img.ProseMirror-separator {
       block: 'block'
   };
 
-  const styles$5 = css `
+  const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$F}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -70614,7 +70676,7 @@ img.ProseMirror-separator {
       baseName: 'text-area',
       baseClass: TextArea$1,
       template: template$4,
-      styles: styles$5,
+      styles: styles$6,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -70631,9 +70693,9 @@ img.ProseMirror-separator {
       frameless: 'frameless'
   };
 
-  const styles$4 = css `
+  const styles$5 = css `
     ${display('inline-block')}
-    ${styles$F}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -70897,7 +70959,7 @@ img.ProseMirror-separator {
       baseName: 'text-field',
       baseClass: TextField$1,
       template: textFieldTemplate,
-      styles: styles$4,
+      styles: styles$5,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -70914,7 +70976,7 @@ img.ProseMirror-separator {
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$3 = css `
+  const styles$4 = css `
     ${display('inline-flex')}
 
     :host {
@@ -71055,7 +71117,7 @@ img.ProseMirror-separator {
       baseName: 'tooltip',
       baseClass: Tooltip$1,
       template: template$3,
-      styles: styles$3
+      styles: styles$4
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
 
@@ -71143,7 +71205,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$2 = css `
+  const styles$3 = css `
     ${display('block')}
 
     :host {
@@ -71361,12 +71423,12 @@ img.ProseMirror-separator {
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$2,
+      styles: styles$3,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$1 = css `
+  const styles$2 = css `
     ${display('flex')}
 
     :host {
@@ -71478,7 +71540,7 @@ img.ProseMirror-separator {
       baseName: 'tree-view',
       baseClass: TreeView$1,
       template: template$2,
-      styles: styles$1
+      styles: styles$2
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -71595,6 +71657,10 @@ img.ProseMirror-separator {
   }
   const byteUnitScale = new ByteUnitScale();
 
+  const styles$1 = css `
+    ${display('none')}
+`;
+
   /**
    * Element that provides a unit scale for conversion of bytes
    */
@@ -71619,7 +71685,8 @@ img.ProseMirror-separator {
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$1
+      template: template$1,
+      styles: styles$1
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -71671,7 +71738,8 @@ img.ProseMirror-separator {
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$1
+      template: template$1,
+      styles: styles$1
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -75053,8 +75121,9 @@ img.ProseMirror-separator {
 `;
 
   const styles = css `
+    ${display('inline-block')}
+
     :host {
-        display: inline-block;
         width: 500px;
         height: 500px;
     }