@ni/nimble-components 24.1.14 → 25.0.0

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 15 Apr 2024 17:21:28 GMT
+   * Generated on Wed, 17 Apr 2024 20:41:20 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16772,7 +16772,7 @@
 
   const template$F = html `<slot></slot>`;
 
-  const styles$X = css `
+  const styles$Y = css `
     :host {
         display: contents;
     }
@@ -16889,7 +16889,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$X,
+      styles: styles$Y,
       template: template$F
   });
   DesignSystem.getOrCreate()
@@ -17097,7 +17097,7 @@
       }
   }
 
-  const styles$W = css `
+  const styles$X = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -17276,7 +17276,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$E,
-      styles: styles$W,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17379,7 +17379,7 @@
     padding: 0;
 `;
 
-  const styles$V = css `
+  const styles$W = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17657,8 +17657,8 @@
             }
         `));
 
-  const styles$U = css `
-    ${styles$V}
+  const styles$V = css `
+    ${styles$W}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17761,7 +17761,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$D,
-      styles: styles$U,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17769,7 +17769,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$T = css `
+  const styles$U = css `
     ${display('grid')}
 
     :host {
@@ -17953,7 +17953,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$C,
-      styles: styles$T,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17962,7 +17962,7 @@
       .withPrefix('nimble')
       .register(nimbleAnchorMenuItem());
 
-  const styles$S = css `
+  const styles$T = css `
     ${display('inline-flex')}
 
     :host {
@@ -18132,14 +18132,14 @@
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$B,
-      styles: styles$S,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$R = css `
+  const styles$S = css `
     ${display('grid')}
 
     :host {
@@ -18368,7 +18368,7 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$A,
-      styles: styles$R,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18384,7 +18384,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display('block')}
 
     :host {
@@ -18628,7 +18628,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$z,
-      styles: styles$Q,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18644,7 +18644,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$P = css `
+  const styles$Q = css `
     :host {
         /* Avoid using the 'display' helper to customize hidden behavior */
         display: block;
@@ -18673,7 +18673,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$P
+      styles: styles$Q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18753,7 +18753,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('flex')}
 
     :host {
@@ -18896,8 +18896,8 @@
             }
         `));
 
-  const styles$N = css `
-    ${styles$V}
+  const styles$O = css `
+    ${styles$W}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18943,7 +18943,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$N,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19700,7 +19700,7 @@
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$M = css `
+  const styles$N = css `
     ${display('inline-flex')}
 
     :host {
@@ -19754,7 +19754,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$y,
-          styles: styles$M,
+          styles: styles$N,
           baseClass: iconClass
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19985,11 +19985,11 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$x,
-      styles: styles$O
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$L = css `
+  const styles$M = css `
     ${display('inline-block')}
 
     :host {
@@ -20030,11 +20030,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$L
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$K = css `
+  const styles$L = css `
     ${display('inline-flex')}
 
     :host {
@@ -20112,14 +20112,14 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$K,
+      styles: styles$L,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$J = css `
+  const styles$K = css `
     ${display('flex')}
 
     :host {
@@ -20159,11 +20159,11 @@
       baseName: 'card',
       baseClass: Card$1,
       template: template$w,
-      styles: styles$J
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$I = css `
+  const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -20322,14 +20322,14 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$I,
+      styles: styles$J,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$H = css `
+  const styles$I = css `
     ${display('inline-flex')}
 
     :host {
@@ -20447,15 +20447,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: checkboxTemplate,
-      styles: styles$H,
+      styles: styles$I,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$G = css `
-    ${styles$V}
+  const styles$H = css `
+    ${styles$W}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20581,7 +20581,7 @@
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$v,
-      styles: styles$G,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20618,7 +20618,7 @@
       block: 'block'
   };
 
-  const styles$F = css `
+  const styles$G = css `
     ${display('inline-flex')}
 
     :host {
@@ -20838,7 +20838,7 @@
             }
         `));
 
-  const styles$E = css `
+  const styles$F = css `
     .error-icon {
         display: none;
     }
@@ -20885,9 +20885,9 @@
       standard: 'standard'
   };
 
-  const styles$D = css `
+  const styles$E = css `
+    ${styles$G}
     ${styles$F}
-    ${styles$E}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21729,7 +21729,7 @@
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$u,
-      styles: styles$D,
+      styles: styles$E,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21774,7 +21774,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$C = css `
+  const styles$D = css `
     ${display('grid')}
 
     dialog {
@@ -22029,12 +22029,12 @@
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$t,
-      styles: styles$C,
+      styles: styles$D,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$B = css `
+  const styles$C = css `
     ${display('block')}
 
     :host {
@@ -22331,7 +22331,7 @@
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$s,
-      styles: styles$B
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24777,7 +24777,7 @@
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$A = css `
+  const styles$B = css `
     ${display('flex')}
 
     :host {
@@ -24938,7 +24938,7 @@
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$r,
-      styles: styles$A
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
@@ -24979,6 +24979,10 @@
    * how specific data values should be displayed as icons in that column's cells.
    */
   class MappingIcon extends Mapping$1 {
+      constructor() {
+          super(...arguments);
+          this.textHidden = false;
+      }
       // Allow icons to be defined asynchronously from when the property is configured
       async resolveIconAsync(icon) {
           try {
@@ -25024,6 +25028,9 @@
   __decorate$1([
       attr()
   ], MappingIcon.prototype, "text", void 0);
+  __decorate$1([
+      attr({ attribute: 'text-hidden', mode: 'boolean' })
+  ], MappingIcon.prototype, "textHidden", void 0);
   __decorate$1([
       observable
   ], MappingIcon.prototype, "resolvedIcon", void 0);
@@ -25039,17 +25046,24 @@
    * which specific data values should be displayed as spinners in that column's cells.
    */
   class MappingSpinner extends Mapping$1 {
+      constructor() {
+          super(...arguments);
+          this.textHidden = false;
+      }
   }
   __decorate$1([
       attr()
   ], MappingSpinner.prototype, "text", void 0);
+  __decorate$1([
+      attr({ attribute: 'text-hidden', mode: 'boolean' })
+  ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
       template: template$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
-  const styles$z = css `
+  const styles$A = css `
     ${display('grid')}
 
     :host {
@@ -25116,7 +25130,7 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$z
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -25133,7 +25147,7 @@
       auto: 'auto'
   };
 
-  const styles$y = css `
+  const styles$z = css `
     ${display('inline-block')}
 
     :host {
@@ -25399,7 +25413,7 @@
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$p,
-      styles: styles$y,
+      styles: styles$z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -25407,7 +25421,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$x = css `
+  const styles$y = css `
     ${display('grid')}
 
     :host {
@@ -25505,7 +25519,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$x,
+      styles: styles$y,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -25519,9 +25533,9 @@
       block: 'block'
   };
 
-  const styles$w = css `
+  const styles$x = css `
     ${display('inline-block')}
-    ${styles$E}
+    ${styles$F}
 
     :host {
         font: ${bodyFont};
@@ -25735,7 +25749,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$w,
+      styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -25778,7 +25792,7 @@
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$v = css `
+  const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -25879,12 +25893,12 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$v,
+      styles: styles$w,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$u = css `
+  const styles$v = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -25919,7 +25933,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$u,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43360,7 +43374,7 @@ img.ProseMirror-separator {
       },
   });
 
-  const styles$t = css `
+  const styles$u = css `
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
@@ -43395,7 +43409,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$t,
+      styles: styles$u,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43427,8 +43441,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$s = css `
-    ${styles$F}
+  const styles$t = css `
+    ${styles$G}
 
     :host {
         height: auto;
@@ -43445,7 +43459,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const styles$r = css `
+  const styles$s = css `
     ${display('inline-flex')}
 
     :host {
@@ -43477,7 +43491,7 @@ img.ProseMirror-separator {
   const nimbleListbox = Listbox.compose({
       baseName: 'listbox',
       template: listboxTemplate,
-      styles: styles$r
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListbox());
 
@@ -43744,7 +43758,7 @@ img.ProseMirror-separator {
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
       template: template$o,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -43854,9 +43868,9 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$q = css `
+  const styles$r = css `
     ${display('inline-flex')}
-    ${styles$E}
+    ${styles$F}
 
     :host {
         font: ${bodyFont};
@@ -58469,7 +58483,7 @@ img.ProseMirror-separator {
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$n,
-      styles: styles$q,
+      styles: styles$r,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -58484,7 +58498,7 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$p = css `
+  const styles$q = css `
     ${display('flex')}
 
     :host {
@@ -58597,15 +58611,15 @@ img.ProseMirror-separator {
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$m,
-      styles: styles$p
+      styles: styles$q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$o = css `
+  const styles$p = css `
+    ${styles$G}
     ${styles$F}
-    ${styles$E}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -59613,7 +59627,7 @@ img.ProseMirror-separator {
       baseName: 'select',
       baseClass: Select$2,
       template: template$l,
-      styles: styles$o,
+      styles: styles$p,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -59626,7 +59640,7 @@ img.ProseMirror-separator {
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$n = css `
+  const styles$o = css `
     ${display('inline-grid')}
 
     :host {
@@ -59844,12 +59858,12 @@ img.ProseMirror-separator {
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
       template: template$k,
-      styles: styles$n
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
 
-  const styles$m = css `
+  const styles$n = css `
     ${display('inline-flex')}
 
     :host {
@@ -60058,11 +60072,11 @@ img.ProseMirror-separator {
       baseClass: Switch$1,
       baseName: 'switch',
       template: template$j,
-      styles: styles$m
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$l = css `
+  const styles$m = css `
     ${display('inline-flex')}
 
     :host {
@@ -60173,11 +60187,11 @@ img.ProseMirror-separator {
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$l
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$k = css `
+  const styles$l = css `
     ${display('block')}
 
     :host {
@@ -60197,7 +60211,7 @@ img.ProseMirror-separator {
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$k
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -63876,7 +63890,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$j = css `
+  const styles$k = css `
     ${display('flex')}
 
     :host {
@@ -64060,7 +64074,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$i = css `
+  const styles$j = css `
     ${display('flex')}
 
     :host {
@@ -64157,12 +64171,12 @@ img.ProseMirror-separator {
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
       template: template$i,
-      styles: styles$i
+      styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$h = css `
+  const styles$i = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -64187,8 +64201,8 @@ img.ProseMirror-separator {
     }
 `;
 
-  const styles$g = css `
-    ${styles$h}
+  const styles$h = css `
+    ${styles$i}
     ${display('flex')}
 
     :host {
@@ -64310,7 +64324,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$f = css `
+  const styles$g = css `
     ${display('flex')}
 
     :host {
@@ -64413,7 +64427,7 @@ img.ProseMirror-separator {
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
       template: template$h,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -64755,14 +64769,14 @@ img.ProseMirror-separator {
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
       template: template$g,
-      styles: styles$g
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$e = css `
+  const styles$f = css `
     ${display('grid')}
-    ${styles$h}
+    ${styles$i}
 
     :host {
         align-items: center;
@@ -64988,7 +65002,7 @@ img.ProseMirror-separator {
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
       template: template$f,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -67706,11 +67720,11 @@ img.ProseMirror-separator {
   const nimbleTable = Table.compose({
       baseName: 'table',
       template: template$e,
-      styles: styles$j
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$d = css `
+  const styles$e = css `
     :host {
         display: contents;
     }
@@ -67816,7 +67830,7 @@ img.ProseMirror-separator {
       return ColumnWithPlaceholder;
   }
 
-  const styles$c = css `
+  const styles$d = css `
     :host {
         width: fit-content;
         max-width: 100%;
@@ -67927,7 +67941,7 @@ img.ProseMirror-separator {
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
       template: template$c,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -68013,7 +68027,7 @@ img.ProseMirror-separator {
     </span>
 `;
 
-  const styles$b = css `
+  const styles$c = css `
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -68036,7 +68050,7 @@ img.ProseMirror-separator {
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
       template: template$b,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68155,7 +68169,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
       template: template$d,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68208,7 +68222,7 @@ img.ProseMirror-separator {
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
       template: template$b,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68240,7 +68254,7 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$a = css `
+  const styles$b = css `
     :host(.right-align) {
         margin-left: auto;
     }
@@ -68337,7 +68351,7 @@ img.ProseMirror-separator {
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
       template: template$a,
-      styles: styles$a
+      styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -68598,7 +68612,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
       template: template$d,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68615,7 +68629,7 @@ img.ProseMirror-separator {
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
       template: template$a,
-      styles: styles$a
+      styles: styles$b
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68717,7 +68731,7 @@ img.ProseMirror-separator {
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
       template: template$b,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68770,7 +68784,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
       template: template$d,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -68878,8 +68892,8 @@ img.ProseMirror-separator {
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$9 = css `
-    ${styles$d}
+  const styles$a = css `
+    ${styles$e}
 
     slot[name='mapping'] {
         display: none;
@@ -68992,7 +69006,7 @@ img.ProseMirror-separator {
   const enumTextCellView = TableColumnEnumTextCellView.compose({
       baseName: 'table-column-enum-text-cell-view',
       template: template$a,
-      styles: styles$a
+      styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(enumTextCellView());
   const tableColumnEnumTextCellViewTag = 'nimble-table-column-enum-text-cell-view';
@@ -69011,7 +69025,7 @@ img.ProseMirror-separator {
   const enumTextGroupHeaderView = TableColumnEnumTextGroupHeaderView.compose({
       baseName: 'table-column-enum-text-group-header-view',
       template: template$b,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69049,7 +69063,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnEnumText = TableColumnEnumText.compose({
       baseName: 'table-column-enum-text',
       template: template$9,
-      styles: styles$9
+      styles: styles$a
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69078,7 +69092,7 @@ img.ProseMirror-separator {
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
       template: template$b,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69100,7 +69114,7 @@ img.ProseMirror-separator {
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
       template: template$a,
-      styles: styles$a
+      styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -69641,7 +69655,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
       template: template$8,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69694,7 +69708,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$8 = css `
+  const styles$9 = css `
     ${display('inline-flex')}
 
     :host {
@@ -69702,11 +69716,13 @@ img.ProseMirror-separator {
         align-items: center;
     }
 
-    .no-shrink {
+    .reserve-icon-size {
         flex-shrink: 0;
+        width: ${iconSize};
+        height: ${iconSize};
     }
 
-    span {
+    .text {
         flex-shrink: 1;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -69718,29 +69734,16 @@ img.ProseMirror-separator {
 
   // prettier-ignore
   const template$7 = html `
-    ${when(x => x.visual === 'icon', html `
-            ${x => x.iconTemplate}
-            <span    
-                ${overflow('hasOverflow')}
-                title="${x => (x.hasOverflow && x.text ? x.text : null)}"
-            >${x => x.text}</span>`)}
-    ${when(x => x.visual === 'spinner', html `
-        <${spinnerTag}
-            title="${x => x.text}"
-            aria-label="${x => x.text}"
-            class="no-shrink">
-        </${spinnerTag}>
-        <span    
-            ${overflow('hasOverflow')}
-            title="${x => (x.hasOverflow && x.text ? x.text : null)}"
-        >${x => x.text}</span>
-    `)}
-    ${when(x => x.visual === undefined, html `
-        <span    
-            ${overflow('hasOverflow')}
-            title="${x => (x.hasOverflow && x.text ? x.text : null)}"
-        >${x => x.text}</span>
-    `)}
+    ${when(x => x.visualizationTemplate, html `
+            <span class="reserve-icon-size">
+                ${x => x.visualizationTemplate}
+            </span>
+        `)}
+    <span
+        ${overflow('hasOverflow')}
+        title="${x => (x.hasOverflow && x.text ? x.text : null)}"
+        class="text"
+    >${x => x.text}</span>
 `;
 
   // Create an empty template containing only a space because creating a ViewTemplate
@@ -69753,11 +69756,11 @@ img.ProseMirror-separator {
       }
       return html `
         <${icon}
-            title="${x => x.text}"
+            title="${x => (x.textHidden ? x.text : '')}"
             role="img"
             aria-label="${x => x.text}"
+            aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
             severity="${x => x.severity}"
-            class="no-shrink"
         >
         </${icon}>
     `;
@@ -69766,19 +69769,30 @@ img.ProseMirror-separator {
    * Mapping configuration corresponding to a icon mapping
    */
   class MappingIconConfig extends MappingConfig {
-      constructor(resolvedIcon, severity, text) {
+      constructor(resolvedIcon, severity, text, textHidden) {
           super(text);
           this.severity = severity;
+          this.textHidden = textHidden;
           this.iconTemplate = createIconTemplate(resolvedIcon);
       }
   }
 
+  const spinnerTemplate = html `
+    <${spinnerTag}
+        title="${x => (x.textHidden ? x.text : '')}"
+        aria-label="${x => x.text}"
+        aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
+    >
+    </${spinnerTag}>
+`;
   /**
    * Mapping configuration corresponding to a spinner mapping
    */
   class MappingSpinnerConfig extends MappingConfig {
-      constructor(text) {
+      constructor(text, textHidden) {
           super(text);
+          this.textHidden = textHidden;
+          this.spinnerTemplate = spinnerTemplate;
       }
   }
 
@@ -69786,8 +69800,12 @@ img.ProseMirror-separator {
    * The group header view for the icon column
    */
   class TableColumnIconGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      constructor() {
+          super(...arguments);
+          this.textHidden = false;
+      }
       updateText() {
-          this.visual = undefined;
+          this.visualizationTemplate = undefined;
           if (!this.columnConfig) {
               this.text = '';
               return;
@@ -69795,14 +69813,13 @@ img.ProseMirror-separator {
           const value = this.groupHeaderValue;
           const mappingConfig = this.columnConfig.mappingConfigs.get(value);
           if (mappingConfig instanceof MappingIconConfig) {
-              this.visual = 'icon';
               this.severity = mappingConfig.severity;
               this.text = mappingConfig.text ?? '';
-              this.iconTemplate = mappingConfig.iconTemplate;
+              this.visualizationTemplate = mappingConfig.iconTemplate;
           }
           else if (mappingConfig instanceof MappingSpinnerConfig) {
-              this.visual = 'spinner';
               this.text = mappingConfig.text ?? '';
+              this.visualizationTemplate = mappingConfig.spinnerTemplate;
           }
       }
   }
@@ -69811,26 +69828,54 @@ img.ProseMirror-separator {
   ], TableColumnIconGroupHeaderView.prototype, "severity", void 0);
   __decorate$1([
       observable
-  ], TableColumnIconGroupHeaderView.prototype, "iconTemplate", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconGroupHeaderView.prototype, "visual", void 0);
+  ], TableColumnIconGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const iconGroupHeaderView = TableColumnIconGroupHeaderView.compose({
       baseName: 'table-column-icon-group-header-view',
       template: template$7,
-      styles: styles$8
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconGroupHeaderView());
   const tableColumnIconGroupHeaderViewTag = 'nimble-table-column-icon-group-header-view';
 
+  const styles$8 = css `
+    ${display('inline-flex')}
+
+    :host {
+        gap: ${smallPadding};
+        align-items: center;
+    }
+
+    .reserve-icon-size {
+        flex-shrink: 0;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .text {
+        flex-shrink: 1;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+
+  // prettier-ignore
   const template$6 = html `
-    ${when(x => x.visual === 'icon', x => x.iconTemplate)}
-    ${when(x => x.visual === 'spinner', html `
-        <${spinnerTag}
-            title="${x => x.text}"
-            aria-label="${x => x.text}"
-            class="no-shrink">
-        </${spinnerTag}>
+    ${when(x => x.visualizationTemplate, html `
+            <span class="reserve-icon-size">
+                ${x => x.visualizationTemplate}
+            </span>
+        `)}
+    ${when(x => !x.textHidden, html `
+        <span
+            ${overflow('hasOverflow')}
+            title=${x => (x.hasOverflow && x.text ? x.text : null)}
+            class="text"
+        >
+            ${x => x.text}
+        </span>
     `)}
 `;
 
@@ -69838,6 +69883,12 @@ img.ProseMirror-separator {
    * The cell view for the icon column
    */
   class TableColumnIconCellView extends TableCellView {
+      constructor() {
+          super(...arguments);
+          this.textHidden = false;
+          /** @internal */
+          this.hasOverflow = false;
+      }
       columnConfigChanged() {
           this.updateState();
       }
@@ -69845,7 +69896,7 @@ img.ProseMirror-separator {
           this.updateState();
       }
       updateState() {
-          this.visual = undefined;
+          this.visualizationTemplate = undefined;
           if (!this.columnConfig || !this.cellRecord) {
               return;
           }
@@ -69855,14 +69906,15 @@ img.ProseMirror-separator {
           }
           const mappingConfig = this.columnConfig.mappingConfigs.get(value);
           if (mappingConfig instanceof MappingIconConfig) {
-              this.visual = 'icon';
               this.severity = mappingConfig.severity;
               this.text = mappingConfig.text;
-              this.iconTemplate = mappingConfig.iconTemplate;
+              this.visualizationTemplate = mappingConfig.iconTemplate;
+              this.textHidden = mappingConfig.textHidden;
           }
           else if (mappingConfig instanceof MappingSpinnerConfig) {
-              this.visual = 'spinner';
               this.text = mappingConfig.text;
+              this.visualizationTemplate = mappingConfig.spinnerTemplate;
+              this.textHidden = mappingConfig.textHidden;
           }
       }
   }
@@ -69874,13 +69926,17 @@ img.ProseMirror-separator {
   ], TableColumnIconCellView.prototype, "text", void 0);
   __decorate$1([
       observable
-  ], TableColumnIconCellView.prototype, "iconTemplate", void 0);
+  ], TableColumnIconCellView.prototype, "visualizationTemplate", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnIconCellView.prototype, "textHidden", void 0);
   __decorate$1([
       observable
-  ], TableColumnIconCellView.prototype, "visual", void 0);
+  ], TableColumnIconCellView.prototype, "hasOverflow", void 0);
   const iconCellView = TableColumnIconCellView.compose({
       baseName: 'table-column-icon-cell-view',
-      template: template$6
+      template: template$6,
+      styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconCellView());
   const tableColumnIconCellViewTag = 'nimble-table-column-icon-cell-view';
@@ -69906,10 +69962,10 @@ img.ProseMirror-separator {
       }
       createMappingConfig(mapping) {
           if (mapping instanceof MappingIcon) {
-              return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text);
+              return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text, mapping.textHidden);
           }
           if (mapping instanceof MappingSpinner) {
-              return new MappingSpinnerConfig(mapping.text);
+              return new MappingSpinnerConfig(mapping.text, mapping.textHidden);
           }
           // Getting here would indicate a programming error, b/c validation will prevent
           // this function from running when there is an unsupported mapping.
@@ -69919,7 +69975,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnIcon = TableColumnIcon.compose({
       baseName: 'table-column-icon',
       template: template$9,
-      styles: styles$9
+      styles: styles$a
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -69938,7 +69994,7 @@ img.ProseMirror-separator {
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
       template: template$a,
-      styles: styles$a
+      styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -69966,7 +70022,7 @@ img.ProseMirror-separator {
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
       template: template$d,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -70065,7 +70121,7 @@ img.ProseMirror-separator {
 
   const styles$5 = css `
     ${display('inline-flex')}
-    ${styles$E}
+    ${styles$F}
 
     :host {
         font: ${bodyFont};
@@ -70411,7 +70467,7 @@ img.ProseMirror-separator {
 
   const styles$4 = css `
     ${display('inline-block')}
-    ${styles$E}
+    ${styles$F}
 
     :host {
         font: ${bodyFont};