@ni/nimble-components 20.1.0 → 20.1.2

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 02 Aug 2023 18:51:55 GMT
+   * Generated on Thu, 03 Aug 2023 22:33:38 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16671,9 +16671,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$w = html `<slot></slot>`;
+  const template$y = html `<slot></slot>`;
 
-  const styles$R = css `
+  const styles$S = css `
     :host {
         display: contents;
     }
@@ -16729,8 +16729,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$R,
-      template: template$w
+      styles: styles$S,
+      template: template$y
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16923,7 +16923,7 @@
       }
   }
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display('inline')}
 
     :host {
@@ -17006,7 +17006,7 @@
 `;
 
   // prettier-ignore
-  const template$v = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17080,8 +17080,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$v,
-      styles: styles$Q,
+      template: template$x,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17167,7 +17167,7 @@
       return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
   }
 
-  const styles$P = css `
+  const styles$Q = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17459,8 +17459,8 @@
             }
         `));
 
-  const styles$O = css `
-    ${styles$P}
+  const styles$P = css `
+    ${styles$Q}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17468,7 +17468,7 @@
     }
 `;
 
-  const template$u = (context, definition) => html `
+  const template$w = (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$u,
-      styles: styles$O,
+      template: template$w,
+      styles: styles$P,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17559,7 +17559,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   DesignSystem.tagFor(AnchorButton);
 
-  const styles$N = css `
+  const styles$O = css `
     ${display('grid')}
 
     :host {
@@ -17636,7 +17636,7 @@
     }
 `;
 
-  const template$t = (context, definition) => html `
+  const template$v = (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$t,
-      styles: styles$N,
+      template: template$v,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17767,7 +17767,7 @@
       }
   });
 
-  const styles$M = css `
+  const styles$N = css `
     ${display('inline-flex')}
 
     :host {
@@ -17873,8 +17873,8 @@
     }
 `;
 
-  const styles$L = css `
-    ${styles$M}
+  const styles$M = css `
+    ${styles$N}
 
     a {
         text-decoration: none;
@@ -17892,7 +17892,7 @@
     }
 `;
 
-  const template$s = (context, definition) => html `
+  const template$u = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17945,13 +17945,13 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$s,
-      styles: styles$L
+      template: template$u,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
   DesignSystem.tagFor(AnchorTab);
 
-  const styles$K = css `
+  const styles$L = css `
     ${display('grid')}
 
     :host {
@@ -17973,7 +17973,7 @@
     }
 `;
 
-  const template$r = (context, definition) => html `
+  const template$t = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18173,8 +18173,8 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$r,
-      styles: styles$K,
+      template: template$t,
+      styles: styles$L,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18191,7 +18191,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$J = css `
+  const styles$K = css `
     ${display('block')}
 
     :host {
@@ -18292,7 +18292,7 @@
     }
 `;
 
-  const template$q = (context, definition) => html `
+  const template$s = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18429,8 +18429,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$q,
-      styles: styles$J,
+      template: template$s,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18440,7 +18440,7 @@
       .register(nimbleAnchorTreeItem());
   DesignSystem.tagFor(AnchorTreeItem);
 
-  const styles$I = css `
+  const styles$J = css `
     :host {
         contain: layout;
         display: block;
@@ -18464,7 +18464,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$I
+      styles: styles$J
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18544,7 +18544,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$H = css `
+  const styles$I = css `
     ${display('flex')}
 
     :host {
@@ -18702,8 +18702,8 @@
             }
         `));
 
-  const styles$G = css `
-    ${styles$P}
+  const styles$H = css `
+    ${styles$Q}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18749,7 +18749,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$G,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19407,13 +19407,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$p = html `
+  const template$r = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-  const styles$F = css `
+  const styles$G = css `
     ${display('inline-flex')}
 
     :host {
@@ -19486,8 +19486,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$p,
-          styles: styles$F,
+          template: template$r,
+          styles: styles$G,
           baseClass: iconClass
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19576,7 +19576,7 @@
   }).withDefault(coreLabelDefaults.numericIncrementLabel);
 
   // prettier-ignore
-  const template$o = html `
+  const template$q = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19692,13 +19692,13 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$o,
-      styles: styles$H
+      template: template$q,
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
   DesignSystem.tagFor(Banner);
 
-  const styles$E = css `
+  const styles$F = css `
     ${display('inline-block')}
 
     :host {
@@ -19739,12 +19739,12 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$E
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
   DesignSystem.tagFor(Breadcrumb);
 
-  const styles$D = css `
+  const styles$E = css `
     ${display('inline-flex')}
 
     :host {
@@ -19818,7 +19818,7 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$D,
+      styles: styles$E,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
@@ -19826,7 +19826,7 @@
       .register(nimbleBreadcrumbItem());
   DesignSystem.tagFor(BreadcrumbItem);
 
-  const styles$C = css `
+  const styles$D = css `
     ${display('inline-flex')}
 
     :host {
@@ -19985,7 +19985,7 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$C,
+      styles: styles$D,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19993,7 +19993,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   DesignSystem.tagFor(CardButton);
 
-  const styles$B = css `
+  const styles$C = css `
     ${display('inline-flex')}
 
     :host {
@@ -20111,15 +20111,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: checkboxTemplate,
-      styles: styles$B,
+      styles: styles$C,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = DesignSystem.tagFor(Checkbox);
 
-  const styles$A = css `
-    ${styles$P}
+  const styles$B = css `
+    ${styles$Q}
 
     @layer base {
         .control[aria-pressed='true'] {
@@ -20198,7 +20198,7 @@
     }
 `;
 
-  const template$n = (context, definition) => html `
+  const template$p = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20273,8 +20273,8 @@
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$n,
-      styles: styles$A,
+      template: template$p,
+      styles: styles$B,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20311,7 +20311,7 @@
       block: 'block'
   };
 
-  const styles$z = css `
+  const styles$A = css `
     ${display('inline-flex')}
 
     :host {
@@ -20537,7 +20537,7 @@
             }
         `));
 
-  const styles$y = css `
+  const styles$z = css `
     .error-icon {
         display: none;
     }
@@ -20571,9 +20571,9 @@
     }
 `;
 
-  const styles$x = css `
+  const styles$y = css `
+    ${styles$A}
     ${styles$z}
-    ${styles$y}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20654,7 +20654,7 @@
         `));
 
   // prettier-ignore
-  const template$m = (context, definition) => html `
+  const template$o = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -20925,8 +20925,8 @@
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: Combobox$1,
-      template: template$m,
-      styles: styles$x,
+      template: template$o,
+      styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -20971,7 +20971,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$w = css `
+  const styles$x = css `
     ${display('grid')}
 
     dialog {
@@ -21087,7 +21087,7 @@
             }
         `));
 
-  const template$l = html `
+  const template$n = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21213,14 +21213,14 @@
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$l,
-      styles: styles$w,
+      template: template$n,
+      styles: styles$x,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
   DesignSystem.tagFor(Dialog);
 
-  const styles$v = css `
+  const styles$w = css `
     ${display('block')}
 
     :host {
@@ -21373,7 +21373,7 @@
             }
         `));
 
-  const template$k = html `
+  const template$m = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21487,8 +21487,8 @@
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$k,
-      styles: styles$v
+      template: template$m,
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
   DesignSystem.tagFor(Drawer);
@@ -23685,7 +23685,7 @@
       .register(nimbleLabelProviderTable());
   DesignSystem.tagFor(LabelProviderTable);
 
-  const styles$u = css `
+  const styles$v = css `
     ${display('flex')}
 
     :host {
@@ -23773,12 +23773,40 @@
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: listboxOptionTemplate,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   DesignSystem.tagFor(ListOption);
 
-  const styles$t = css `
+  /**
+   * Base class for mapping configuration elements
+   */
+  class Mapping extends FoundationElement {
+  }
+  __decorate$1([
+      attr()
+  ], Mapping.prototype, "key", void 0);
+  __decorate$1([
+      attr()
+  ], Mapping.prototype, "text", void 0);
+
+  const template$l = html `<template slot="mapping"></template>`;
+
+  /**
+   * Defines a mapping from one data value ('key' property) to display text ('text' property).
+   * One or more may be added as children of a nimble-table-column-enum-text element to define
+   * how a specific data value should be displayed as text in that column's cells.
+   */
+  class MappingText extends Mapping {
+  }
+  const textMapping = MappingText.compose({
+      baseName: 'mapping-text',
+      template: template$l
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
+  DesignSystem.tagFor(MappingText);
+
+  const styles$u = css `
     ${display('grid')}
 
     :host {
@@ -23845,12 +23873,12 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$t
+      styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   DesignSystem.tagFor(Menu);
 
-  const styles$s = css `
+  const styles$t = css `
     ${display('inline-block')}
 
     :host {
@@ -23869,7 +23897,7 @@
 `;
 
   // prettier-ignore
-  const template$j = html `
+  const template$k = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -24124,8 +24152,8 @@
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$j,
-      styles: styles$s,
+      template: template$k,
+      styles: styles$t,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -24133,7 +24161,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-  const styles$r = css `
+  const styles$s = css `
     ${display('grid')}
 
     :host {
@@ -24231,7 +24259,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$r,
+      styles: styles$s,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -24246,9 +24274,9 @@
       block: 'block'
   };
 
-  const styles$q = css `
+  const styles$r = css `
     ${display('inline-block')}
-    ${styles$y}
+    ${styles$z}
 
     :host {
         font: ${bodyFont};
@@ -24462,7 +24490,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$q,
+      styles: styles$r,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -24504,7 +24532,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
   DesignSystem.tagFor(NumberField);
 
-  const styles$p = css `
+  const styles$q = css `
     ${display('inline-flex')}
 
     :host {
@@ -24605,13 +24633,13 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$p,
+      styles: styles$q,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
   DesignSystem.tagFor(Radio);
 
-  const styles$o = css `
+  const styles$p = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -24646,7 +24674,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$o,
+      styles: styles$p,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -24654,11 +24682,11 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
   DesignSystem.tagFor(RadioGroup);
 
-  const template$i = html `
+  const template$j = html `
     <template> Rich Text Editor here. </template>
 `;
 
-  const styles$n = css `
+  const styles$o = css `
     ${display('flex')}
 
     :host {
@@ -24674,8 +24702,8 @@
   }
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$i,
-      styles: styles$n
+      template: template$j,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -40196,11 +40224,11 @@
       code_inline: { mark: "code", noCloseToken: true }
   });
 
-  const template$h = html `
+  const template$i = html `
     <div ${ref('viewer')} class="viewer"></div>
 `;
 
-  const styles$m = css `
+  const styles$n = css `
     ${display('flex')}
 
     :host {
@@ -40324,17 +40352,17 @@
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$h,
-      styles: styles$m
+      template: template$i,
+      styles: styles$n
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
   DesignSystem.tagFor(RichTextViewer);
 
-  const styles$l = css `
+  const styles$m = css `
+    ${styles$A}
     ${styles$z}
-    ${styles$y}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -40362,7 +40390,7 @@
         `));
 
   // prettier-ignore
-  const template$g = (context, definition) => html `
+  const template$h = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -40500,8 +40528,8 @@
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$1,
-      template: template$g,
-      styles: styles$l,
+      template: template$h,
+      styles: styles$m,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -40514,7 +40542,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
   DesignSystem.tagFor(Select);
 
-  const styles$k = css `
+  const styles$l = css `
     ${display('inline-flex')}
 
     :host {
@@ -40674,7 +40702,7 @@
             }
         `));
 
-  const template$f = html `
+  const template$g = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -40712,13 +40740,13 @@
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$f,
-      styles: styles$k
+      template: template$g,
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   DesignSystem.tagFor(Spinner);
 
-  const styles$j = css `
+  const styles$k = css `
     ${display('inline-flex')}
 
     :host {
@@ -40881,7 +40909,7 @@
         `));
 
   // prettier-ignore
-  const template$e = html `
+  const template$f = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -40925,8 +40953,8 @@
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$e,
-      styles: styles$j
+      template: template$f,
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
   DesignSystem.tagFor(Switch);
@@ -40940,12 +40968,12 @@
       baseName: 'tab',
       baseClass: Tab$2,
       template: tabTemplate,
-      styles: styles$M
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
   DesignSystem.tagFor(Tab);
 
-  const styles$i = css `
+  const styles$j = css `
     ${display('block')}
 
     :host {
@@ -40965,7 +40993,7 @@
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$i
+      styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
   DesignSystem.tagFor(TabPanel);
@@ -44519,6 +44547,11 @@
               .map(node => node.textContent?.trim())
               .join(' ');
       }
+      connectedCallback() {
+          super.connectedCallback();
+          // Done here to enforce consistency across headers as they may have custom templates
+          this.setAttribute('slot', this.columnInternals.uniqueId);
+      }
       sortDirectionChanged() {
           if (!this.sortingDisabled) {
               this.columnInternals.currentSortDirection = this.sortDirection;
@@ -44682,7 +44715,7 @@
       }
   }
 
-  const styles$h = css `
+  const styles$i = css `
     ${display('flex')}
 
     :host {
@@ -44862,7 +44895,7 @@
             }
         `));
 
-  const styles$g = css `
+  const styles$h = css `
     ${display('flex')}
 
     :host {
@@ -44884,7 +44917,7 @@
 `;
 
   // prettier-ignore
-  const template$d = html `
+  const template$e = html `
     <template role="columnheader"
         aria-sort="${x => x.ariaSort}"
         ${'' /* Prevent header double clicks from selecting text */}
@@ -44945,13 +44978,13 @@
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$d,
-      styles: styles$g
+      template: template$e,
+      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 {
@@ -45040,7 +45073,7 @@
             }
         `));
 
-  const styles$e = css `
+  const styles$f = css `
     ${display('flex')}
 
     :host {
@@ -45073,7 +45106,7 @@
 `;
 
   // prettier-ignore
-  const template$c = html `
+  const template$d = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
         ${x => x.cellViewTemplate}
         ${when(x => x.hasActionMenu, html `
@@ -45121,6 +45154,9 @@
   __decorate$1([
       observable
   ], TableCell.prototype, "recordId", void 0);
+  __decorate$1([
+      attr({ attribute: 'column-id' })
+  ], TableCell.prototype, "columnId", void 0);
   __decorate$1([
       attr({ attribute: 'has-action-menu', mode: 'boolean' })
   ], TableCell.prototype, "hasActionMenu", void 0);
@@ -45138,14 +45174,14 @@
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$c,
-      styles: styles$e
+      template: template$d,
+      styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = DesignSystem.tagFor(TableCell);
 
   // prettier-ignore
-  const template$b = html `
+  const template$c = html `
     <template role="row" aria-selected=${x => x.ariaSelected}>
         ${when(x => x.selectable && !x.hideSelection, html `
             <span role="gridcell" class="checkbox-container">
@@ -45170,6 +45206,7 @@
                         :cellState="${x => x.cellState}"
                         :cellViewTemplate="${x => x.column.columnInternals.cellViewTemplate}"
                         :column="${x => x.column}"
+                        column-id="${x => x.column.columnId}"
                         :recordId="${(_, c) => c.parent.recordId}"
                         ?has-action-menu="${x => !!x.column.actionMenuSlot}"
                         action-menu-label="${x => x.column.actionMenuLabel}"
@@ -45335,13 +45372,13 @@
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$b,
-      styles: styles$f
+      template: template$c,
+      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 {
@@ -45450,7 +45487,7 @@
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$a = html `
+  const template$b = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -45584,14 +45621,14 @@
   ], TableGroupRow.prototype, "animationClass", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$a,
-      styles: styles$d
+      template: template$b,
+      styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = DesignSystem.tagFor(TableGroupRow);
 
   // prettier-ignore
-  const template$9 = html `
+  const template$a = html `
     <template
         role="grid"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
@@ -47942,13 +47979,13 @@
   ], Table.prototype, "documentShiftKeyDown", void 0);
   const nimbleTable = Table.compose({
       baseName: 'table',
-      template: template$9,
-      styles: styles$h
+      template: template$a,
+      styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
   DesignSystem.tagFor(Table);
 
-  const styles$c = css `
+  const styles$d = css `
     :host {
         display: contents;
     }
@@ -48015,18 +48052,16 @@
       return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
   }
 
+  // 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$8 = html `
-    <template slot="${x => x.columnInternals.uniqueId}">
-        <span
-            ${overflow('hasOverflow')}
-            class="header-content"
-            title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
-        >
-            <slot ${ref('contentSlot')}></slot>
-        </span>
-    </template>
-`;
+  const template$9 = html `<span
+    ${overflow('hasOverflow')}
+    class="header-content"
+    title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
+>
+    <slot ${ref('contentSlot')}></slot>
+</span>`;
 
   // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
@@ -48096,7 +48131,7 @@
       return GroupableColumn;
   }
 
-  const styles$b = css `
+  const styles$c = css `
     :host {
         width: fit-content;
         max-width: 100%;
@@ -48121,7 +48156,7 @@
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$7 = html `
+  const template$8 = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord.href === 'string') {
@@ -48188,8 +48223,8 @@
   ], TableColumnAnchorCellView.prototype, "text", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$7,
-      styles: styles$b
+      template: template$8,
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = DesignSystem.tagFor(TableColumnAnchorCellView);
@@ -48215,7 +48250,7 @@
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$6 = html `
+  const template$7 = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -48224,7 +48259,7 @@
     </span>
 `;
 
-  const styles$a = css `
+  const styles$b = css `
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -48245,14 +48280,14 @@
       }
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
-      baseName: 'table-column-text-group-header',
-      template: template$6,
-      styles: styles$a
+      baseName: 'table-column-text-group-header-view',
+      template: template$7,
+      styles: styles$b
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(tableColumnTextGroupHeaderView());
-  const tableColumnTextGroupHeaderTag = DesignSystem.tagFor(TableColumnTextGroupHeaderView);
+  const tableColumnTextGroupHeaderViewTag = DesignSystem.tagFor(TableColumnTextGroupHeaderView);
 
   /**
    * A table column for displaying links.
@@ -48266,7 +48301,7 @@
           return {
               cellRecordFieldNames: ['label', 'href'],
               cellViewTag: tableColumnAnchorCellViewTag,
-              groupHeaderViewTag: tableColumnTextGroupHeaderTag,
+              groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,
               delegatedEvents: ['click'],
               sortOperation: TableColumnSortOperation.localeAwareCaseSensitive
           };
@@ -48360,8 +48395,8 @@
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$8,
-      styles: styles$c
+      template: template$9,
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -48369,27 +48404,232 @@
   DesignSystem.tagFor(TableColumnAnchor);
 
   /**
-   * The base class for table columns that display fields of any type as text.
+   * 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
+   * values in the table data.
    */
-  class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumn)) {
+  const resolveKeyWithType = (key, keyType) => {
+      if (keyType === 'number') {
+          const converted = nullableNumberConverter.fromView(key);
+          return converted === null ? undefined : converted;
+      }
+      if (keyType === 'boolean') {
+          if (key === false || key === 'false') {
+              return false;
+          }
+          if (key === true || key === 'true') {
+              return true;
+          }
+          return undefined;
+      }
+      return key?.toString() ?? undefined;
+  };
+
+  /**
+   * Base class for table columns that map values to content (e.g. nimble-table-column-enum-text and nimble-table-column-icon)
+   */
+  class TableColumnEnumBase extends TableColumn {
+      constructor() {
+          super(...arguments);
+          // To ensure the validator is available when other properties get initialized
+          // (which can trigger validation), declare the validator first.
+          /** @internal */
+          this.validator = this.createValidator();
+          /** @internal */
+          this.mappingNotifiers = [];
+          /** @internal */
+          this.mappings = [];
+          this.keyType = 'string';
+      }
+      /**
+       * @internal
+       *
+       * Triggers a request to update the columnConfig when any observable property on
+       * a mapping is updated.
+       */
+      handleChange(source, args) {
+          if (source instanceof Mapping && typeof args === 'string') {
+              this.updateColumnConfig();
+          }
+      }
+      /**
+       * 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);
+          this.columnInternals.columnConfig = this.validator.isValid()
+              ? this.createColumnConfig(this.getMappingConfigs())
+              : undefined;
+      }
+      getMappingConfigs() {
+          const mappingConfigs = new Map();
+          this.mappings.forEach(mapping => {
+              const key = resolveKeyWithType(mapping.key, this.keyType);
+              if (key === undefined) {
+                  throw Error('Key was invalid for type. Validation should have prevented this.');
+              }
+              const mappingConfig = this.createMappingConfig(mapping);
+              mappingConfigs.set(key, mappingConfig);
+          });
+          return mappingConfigs;
+      }
       fieldNameChanged() {
           this.columnInternals.dataRecordFieldNames = [this.fieldName];
           this.columnInternals.operandDataRecordFieldName = this.fieldName;
       }
+      mappingsChanged() {
+          this.updateColumnConfig();
+          this.observeMappings();
+      }
+      keyTypeChanged() {
+          this.updateColumnConfig();
+      }
+      removeMappingObservers() {
+          this.mappingNotifiers.forEach(notifier => {
+              notifier.unsubscribe(this);
+          });
+          this.mappingNotifiers = [];
+      }
+      observeMappings() {
+          this.removeMappingObservers();
+          for (const mapping of this.mappings) {
+              const notifier = Observable.getNotifier(mapping);
+              notifier.subscribe(this);
+              this.mappingNotifiers.push(notifier);
+          }
+      }
   }
+  __decorate$1([
+      observable
+  ], TableColumnEnumBase.prototype, "mappings", void 0);
   __decorate$1([
       attr({ attribute: 'field-name' })
-  ], TableColumnTextBase.prototype, "fieldName", void 0);
+  ], TableColumnEnumBase.prototype, "fieldName", void 0);
+  __decorate$1([
+      attr({ attribute: 'key-type' })
+  ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const template$5 = html `
-    <span
-        ${overflow('hasOverflow')}
-        title=${x => (x.hasOverflow && x.text ? x.text : null)}
-    >
-        ${x => x.text}
-    </span>
+  const styles$a = css `
+    ${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 enumBaseValidityFlagNames = [
+      'invalidMappingKeyValueForType',
+      'unsupportedMappingType',
+      'duplicateMappingKey',
+      'missingKeyValue',
+      'missingTextValue'
+  ];
+  /**
+   * Validator for TableColumnEnumText. Implementations MUST include enumBaseValidityFlagNames in validity flag names set.
+   */
+  class TableColumnEnumBaseValidator extends ColumnValidator {
+      constructor(columnInternals, configValidityKeys, supportedMappingElements) {
+          super(columnInternals, configValidityKeys);
+          this.supportedMappingElements = supportedMappingElements;
+      }
+      validate(mappings, keyType) {
+          this.untrackAll();
+          const keys = mappings.map(mapping => mapping.key);
+          this.validateKeyValuesForType(keys, keyType);
+          this.validateMappingTypes(mappings);
+          this.validateUniqueKeys(keys, keyType);
+          this.validateNoMissingKeys(mappings);
+          this.validateNoMissingText(mappings);
+      }
+      validateKeyValuesForType(keys, keyType) {
+          // Ignore undefined keys, because validateNoMissingKeys covers that case.
+          // We should only set 'invalidMappingKeyValueForType' when there is a key,
+          // but it isn't appropriate for the type.
+          const invalid = keys.some(key => key !== undefined
+              && resolveKeyWithType(key, keyType) === undefined);
+          this.setConditionValue('invalidMappingKeyValueForType', invalid);
+      }
+      validateMappingTypes(mappings) {
+          const valid = mappings.every(mapping => this.supportedMappingElements.some(mappingClass => mapping instanceof mappingClass));
+          this.setConditionValue('unsupportedMappingType', !valid);
+      }
+      validateUniqueKeys(keys, keyType) {
+          const typedKeys = keys.map(x => resolveKeyWithType(x, keyType));
+          const invalid = new Set(typedKeys).size !== typedKeys.length;
+          this.setConditionValue('duplicateMappingKey', invalid);
+      }
+      validateNoMissingKeys(mappings) {
+          const invalid = mappings.some(mapping => mapping.key === undefined);
+          this.setConditionValue('missingKeyValue', invalid);
+      }
+      validateNoMissingText(mappings) {
+          const invalid = mappings.some(mapping => mapping.text === undefined);
+          this.setConditionValue('missingTextValue', invalid);
+      }
+  }
+
+  const enumTextValidityFlagNames = [...enumBaseValidityFlagNames];
+  /**
+   * Validator for TableColumnEnumText
+   */
+  class TableColumnEnumTextValidator extends TableColumnEnumBaseValidator {
+      constructor(columnInternals, supportedMappingElements) {
+          super(columnInternals, enumTextValidityFlagNames, supportedMappingElements);
+      }
+  }
+
   const styles$9 = css `
     span {
         font: ${bodyFont};
@@ -48400,6 +48640,15 @@
     }
 `;
 
+  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.
    */
@@ -48421,6 +48670,137 @@
       observable
   ], TableColumnTextCellViewBase.prototype, "text", void 0);
 
+  /**
+   * Common state shared across Mapping Config
+   */
+  class MappingConfig {
+      constructor(text) {
+          this.text = text;
+      }
+  }
+
+  /**
+   * Mapping configuration corresponding to a text mapping
+   */
+  class MappingTextConfig extends MappingConfig {
+  }
+
+  /**
+   * A cell view for displaying mapped text
+   */
+  class TableColumnEnumTextCellView extends TableColumnTextCellViewBase {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      cellRecordChanged() {
+          this.updateText();
+      }
+      updateText() {
+          const value = this.cellRecord.value;
+          if (value === undefined || value === null) {
+              this.text = '';
+              return;
+          }
+          const config = this.columnConfig?.mappingConfigs.get(value);
+          this.text = config instanceof MappingTextConfig ? config.text : '';
+      }
+  }
+  const enumTextCellView = TableColumnEnumTextCellView.compose({
+      baseName: 'table-column-enum-text-cell-view',
+      template: template$5,
+      styles: styles$9
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(enumTextCellView());
+  const tableColumnEnumTextCellViewTag = DesignSystem.tagFor(TableColumnEnumTextCellView);
+
+  /**
+   * A group header view for enum columns
+   */
+  class TableColumnEnumTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      groupHeaderValueChanged() {
+          this.updateText();
+      }
+      updateText() {
+          const value = this.groupHeaderValue;
+          if (value === undefined || value === null) {
+              this.text = '';
+              return;
+          }
+          const config = this.columnConfig?.mappingConfigs.get(value);
+          this.text = config instanceof MappingTextConfig ? config.text : '';
+      }
+  }
+  const enumTextGroupHeaderView = TableColumnEnumTextGroupHeaderView.compose({
+      baseName: 'table-column-enum-text-group-header-view',
+      template: template$7,
+      styles: styles$b
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(enumTextGroupHeaderView());
+  const tableColumnEnumTextGroupHeaderViewTag = DesignSystem.tagFor(TableColumnEnumTextGroupHeaderView);
+
+  /**
+   * Table column that maps values to strings
+   */
+  class TableColumnEnumText extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
+      createValidator() {
+          return new TableColumnEnumTextValidator(this.columnInternals, [
+              MappingText
+          ]);
+      }
+      get validity() {
+          return this.validator.getValidity();
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnEnumTextCellViewTag,
+              groupHeaderViewTag: tableColumnEnumTextGroupHeaderViewTag,
+              delegatedEvents: [],
+              sortOperation: TableColumnSortOperation.basic
+          };
+      }
+      createColumnConfig(mappingConfigs) {
+          return {
+              mappingConfigs
+          };
+      }
+      createMappingConfig(mapping) {
+          if (mapping instanceof MappingText) {
+              return new MappingTextConfig(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 nimbleTableColumnEnumText = TableColumnEnumText.compose({
+      baseName: 'table-column-enum-text',
+      template: template$6,
+      styles: styles$a
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleTableColumnEnumText());
+  DesignSystem.tagFor(TableColumnEnumText);
+
+  /**
+   * 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);
+
   /**
    * A cell view for displaying string fields as text
    */
@@ -48447,7 +48827,7 @@
           return {
               cellRecordFieldNames: ['value'],
               cellViewTag: tableColumnTextCellViewTag,
-              groupHeaderViewTag: tableColumnTextGroupHeaderTag,
+              groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,
               delegatedEvents: [],
               sortOperation: TableColumnSortOperation.localeAwareCaseSensitive
           };
@@ -48455,8 +48835,8 @@
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$8,
-      styles: styles$c
+      template: template$9,
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -48558,7 +48938,7 @@
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$y}
+    ${styles$z}
 
     :host {
         font: ${bodyFont};
@@ -48904,7 +49284,7 @@
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$y}
+    ${styles$z}
 
     :host {
         font: ${bodyFont};