@ni/spright-components 1.0.1 → 1.0.3

package/dist/all-components-bundle.js

@@ -15200,7 +15200,7 @@
    * @param display - The CSS display property value
    * @public
    */
-  function display(displayValue) {
+  function display$2(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$1 = (displayValue) => `${display$2(displayValue)}`;
+
   /**
    * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
    */
@@ -16333,7 +16339,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 15 May 2024 20:53:59 GMT
+   * Generated on Fri, 17 May 2024 19:53:06 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16766,10 +16772,8 @@
 
   const template$G = html `<slot></slot>`;
 
-  const styles$Z = css `
-    :host {
-        display: contents;
-    }
+  const styles$10 = css `
+    ${display$1('contents')}
 `;
 
   /**
@@ -16883,7 +16887,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$Z,
+      styles: styles$10,
       template: template$G
   });
   DesignSystem.getOrCreate()
@@ -17069,11 +17073,11 @@
       }
   }
 
-  const styles$Y = css `
+  const styles$$ = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
-        ${display('inline')}
+        ${display$1('inline')}
 
         :host {
             box-sizing: border-box;
@@ -17248,7 +17252,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$F,
-      styles: styles$Y,
+      styles: styles$$,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17351,11 +17355,11 @@
     padding: 0;
 `;
 
-  const styles$X = css `
+  const styles$_ = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
-        ${display('inline-flex')}
+        ${display$1('inline-flex')}
 
         :host {
             background-color: transparent;
@@ -17629,8 +17633,8 @@
             }
         `));
 
-  const styles$W = css `
-    ${styles$X}
+  const styles$Z = css `
+    ${styles$_}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17733,7 +17737,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$E,
-      styles: styles$W,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17741,8 +17745,8 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$V = css `
-    ${display('grid')}
+  const styles$Y = css `
+    ${display$1('grid')}
 
     :host {
         font: ${bodyFont};
@@ -17927,7 +17931,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$D,
-      styles: styles$V,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17937,8 +17941,8 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$U = css `
-    ${display('inline-flex')}
+  const styles$X = css `
+    ${display$1('inline-flex')}
 
     :host {
         position: relative;
@@ -18107,15 +18111,15 @@
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$C,
-      styles: styles$U,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$T = css `
-    ${display('grid')}
+  const styles$W = css `
+    ${display$1('grid')}
 
     :host {
         box-sizing: border-box;
@@ -18343,7 +18347,7 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$B,
-      styles: styles$T,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18359,8 +18363,8 @@
     -webkit-user-select: none;
 `;
 
-  const styles$S = css `
-    ${display('block')}
+  const styles$V = css `
+    ${display$1('block')}
 
     :host {
         ${
@@ -18603,7 +18607,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$A,
-      styles: styles$S,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18619,15 +18623,17 @@
       zIndex1000: '1000'
   };
 
-  const styles$R = css `
+  const styles$U = css `
+    ${display$1('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$R
+      styles: styles$U
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18728,8 +18734,8 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$Q = css `
-    ${display('flex')}
+  const styles$T = css `
+    ${display$1('flex')}
 
     :host {
         font: ${bodyFont};
@@ -18871,8 +18877,8 @@
             }
         `));
 
-  const styles$P = css `
-    ${styles$X}
+  const styles$S = css `
+    ${styles$_}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18918,7 +18924,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$P,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19675,8 +19681,8 @@
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$O = css `
-    ${display('inline-flex')}
+  const styles$R = css `
+    ${display$1('inline-flex')}
 
     :host {
         align-items: center;
@@ -19729,8 +19735,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$z,
-          styles: styles$O,
-          baseClass: iconClass
+          styles: styles$R
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19960,12 +19965,12 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$y,
-      styles: styles$Q
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$N = css `
-    ${display('inline-block')}
+  const styles$Q = css `
+    ${display$1('inline-block')}
 
     :host {
         box-sizing: border-box;
@@ -20005,12 +20010,12 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$N
+      styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$M = css `
-    ${display('inline-flex')}
+  const styles$P = css `
+    ${display$1('inline-flex')}
 
     :host {
         height: ${controlHeight};
@@ -20087,15 +20092,15 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$M,
+      styles: styles$P,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$L = css `
-    ${display('flex')}
+  const styles$O = css `
+    ${display$1('flex')}
 
     :host {
         flex-direction: column;
@@ -20134,12 +20139,12 @@
       baseName: 'card',
       baseClass: Card$1,
       template: template$x,
-      styles: styles$L
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$K = css `
-    ${display('inline-flex')}
+  const styles$N = css `
+    ${display$1('inline-flex')}
 
     :host {
         background-color: transparent;
@@ -20297,15 +20302,15 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$K,
+      styles: styles$N,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$J = css `
-    ${display('inline-flex')}
+  const styles$M = css `
+    ${display$1('inline-flex')}
 
     :host {
         font: ${bodyFont};
@@ -20422,15 +20427,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: checkboxTemplate,
-      styles: styles$J,
+      styles: styles$M,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$I = css `
-    ${styles$X}
+  const styles$L = css `
+    ${styles$_}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20556,7 +20561,7 @@
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$w,
-      styles: styles$I,
+      styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20593,8 +20598,8 @@
       block: 'block'
   };
 
-  const styles$H = css `
-    ${display('inline-flex')}
+  const styles$K = css `
+    ${display$1('inline-flex')}
 
     :host {
         box-sizing: border-box;
@@ -20813,7 +20818,7 @@
             }
         `));
 
-  const styles$G = css `
+  const styles$J = css `
     .error-icon {
         display: none;
     }
@@ -20860,9 +20865,9 @@
       standard: 'standard'
   };
 
-  const styles$F = css `
-    ${styles$H}
-    ${styles$G}
+  const styles$I = css `
+    ${styles$K}
+    ${styles$J}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21704,7 +21709,7 @@
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$v,
-      styles: styles$F,
+      styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21749,8 +21754,8 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$E = css `
-    ${display('grid')}
+  const styles$H = css `
+    ${display$1('grid')}
 
     dialog {
         flex-direction: column;
@@ -22004,13 +22009,13 @@
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$u,
-      styles: styles$E,
+      styles: styles$H,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$D = css `
-    ${display('block')}
+  const styles$G = css `
+    ${display$1('block')}
 
     :host {
         position: absolute;
@@ -22306,7 +22311,7 @@
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$t,
-      styles: styles$D
+      styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24252,6 +24257,7 @@
       }
   }
   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
@@ -24536,6 +24542,10 @@
       }
   }
 
+  const styles$F = css `
+    ${display$1('none')}
+`;
+
   const supportedLabels$1 = {
       popupDismiss: popupDismissLabel,
       numericDecrement: numericDecrementLabel,
@@ -24580,7 +24590,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$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -24746,14 +24757,15 @@
       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$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$C = css `
-    ${display('flex')}
+  const styles$E = css `
+    ${display$1('flex')}
 
     :host {
         font: ${bodyFont};
@@ -24925,7 +24937,7 @@
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$s,
-      styles: styles$C
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
@@ -24941,6 +24953,10 @@
 
   const template$r = html `<template slot="mapping"></template>`;
 
+  const styles$D = css `
+    ${display$1('none')}
+`;
+
   /**
    * Maps data values to text.
    * One or more may be added as children of a nimble-table-column-mapping element. The
@@ -24953,7 +24969,8 @@
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$r
+      template: template$r,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -25023,7 +25040,8 @@
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$r
+      template: template$r,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -25046,7 +25064,8 @@
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$r
+      template: template$r,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -25062,12 +25081,13 @@
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$r
+      template: template$r,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
-  const styles$B = css `
-    ${display('grid')}
+  const styles$C = css `
+    ${display$1('grid')}
 
     :host {
         background: ${applicationBackgroundColor};
@@ -25138,7 +25158,7 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$B
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -25155,8 +25175,8 @@
       auto: 'auto'
   };
 
-  const styles$A = css `
-    ${display('inline-block')}
+  const styles$B = css `
+    ${display$1('inline-block')}
 
     :host {
         height: ${controlHeight};
@@ -25421,7 +25441,7 @@
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$q,
-      styles: styles$A,
+      styles: styles$B,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -25429,8 +25449,8 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$z = css `
-    ${display('grid')}
+  const styles$A = css `
+    ${display$1('grid')}
 
     :host {
         contain: layout;
@@ -25527,7 +25547,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$z,
+      styles: styles$A,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -25541,9 +25561,9 @@
       block: 'block'
   };
 
-  const styles$y = css `
-    ${display('inline-block')}
-    ${styles$G}
+  const styles$z = css `
+    ${display$1('inline-block')}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};
@@ -25757,7 +25777,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$y,
+      styles: styles$z,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -25800,8 +25820,8 @@
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$x = css `
-    ${display('inline-flex')}
+  const styles$y = css `
+    ${display$1('inline-flex')}
 
     :host {
         font: ${bodyFont};
@@ -25901,13 +25921,13 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$x,
+      styles: styles$y,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$w = css `
-    ${display('inline-block')}
+  const styles$x = css `
+    ${display$1('inline-block')}
 
     .positioning-region {
         display: flex;
@@ -25941,7 +25961,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$w,
+      styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43380,7 +43400,9 @@ img.ProseMirror-separator {
       },
   });
 
-  const styles$v = css `
+  const styles$w = css `
+    ${display$1('inline')}
+
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
@@ -43415,7 +43437,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$v,
+      styles: styles$w,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43447,8 +43469,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$u = css `
-    ${styles$H}
+  const styles$v = css `
+    ${styles$K}
 
     :host {
         height: auto;
@@ -43465,8 +43487,8 @@ img.ProseMirror-separator {
     }
 `;
 
-  const styles$t = css `
-    ${display('inline-flex')}
+  const styles$u = css `
+    ${display$1('inline-flex')}
 
     :host {
         background: ${applicationBackgroundColor};
@@ -43497,7 +43519,7 @@ img.ProseMirror-separator {
   const nimbleListbox = Listbox.compose({
       baseName: 'listbox',
       template: listboxTemplate,
-      styles: styles$t
+      styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListbox());
 
@@ -43764,7 +43786,7 @@ img.ProseMirror-separator {
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
       template: template$p,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -43874,9 +43896,9 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$s = css `
-    ${display('inline-flex')}
-    ${styles$G}
+  const styles$t = css `
+    ${display$1('inline-flex')}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};
@@ -58489,7 +58511,7 @@ img.ProseMirror-separator {
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$o,
-      styles: styles$s,
+      styles: styles$t,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -58504,8 +58526,8 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$r = css `
-    ${display('flex')}
+  const styles$s = css `
+    ${display$1('flex')}
 
     :host {
         font: ${bodyFont};
@@ -58617,15 +58639,15 @@ img.ProseMirror-separator {
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$n,
-      styles: styles$r
+      styles: styles$s
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$q = css `
-    ${styles$H}
-    ${styles$G}
+  const styles$r = css `
+    ${styles$K}
+    ${styles$J}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -58641,8 +58663,7 @@ img.ProseMirror-separator {
 
     .clear-button {
         order: 3;
-        width: auto;
-        height: auto;
+        height: ${controlSlimHeight};
         margin-left: ${smallPadding};
     }
 
@@ -58809,7 +58830,7 @@ img.ProseMirror-separator {
                             content-hidden
                             appearance="ghost"
                             @click="${(x, c) => x.clearClickHandler(c.event)}">
-                            <${iconXmarkTag} slot="start"></${iconXmarkTag}>
+                            <${iconTimesTag} slot="start"></${iconTimesTag}>
                         </${buttonTag}>
                     `)}
                     <div aria-hidden="true" class="indicator" part="indicator">
@@ -59750,7 +59771,7 @@ img.ProseMirror-separator {
       baseName: 'select',
       baseClass: Select$2,
       template: template$m,
-      styles: styles$q,
+      styles: styles$r,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -59763,8 +59784,8 @@ img.ProseMirror-separator {
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$p = css `
-    ${display('inline-grid')}
+  const styles$q = css `
+    ${display$1('inline-grid')}
 
     :host {
         height: ${spinnerSmallHeight};
@@ -59981,13 +60002,13 @@ img.ProseMirror-separator {
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
       template: template$l,
-      styles: styles$p
+      styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
 
-  const styles$o = css `
-    ${display('inline-flex')}
+  const styles$p = css `
+    ${display$1('inline-flex')}
 
     :host {
         outline: none;
@@ -60195,12 +60216,12 @@ img.ProseMirror-separator {
       baseClass: Switch$1,
       baseName: 'switch',
       template: template$k,
-      styles: styles$o
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$n = css `
-    ${display('inline-flex')}
+  const styles$o = css `
+    ${display$1('inline-flex')}
 
     :host {
         position: relative;
@@ -60310,12 +60331,12 @@ img.ProseMirror-separator {
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$n
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$m = css `
-    ${display('block')}
+  const styles$n = css `
+    ${display$1('block')}
 
     :host {
         box-sizing: border-box;
@@ -60334,7 +60355,7 @@ img.ProseMirror-separator {
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$m
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -64030,8 +64051,8 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$l = css `
-    ${display('flex')}
+  const styles$m = css `
+    ${display$1('flex')}
 
     :host {
         height: 480px;
@@ -64214,8 +64235,8 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$k = css `
-    ${display('flex')}
+  const styles$l = css `
+    ${display$1('flex')}
 
     :host {
         height: ${controlHeight};
@@ -64318,12 +64339,12 @@ img.ProseMirror-separator {
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
       template: template$j,
-      styles: styles$k
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$j = css `
+  const styles$k = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -64348,9 +64369,9 @@ img.ProseMirror-separator {
     }
 `;
 
-  const styles$i = css `
-    ${styles$j}
-    ${display('flex')}
+  const styles$j = css `
+    ${display$1('flex')}
+    ${styles$k}
 
     :host {
         width: fit-content;
@@ -64471,8 +64492,8 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$h = css `
-    ${display('flex')}
+  const styles$i = css `
+    ${display$1('flex')}
 
     :host {
         --ni-private-table-cell-nesting-level: 0;
@@ -64489,8 +64510,6 @@ img.ProseMirror-separator {
 
     .cell-view {
         overflow: hidden;
-        display: flex;
-        align-items: center;
     }
 
     .action-menu {
@@ -64574,7 +64593,7 @@ img.ProseMirror-separator {
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
       template: template$i,
-      styles: styles$h
+      styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -64916,14 +64935,14 @@ img.ProseMirror-separator {
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
       template: template$h,
-      styles: styles$i
+      styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$g = css `
-    ${display('grid')}
-    ${styles$j}
+  const styles$h = css `
+    ${display$1('grid')}
+    ${styles$k}
 
     :host {
         align-items: center;
@@ -64977,7 +64996,6 @@ img.ProseMirror-separator {
         padding-left: ${mediumPadding};
         ${userSelectNone}
         overflow: hidden;
-        display: flex;
     }
 
     .group-row-child-count {
@@ -65149,7 +65167,7 @@ img.ProseMirror-separator {
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
       template: template$g,
-      styles: styles$g
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -67938,14 +67956,12 @@ img.ProseMirror-separator {
   const nimbleTable = Table.compose({
       baseName: 'table',
       template: template$f,
-      styles: styles$l
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$f = css `
-    :host {
-        display: contents;
-    }
+  const styles$g = css `
+    ${display$1('contents')}
 
     .header-content {
         white-space: nowrap;
@@ -68048,12 +68064,15 @@ img.ProseMirror-separator {
       return ColumnWithPlaceholder;
   }
 
-  const styles$e = css `
+  const styles$f = css `
+    ${display$1('flex')}
+
     :host {
         width: fit-content;
         max-width: 100%;
         height: fit-content;
         align-self: center;
+        align-items: center;
     }
 
     nimble-anchor {
@@ -68159,7 +68178,7 @@ img.ProseMirror-separator {
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
       template: template$d,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -68245,7 +68264,9 @@ img.ProseMirror-separator {
     </span>
 `;
 
-  const styles$d = css `
+  const styles$e = css `
+    ${display$1('flex')}
+
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -68268,7 +68289,7 @@ img.ProseMirror-separator {
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
       template: template$c,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68387,7 +68408,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
       template: template$e,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68440,7 +68461,7 @@ img.ProseMirror-separator {
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
       template: template$c,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68472,7 +68493,13 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$c = css `
+  const styles$d = css `
+    ${display$1('flex')}
+
+    :host {
+        align-items: center;
+    }
+
     :host(.right-align) {
         margin-left: auto;
     }
@@ -68569,7 +68596,7 @@ img.ProseMirror-separator {
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
       template: template$b,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -68830,7 +68857,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
       template: template$e,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68847,7 +68874,7 @@ img.ProseMirror-separator {
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
       template: template$b,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68949,7 +68976,7 @@ img.ProseMirror-separator {
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
       template: template$c,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69002,7 +69029,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
       template: template$e,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69110,8 +69137,8 @@ img.ProseMirror-separator {
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$b = css `
-    ${styles$f}
+  const styles$c = css `
+    ${styles$g}
 
     slot[name='mapping'] {
         display: none;
@@ -69204,8 +69231,8 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$a = css `
-    ${display('inline-flex')}
+  const styles$b = css `
+    ${display$1('inline-flex')}
 
     :host {
         gap: ${smallPadding};
@@ -69379,15 +69406,15 @@ img.ProseMirror-separator {
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
       template: template$9,
-      styles: styles$a
+      styles: styles$b
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$9 = css `
-    ${display('inline-flex')}
+  const styles$a = css `
+    ${display$1('inline-flex')}
 
     :host {
         gap: ${smallPadding};
@@ -69499,7 +69526,7 @@ img.ProseMirror-separator {
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
       template: template$8,
-      styles: styles$9
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -69584,7 +69611,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
       template: template$a,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69613,7 +69640,7 @@ img.ProseMirror-separator {
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
       template: template$c,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69635,7 +69662,7 @@ img.ProseMirror-separator {
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
       template: template$b,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -70176,7 +70203,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
       template: template$7,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -70195,7 +70222,7 @@ img.ProseMirror-separator {
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
       template: template$b,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -70223,14 +70250,14 @@ img.ProseMirror-separator {
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
       template: template$e,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$8 = css `
-    ${display('grid')}
+  const styles$9 = css `
+    ${display$1('grid')}
 
     :host {
         box-sizing: border-box;
@@ -70272,12 +70299,12 @@ img.ProseMirror-separator {
       baseName: 'tabs',
       baseClass: Tabs$1,
       template: tabsTemplate,
-      styles: styles$8
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$7 = css `
-    ${display('flex')}
+  const styles$8 = css `
+    ${display$1('flex')}
 
     :host {
         align-items: center;
@@ -70311,7 +70338,7 @@ img.ProseMirror-separator {
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
       template: template$6,
-      styles: styles$7
+      styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
 
@@ -70320,9 +70347,9 @@ img.ProseMirror-separator {
       block: 'block'
   };
 
-  const styles$6 = css `
-    ${display('inline-flex')}
-    ${styles$G}
+  const styles$7 = css `
+    ${display$1('inline-flex')}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};
@@ -70649,7 +70676,7 @@ img.ProseMirror-separator {
       baseName: 'text-area',
       baseClass: TextArea$1,
       template: template$5,
-      styles: styles$6,
+      styles: styles$7,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -70666,9 +70693,9 @@ img.ProseMirror-separator {
       frameless: 'frameless'
   };
 
-  const styles$5 = css `
-    ${display('inline-block')}
-    ${styles$G}
+  const styles$6 = css `
+    ${display$1('inline-block')}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};
@@ -70932,7 +70959,7 @@ img.ProseMirror-separator {
       baseName: 'text-field',
       baseClass: TextField$1,
       template: textFieldTemplate,
-      styles: styles$5,
+      styles: styles$6,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -70949,8 +70976,8 @@ img.ProseMirror-separator {
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$4 = css `
-    ${display('inline-flex')}
+  const styles$5 = css `
+    ${display$1('inline-flex')}
 
     :host {
         font: ${tooltipCaptionFont};
@@ -71090,7 +71117,7 @@ img.ProseMirror-separator {
       baseName: 'tooltip',
       baseClass: Tooltip$1,
       template: template$4,
-      styles: styles$4
+      styles: styles$5
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
 
@@ -71178,8 +71205,8 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$3 = css `
-    ${display('block')}
+  const styles$4 = css `
+    ${display$1('block')}
 
     :host {
         ${
@@ -71396,13 +71423,13 @@ img.ProseMirror-separator {
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$3,
+      styles: styles$4,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$2 = css `
-    ${display('flex')}
+  const styles$3 = css `
+    ${display$1('flex')}
 
     :host {
         flex-direction: column;
@@ -71513,7 +71540,7 @@ img.ProseMirror-separator {
       baseName: 'tree-view',
       baseClass: TreeView$1,
       template: template$3,
-      styles: styles$2
+      styles: styles$3
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -71630,6 +71657,10 @@ img.ProseMirror-separator {
   }
   const byteUnitScale = new ByteUnitScale();
 
+  const styles$2 = css `
+    ${display$1('none')}
+`;
+
   /**
    * Element that provides a unit scale for conversion of bytes
    */
@@ -71654,7 +71685,8 @@ img.ProseMirror-separator {
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$2
+      template: template$2,
+      styles: styles$2
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -71706,7 +71738,8 @@ img.ProseMirror-separator {
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$2
+      template: template$2,
+      styles: styles$2
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -75088,8 +75121,9 @@ img.ProseMirror-separator {
 `;
 
   const styles$1 = css `
+    ${display$1('inline-block')}
+
     :host {
-        display: inline-block;
         width: 500px;
         height: 500px;
     }
@@ -78629,6 +78663,12 @@ img.ProseMirror-separator {
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
+  /**
+   * 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$2(displayValue)}`;
+
   const styles = css `
     ${display('inline-block')}