@ni/nimble-components 20.1.11 → 20.1.13

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 18 Aug 2023 11:17:54 GMT
+   * Generated on Mon, 21 Aug 2023 23:07:43 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16671,9 +16671,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$y = html `<slot></slot>`;
+  const template$A = html `<slot></slot>`;
 
-  const styles$S = css `
+  const styles$T = css `
     :host {
         display: contents;
     }
@@ -16729,8 +16729,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$S,
-      template: template$y
+      styles: styles$T,
+      template: template$A
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16923,7 +16923,7 @@
       }
   }
 
-  const styles$R = css `
+  const styles$S = css `
     ${display('inline')}
 
     :host {
@@ -17006,7 +17006,7 @@
 `;
 
   // prettier-ignore
-  const template$x = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17080,8 +17080,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$x,
-      styles: styles$R,
+      template: template$z,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17167,7 +17167,7 @@
       return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
   }
 
-  const styles$Q = css `
+  const styles$R = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17459,8 +17459,8 @@
             }
         `));
 
-  const styles$P = css `
-    ${styles$Q}
+  const styles$Q = css `
+    ${styles$R}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17468,7 +17468,7 @@
     }
 `;
 
-  const template$w = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17550,8 +17550,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$w,
-      styles: styles$P,
+      template: template$y,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17559,7 +17559,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   DesignSystem.tagFor(AnchorButton);
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('grid')}
 
     :host {
@@ -17636,7 +17636,7 @@
     }
 `;
 
-  const template$v = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17742,8 +17742,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$v,
-      styles: styles$O,
+      template: template$x,
+      styles: styles$P,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17767,7 +17767,7 @@
       }
   });
 
-  const styles$N = css `
+  const styles$O = css `
     ${display('inline-flex')}
 
     :host {
@@ -17883,7 +17883,7 @@
     }
 `;
 
-  const template$u = (context, definition) => html `
+  const template$w = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17935,8 +17935,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$u,
-      styles: styles$N,
+      template: template$w,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17944,7 +17944,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
   DesignSystem.tagFor(AnchorTab);
 
-  const styles$M = css `
+  const styles$N = css `
     ${display('grid')}
 
     :host {
@@ -17966,7 +17966,7 @@
     }
 `;
 
-  const template$t = (context, definition) => html `
+  const template$v = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18172,8 +18172,8 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$t,
-      styles: styles$M,
+      template: template$v,
+      styles: styles$N,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18190,7 +18190,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$L = css `
+  const styles$M = css `
     ${display('block')}
 
     :host {
@@ -18291,7 +18291,7 @@
     }
 `;
 
-  const template$s = (context, definition) => html `
+  const template$u = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18428,8 +18428,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$s,
-      styles: styles$L,
+      template: template$u,
+      styles: styles$M,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18439,7 +18439,7 @@
       .register(nimbleAnchorTreeItem());
   DesignSystem.tagFor(AnchorTreeItem);
 
-  const styles$K = css `
+  const styles$L = css `
     :host {
         contain: layout;
         display: block;
@@ -18463,7 +18463,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$K
+      styles: styles$L
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18543,7 +18543,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$J = css `
+  const styles$K = css `
     ${display('flex')}
 
     :host {
@@ -18701,8 +18701,8 @@
             }
         `));
 
-  const styles$I = css `
-    ${styles$Q}
+  const styles$J = css `
+    ${styles$R}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18748,7 +18748,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$I,
+      styles: styles$J,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19406,13 +19406,13 @@
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026 4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363Zm1.155-10.68-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312Z"/></svg>`
   };
 
-  const template$r = html `
+  const template$t = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-  const styles$H = css `
+  const styles$I = css `
     ${display('inline-flex')}
 
     :host {
@@ -19485,8 +19485,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$r,
-          styles: styles$H,
+          template: template$t,
+          styles: styles$I,
           baseClass: iconClass
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19575,7 +19575,7 @@
   }).withDefault(coreLabelDefaults.numericIncrementLabel);
 
   // prettier-ignore
-  const template$q = html `
+  const template$s = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19691,13 +19691,13 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$q,
-      styles: styles$J
+      template: template$s,
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
   DesignSystem.tagFor(Banner);
 
-  const styles$G = css `
+  const styles$H = css `
     ${display('inline-block')}
 
     :host {
@@ -19738,12 +19738,12 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$G
+      styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
   DesignSystem.tagFor(Breadcrumb);
 
-  const styles$F = css `
+  const styles$G = css `
     ${display('inline-flex')}
 
     :host {
@@ -19817,7 +19817,7 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$F,
+      styles: styles$G,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
@@ -19825,7 +19825,7 @@
       .register(nimbleBreadcrumbItem());
   DesignSystem.tagFor(BreadcrumbItem);
 
-  const styles$E = css `
+  const styles$F = css `
     ${display('inline-flex')}
 
     :host {
@@ -19984,7 +19984,7 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$E,
+      styles: styles$F,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19992,7 +19992,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   DesignSystem.tagFor(CardButton);
 
-  const styles$D = css `
+  const styles$E = css `
     ${display('inline-flex')}
 
     :host {
@@ -20110,15 +20110,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: checkboxTemplate,
-      styles: styles$D,
+      styles: styles$E,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = DesignSystem.tagFor(Checkbox);
 
-  const styles$C = css `
-    ${styles$Q}
+  const styles$D = css `
+    ${styles$R}
 
     @layer base {
         .control[aria-pressed='true'] {
@@ -20197,7 +20197,7 @@
     }
 `;
 
-  const template$p = (context, definition) => html `
+  const template$r = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20272,8 +20272,8 @@
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$p,
-      styles: styles$C,
+      template: template$r,
+      styles: styles$D,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20310,7 +20310,7 @@
       block: 'block'
   };
 
-  const styles$B = css `
+  const styles$C = css `
     ${display('inline-flex')}
 
     :host {
@@ -20536,7 +20536,7 @@
             }
         `));
 
-  const styles$A = css `
+  const styles$B = css `
     .error-icon {
         display: none;
     }
@@ -20570,9 +20570,9 @@
     }
 `;
 
-  const styles$z = css `
+  const styles$A = css `
+    ${styles$C}
     ${styles$B}
-    ${styles$A}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20653,7 +20653,7 @@
         `));
 
   // prettier-ignore
-  const template$o = (context, definition) => html `
+  const template$q = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -20924,8 +20924,8 @@
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: Combobox$1,
-      template: template$o,
-      styles: styles$z,
+      template: template$q,
+      styles: styles$A,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -20970,7 +20970,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$y = css `
+  const styles$z = css `
     ${display('grid')}
 
     dialog {
@@ -21086,7 +21086,7 @@
             }
         `));
 
-  const template$n = html `
+  const template$p = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21212,14 +21212,14 @@
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$n,
-      styles: styles$y,
+      template: template$p,
+      styles: styles$z,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
   DesignSystem.tagFor(Dialog);
 
-  const styles$x = css `
+  const styles$y = css `
     ${display('block')}
 
     :host {
@@ -21372,7 +21372,7 @@
             }
         `));
 
-  const template$m = html `
+  const template$o = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21486,8 +21486,8 @@
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$m,
-      styles: styles$x
+      template: template$o,
+      styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
   DesignSystem.tagFor(Drawer);
@@ -23684,7 +23684,7 @@
       .register(nimbleLabelProviderTable());
   DesignSystem.tagFor(LabelProviderTable);
 
-  const styles$w = css `
+  const styles$x = css `
     ${display('flex')}
 
     :host {
@@ -23772,7 +23772,7 @@
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: listboxOptionTemplate,
-      styles: styles$w
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   DesignSystem.tagFor(ListOption);
@@ -23789,7 +23789,7 @@
       attr()
   ], Mapping$1.prototype, "text", void 0);
 
-  const template$l = html `<template slot="mapping"></template>`;
+  const template$n = html `<template slot="mapping"></template>`;
 
   /**
    * Defines a mapping from one data value ('key' property) to display text ('text' property).
@@ -23800,12 +23800,87 @@
   }
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$l
+      template: template$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
   DesignSystem.tagFor(MappingText);
 
-  const styles$v = css `
+  function isIconClass(elementClass) {
+      return elementClass.prototype instanceof Icon;
+  }
+  /**
+   * Maps a data value to an icon.
+   * One or more may be added as children of a nimble-table-column-icon element to define
+   * how specific data values should be displayed as icons in that column's cells.
+   */
+  class MappingIcon extends Mapping$1 {
+      // Allow icons to be defined asynchronously from when the property is configured
+      async resolveIconAsync(icon) {
+          try {
+              // Clear the current resolution while waiting for async resolution
+              this.resolvedIcon = undefined;
+              await customElements.whenDefined(icon);
+          }
+          catch (ex) {
+              // If any error (i.e. invalid custom element name) don't continue
+              // Don't update the resolvedIcon as it was already set to undefined before async resolution
+              // (in case other async resolutions were started)
+              return;
+          }
+          if (icon !== this.icon) {
+              // Possible the icon has changed while waiting for async resolution
+              // Don't update the resolvedIcon as it was already set to undefined before async resolution
+              // (in case other async resolutions were started)
+              return;
+          }
+          const elementClass = customElements.get(icon);
+          this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;
+      }
+      iconChanged() {
+          const icon = this.icon;
+          if (!icon) {
+              this.resolvedIcon = undefined;
+              return;
+          }
+          const elementClass = customElements.get(icon);
+          if (elementClass) {
+              this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;
+              return;
+          }
+          void this.resolveIconAsync(icon);
+      }
+  }
+  __decorate$1([
+      attr()
+  ], MappingIcon.prototype, "icon", void 0);
+  __decorate$1([
+      attr()
+  ], MappingIcon.prototype, "severity", void 0);
+  __decorate$1([
+      observable
+  ], MappingIcon.prototype, "resolvedIcon", void 0);
+  const iconMapping = MappingIcon.compose({
+      baseName: 'mapping-icon',
+      template: template$n
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
+  DesignSystem.tagFor(MappingIcon);
+
+  /**
+   * Maps data values to a spinner.
+   * One or more may be added as children of a nimble-table-column-icon element to define
+   * which specific data values should be displayed as spinners in that column's cells.
+   */
+  class MappingSpinner extends Mapping$1 {
+  }
+  const spinnerMapping = MappingSpinner.compose({
+      baseName: 'mapping-spinner',
+      template: template$n
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
+  DesignSystem.tagFor(MappingSpinner);
+
+  const styles$w = css `
     ${display('grid')}
 
     :host {
@@ -23872,12 +23947,12 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$v
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   DesignSystem.tagFor(Menu);
 
-  const styles$u = css `
+  const styles$v = css `
     ${display('inline-block')}
 
     :host {
@@ -23896,7 +23971,7 @@
 `;
 
   // prettier-ignore
-  const template$k = html `
+  const template$m = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -24151,8 +24226,8 @@
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$k,
-      styles: styles$u,
+      template: template$m,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -24160,7 +24235,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-  const styles$t = css `
+  const styles$u = css `
     ${display('grid')}
 
     :host {
@@ -24258,7 +24333,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$t,
+      styles: styles$u,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -24273,9 +24348,9 @@
       block: 'block'
   };
 
-  const styles$s = css `
+  const styles$t = css `
     ${display('inline-block')}
-    ${styles$A}
+    ${styles$B}
 
     :host {
         font: ${bodyFont};
@@ -24489,7 +24564,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$s,
+      styles: styles$t,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -24531,7 +24606,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
   DesignSystem.tagFor(NumberField);
 
-  const styles$r = css `
+  const styles$s = css `
     ${display('inline-flex')}
 
     :host {
@@ -24632,13 +24707,13 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$r,
+      styles: styles$s,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
   DesignSystem.tagFor(Radio);
 
-  const styles$q = css `
+  const styles$r = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -24673,7 +24748,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$q,
+      styles: styles$r,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -42473,7 +42548,7 @@ img.ProseMirror-separator {
       group: 'inline',
   });
 
-  const styles$p = css `
+  const styles$q = css `
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
@@ -42508,7 +42583,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$p,
+      styles: styles$q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -42517,7 +42592,7 @@ img.ProseMirror-separator {
   const toolbarTag = DesignSystem.tagFor(Toolbar);
 
   // prettier-ignore
-  const template$j = html `
+  const template$l = html `
     <template>
         <div class="container">
             <section
@@ -42589,7 +42664,7 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$o = css `
+  const styles$p = css `
     ${display('inline-flex')}
 
     :host {
@@ -42902,8 +42977,8 @@ img.ProseMirror-separator {
   ], RichTextEditor.prototype, "numberedListButton", void 0);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$j,
-      styles: styles$o
+      template: template$l,
+      styles: styles$p
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -55630,11 +55705,11 @@ img.ProseMirror-separator {
       code_inline: { mark: "code", noCloseToken: true }
   });
 
-  const template$i = html `
+  const template$k = html `
     <div ${ref('viewer')} class="viewer"></div>
 `;
 
-  const styles$n = css `
+  const styles$o = css `
     ${display('flex')}
 
     :host {
@@ -55757,17 +55832,17 @@ img.ProseMirror-separator {
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$i,
-      styles: styles$n
+      template: template$k,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
   DesignSystem.tagFor(RichTextViewer);
 
-  const styles$m = css `
+  const styles$n = css `
+    ${styles$C}
     ${styles$B}
-    ${styles$A}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -55795,7 +55870,7 @@ img.ProseMirror-separator {
         `));
 
   // prettier-ignore
-  const template$h = (context, definition) => html `
+  const template$j = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -55933,8 +56008,8 @@ img.ProseMirror-separator {
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$1,
-      template: template$h,
-      styles: styles$m,
+      template: template$j,
+      styles: styles$n,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -55947,13 +56022,12 @@ img.ProseMirror-separator {
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
   DesignSystem.tagFor(Select);
 
-  const styles$l = css `
+  const styles$m = css `
     ${display('inline-flex')}
 
     :host {
         height: ${spinnerSmallHeight};
         aspect-ratio: 1 / 1;
-        --ni-private-spinner-animation-play-state: running;
     }
 
     div.container {
@@ -55983,7 +56057,10 @@ img.ProseMirror-separator {
         margin: auto;
         animation-duration: 1600ms;
         animation-iteration-count: infinite;
-        animation-play-state: var(--ni-private-spinner-animation-play-state);
+        animation-play-state: var(
+            --ni-private-spinner-animation-play-state,
+            running
+        );
         animation-timing-function: cubic-bezier(0.65, 0, 0.35, 0);
     }
 
@@ -56107,7 +56184,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const template$g = html `
+  const template$i = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -56145,13 +56222,13 @@ img.ProseMirror-separator {
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$g,
-      styles: styles$l
+      template: template$i,
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
-  DesignSystem.tagFor(Spinner);
+  const spinnerTag = DesignSystem.tagFor(Spinner);
 
-  const styles$k = css `
+  const styles$l = css `
     ${display('inline-flex')}
 
     :host {
@@ -56314,7 +56391,7 @@ img.ProseMirror-separator {
         `));
 
   // prettier-ignore
-  const template$f = html `
+  const template$h = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -56358,13 +56435,13 @@ img.ProseMirror-separator {
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$f,
-      styles: styles$k
+      template: template$h,
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
   DesignSystem.tagFor(Switch);
 
-  const styles$j = css `
+  const styles$k = css `
     ${display('inline-flex')}
 
     :host {
@@ -56475,12 +56552,12 @@ img.ProseMirror-separator {
       baseName: 'tab',
       baseClass: Tab$2,
       template: tabTemplate,
-      styles: styles$j
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
   DesignSystem.tagFor(Tab);
 
-  const styles$i = css `
+  const styles$j = css `
     ${display('block')}
 
     :host {
@@ -56500,7 +56577,7 @@ img.ProseMirror-separator {
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$i
+      styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
   DesignSystem.tagFor(TabPanel);
@@ -60222,7 +60299,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$h = css `
+  const styles$i = css `
     ${display('flex')}
 
     :host {
@@ -60402,7 +60479,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$g = css `
+  const styles$h = css `
     ${display('flex')}
 
     :host {
@@ -60424,7 +60501,7 @@ img.ProseMirror-separator {
 `;
 
   // prettier-ignore
-  const template$e = html `
+  const template$g = html `
     <template role="columnheader"
         aria-sort="${x => x.ariaSort}"
         ${'' /* Prevent header double clicks from selecting text */}
@@ -60485,13 +60562,13 @@ img.ProseMirror-separator {
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$e,
-      styles: styles$g
+      template: template$g,
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
-  const styles$f = css `
+  const styles$g = css `
     ${display('flex')}
 
     :host {
@@ -60580,7 +60657,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$e = css `
+  const styles$f = css `
     ${display('flex')}
 
     :host {
@@ -60613,7 +60690,7 @@ img.ProseMirror-separator {
 `;
 
   // prettier-ignore
-  const template$d = html `
+  const template$f = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
         ${x => x.cellViewTemplate}
         ${when(x => x.hasActionMenu, html `
@@ -60681,14 +60758,14 @@ img.ProseMirror-separator {
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$d,
-      styles: styles$e
+      template: template$f,
+      styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = DesignSystem.tagFor(TableCell);
 
   // prettier-ignore
-  const template$c = html `
+  const template$e = html `
     <template role="row" aria-selected=${x => x.ariaSelected}>
         ${when(x => x.selectable && !x.hideSelection, html `
             <span role="gridcell" class="checkbox-container">
@@ -60873,13 +60950,13 @@ img.ProseMirror-separator {
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$c,
-      styles: styles$f
+      template: template$e,
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = DesignSystem.tagFor(TableRow);
 
-  const styles$d = css `
+  const styles$e = css `
     ${display('grid')}
 
     :host {
@@ -60988,7 +61065,7 @@ img.ProseMirror-separator {
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$b = html `
+  const template$d = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -61122,14 +61199,14 @@ img.ProseMirror-separator {
   ], TableGroupRow.prototype, "animationClass", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$b,
-      styles: styles$d
+      template: template$d,
+      styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = DesignSystem.tagFor(TableGroupRow);
 
   // prettier-ignore
-  const template$a = html `
+  const template$c = html `
     <template
         role="grid"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
@@ -63480,13 +63557,13 @@ img.ProseMirror-separator {
   ], Table.prototype, "documentShiftKeyDown", void 0);
   const nimbleTable = Table.compose({
       baseName: 'table',
-      template: template$a,
-      styles: styles$h
+      template: template$c,
+      styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
   DesignSystem.tagFor(Table);
 
-  const styles$c = css `
+  const styles$d = css `
     :host {
         display: contents;
     }
@@ -63556,7 +63633,7 @@ img.ProseMirror-separator {
   // Avoiding a wrapping <template> and be careful about starting and ending whitspace
   // so the template can be composed into other column header templates
   // prettier-ignore
-  const template$9 = html `<span
+  const template$b = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -63632,7 +63709,7 @@ img.ProseMirror-separator {
       return GroupableColumn;
   }
 
-  const styles$b = css `
+  const styles$c = css `
     :host {
         width: fit-content;
         max-width: 100%;
@@ -63657,7 +63734,7 @@ img.ProseMirror-separator {
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$8 = html `
+  const template$a = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -63724,8 +63801,8 @@ img.ProseMirror-separator {
   ], TableColumnAnchorCellView.prototype, "text", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$8,
-      styles: styles$b
+      template: template$a,
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = DesignSystem.tagFor(TableColumnAnchorCellView);
@@ -63751,7 +63828,7 @@ img.ProseMirror-separator {
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$7 = html `
+  const template$9 = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -63760,7 +63837,7 @@ img.ProseMirror-separator {
     </span>
 `;
 
-  const styles$a = css `
+  const styles$b = css `
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -63782,8 +63859,8 @@ img.ProseMirror-separator {
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$7,
-      styles: styles$a
+      template: template$9,
+      styles: styles$b
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -63896,14 +63973,424 @@ img.ProseMirror-separator {
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$9,
-      styles: styles$c
+      template: template$b,
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnAnchor());
   DesignSystem.tagFor(TableColumnAnchor);
 
+  /**
+   * The base class for table columns that display fields of any type as text.
+   */
+  class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumn)) {
+      fieldNameChanged() {
+          this.columnInternals.dataRecordFieldNames = [this.fieldName];
+          this.columnInternals.operandDataRecordFieldName = this.fieldName;
+      }
+  }
+  __decorate$1([
+      attr({ attribute: 'field-name' })
+  ], TableColumnTextBase.prototype, "fieldName", void 0);
+
+  function formatNumericDate(formatter, date) {
+      if (typeof date === 'number') {
+          try {
+              return formatter.format(date);
+          }
+          catch (e) {
+              return '';
+          }
+      }
+      else {
+          return '';
+      }
+  }
+
+  /**
+   * The group header view for displaying date/time fields as text.
+   */
+  class TableColumnDateTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      groupHeaderValueChanged() {
+          this.updateText();
+      }
+      updateText() {
+          if (this.columnConfig?.formatter) {
+              this.text = formatNumericDate(this.columnConfig.formatter, this.groupHeaderValue);
+          }
+          else {
+              this.text = '';
+          }
+      }
+  }
+  const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
+      baseName: 'table-column-date-text-group-header-view',
+      template: template$9,
+      styles: styles$b
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(tableColumnDateTextGroupHeaderView());
+  const tableColumnDateTextGroupHeaderViewTag = DesignSystem.tagFor(TableColumnDateTextGroupHeaderView);
+
+  const template$8 = html `
+    <span
+        ${overflow('hasOverflow')}
+        title=${x => (x.hasOverflow && x.text ? x.text : null)}
+    >
+        ${x => x.text}
+    </span>
+`;
+
+  const styles$a = css `
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+
+  /**
+   * The cell view base class for displaying fields of any type as text.
+   */
+  class TableColumnTextCellViewBase extends TableCellView {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.hasOverflow = false;
+          /**
+           * Text to render in the cell.
+           */
+          this.text = '';
+      }
+  }
+  __decorate$1([
+      observable
+  ], TableColumnTextCellViewBase.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnTextCellViewBase.prototype, "text", void 0);
+
+  /**
+   * A cell view for displaying date/time fields as text
+   */
+  class TableColumnDateTextCellView extends TableColumnTextCellViewBase {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      cellRecordChanged() {
+          this.updateText();
+      }
+      updateText() {
+          if (this.columnConfig?.formatter) {
+              this.text = formatNumericDate(this.columnConfig.formatter, this.cellRecord?.value);
+          }
+          else {
+              this.text = '';
+          }
+      }
+  }
+  const dateTextCellView = TableColumnDateTextCellView.compose({
+      baseName: 'table-column-date-text-cell-view',
+      template: template$8,
+      styles: styles$a
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
+  const tableColumnDateTextCellViewTag = DesignSystem.tagFor(TableColumnDateTextCellView);
+
+  /**
+   * Generic Validator Utility extends Tracker Utility for validation purposes
+   */
+  class Validator extends Tracker {
+      isValid() {
+          return this.noneTracked();
+      }
+      getValidationFlags() {
+          return this.getTrackedItems();
+      }
+  }
+
+  /**
+   * Base column validator
+   */
+  class ColumnValidator extends Validator {
+      constructor(columnInternals, configValidityKeys) {
+          super(configValidityKeys);
+          this.columnInternals = columnInternals;
+      }
+      /**
+       * @returns whether the entire column configuration is valid
+       */
+      isValidColumn() {
+          return this.isValid();
+      }
+      /**
+       * @returns an object containing flags for various ways the configuation can be invalid
+       */
+      getValidity() {
+          return this.getValidationFlags();
+      }
+      /**
+       * Sets a particular validity condition flag's value, e.g. "hasInvalidFooValue" = true
+       */
+      setConditionValue(name, isInvalid) {
+          if (isInvalid) {
+              this.track(name);
+          }
+          else {
+              this.untrack(name);
+          }
+          this.updateColumnInternalsFlag();
+      }
+      updateColumnInternalsFlag() {
+          this.columnInternals.validConfiguration = this.isValid();
+      }
+  }
+
+  const dateTextValidityFlagNames = ['invalidCustomOptionsCombination'];
+  /**
+   * Validator for TableColumnDateText.
+   */
+  class TableColumnDateTextValidator extends ColumnValidator {
+      constructor(columnInternals) {
+          super(columnInternals, dateTextValidityFlagNames);
+      }
+      setCustomOptionsValidity(valid) {
+          this.setConditionValue('invalidCustomOptionsCombination', !valid);
+      }
+  }
+
+  // Should be used for attributes that are optional booleans, where true, false, and undefined all
+  // have separate meanings and must have distinct representations.
+  const optionalBooleanConverter = {
+      toView(value) {
+          return typeof value === 'boolean' ? value.toString() : null;
+      },
+      fromView(value) {
+          if (value === 'true' || value === true) {
+              return true;
+          }
+          if (value === 'false' || value === false) {
+              return false;
+          }
+          return undefined;
+      }
+  };
+
+  /**
+   * The table column for displaying dates/times as text.
+   */
+  class TableColumnDateText extends TableColumnTextBase {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.validator = new TableColumnDateTextValidator(this.columnInternals);
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.updateColumnConfig();
+      }
+      get validity() {
+          return this.validator.getValidity();
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnDateTextCellViewTag,
+              groupHeaderViewTag: tableColumnDateTextGroupHeaderViewTag,
+              delegatedEvents: [],
+              sortOperation: TableColumnSortOperation.basic
+          };
+      }
+      formatChanged() {
+          this.updateColumnConfig();
+      }
+      customLocaleMatcherChanged() {
+          this.updateColumnConfig();
+      }
+      customWeekdayChanged() {
+          this.updateColumnConfig();
+      }
+      customEraChanged() {
+          this.updateColumnConfig();
+      }
+      customYearChanged() {
+          this.updateColumnConfig();
+      }
+      customMonthChanged() {
+          this.updateColumnConfig();
+      }
+      customDayChanged() {
+          this.updateColumnConfig();
+      }
+      customHourChanged() {
+          this.updateColumnConfig();
+      }
+      customMinuteChanged() {
+          this.updateColumnConfig();
+      }
+      customSecondChanged() {
+          this.updateColumnConfig();
+      }
+      customTimeZoneNameChanged() {
+          this.updateColumnConfig();
+      }
+      customFormatMatcherChanged() {
+          this.updateColumnConfig();
+      }
+      customHour12Changed() {
+          this.updateColumnConfig();
+      }
+      customTimeZoneChanged() {
+          this.updateColumnConfig();
+      }
+      customCalendarChanged() {
+          this.updateColumnConfig();
+      }
+      customDayPeriodChanged() {
+          this.updateColumnConfig();
+      }
+      customNumberingSystemChanged() {
+          this.updateColumnConfig();
+      }
+      customDateStyleChanged() {
+          this.updateColumnConfig();
+      }
+      customTimeStyleChanged() {
+          this.updateColumnConfig();
+      }
+      customHourCycleChanged() {
+          this.updateColumnConfig();
+      }
+      updateColumnConfig() {
+          const columnConfig = {
+              formatter: this.createFormatter()
+          };
+          this.columnInternals.columnConfig = columnConfig;
+          this.validator.setCustomOptionsValidity(columnConfig.formatter !== undefined);
+      }
+      createFormatter() {
+          let options;
+          if (!this.format) {
+              options = {
+                  dateStyle: 'medium',
+                  timeStyle: 'medium'
+              };
+          }
+          else {
+              options = this.getCustomFormattingOptions();
+          }
+          try {
+              return new Intl.DateTimeFormat(undefined, options);
+          }
+          catch (e) {
+              return undefined;
+          }
+      }
+      getCustomFormattingOptions() {
+          // There's a FAST bug (https://github.com/microsoft/fast/issues/6630) where removing
+          // attributes sets their values to null instead of undefined. To work around this,
+          // translate null values to undefined.
+          const options = {
+              localeMatcher: this.customLocaleMatcher ?? undefined,
+              weekday: this.customWeekday ?? undefined,
+              era: this.customEra ?? undefined,
+              year: this.customYear ?? undefined,
+              month: this.customMonth ?? undefined,
+              day: this.customDay ?? undefined,
+              hour: this.customHour ?? undefined,
+              minute: this.customMinute ?? undefined,
+              second: this.customSecond ?? undefined,
+              timeZoneName: this.customTimeZoneName ?? undefined,
+              formatMatcher: this.customFormatMatcher ?? undefined,
+              hour12: this.customHour12 ?? undefined,
+              timeZone: this.customTimeZone ?? undefined,
+              calendar: this.customCalendar ?? undefined,
+              dayPeriod: this.customDayPeriod ?? undefined,
+              numberingSystem: this.customNumberingSystem ?? undefined,
+              dateStyle: this.customDateStyle ?? undefined,
+              timeStyle: this.customTimeStyle ?? undefined,
+              hourCycle: this.customHourCycle ?? undefined
+          };
+          return options;
+      }
+  }
+  __decorate$1([
+      attr
+  ], TableColumnDateText.prototype, "format", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-locale-matcher' })
+  ], TableColumnDateText.prototype, "customLocaleMatcher", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-weekday' })
+  ], TableColumnDateText.prototype, "customWeekday", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-era' })
+  ], TableColumnDateText.prototype, "customEra", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-year' })
+  ], TableColumnDateText.prototype, "customYear", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-month' })
+  ], TableColumnDateText.prototype, "customMonth", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-day' })
+  ], TableColumnDateText.prototype, "customDay", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-hour' })
+  ], TableColumnDateText.prototype, "customHour", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-minute' })
+  ], TableColumnDateText.prototype, "customMinute", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-second' })
+  ], TableColumnDateText.prototype, "customSecond", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-time-zone-name' })
+  ], TableColumnDateText.prototype, "customTimeZoneName", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-format-matcher' })
+  ], TableColumnDateText.prototype, "customFormatMatcher", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-hour12', converter: optionalBooleanConverter })
+  ], TableColumnDateText.prototype, "customHour12", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-time-zone' })
+  ], TableColumnDateText.prototype, "customTimeZone", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-calendar' })
+  ], TableColumnDateText.prototype, "customCalendar", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-day-period' })
+  ], TableColumnDateText.prototype, "customDayPeriod", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-numbering-system' })
+  ], TableColumnDateText.prototype, "customNumberingSystem", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-date-style' })
+  ], TableColumnDateText.prototype, "customDateStyle", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-time-style' })
+  ], TableColumnDateText.prototype, "customTimeStyle", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-hour-cycle' })
+  ], TableColumnDateText.prototype, "customHourCycle", void 0);
+  const nimbleTableColumnDateText = TableColumnDateText.compose({
+      baseName: 'table-column-date-text',
+      template: template$b,
+      styles: styles$d
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleTableColumnDateText());
+  DesignSystem.tagFor(TableColumnDateText);
+
   /**
    * Converts a Mapping key (which is a string when configured in HTML) to the
    * given keyType. The converted value can then be used to compare against
@@ -63955,7 +64442,6 @@ img.ProseMirror-separator {
       }
       /**
        * Called when any Mapping related state has changed.
-       * Implementations should run validation before updating the column config.
        */
       updateColumnConfig() {
           this.validator.validate(this.mappings, this.keyType);
@@ -64012,63 +64498,14 @@ img.ProseMirror-separator {
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
   const styles$9 = css `
-    ${styles$c}
+    ${styles$d}
 
     slot[name='mapping'] {
         display: none;
     }
 `;
 
-  const template$6 = html `${template$9}<slot ${slotted('mappings')} name="mapping"></slot>`;
-
-  /**
-   * Generic Validator Utility extends Tracker Utility for validation purposes
-   */
-  class Validator extends Tracker {
-      isValid() {
-          return this.noneTracked();
-      }
-      getValidationFlags() {
-          return this.getTrackedItems();
-      }
-  }
-
-  /**
-   * Base column validator
-   */
-  class ColumnValidator extends Validator {
-      constructor(columnInternals, configValidityKeys) {
-          super(configValidityKeys);
-          this.columnInternals = columnInternals;
-      }
-      /**
-       * @returns whether the entire column configuration is valid
-       */
-      isValidColumn() {
-          return this.isValid();
-      }
-      /**
-       * @returns an object containing flags for various ways the configuation can be invalid
-       */
-      getValidity() {
-          return this.getValidationFlags();
-      }
-      /**
-       * Sets a particular validity condition flag's value, e.g. "hasInvalidFooValue" = true
-       */
-      setConditionValue(name, isInvalid) {
-          if (isInvalid) {
-              this.track(name);
-          }
-          else {
-              this.untrack(name);
-          }
-          this.updateColumnInternalsFlag();
-      }
-      updateColumnInternalsFlag() {
-          this.columnInternals.validConfiguration = this.isValid();
-      }
-  }
+  const template$7 = html `${template$b}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -64126,51 +64563,11 @@ img.ProseMirror-separator {
    * Validator for TableColumnEnumText
    */
   class TableColumnEnumTextValidator extends TableColumnEnumBaseValidator {
-      constructor(columnInternals, supportedMappingElements) {
-          super(columnInternals, enumTextValidityFlagNames, supportedMappingElements);
+      constructor(columnInternals) {
+          super(columnInternals, enumTextValidityFlagNames, [MappingText]);
       }
   }
 
-  const styles$8 = css `
-    span {
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-`;
-
-  const template$5 = html `
-    <span
-        ${overflow('hasOverflow')}
-        title=${x => (x.hasOverflow && x.text ? x.text : null)}
-    >
-        ${x => x.text}
-    </span>
-`;
-
-  /**
-   * The cell view base class for displaying fields of any type as text.
-   */
-  class TableColumnTextCellViewBase extends TableCellView {
-      constructor() {
-          super(...arguments);
-          /** @internal */
-          this.hasOverflow = false;
-          /**
-           * Text to render in the cell.
-           */
-          this.text = '';
-      }
-  }
-  __decorate$1([
-      observable
-  ], TableColumnTextCellViewBase.prototype, "hasOverflow", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnTextCellViewBase.prototype, "text", void 0);
-
   /**
    * Common state shared across Mapping Config
    */
@@ -64203,13 +64600,15 @@ img.ProseMirror-separator {
               return;
           }
           const config = this.columnConfig?.mappingConfigs.get(value);
-          this.text = config instanceof MappingTextConfig ? config.text : '';
+          this.text = config instanceof MappingTextConfig && config.text
+              ? config.text
+              : '';
       }
   }
   const enumTextCellView = TableColumnEnumTextCellView.compose({
       baseName: 'table-column-enum-text-cell-view',
-      template: template$5,
-      styles: styles$8
+      template: template$8,
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(enumTextCellView());
   const tableColumnEnumTextCellViewTag = DesignSystem.tagFor(TableColumnEnumTextCellView);
@@ -64231,13 +64630,15 @@ img.ProseMirror-separator {
               return;
           }
           const config = this.columnConfig?.mappingConfigs.get(value);
-          this.text = config instanceof MappingTextConfig ? config.text : '';
+          this.text = config instanceof MappingTextConfig && config.text
+              ? config.text
+              : '';
       }
   }
   const enumTextGroupHeaderView = TableColumnEnumTextGroupHeaderView.compose({
       baseName: 'table-column-enum-text-group-header-view',
-      template: template$7,
-      styles: styles$a
+      template: template$9,
+      styles: styles$b
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -64249,9 +64650,7 @@ img.ProseMirror-separator {
    */
   class TableColumnEnumText extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
       createValidator() {
-          return new TableColumnEnumTextValidator(this.columnInternals, [
-              MappingText
-          ]);
+          return new TableColumnEnumTextValidator(this.columnInternals);
       }
       get validity() {
           return this.validator.getValidity();
@@ -64281,7 +64680,7 @@ img.ProseMirror-separator {
   }
   const nimbleTableColumnEnumText = TableColumnEnumText.compose({
       baseName: 'table-column-enum-text',
-      template: template$6,
+      template: template$7,
       styles: styles$9
   });
   DesignSystem.getOrCreate()
@@ -64289,18 +64688,263 @@ img.ProseMirror-separator {
       .register(nimbleTableColumnEnumText());
   DesignSystem.tagFor(TableColumnEnumText);
 
+  const iconValidityFlagNames = [
+      ...enumBaseValidityFlagNames,
+      'invalidIconName'
+  ];
+  /**
+   * Validator for TableColumnIcon
+   */
+  class TableColumnIconValidator extends TableColumnEnumBaseValidator {
+      constructor(columnInternals) {
+          super(columnInternals, iconValidityFlagNames, [
+              MappingIcon,
+              MappingSpinner
+          ]);
+      }
+      validate(mappings, keyType) {
+          super.validate(mappings, keyType);
+          this.validateIconNames(mappings);
+      }
+      validateIconNames(mappings) {
+          const isMappingIcon = (mapping) => mapping instanceof MappingIcon;
+          const invalid = mappings
+              .filter(isMappingIcon)
+              .some(mappingIcon => mappingIcon.resolvedIcon === undefined);
+          this.setConditionValue('invalidIconName', invalid);
+      }
+  }
+
+  const styles$8 = css `
+    ${display('inline-flex')}
+
+    :host {
+        gap: ${smallPadding};
+        align-items: center;
+    }
+
+    .no-shrink {
+        flex-shrink: 0;
+    }
+
+    span {
+        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', 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>
+    `)}
+`;
+
+  const createIconTemplate = (icon) => html `
+    <${icon}
+        title="${x => x.text}"
+        aria-label="${x => x.text}"
+        severity="${x => x.severity}"
+        class="no-shrink"
+    >
+    </${icon}>`;
   /**
-   * The base class for table columns that display fields of any type as text.
+   * Mapping configuration corresponding to a icon mapping
    */
-  class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumn)) {
-      fieldNameChanged() {
-          this.columnInternals.dataRecordFieldNames = [this.fieldName];
-          this.columnInternals.operandDataRecordFieldName = this.fieldName;
+  class MappingIconConfig extends MappingConfig {
+      constructor(resolvedIcon, severity, text) {
+          super(text);
+          this.severity = severity;
+          this.iconTemplate = createIconTemplate(resolvedIcon);
+      }
+  }
+
+  /**
+   * Mapping configuration corresponding to a spinner mapping
+   */
+  class MappingSpinnerConfig extends MappingConfig {
+      constructor(text) {
+          super(text);
+      }
+  }
+
+  /**
+   * The group header view for the icon column
+   */
+  class TableColumnIconGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      columnConfigChanged() {
+          this.updateState();
+      }
+      groupHeaderValueChanged() {
+          this.updateState();
+      }
+      updateState() {
+          this.visual = undefined;
+          if (!this.columnConfig) {
+              return;
+          }
+          const value = this.groupHeaderValue;
+          if (value === undefined || value === null) {
+              return;
+          }
+          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;
+          }
+          else if (mappingConfig instanceof MappingSpinnerConfig) {
+              this.visual = 'spinner';
+              this.text = mappingConfig.text ?? '';
+          }
       }
   }
   __decorate$1([
-      attr({ attribute: 'field-name' })
-  ], TableColumnTextBase.prototype, "fieldName", void 0);
+      observable
+  ], TableColumnIconGroupHeaderView.prototype, "severity", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnIconGroupHeaderView.prototype, "iconTemplate", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnIconGroupHeaderView.prototype, "visual", void 0);
+  const iconGroupHeaderView = TableColumnIconGroupHeaderView.compose({
+      baseName: 'table-column-icon-group-header-view',
+      template: template$6,
+      styles: styles$8
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(iconGroupHeaderView());
+  const tableColumnIconGroupHeaderViewTag = DesignSystem.tagFor(TableColumnIconGroupHeaderView);
+
+  const template$5 = 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}>
+    `)}
+`;
+
+  /**
+   * The cell view for the icon column
+   */
+  class TableColumnIconCellView extends TableCellView {
+      columnConfigChanged() {
+          this.updateState();
+      }
+      cellRecordChanged() {
+          this.updateState();
+      }
+      updateState() {
+          this.visual = undefined;
+          if (!this.columnConfig || !this.cellRecord) {
+              return;
+          }
+          const value = this.cellRecord.value;
+          if (value === undefined || value === null) {
+              return;
+          }
+          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;
+          }
+          else if (mappingConfig instanceof MappingSpinnerConfig) {
+              this.visual = 'spinner';
+              this.text = mappingConfig.text;
+          }
+      }
+  }
+  __decorate$1([
+      observable
+  ], TableColumnIconCellView.prototype, "severity", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnIconCellView.prototype, "text", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnIconCellView.prototype, "iconTemplate", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnIconCellView.prototype, "visual", void 0);
+  const iconCellView = TableColumnIconCellView.compose({
+      baseName: 'table-column-icon-cell-view',
+      template: template$5
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(iconCellView());
+  const tableColumnIconCellViewTag = DesignSystem.tagFor(TableColumnIconCellView);
+
+  /**
+   * Table column that maps values to icons / spinners
+   */
+  class TableColumnIcon extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
+      createValidator() {
+          return new TableColumnIconValidator(this.columnInternals);
+      }
+      get validity() {
+          return this.validator.getValidity();
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnIconCellViewTag,
+              groupHeaderViewTag: tableColumnIconGroupHeaderViewTag,
+              delegatedEvents: [],
+              sortOperation: TableColumnSortOperation.basic
+          };
+      }
+      createColumnConfig(mappingConfigs) {
+          return {
+              mappingConfigs
+          };
+      }
+      createMappingConfig(mapping) {
+          if (mapping instanceof MappingIcon) {
+              if (!mapping.resolvedIcon) {
+                  throw Error('Unresolved icon');
+              }
+              return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text);
+          }
+          if (mapping instanceof MappingSpinner) {
+              return new MappingSpinnerConfig(mapping.text);
+          }
+          // Getting here would indicate a programming error, b/c validation will prevent
+          // this function from running when there is an unsupported mapping.
+          throw new Error('Unsupported mapping');
+      }
+  }
+  const nimbleTableColumnIcon = TableColumnIcon.compose({
+      baseName: 'table-column-icon',
+      template: template$7,
+      styles: styles$9
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleTableColumnIcon());
+  DesignSystem.tagFor(TableColumnIcon);
 
   /**
    * A cell view for displaying string fields as text
@@ -64314,8 +64958,8 @@ img.ProseMirror-separator {
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$5,
-      styles: styles$8
+      template: template$8,
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = DesignSystem.tagFor(TableColumnTextCellView);
@@ -64336,8 +64980,8 @@ img.ProseMirror-separator {
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$9,
-      styles: styles$c
+      template: template$b,
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -64439,7 +65083,7 @@ img.ProseMirror-separator {
 
   const styles$5 = css `
     ${display('inline-flex')}
-    ${styles$A}
+    ${styles$B}
 
     :host {
         font: ${bodyFont};
@@ -64785,7 +65429,7 @@ img.ProseMirror-separator {
 
   const styles$4 = css `
     ${display('inline-block')}
-    ${styles$A}
+    ${styles$B}
 
     :host {
         font: ${bodyFont};