@ni/nimble-components 27.2.3 → 28.0.1

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 02 May 2024 18:40:05 GMT
+   * Generated on Tue, 07 May 2024 13:04:38 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -20588,7 +20588,7 @@
         position: relative;
         justify-content: center;
         ${userSelectNone}
-        min-width: 250px;
+        min-width: ${menuMinWidth};
         outline: none;
         vertical-align: top;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
@@ -24915,7 +24915,7 @@
 
   /**
    * 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-icon element to define
+   * One or more may be added as children of a nimble-table-column-mapping element to define
    * how a specific data value should be displayed as text in that column's cells.
    */
   class MappingText extends Mapping$1 {
@@ -24934,7 +24934,7 @@
   }
   /**
    * Maps a data value to an icon.
-   * One or more may be added as children of a nimble-table-column-icon element to define
+   * One or more may be added as children of a nimble-table-column-mapping element to define
    * how specific data values should be displayed as icons in that column's cells.
    */
   class MappingIcon extends Mapping$1 {
@@ -25001,7 +25001,7 @@
 
   /**
    * Maps data values to a spinner.
-   * One or more may be added as children of a nimble-table-column-icon element to define
+   * One or more may be added as children of a nimble-table-column-mapping element to define
    * which specific data values should be displayed as spinners in that column's cells.
    */
   class MappingSpinner extends Mapping$1 {
@@ -68847,1152 +68847,1155 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleTableColumnDurationText());
 
-  // Avoiding a wrapping <template> and be careful about starting and ending whitespace
-  // so the template can be composed into other column header templates
-  // prettier-ignore
-  const template$9 = html `<span
-    ${overflow('hasOverflow')}
-    class="header-content"
-    title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
->
-    <slot ${ref('contentSlot')}></slot>
-    <slot ${slotted({ property: 'unitElements', filter: elements() })} name="unit"></slot>
-</span>`;
-
-  /**
-   * The group header view for displaying number fields as text.
-   */
-  class TableColumnNumberTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      updateText() {
-          this.text = this.columnConfig?.formatter?.format(this.groupHeaderValue) ?? '';
-      }
-  }
-  const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
-      baseName: 'table-column-number-text-group-header-view',
-      template: template$b,
-      styles: styles$c
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(tableColumnNumberTextGroupHeaderView());
-  const tableColumnNumberTextGroupHeaderTag = 'nimble-table-column-number-text-group-header-view';
-
   /**
-   * A cell view for displaying number fields 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 TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
-      columnConfigChanged() {
-          super.columnConfigChanged();
-          this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
+  const resolveKeyWithType = (key, keyType) => {
+      if (keyType === 'number') {
+          const converted = nullableNumberConverter.fromView(key);
+          return converted === null ? undefined : converted;
       }
-      updateText() {
-          this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';
+      if (keyType === 'boolean') {
+          if (key === false || key === 'false') {
+              return false;
+          }
+          if (key === true || key === 'true') {
+              return true;
+          }
+          return undefined;
       }
-  }
-  const numberTextCellView = TableColumnNumberTextCellView.compose({
-      baseName: 'table-column-number-text-cell-view',
-      template: template$a,
-      styles: styles$b
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
-  const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
-
-  /**
-   * Formatting scheme for the number-text table column
-   */
-  const NumberTextFormat = {
-      default: undefined,
-      decimal: 'decimal'
-  };
-  /**
-   * The aligment of the value in the number-text table column.
-   * The `default` alignment is determined by the column's `NumberTextFormat`.
-   */
-  const NumberTextAlignment = {
-      default: undefined,
-      left: 'left',
-      right: 'right'
+      return key?.toString() ?? undefined;
   };
 
   /**
-   * The base class for unit formats.
+   * Base class for table columns that map values to content
    */
-  class UnitFormat {
+  class TableColumnEnumBase extends TableColumn {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.mappingNotifiers = [];
+          /** @internal */
+          this.mappings = [];
+          this.keyType = 'string';
+      }
       /**
-       * Formats a number value to a string.
-       * For nullish values or values that result in an exception being thrown, empty string is returned
+       * @internal
+       *
+       * Triggers a request to update the columnConfig when any observable property on
+       * a mapping is updated.
        */
-      format(value) {
-          if (typeof value !== 'number') {
-              return '';
-          }
-          try {
-              return this.tryFormat(value);
+      handleChange(source, args) {
+          if (source instanceof Mapping$1 && typeof args === 'string') {
+              this.updateColumnConfig();
           }
-          catch {
-              return '';
+      }
+      /**
+       * Called when any Mapping related state has changed.
+       */
+      updateColumnConfig() {
+          this.columnInternals.validator.validate(this.mappings, this.keyType);
+          this.columnInternals.columnConfig = this.checkValidity()
+              ? 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' })
+  ], TableColumnEnumBase.prototype, "fieldName", void 0);
+  __decorate$1([
+      attr({ attribute: 'key-type' })
+  ], TableColumnEnumBase.prototype, "keyType", void 0);
 
+  const styles$a = css `
+    ${styles$e}
+
+    slot[name='mapping'] {
+        display: none;
+    }
+`;
+
+  const template$9 = html `${template$d}<slot ${slotted('mappings')} name="mapping"></slot>`;
+
+  const enumBaseValidityFlagNames = [
+      'invalidMappingKeyValueForType',
+      'duplicateMappingKey',
+      'missingKeyValue'
+  ];
   /**
-   * A class that knows how to format a numeric value as a string that includes units.
+   * Validator base class for table columns containing mappings. Implementations MUST include enumBaseValidityFlagNames in validity flag names set.
    */
-  class ScaledUnitFormat {
-      constructor(scaledUnitFormatFactoryOptions) {
-          this.locale = scaledUnitFormatFactoryOptions.locale;
-          this.intlNumberFormatOptions = scaledUnitFormatFactoryOptions.intlNumberFormatOptions;
+  class TableColumnEnumBaseValidator extends ColumnValidator {
+      constructor(configValidityKeys) {
+          super(configValidityKeys);
+      }
+      validate(mappings, keyType) {
+          this.untrackAll();
+          const keys = mappings.map(mapping => mapping.key);
+          this.validateKeyValuesForType(keys, keyType);
+          this.validateUniqueKeys(keys, keyType);
+          this.validateNoMissingKeys(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);
+      }
+      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);
       }
   }
 
+  const mappingColumnValidityFlagNames = [
+      ...enumBaseValidityFlagNames,
+      'unsupportedMappingType',
+      'invalidIconName',
+      'missingTextValue'
+  ];
   /**
-   * A formatter for units that can be formatted/translated by Intl.NumberFormat
+   * Validator for TableColumnMapping
    */
-  class IntlNumberFormatScaledUnitFormat extends ScaledUnitFormat {
-      constructor(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions) {
-          super(scaledUnitFormatFactoryOptions);
-          this.formatter = new Intl.NumberFormat(this.locale, {
-              ...unitSpecificIntlNumberFormatOptions,
-              // Application configured options override unit specific options
-              ...this.intlNumberFormatOptions
-          });
+  class TableColumnMappingValidator extends TableColumnEnumBaseValidator {
+      constructor() {
+          super(mappingColumnValidityFlagNames);
       }
-      static createFactory(unitSpecificIntlNumberFormatOptions) {
-          return (scaledUnitFormatFactoryOptions) => new IntlNumberFormatScaledUnitFormat(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions);
+      static isIconMappingElement(mapping) {
+          return mapping instanceof MappingIcon;
       }
-      format(value) {
-          return this.formatter.format(value);
+      static isSupportedMappingElement(mapping) {
+          return (mapping instanceof MappingIcon
+              || mapping instanceof MappingSpinner
+              || mapping instanceof MappingText);
+      }
+      static hasUnresolvedIcon(mappingIcon) {
+          return (typeof mappingIcon.icon === 'string'
+              && mappingIcon.resolvedIcon === undefined);
+      }
+      validate(mappings, keyType) {
+          super.validate(mappings, keyType);
+          this.validateMappingTypes(mappings);
+          this.validateIconNames(mappings);
+          this.validateNoMissingText(mappings);
+      }
+      validateIconNames(mappings) {
+          const invalid = mappings
+              .filter(TableColumnMappingValidator.isIconMappingElement)
+              .some(TableColumnMappingValidator.hasUnresolvedIcon);
+          this.setConditionValue('invalidIconName', invalid);
+      }
+      validateNoMissingText(mappings) {
+          const invalid = mappings
+              .filter(TableColumnMappingValidator.isSupportedMappingElement)
+              .some(mapping => mapping.text === undefined);
+          this.setConditionValue('missingTextValue', invalid);
+      }
+      validateMappingTypes(mappings) {
+          const valid = mappings.every(TableColumnMappingValidator.isSupportedMappingElement);
+          this.setConditionValue('unsupportedMappingType', !valid);
       }
   }
 
+  const styles$9 = css `
+    ${display('inline-flex')}
+
+    :host {
+        gap: ${smallPadding};
+        align-items: center;
+    }
+
+    .reserve-icon-size {
+        flex-shrink: 0;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .text {
+        flex-shrink: 1;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+
+  // prettier-ignore
+  const template$8 = html `
+    ${when(x => x.visualizationTemplate, html `
+            <span class="reserve-icon-size">
+                ${x => x.visualizationTemplate}
+            </span>
+        `)}
+    <span
+        ${overflow('hasOverflow')}
+        title="${x => (x.hasOverflow && x.text ? x.text : null)}"
+        class="text"
+    >${x => x.text}</span>
+`;
+
   /**
-   * A unit that represents a scaled version of a base unit.
+   * Predefined icon appearance states
+   * @public
    */
-  class ScaledUnit {
-      constructor(scaleFactor, scaledUnitFormatFactory) {
-          this.scaleFactor = scaleFactor;
-          this.scaledUnitFormatFactory = scaledUnitFormatFactory;
-      }
-      isBase() {
-          return this.scaleFactor === 1;
-      }
-  }
+  const IconSeverity = {
+      default: undefined,
+      error: 'error',
+      warning: 'warning',
+      success: 'success',
+      information: 'information'
+  };
 
   /**
-   * A unit scale consisting of a set of scaled units.
+   * Common state shared across Mapping Config
    */
-  class UnitScale {
-      constructor(supportedScaledUnits) {
-          this.supportedScaledUnits = supportedScaledUnits;
-          const unitsSorted = supportedScaledUnits.every((curr, i, arr) => i === 0 || arr[i - 1].scaleFactor < curr.scaleFactor);
-          if (!unitsSorted) {
-              throw new Error('Supported scaled units must have unique and ordered scale factors');
-          }
-          const baseScaledUnit = supportedScaledUnits.find(x => x.isBase());
-          if (!baseScaledUnit) {
-              throw new Error('Supported scaled units must include a base scaled unit (scale factor=1)');
-          }
-          this.supportedScaledUnits = supportedScaledUnits;
-          this.baseScaledUnit = baseScaledUnit;
-      }
-      // Note that for the sake of reducing complexity in the implementation,
-      // we do NOT consider the effects of rounding when picking the unit to
-      // use for a given value. If formatting results in rounding, a value
-      // may be shown with an unexpected unit. Examples:
-      // - 999 bytes with two significant digits => "1000 bytes" (instead of "1 kB")
-      // - 0.00000000000000001 volts (= 0.01 fV) with one fractional digit => "0 fV" (instead of "0 volts")
-      scaleNumber(number) {
-          const magnitude = Math.abs(number);
-          const onlyBaseScaledUnit = this.supportedScaledUnits.length === 1;
-          if (onlyBaseScaledUnit
-              || magnitude === 0
-              || magnitude === Infinity
-              || Number.isNaN(magnitude)) {
-              return { scaledValue: number, scaledUnit: this.baseScaledUnit };
-          }
-          for (let i = this.supportedScaledUnits.length - 1; i >= 0; i -= 1) {
-              const scaledUnit = this.supportedScaledUnits[i];
-              if (magnitude / scaledUnit.scaleFactor >= 1) {
-                  return {
-                      scaledValue: number / scaledUnit.scaleFactor,
-                      scaledUnit
-                  };
-              }
-          }
-          const smallestUnit = this.supportedScaledUnits[0];
-          return {
-              scaledValue: number / smallestUnit.scaleFactor,
-              scaledUnit: smallestUnit
-          };
+  class MappingConfig {
+      constructor(text) {
+          this.text = text;
       }
   }
 
+  // Create an empty template containing only a space because creating a ViewTemplate
+  // with an empty string throws an exception at runtime.
+  // prettier-ignore
+  const emptyTemplate = html ` `;
+  const createIconTemplate = (icon) => {
+      if (icon === undefined) {
+          return emptyTemplate;
+      }
+      return html `
+        <${icon}
+            title="${x => (x.textHidden ? x.text : '')}"
+            role="img"
+            aria-label="${x => x.text}"
+            aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
+            severity="${x => x.severity}"
+        >
+        </${icon}>
+    `;
+  };
   /**
-   * Unit scale that is used to passthrough a number without applying scaling or units
+   * Mapping configuration corresponding to a icon mapping
    */
-  class PassthroughUnitScale extends UnitScale {
-      constructor() {
-          super([
-              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory({}))
-          ]);
+  class MappingIconConfig extends MappingConfig {
+      constructor(resolvedIcon, severity, text, textHidden) {
+          super(text);
+          this.severity = severity;
+          this.textHidden = textHidden;
+          this.iconTemplate = createIconTemplate(resolvedIcon);
       }
   }
-  const passthroughUnitScale = new PassthroughUnitScale();
 
-  // Workaround to avoid ts errors about signDisplay not accepting the value 'negative'.
-  // It has been supported by browsers since 8/23, but TypeScript still hasn't
-  // added it to the type definitions. See https://github.com/microsoft/TypeScript/issues/56269
-  const signDisplay = 'negative';
+  const spinnerTemplate = html `
+    <${spinnerTag}
+        title="${x => (x.textHidden ? x.text : '')}"
+        aria-label="${x => x.text}"
+        aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
+    >
+    </${spinnerTag}>
+`;
   /**
-   * Format for numbers with units to show in a tabular form.
-   * Large and tiny numbers are shown exponentially and the rest as decimal.
+   * Mapping configuration corresponding to a spinner mapping
    */
-  class DefaultUnitFormat extends UnitFormat {
-      constructor(locale, { unitScale = passthroughUnitScale } = {
-          unitScale: passthroughUnitScale
-      }) {
-          super();
-          // Format options to use by default. It renders the number with a maximum of 6 signficant digits (including zero before decimal point).
-          this.defaultIntlNumberFormatOptions = {
-              maximumSignificantDigits: DefaultUnitFormat.maximumDigits,
-              maximumFractionDigits: DefaultUnitFormat.maximumDigits - 1,
-              roundingPriority: 'lessPrecision',
-              signDisplay
-          };
-          this.defaultScaledUnitFormatters = new Map();
-          // Format options for numbers that should be displayed in exponential notation. This should be used
-          // for numbers with magintudes over 'exponentialUpperBound' or under 'exponentialLowerBound'.
-          this.exponentialIntlNumberFormatOptions = {
-              maximumSignificantDigits: DefaultUnitFormat.maximumDigits,
-              notation: 'scientific',
-              signDisplay
-          };
-          for (const unit of unitScale.supportedScaledUnits) {
-              this.defaultScaledUnitFormatters.set(unit.scaleFactor, unit.scaledUnitFormatFactory({
-                  locale,
-                  intlNumberFormatOptions: this.defaultIntlNumberFormatOptions
-              }));
-          }
-          this.exponentialScaledUnitFormatter = unitScale.baseScaledUnit.scaledUnitFormatFactory({
-              locale,
-              intlNumberFormatOptions: this.exponentialIntlNumberFormatOptions
-          });
-          this.unitScale = unitScale;
-      }
-      resolvedOptions() {
-          return {
-              unitScale: this.unitScale
-          };
-      }
-      tryFormat(number) {
-          const { scaledValue, scaledUnit } = this.unitScale.scaleNumber(number);
-          const absoluteValue = Math.abs(scaledValue);
-          const useExponential = absoluteValue !== 0
-              && (absoluteValue >= DefaultUnitFormat.exponentialUpperBound
-                  || absoluteValue < DefaultUnitFormat.exponentialLowerBound);
-          return useExponential
-              ? this.exponentialScaledUnitFormatter.format(number)
-              : this.defaultScaledUnitFormatters
-                  .get(scaledUnit.scaleFactor)
-                  .format(scaledValue);
+  class MappingSpinnerConfig extends MappingConfig {
+      constructor(text, textHidden) {
+          super(text);
+          this.textHidden = textHidden;
+          this.spinnerTemplate = spinnerTemplate;
       }
   }
-  // The maximum number of digits that should be rendered for any given value.
-  DefaultUnitFormat.maximumDigits = 6;
-  // Use exponential notation for numbers that will be rendered with 3 leading 0s or more.
-  // Because a maximum of 6 digits are rendered, showing more than 3 leading 0s is not ideal
-  // because then at least half of the displayed digits will be leading 0s.
-  DefaultUnitFormat.exponentialLowerBound = 0.000995;
-  // Use exponential formatting for numbers whose magnitude cannot otherwise be displayed
-  // with 6 digits or less.
-  DefaultUnitFormat.exponentialUpperBound = 999999.5;
 
   /**
-   * Format for decimal numbers with units.
+   * Mapping configuration corresponding to a text mapping
    */
-  class DecimalUnitFormat extends UnitFormat {
-      constructor(locale, { minimumFractionDigits = 0, maximumFractionDigits = Math.max(3, minimumFractionDigits), unitScale = passthroughUnitScale } = {
-          minimumFractionDigits: 0,
-          maximumFractionDigits: 3,
-          unitScale: passthroughUnitScale
-      }) {
-          super();
-          this.scaledUnitFormatters = new Map();
-          // Workaround to avoid a ts error about signDisplay not accepting the value 'negative'.
-          // It has been supported by browsers since 8/23, but TypeScript still hasn't
-          // added it to the type definitions. See https://github.com/microsoft/TypeScript/issues/56269
-          const signDisplay = 'negative';
-          const intlNumberFormatOptions = {
-              maximumFractionDigits,
-              minimumFractionDigits,
-              signDisplay
-          };
-          for (const scaledUnit of unitScale.supportedScaledUnits) {
-              this.scaledUnitFormatters.set(scaledUnit.scaleFactor, scaledUnit.scaledUnitFormatFactory({
-                  locale,
-                  intlNumberFormatOptions
-              }));
-          }
-          this.unitScale = unitScale;
-          this.minimumFractionDigits = minimumFractionDigits;
-          this.maximumFractionDigits = maximumFractionDigits;
-      }
-      resolvedOptions() {
-          return {
-              unitScale: this.unitScale,
-              maximumFractionDigits: this.maximumFractionDigits,
-              minimumFractionDigits: this.minimumFractionDigits
-          };
-      }
-      tryFormat(number) {
-          const { scaledValue, scaledUnit } = this.unitScale.scaleNumber(number);
-          const scaledUnitFormatter = this.scaledUnitFormatters.get(scaledUnit.scaleFactor);
-          return scaledUnitFormatter.format(scaledValue);
-      }
+  class MappingTextConfig extends MappingConfig {
   }
 
   /**
-   * Format for numbers (with optional units) in a number-text table column.
+   * The group header view for the mapping column
    */
-  class NumberTextUnitFormat extends UnitFormat {
-      constructor(locale, options) {
-          super();
-          this._resolvedOptions = this.resolveOptions(options);
-          this.resolvedUnitFormat = this.resolveUnitFormat(locale, this._resolvedOptions);
-      }
-      resolvedOptions() {
-          return { ...this._resolvedOptions };
-      }
-      optionsMatch(targetOptions) {
-          const targetResolvedOptions = this.resolveOptions(targetOptions);
-          return (this._resolvedOptions.decimalDigits
-              === targetResolvedOptions.decimalDigits
-              && this._resolvedOptions.decimalMaximumDigits
-                  === targetResolvedOptions.decimalMaximumDigits
-              && this._resolvedOptions.numberTextFormat
-                  === targetResolvedOptions.numberTextFormat
-              && this._resolvedOptions.unitScale === targetResolvedOptions.unitScale);
-      }
-      tryFormat(number) {
-          return this.resolvedUnitFormat.format(number);
+  class TableColumnMappingGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      constructor() {
+          super(...arguments);
+          this.textHidden = false;
       }
-      resolveUnitFormat(locale, options) {
-          const { numberTextFormat, decimalMaximumDigits, decimalDigits, unitScale } = options;
-          if (numberTextFormat === NumberTextFormat.default) {
-              return new DefaultUnitFormat(locale, {
-                  unitScale
-              });
-          }
-          if (typeof decimalDigits === 'number') {
-              return new DecimalUnitFormat(locale, {
-                  minimumFractionDigits: decimalDigits,
-                  maximumFractionDigits: decimalDigits,
-                  unitScale
-              });
+      updateText() {
+          this.resetState();
+          if (!this.columnConfig) {
+              return;
           }
-          return new DecimalUnitFormat(locale, {
-              minimumFractionDigits: 0,
-              maximumFractionDigits: decimalMaximumDigits,
-              unitScale
-          });
-      }
-      resolveOptions(options) {
-          if (!options || options.numberTextFormat === NumberTextFormat.default) {
-              return {
-                  numberTextFormat: NumberTextFormat.default,
-                  decimalDigits: undefined,
-                  decimalMaximumDigits: undefined,
-                  unitScale: options?.unitScale ?? passthroughUnitScale
-              };
+          const value = this.groupHeaderValue;
+          const mappingConfig = this.columnConfig.mappingConfigs.get(value);
+          if (mappingConfig instanceof MappingIconConfig) {
+              this.severity = mappingConfig.severity;
+              this.text = mappingConfig.text ?? '';
+              this.visualizationTemplate = mappingConfig.iconTemplate;
           }
-          const hasDecimalDigits = typeof options.decimalDigits === 'number';
-          const hasDecimalMaximumDigits = typeof options.decimalMaximumDigits === 'number';
-          if (hasDecimalDigits && hasDecimalMaximumDigits) {
-              throw new Error('decimalDigits and decimalMaximumDigits are mutually exclusive. Do not specify both.');
+          else if (mappingConfig instanceof MappingSpinnerConfig) {
+              this.text = mappingConfig.text ?? '';
+              this.visualizationTemplate = mappingConfig.spinnerTemplate;
           }
-          if (!hasDecimalDigits && !hasDecimalMaximumDigits) {
-              return {
-                  numberTextFormat: NumberTextFormat.decimal,
-                  decimalDigits: NumberTextUnitFormat.defaultDecimalDigits,
-                  decimalMaximumDigits: undefined,
-                  unitScale: options.unitScale ?? passthroughUnitScale
-              };
+          else if (mappingConfig instanceof MappingTextConfig) {
+              this.text = mappingConfig.text ?? '';
           }
-          return {
-              numberTextFormat: NumberTextFormat.decimal,
-              decimalDigits: options.decimalDigits,
-              decimalMaximumDigits: options.decimalMaximumDigits,
-              unitScale: options.unitScale ?? passthroughUnitScale
-          };
+      }
+      resetState() {
+          this.text = '';
+          this.visualizationTemplate = undefined;
+          this.severity = IconSeverity.default;
       }
   }
-  NumberTextUnitFormat.defaultDecimalDigits = 2;
+  __decorate$1([
+      observable
+  ], TableColumnMappingGroupHeaderView.prototype, "severity", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
+  const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
+      baseName: 'table-column-mapping-group-header-view',
+      template: template$8,
+      styles: styles$9
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(mappingGroupHeaderView());
+  const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
+
+  const styles$8 = css `
+    ${display('inline-flex')}
+
+    :host {
+        gap: ${smallPadding};
+        align-items: center;
+    }
+
+    .reserve-icon-size {
+        flex-shrink: 0;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .text {
+        flex-shrink: 1;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+
+  // prettier-ignore
+  const template$7 = html `
+    ${when(x => x.visualizationTemplate, html `
+            <span class="reserve-icon-size">
+                ${x => x.visualizationTemplate}
+            </span>
+        `)}
+    ${when(x => !x.textHidden, html `
+        <span
+            ${overflow('hasOverflow')}
+            title=${x => (x.hasOverflow && x.text ? x.text : null)}
+            class="text"
+        >
+            ${x => x.text}
+        </span>
+    `)}
+`;
 
-  const numberTextValidityFlagNames = [
-      'invalidDecimalDigits',
-      'invalidDecimalMaximumDigits',
-      'decimalDigitsMutuallyExclusiveWithDecimalMaximumDigits',
-      'moreThanOneUnitSpecified'
-  ];
-  // The maximum and minimum allowed configuration for 'maximumFractionDigits'
-  // and 'minimumFractionDigits' on the NumberFormat.
-  const minimumValidDecimalDigits = 0;
-  const maximumValidDecimalDigits = 20;
   /**
-   * Validator for TableColumnNumberText.
+   * The cell view for the mapping column
    */
-  class TableColumnNumberTextValidator extends ColumnValidator {
+  class TableColumnMappingCellView extends TableCellView {
       constructor() {
-          super(numberTextValidityFlagNames);
-      }
-      validateDecimalDigits(format, decimalDigits) {
-          const shouldValidateDecimalDigitsValue = format === NumberTextFormat.decimal
-              && typeof decimalDigits === 'number';
-          const invalid = shouldValidateDecimalDigitsValue
-              ? this.isInvalidDecimalDigitsValue(decimalDigits)
-              : false;
-          this.setConditionValue('invalidDecimalDigits', invalid);
+          super(...arguments);
+          this.textHidden = false;
+          /** @internal */
+          this.hasOverflow = false;
       }
-      validateDecimalMaximumDigits(format, decimalMaximumDigits) {
-          const shouldValidateDecimalDigitsValue = format === NumberTextFormat.decimal
-              && typeof decimalMaximumDigits === 'number';
-          const invalid = shouldValidateDecimalDigitsValue
-              ? this.isInvalidDecimalDigitsValue(decimalMaximumDigits)
-              : false;
-          this.setConditionValue('invalidDecimalMaximumDigits', invalid);
+      columnConfigChanged() {
+          this.updateState();
       }
-      validateNoMutuallyExclusiveProperties(format, decimalDigits, decimalMaximumDigits) {
-          const shouldValidateMutuallyExclusiveProperties = format === NumberTextFormat.decimal;
-          const invalid = shouldValidateMutuallyExclusiveProperties
-              ? typeof decimalDigits === 'number'
-                  && typeof decimalMaximumDigits === 'number'
-              : false;
-          this.setConditionValue('decimalDigitsMutuallyExclusiveWithDecimalMaximumDigits', invalid);
+      cellRecordChanged() {
+          this.updateState();
       }
-      validateAtMostOneUnit(unitElements) {
-          const invalid = unitElements.length > 1;
-          this.setConditionValue('moreThanOneUnitSpecified', invalid);
+      updateState() {
+          this.resetState();
+          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.severity = mappingConfig.severity;
+              this.text = mappingConfig.text;
+              this.visualizationTemplate = mappingConfig.iconTemplate;
+              this.textHidden = mappingConfig.textHidden;
+          }
+          else if (mappingConfig instanceof MappingSpinnerConfig) {
+              this.text = mappingConfig.text;
+              this.visualizationTemplate = mappingConfig.spinnerTemplate;
+              this.textHidden = mappingConfig.textHidden;
+          }
+          else if (mappingConfig instanceof MappingTextConfig) {
+              this.text = mappingConfig.text;
+              this.textHidden = false;
+          }
       }
-      isInvalidDecimalDigitsValue(decimalDigits) {
-          return (decimalDigits < minimumValidDecimalDigits
-              || decimalDigits > maximumValidDecimalDigits);
+      resetState() {
+          this.text = undefined;
+          this.textHidden = false;
+          this.visualizationTemplate = undefined;
+          this.severity = IconSeverity.default;
       }
   }
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "severity", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "text", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "visualizationTemplate", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "textHidden", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
+  const mappingCellView = TableColumnMappingCellView.compose({
+      baseName: 'table-column-mapping-cell-view',
+      template: template$7,
+      styles: styles$8
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
+  const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
 
   /**
-   * The base class for an element that provides a unit scale for scaled unit conversions
+   * Width mode for the mapping column
    */
-  class Unit extends FoundationElement {
-  }
-  __decorate$1([
-      observable
-  ], Unit.prototype, "resolvedUnitScale", void 0);
+  const TableColumnMappingWidthMode = {
+      default: undefined,
+      iconSize: 'icon-size'
+  };
 
   /**
-   * The table column for displaying numbers as text.
+   * Table column that maps number, boolean, or string values to an icon, a spinner,
+   * text, or an icon/spinner with text.
    */
-  class TableColumnNumberText extends mixinTextBase((TableColumnTextBase)) {
-      constructor() {
-          super(...arguments);
-          this.langSubscriber = {
-              handleChange: () => {
-                  this.updateColumnConfig();
-              }
-          };
-          this.unitSubscriber = {
-              handleChange: () => {
-                  this.updateColumnConfig();
-              }
-          };
-      }
-      connectedCallback() {
-          super.connectedCallback();
-          lang.subscribe(this.langSubscriber, this);
-          this.updateColumnConfig();
-      }
-      disconnectedCallback() {
-          super.disconnectedCallback();
-          lang.unsubscribe(this.langSubscriber, this);
-      }
-      placeholderChanged() {
-          this.updateColumnConfig();
+  class TableColumnMapping extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
+      minPixelWidthChanged() {
+          if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {
+              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+          }
       }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['value'],
-              cellViewTag: tableColumnNumberTextCellViewTag,
-              groupHeaderViewTag: tableColumnNumberTextGroupHeaderTag,
+              cellViewTag: tableColumnMappingCellViewTag,
+              groupHeaderViewTag: tableColumnMappingGroupHeaderViewTag,
               delegatedEvents: [],
               sortOperation: TableColumnSortOperation.basic,
-              validator: new TableColumnNumberTextValidator()
+              validator: new TableColumnMappingValidator()
           };
       }
-      updateUnitNotifier() {
-          if (this.unitNotifier) {
-              this.unitNotifier.unsubscribe(this.unitSubscriber);
-              this.unitNotifier = undefined;
+      createColumnConfig(mappingConfigs) {
+          return {
+              mappingConfigs
+          };
+      }
+      createMappingConfig(mapping) {
+          if (mapping instanceof MappingIcon) {
+              return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text, mapping.textHidden);
           }
-          if (this.unit) {
-              const notifier = Observable.getNotifier(this.unit);
-              notifier.subscribe(this.unitSubscriber, 'resolvedUnitScale');
-              this.unitNotifier = notifier;
+          if (mapping instanceof MappingSpinner) {
+              return new MappingSpinnerConfig(mapping.text, mapping.textHidden);
           }
-      }
-      formatChanged() {
-          this.updateColumnConfig();
-      }
-      alignmentChanged() {
-          this.updateColumnConfig();
-      }
-      decimalDigitsChanged() {
-          this.updateColumnConfig();
-      }
-      decimalMaximumDigitsChanged() {
-          this.updateColumnConfig();
-      }
-      unitElementsChanged() {
-          void this.updateUnit();
-      }
-      async updateUnit() {
-          this.unit = undefined;
-          if (this.unitElements) {
-              await waitUntilCustomElementsDefinedAsync(this.unitElements);
-              this.unit = this.unitElements.find((x) => x instanceof Unit);
+          if (mapping instanceof MappingText) {
+              return new MappingTextConfig(mapping.text);
           }
-          this.updateUnitNotifier();
-      }
-      unitChanged() {
-          this.updateColumnConfig();
+          // 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');
       }
-      updateColumnConfig() {
-          const validator = this.columnInternals.validator;
-          validator.validateDecimalDigits(this.format, this.decimalDigits);
-          validator.validateDecimalMaximumDigits(this.format, this.decimalMaximumDigits);
-          validator.validateNoMutuallyExclusiveProperties(this.format, this.decimalDigits, this.decimalMaximumDigits);
-          validator.validateAtMostOneUnit(this.unitElements ?? []);
-          if (validator.isValid()) {
-              const columnConfig = {
-                  formatter: this.createFormatter(),
-                  alignment: this.determineCellContentAlignment(),
-                  placeholder: this.placeholder
-              };
-              this.columnInternals.columnConfig = columnConfig;
+      widthModeChanged() {
+          if (this.widthMode === TableColumnMappingWidthMode.iconSize) {
+              this.columnInternals.resizingDisabled = true;
+              this.columnInternals.hideHeaderIndicators = true;
+              this.columnInternals.pixelWidth = singleIconColumnWidth;
+              this.columnInternals.minPixelWidth = singleIconColumnWidth;
           }
           else {
-              this.columnInternals.columnConfig = undefined;
+              this.columnInternals.resizingDisabled = false;
+              this.columnInternals.hideHeaderIndicators = false;
+              this.columnInternals.pixelWidth = undefined;
+              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
           }
       }
-      createFormatter() {
-          const unitScale = this.unit?.resolvedUnitScale;
-          return new NumberTextUnitFormat(lang.getValueFor(this), {
-              // Attribute values sometimes resolve to either null or undefined
-              // See https://github.com/microsoft/fast/issues/6630
-              numberTextFormat: this.format ?? undefined,
-              decimalDigits: this.decimalDigits ?? undefined,
-              decimalMaximumDigits: this.decimalMaximumDigits ?? undefined,
-              unitScale
-          });
-      }
-      determineCellContentAlignment() {
-          if (this.alignment === NumberTextAlignment.left) {
-              return TextCellViewBaseAlignment.left;
-          }
-          if (this.alignment === NumberTextAlignment.right) {
-              return TextCellViewBaseAlignment.right;
-          }
-          // Look at format and decimal max digits and unit to determine the default alignment
-          if (this.format === NumberTextFormat.decimal
-              && typeof this.decimalMaximumDigits !== 'number'
-              && !this.unit) {
-              return TextCellViewBaseAlignment.right;
+      getConfiguredMinPixelWidth() {
+          if (typeof this.minPixelWidth === 'number') {
+              return this.minPixelWidth;
           }
-          return TextCellViewBaseAlignment.left;
+          return defaultMinPixelWidth;
       }
   }
   __decorate$1([
-      attr
-  ], TableColumnNumberText.prototype, "format", void 0);
-  __decorate$1([
-      attr
-  ], TableColumnNumberText.prototype, "alignment", void 0);
-  __decorate$1([
-      attr({ attribute: 'decimal-digits', converter: nullableNumberConverter })
-  ], TableColumnNumberText.prototype, "decimalDigits", void 0);
-  __decorate$1([
-      attr({
-          attribute: 'decimal-maximum-digits',
-          converter: nullableNumberConverter
-      })
-  ], TableColumnNumberText.prototype, "decimalMaximumDigits", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnNumberText.prototype, "unitElements", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnNumberText.prototype, "unit", void 0);
-  const nimbleTableColumnNumberText = TableColumnNumberText.compose({
-      baseName: 'table-column-number-text',
+      attr({ attribute: 'width-mode' })
+  ], TableColumnMapping.prototype, "widthMode", void 0);
+  const nimbleTableColumnMapping = TableColumnMapping.compose({
+      baseName: 'table-column-mapping',
       template: template$9,
-      styles: styles$e
+      styles: styles$a
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
-      .register(nimbleTableColumnNumberText());
+      .register(nimbleTableColumnMapping());
+
+  // Avoiding a wrapping <template> and be careful about starting and ending whitespace
+  // so the template can be composed into other column header templates
+  // prettier-ignore
+  const template$6 = html `<span
+    ${overflow('hasOverflow')}
+    class="header-content"
+    title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
+>
+    <slot ${ref('contentSlot')}></slot>
+    <slot ${slotted({ property: 'unitElements', filter: elements() })} name="unit"></slot>
+</span>`;
 
   /**
-   * 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.
+   * The group header view for displaying number fields as text.
    */
-  const resolveKeyWithType = (key, keyType) => {
-      if (keyType === 'number') {
-          const converted = nullableNumberConverter.fromView(key);
-          return converted === null ? undefined : converted;
+  class TableColumnNumberTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      updateText() {
+          this.text = this.columnConfig?.formatter?.format(this.groupHeaderValue) ?? '';
       }
-      if (keyType === 'boolean') {
-          if (key === false || key === 'false') {
-              return false;
-          }
-          if (key === true || key === 'true') {
-              return true;
-          }
-          return undefined;
+  }
+  const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
+      baseName: 'table-column-number-text-group-header-view',
+      template: template$b,
+      styles: styles$c
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(tableColumnNumberTextGroupHeaderView());
+  const tableColumnNumberTextGroupHeaderTag = 'nimble-table-column-number-text-group-header-view';
+
+  /**
+   * A cell view for displaying number fields as text
+   */
+  class TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
+      columnConfigChanged() {
+          super.columnConfigChanged();
+          this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
       }
-      return key?.toString() ?? undefined;
+      updateText() {
+          this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';
+      }
+  }
+  const numberTextCellView = TableColumnNumberTextCellView.compose({
+      baseName: 'table-column-number-text-cell-view',
+      template: template$a,
+      styles: styles$b
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
+  const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
+
+  /**
+   * Formatting scheme for the number-text table column
+   */
+  const NumberTextFormat = {
+      default: undefined,
+      decimal: 'decimal'
+  };
+  /**
+   * The aligment of the value in the number-text table column.
+   * The `default` alignment is determined by the column's `NumberTextFormat`.
+   */
+  const NumberTextAlignment = {
+      default: undefined,
+      left: 'left',
+      right: 'right'
   };
 
   /**
-   * Base class for table columns that map values to content
+   * The base class for unit formats.
    */
-  class TableColumnEnumBase extends TableColumn {
-      constructor() {
-          super(...arguments);
-          /** @internal */
-          this.mappingNotifiers = [];
-          /** @internal */
-          this.mappings = [];
-          this.keyType = 'string';
-      }
+  class UnitFormat {
       /**
-       * @internal
-       *
-       * Triggers a request to update the columnConfig when any observable property on
-       * a mapping is updated.
+       * Formats a number value to a string.
+       * For nullish values or values that result in an exception being thrown, empty string is returned
        */
-      handleChange(source, args) {
-          if (source instanceof Mapping$1 && typeof args === 'string') {
-              this.updateColumnConfig();
-          }
-      }
-      /**
-       * Called when any Mapping related state has changed.
-       */
-      updateColumnConfig() {
-          this.columnInternals.validator.validate(this.mappings, this.keyType);
-          this.columnInternals.columnConfig = this.checkValidity()
-              ? 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);
+      format(value) {
+          if (typeof value !== 'number') {
+              return '';
+          }
+          try {
+              return this.tryFormat(value);
+          }
+          catch {
+              return '';
           }
       }
   }
-  __decorate$1([
-      observable
-  ], TableColumnEnumBase.prototype, "mappings", void 0);
-  __decorate$1([
-      attr({ attribute: 'field-name' })
-  ], TableColumnEnumBase.prototype, "fieldName", void 0);
-  __decorate$1([
-      attr({ attribute: 'key-type' })
-  ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$a = css `
-    ${styles$e}
-
-    slot[name='mapping'] {
-        display: none;
-    }
-`;
-
-  const template$8 = html `${template$d}<slot ${slotted('mappings')} name="mapping"></slot>`;
-
-  const enumBaseValidityFlagNames = [
-      'invalidMappingKeyValueForType',
-      'duplicateMappingKey',
-      'missingKeyValue'
-  ];
   /**
-   * Validator base class for table columns containing mappings. Implementations MUST include enumBaseValidityFlagNames in validity flag names set.
+   * A class that knows how to format a numeric value as a string that includes units.
    */
-  class TableColumnEnumBaseValidator extends ColumnValidator {
-      constructor(configValidityKeys) {
-          super(configValidityKeys);
-      }
-      validate(mappings, keyType) {
-          this.untrackAll();
-          const keys = mappings.map(mapping => mapping.key);
-          this.validateKeyValuesForType(keys, keyType);
-          this.validateUniqueKeys(keys, keyType);
-          this.validateNoMissingKeys(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);
-      }
-      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);
+  class ScaledUnitFormat {
+      constructor(scaledUnitFormatFactoryOptions) {
+          this.locale = scaledUnitFormatFactoryOptions.locale;
+          this.intlNumberFormatOptions = scaledUnitFormatFactoryOptions.intlNumberFormatOptions;
       }
   }
 
-  const iconValidityFlagNames = [
-      ...enumBaseValidityFlagNames,
-      'unsupportedMappingType',
-      'invalidIconName',
-      'missingTextValue'
-  ];
   /**
-   * Validator for TableColumnIcon
+   * A formatter for units that can be formatted/translated by Intl.NumberFormat
    */
-  class TableColumnIconValidator extends TableColumnEnumBaseValidator {
-      constructor() {
-          super(iconValidityFlagNames);
-      }
-      static isIconMappingElement(mapping) {
-          return mapping instanceof MappingIcon;
-      }
-      static isSupportedMappingElement(mapping) {
-          return (mapping instanceof MappingIcon
-              || mapping instanceof MappingSpinner
-              || mapping instanceof MappingText);
-      }
-      static hasUnresolvedIcon(mappingIcon) {
-          return (typeof mappingIcon.icon === 'string'
-              && mappingIcon.resolvedIcon === undefined);
-      }
-      validate(mappings, keyType) {
-          super.validate(mappings, keyType);
-          this.validateMappingTypes(mappings);
-          this.validateIconNames(mappings);
-          this.validateNoMissingText(mappings);
-      }
-      validateIconNames(mappings) {
-          const invalid = mappings
-              .filter(TableColumnIconValidator.isIconMappingElement)
-              .some(TableColumnIconValidator.hasUnresolvedIcon);
-          this.setConditionValue('invalidIconName', invalid);
+  class IntlNumberFormatScaledUnitFormat extends ScaledUnitFormat {
+      constructor(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions) {
+          super(scaledUnitFormatFactoryOptions);
+          this.formatter = new Intl.NumberFormat(this.locale, {
+              ...unitSpecificIntlNumberFormatOptions,
+              // Application configured options override unit specific options
+              ...this.intlNumberFormatOptions
+          });
       }
-      validateNoMissingText(mappings) {
-          const invalid = mappings
-              .filter(TableColumnIconValidator.isSupportedMappingElement)
-              .some(mapping => mapping.text === undefined);
-          this.setConditionValue('missingTextValue', invalid);
+      static createFactory(unitSpecificIntlNumberFormatOptions) {
+          return (scaledUnitFormatFactoryOptions) => new IntlNumberFormatScaledUnitFormat(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions);
       }
-      validateMappingTypes(mappings) {
-          const valid = mappings.every(TableColumnIconValidator.isSupportedMappingElement);
-          this.setConditionValue('unsupportedMappingType', !valid);
+      format(value) {
+          return this.formatter.format(value);
       }
   }
 
-  const styles$9 = css `
-    ${display('inline-flex')}
-
-    :host {
-        gap: ${smallPadding};
-        align-items: center;
-    }
-
-    .reserve-icon-size {
-        flex-shrink: 0;
-        width: ${iconSize};
-        height: ${iconSize};
-    }
-
-    .text {
-        flex-shrink: 1;
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-`;
-
-  // prettier-ignore
-  const template$7 = html `
-    ${when(x => x.visualizationTemplate, html `
-            <span class="reserve-icon-size">
-                ${x => x.visualizationTemplate}
-            </span>
-        `)}
-    <span
-        ${overflow('hasOverflow')}
-        title="${x => (x.hasOverflow && x.text ? x.text : null)}"
-        class="text"
-    >${x => x.text}</span>
-`;
-
   /**
-   * Predefined icon appearance states
-   * @public
+   * A unit that represents a scaled version of a base unit.
    */
-  const IconSeverity = {
-      default: undefined,
-      error: 'error',
-      warning: 'warning',
-      success: 'success',
-      information: 'information'
-  };
+  class ScaledUnit {
+      constructor(scaleFactor, scaledUnitFormatFactory) {
+          this.scaleFactor = scaleFactor;
+          this.scaledUnitFormatFactory = scaledUnitFormatFactory;
+      }
+      isBase() {
+          return this.scaleFactor === 1;
+      }
+  }
 
   /**
-   * Common state shared across Mapping Config
+   * A unit scale consisting of a set of scaled units.
    */
-  class MappingConfig {
-      constructor(text) {
-          this.text = text;
+  class UnitScale {
+      constructor(supportedScaledUnits) {
+          this.supportedScaledUnits = supportedScaledUnits;
+          const unitsSorted = supportedScaledUnits.every((curr, i, arr) => i === 0 || arr[i - 1].scaleFactor < curr.scaleFactor);
+          if (!unitsSorted) {
+              throw new Error('Supported scaled units must have unique and ordered scale factors');
+          }
+          const baseScaledUnit = supportedScaledUnits.find(x => x.isBase());
+          if (!baseScaledUnit) {
+              throw new Error('Supported scaled units must include a base scaled unit (scale factor=1)');
+          }
+          this.supportedScaledUnits = supportedScaledUnits;
+          this.baseScaledUnit = baseScaledUnit;
+      }
+      // Note that for the sake of reducing complexity in the implementation,
+      // we do NOT consider the effects of rounding when picking the unit to
+      // use for a given value. If formatting results in rounding, a value
+      // may be shown with an unexpected unit. Examples:
+      // - 999 bytes with two significant digits => "1000 bytes" (instead of "1 kB")
+      // - 0.00000000000000001 volts (= 0.01 fV) with one fractional digit => "0 fV" (instead of "0 volts")
+      scaleNumber(number) {
+          const magnitude = Math.abs(number);
+          const onlyBaseScaledUnit = this.supportedScaledUnits.length === 1;
+          if (onlyBaseScaledUnit
+              || magnitude === 0
+              || magnitude === Infinity
+              || Number.isNaN(magnitude)) {
+              return { scaledValue: number, scaledUnit: this.baseScaledUnit };
+          }
+          for (let i = this.supportedScaledUnits.length - 1; i >= 0; i -= 1) {
+              const scaledUnit = this.supportedScaledUnits[i];
+              if (magnitude / scaledUnit.scaleFactor >= 1) {
+                  return {
+                      scaledValue: number / scaledUnit.scaleFactor,
+                      scaledUnit
+                  };
+              }
+          }
+          const smallestUnit = this.supportedScaledUnits[0];
+          return {
+              scaledValue: number / smallestUnit.scaleFactor,
+              scaledUnit: smallestUnit
+          };
       }
   }
 
-  // Create an empty template containing only a space because creating a ViewTemplate
-  // with an empty string throws an exception at runtime.
-  // prettier-ignore
-  const emptyTemplate = html ` `;
-  const createIconTemplate = (icon) => {
-      if (icon === undefined) {
-          return emptyTemplate;
-      }
-      return html `
-        <${icon}
-            title="${x => (x.textHidden ? x.text : '')}"
-            role="img"
-            aria-label="${x => x.text}"
-            aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
-            severity="${x => x.severity}"
-        >
-        </${icon}>
-    `;
-  };
   /**
-   * Mapping configuration corresponding to a icon mapping
+   * Unit scale that is used to passthrough a number without applying scaling or units
    */
-  class MappingIconConfig extends MappingConfig {
-      constructor(resolvedIcon, severity, text, textHidden) {
-          super(text);
-          this.severity = severity;
-          this.textHidden = textHidden;
-          this.iconTemplate = createIconTemplate(resolvedIcon);
+  class PassthroughUnitScale extends UnitScale {
+      constructor() {
+          super([
+              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory({}))
+          ]);
       }
   }
+  const passthroughUnitScale = new PassthroughUnitScale();
 
-  const spinnerTemplate = html `
-    <${spinnerTag}
-        title="${x => (x.textHidden ? x.text : '')}"
-        aria-label="${x => x.text}"
-        aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
-    >
-    </${spinnerTag}>
-`;
+  // Workaround to avoid ts errors about signDisplay not accepting the value 'negative'.
+  // It has been supported by browsers since 8/23, but TypeScript still hasn't
+  // added it to the type definitions. See https://github.com/microsoft/TypeScript/issues/56269
+  const signDisplay = 'negative';
   /**
-   * Mapping configuration corresponding to a spinner mapping
+   * Format for numbers with units to show in a tabular form.
+   * Large and tiny numbers are shown exponentially and the rest as decimal.
    */
-  class MappingSpinnerConfig extends MappingConfig {
-      constructor(text, textHidden) {
-          super(text);
-          this.textHidden = textHidden;
-          this.spinnerTemplate = spinnerTemplate;
+  class DefaultUnitFormat extends UnitFormat {
+      constructor(locale, { unitScale = passthroughUnitScale } = {
+          unitScale: passthroughUnitScale
+      }) {
+          super();
+          // Format options to use by default. It renders the number with a maximum of 6 signficant digits (including zero before decimal point).
+          this.defaultIntlNumberFormatOptions = {
+              maximumSignificantDigits: DefaultUnitFormat.maximumDigits,
+              maximumFractionDigits: DefaultUnitFormat.maximumDigits - 1,
+              roundingPriority: 'lessPrecision',
+              signDisplay
+          };
+          this.defaultScaledUnitFormatters = new Map();
+          // Format options for numbers that should be displayed in exponential notation. This should be used
+          // for numbers with magintudes over 'exponentialUpperBound' or under 'exponentialLowerBound'.
+          this.exponentialIntlNumberFormatOptions = {
+              maximumSignificantDigits: DefaultUnitFormat.maximumDigits,
+              notation: 'scientific',
+              signDisplay
+          };
+          for (const unit of unitScale.supportedScaledUnits) {
+              this.defaultScaledUnitFormatters.set(unit.scaleFactor, unit.scaledUnitFormatFactory({
+                  locale,
+                  intlNumberFormatOptions: this.defaultIntlNumberFormatOptions
+              }));
+          }
+          this.exponentialScaledUnitFormatter = unitScale.baseScaledUnit.scaledUnitFormatFactory({
+              locale,
+              intlNumberFormatOptions: this.exponentialIntlNumberFormatOptions
+          });
+          this.unitScale = unitScale;
+      }
+      resolvedOptions() {
+          return {
+              unitScale: this.unitScale
+          };
+      }
+      tryFormat(number) {
+          const { scaledValue, scaledUnit } = this.unitScale.scaleNumber(number);
+          const absoluteValue = Math.abs(scaledValue);
+          const useExponential = absoluteValue !== 0
+              && (absoluteValue >= DefaultUnitFormat.exponentialUpperBound
+                  || absoluteValue < DefaultUnitFormat.exponentialLowerBound);
+          return useExponential
+              ? this.exponentialScaledUnitFormatter.format(number)
+              : this.defaultScaledUnitFormatters
+                  .get(scaledUnit.scaleFactor)
+                  .format(scaledValue);
       }
   }
+  // The maximum number of digits that should be rendered for any given value.
+  DefaultUnitFormat.maximumDigits = 6;
+  // Use exponential notation for numbers that will be rendered with 3 leading 0s or more.
+  // Because a maximum of 6 digits are rendered, showing more than 3 leading 0s is not ideal
+  // because then at least half of the displayed digits will be leading 0s.
+  DefaultUnitFormat.exponentialLowerBound = 0.000995;
+  // Use exponential formatting for numbers whose magnitude cannot otherwise be displayed
+  // with 6 digits or less.
+  DefaultUnitFormat.exponentialUpperBound = 999999.5;
 
   /**
-   * Mapping configuration corresponding to a text mapping
+   * Format for decimal numbers with units.
    */
-  class MappingTextConfig extends MappingConfig {
+  class DecimalUnitFormat extends UnitFormat {
+      constructor(locale, { minimumFractionDigits = 0, maximumFractionDigits = Math.max(3, minimumFractionDigits), unitScale = passthroughUnitScale } = {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 3,
+          unitScale: passthroughUnitScale
+      }) {
+          super();
+          this.scaledUnitFormatters = new Map();
+          // Workaround to avoid a ts error about signDisplay not accepting the value 'negative'.
+          // It has been supported by browsers since 8/23, but TypeScript still hasn't
+          // added it to the type definitions. See https://github.com/microsoft/TypeScript/issues/56269
+          const signDisplay = 'negative';
+          const intlNumberFormatOptions = {
+              maximumFractionDigits,
+              minimumFractionDigits,
+              signDisplay
+          };
+          for (const scaledUnit of unitScale.supportedScaledUnits) {
+              this.scaledUnitFormatters.set(scaledUnit.scaleFactor, scaledUnit.scaledUnitFormatFactory({
+                  locale,
+                  intlNumberFormatOptions
+              }));
+          }
+          this.unitScale = unitScale;
+          this.minimumFractionDigits = minimumFractionDigits;
+          this.maximumFractionDigits = maximumFractionDigits;
+      }
+      resolvedOptions() {
+          return {
+              unitScale: this.unitScale,
+              maximumFractionDigits: this.maximumFractionDigits,
+              minimumFractionDigits: this.minimumFractionDigits
+          };
+      }
+      tryFormat(number) {
+          const { scaledValue, scaledUnit } = this.unitScale.scaleNumber(number);
+          const scaledUnitFormatter = this.scaledUnitFormatters.get(scaledUnit.scaleFactor);
+          return scaledUnitFormatter.format(scaledValue);
+      }
   }
 
   /**
-   * The group header view for the icon column
+   * Format for numbers (with optional units) in a number-text table column.
    */
-  class TableColumnIconGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      constructor() {
-          super(...arguments);
-          this.textHidden = false;
+  class NumberTextUnitFormat extends UnitFormat {
+      constructor(locale, options) {
+          super();
+          this._resolvedOptions = this.resolveOptions(options);
+          this.resolvedUnitFormat = this.resolveUnitFormat(locale, this._resolvedOptions);
       }
-      updateText() {
-          this.resetState();
-          if (!this.columnConfig) {
-              return;
+      resolvedOptions() {
+          return { ...this._resolvedOptions };
+      }
+      optionsMatch(targetOptions) {
+          const targetResolvedOptions = this.resolveOptions(targetOptions);
+          return (this._resolvedOptions.decimalDigits
+              === targetResolvedOptions.decimalDigits
+              && this._resolvedOptions.decimalMaximumDigits
+                  === targetResolvedOptions.decimalMaximumDigits
+              && this._resolvedOptions.numberTextFormat
+                  === targetResolvedOptions.numberTextFormat
+              && this._resolvedOptions.unitScale === targetResolvedOptions.unitScale);
+      }
+      tryFormat(number) {
+          return this.resolvedUnitFormat.format(number);
+      }
+      resolveUnitFormat(locale, options) {
+          const { numberTextFormat, decimalMaximumDigits, decimalDigits, unitScale } = options;
+          if (numberTextFormat === NumberTextFormat.default) {
+              return new DefaultUnitFormat(locale, {
+                  unitScale
+              });
           }
-          const value = this.groupHeaderValue;
-          const mappingConfig = this.columnConfig.mappingConfigs.get(value);
-          if (mappingConfig instanceof MappingIconConfig) {
-              this.severity = mappingConfig.severity;
-              this.text = mappingConfig.text ?? '';
-              this.visualizationTemplate = mappingConfig.iconTemplate;
+          if (typeof decimalDigits === 'number') {
+              return new DecimalUnitFormat(locale, {
+                  minimumFractionDigits: decimalDigits,
+                  maximumFractionDigits: decimalDigits,
+                  unitScale
+              });
           }
-          else if (mappingConfig instanceof MappingSpinnerConfig) {
-              this.text = mappingConfig.text ?? '';
-              this.visualizationTemplate = mappingConfig.spinnerTemplate;
+          return new DecimalUnitFormat(locale, {
+              minimumFractionDigits: 0,
+              maximumFractionDigits: decimalMaximumDigits,
+              unitScale
+          });
+      }
+      resolveOptions(options) {
+          if (!options || options.numberTextFormat === NumberTextFormat.default) {
+              return {
+                  numberTextFormat: NumberTextFormat.default,
+                  decimalDigits: undefined,
+                  decimalMaximumDigits: undefined,
+                  unitScale: options?.unitScale ?? passthroughUnitScale
+              };
           }
-          else if (mappingConfig instanceof MappingTextConfig) {
-              this.text = mappingConfig.text ?? '';
+          const hasDecimalDigits = typeof options.decimalDigits === 'number';
+          const hasDecimalMaximumDigits = typeof options.decimalMaximumDigits === 'number';
+          if (hasDecimalDigits && hasDecimalMaximumDigits) {
+              throw new Error('decimalDigits and decimalMaximumDigits are mutually exclusive. Do not specify both.');
           }
-      }
-      resetState() {
-          this.text = '';
-          this.visualizationTemplate = undefined;
-          this.severity = IconSeverity.default;
+          if (!hasDecimalDigits && !hasDecimalMaximumDigits) {
+              return {
+                  numberTextFormat: NumberTextFormat.decimal,
+                  decimalDigits: NumberTextUnitFormat.defaultDecimalDigits,
+                  decimalMaximumDigits: undefined,
+                  unitScale: options.unitScale ?? passthroughUnitScale
+              };
+          }
+          return {
+              numberTextFormat: NumberTextFormat.decimal,
+              decimalDigits: options.decimalDigits,
+              decimalMaximumDigits: options.decimalMaximumDigits,
+              unitScale: options.unitScale ?? passthroughUnitScale
+          };
       }
   }
-  __decorate$1([
-      observable
-  ], TableColumnIconGroupHeaderView.prototype, "severity", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconGroupHeaderView.prototype, "visualizationTemplate", void 0);
-  const iconGroupHeaderView = TableColumnIconGroupHeaderView.compose({
-      baseName: 'table-column-icon-group-header-view',
-      template: template$7,
-      styles: styles$9
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(iconGroupHeaderView());
-  const tableColumnIconGroupHeaderViewTag = 'nimble-table-column-icon-group-header-view';
-
-  const styles$8 = css `
-    ${display('inline-flex')}
-
-    :host {
-        gap: ${smallPadding};
-        align-items: center;
-    }
-
-    .reserve-icon-size {
-        flex-shrink: 0;
-        width: ${iconSize};
-        height: ${iconSize};
-    }
-
-    .text {
-        flex-shrink: 1;
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-`;
-
-  // prettier-ignore
-  const template$6 = html `
-    ${when(x => x.visualizationTemplate, html `
-            <span class="reserve-icon-size">
-                ${x => x.visualizationTemplate}
-            </span>
-        `)}
-    ${when(x => !x.textHidden, html `
-        <span
-            ${overflow('hasOverflow')}
-            title=${x => (x.hasOverflow && x.text ? x.text : null)}
-            class="text"
-        >
-            ${x => x.text}
-        </span>
-    `)}
-`;
+  NumberTextUnitFormat.defaultDecimalDigits = 2;
 
+  const numberTextValidityFlagNames = [
+      'invalidDecimalDigits',
+      'invalidDecimalMaximumDigits',
+      'decimalDigitsMutuallyExclusiveWithDecimalMaximumDigits',
+      'moreThanOneUnitSpecified'
+  ];
+  // The maximum and minimum allowed configuration for 'maximumFractionDigits'
+  // and 'minimumFractionDigits' on the NumberFormat.
+  const minimumValidDecimalDigits = 0;
+  const maximumValidDecimalDigits = 20;
   /**
-   * The cell view for the icon column
+   * Validator for TableColumnNumberText.
    */
-  class TableColumnIconCellView extends TableCellView {
+  class TableColumnNumberTextValidator extends ColumnValidator {
       constructor() {
-          super(...arguments);
-          this.textHidden = false;
-          /** @internal */
-          this.hasOverflow = false;
+          super(numberTextValidityFlagNames);
       }
-      columnConfigChanged() {
-          this.updateState();
+      validateDecimalDigits(format, decimalDigits) {
+          const shouldValidateDecimalDigitsValue = format === NumberTextFormat.decimal
+              && typeof decimalDigits === 'number';
+          const invalid = shouldValidateDecimalDigitsValue
+              ? this.isInvalidDecimalDigitsValue(decimalDigits)
+              : false;
+          this.setConditionValue('invalidDecimalDigits', invalid);
       }
-      cellRecordChanged() {
-          this.updateState();
+      validateDecimalMaximumDigits(format, decimalMaximumDigits) {
+          const shouldValidateDecimalDigitsValue = format === NumberTextFormat.decimal
+              && typeof decimalMaximumDigits === 'number';
+          const invalid = shouldValidateDecimalDigitsValue
+              ? this.isInvalidDecimalDigitsValue(decimalMaximumDigits)
+              : false;
+          this.setConditionValue('invalidDecimalMaximumDigits', invalid);
       }
-      updateState() {
-          this.resetState();
-          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.severity = mappingConfig.severity;
-              this.text = mappingConfig.text;
-              this.visualizationTemplate = mappingConfig.iconTemplate;
-              this.textHidden = mappingConfig.textHidden;
-          }
-          else if (mappingConfig instanceof MappingSpinnerConfig) {
-              this.text = mappingConfig.text;
-              this.visualizationTemplate = mappingConfig.spinnerTemplate;
-              this.textHidden = mappingConfig.textHidden;
-          }
-          else if (mappingConfig instanceof MappingTextConfig) {
-              this.text = mappingConfig.text;
-              this.textHidden = false;
-          }
+      validateNoMutuallyExclusiveProperties(format, decimalDigits, decimalMaximumDigits) {
+          const shouldValidateMutuallyExclusiveProperties = format === NumberTextFormat.decimal;
+          const invalid = shouldValidateMutuallyExclusiveProperties
+              ? typeof decimalDigits === 'number'
+                  && typeof decimalMaximumDigits === 'number'
+              : false;
+          this.setConditionValue('decimalDigitsMutuallyExclusiveWithDecimalMaximumDigits', invalid);
       }
-      resetState() {
-          this.text = undefined;
-          this.textHidden = false;
-          this.visualizationTemplate = undefined;
-          this.severity = IconSeverity.default;
+      validateAtMostOneUnit(unitElements) {
+          const invalid = unitElements.length > 1;
+          this.setConditionValue('moreThanOneUnitSpecified', invalid);
+      }
+      isInvalidDecimalDigitsValue(decimalDigits) {
+          return (decimalDigits < minimumValidDecimalDigits
+              || decimalDigits > maximumValidDecimalDigits);
       }
   }
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "severity", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "text", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "visualizationTemplate", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "textHidden", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "hasOverflow", void 0);
-  const iconCellView = TableColumnIconCellView.compose({
-      baseName: 'table-column-icon-cell-view',
-      template: template$6,
-      styles: styles$8
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(iconCellView());
-  const tableColumnIconCellViewTag = 'nimble-table-column-icon-cell-view';
 
   /**
-   * Width mode for the icon column
+   * The base class for an element that provides a unit scale for scaled unit conversions
    */
-  const TableColumnMappingWidthMode = {
-      default: undefined,
-      iconSize: 'icon-size'
-  };
+  class Unit extends FoundationElement {
+  }
+  __decorate$1([
+      observable
+  ], Unit.prototype, "resolvedUnitScale", void 0);
 
   /**
-   * Table column that maps values to icons / spinners
+   * The table column for displaying numbers as text.
    */
-  class TableColumnIcon extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
-      minPixelWidthChanged() {
-          if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {
-              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
-          }
+  class TableColumnNumberText extends mixinTextBase((TableColumnTextBase)) {
+      constructor() {
+          super(...arguments);
+          this.langSubscriber = {
+              handleChange: () => {
+                  this.updateColumnConfig();
+              }
+          };
+          this.unitSubscriber = {
+              handleChange: () => {
+                  this.updateColumnConfig();
+              }
+          };
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          lang.subscribe(this.langSubscriber, this);
+          this.updateColumnConfig();
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          lang.unsubscribe(this.langSubscriber, this);
+      }
+      placeholderChanged() {
+          this.updateColumnConfig();
       }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['value'],
-              cellViewTag: tableColumnIconCellViewTag,
-              groupHeaderViewTag: tableColumnIconGroupHeaderViewTag,
+              cellViewTag: tableColumnNumberTextCellViewTag,
+              groupHeaderViewTag: tableColumnNumberTextGroupHeaderTag,
               delegatedEvents: [],
               sortOperation: TableColumnSortOperation.basic,
-              validator: new TableColumnIconValidator()
-          };
-      }
-      createColumnConfig(mappingConfigs) {
-          return {
-              mappingConfigs
+              validator: new TableColumnNumberTextValidator()
           };
       }
-      createMappingConfig(mapping) {
-          if (mapping instanceof MappingIcon) {
-              return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text, mapping.textHidden);
+      updateUnitNotifier() {
+          if (this.unitNotifier) {
+              this.unitNotifier.unsubscribe(this.unitSubscriber);
+              this.unitNotifier = undefined;
           }
-          if (mapping instanceof MappingSpinner) {
-              return new MappingSpinnerConfig(mapping.text, mapping.textHidden);
+          if (this.unit) {
+              const notifier = Observable.getNotifier(this.unit);
+              notifier.subscribe(this.unitSubscriber, 'resolvedUnitScale');
+              this.unitNotifier = notifier;
           }
-          if (mapping instanceof MappingText) {
-              return new MappingTextConfig(mapping.text);
+      }
+      formatChanged() {
+          this.updateColumnConfig();
+      }
+      alignmentChanged() {
+          this.updateColumnConfig();
+      }
+      decimalDigitsChanged() {
+          this.updateColumnConfig();
+      }
+      decimalMaximumDigitsChanged() {
+          this.updateColumnConfig();
+      }
+      unitElementsChanged() {
+          void this.updateUnit();
+      }
+      async updateUnit() {
+          this.unit = undefined;
+          if (this.unitElements) {
+              await waitUntilCustomElementsDefinedAsync(this.unitElements);
+              this.unit = this.unitElements.find((x) => x instanceof Unit);
           }
-          // 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');
+          this.updateUnitNotifier();
       }
-      widthModeChanged() {
-          if (this.widthMode === TableColumnMappingWidthMode.iconSize) {
-              this.columnInternals.resizingDisabled = true;
-              this.columnInternals.hideHeaderIndicators = true;
-              this.columnInternals.pixelWidth = singleIconColumnWidth;
-              this.columnInternals.minPixelWidth = singleIconColumnWidth;
+      unitChanged() {
+          this.updateColumnConfig();
+      }
+      updateColumnConfig() {
+          const validator = this.columnInternals.validator;
+          validator.validateDecimalDigits(this.format, this.decimalDigits);
+          validator.validateDecimalMaximumDigits(this.format, this.decimalMaximumDigits);
+          validator.validateNoMutuallyExclusiveProperties(this.format, this.decimalDigits, this.decimalMaximumDigits);
+          validator.validateAtMostOneUnit(this.unitElements ?? []);
+          if (validator.isValid()) {
+              const columnConfig = {
+                  formatter: this.createFormatter(),
+                  alignment: this.determineCellContentAlignment(),
+                  placeholder: this.placeholder
+              };
+              this.columnInternals.columnConfig = columnConfig;
           }
           else {
-              this.columnInternals.resizingDisabled = false;
-              this.columnInternals.hideHeaderIndicators = false;
-              this.columnInternals.pixelWidth = undefined;
-              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+              this.columnInternals.columnConfig = undefined;
           }
       }
-      getConfiguredMinPixelWidth() {
-          if (typeof this.minPixelWidth === 'number') {
-              return this.minPixelWidth;
+      createFormatter() {
+          const unitScale = this.unit?.resolvedUnitScale;
+          return new NumberTextUnitFormat(lang.getValueFor(this), {
+              // Attribute values sometimes resolve to either null or undefined
+              // See https://github.com/microsoft/fast/issues/6630
+              numberTextFormat: this.format ?? undefined,
+              decimalDigits: this.decimalDigits ?? undefined,
+              decimalMaximumDigits: this.decimalMaximumDigits ?? undefined,
+              unitScale
+          });
+      }
+      determineCellContentAlignment() {
+          if (this.alignment === NumberTextAlignment.left) {
+              return TextCellViewBaseAlignment.left;
           }
-          return defaultMinPixelWidth;
+          if (this.alignment === NumberTextAlignment.right) {
+              return TextCellViewBaseAlignment.right;
+          }
+          // Look at format and decimal max digits and unit to determine the default alignment
+          if (this.format === NumberTextFormat.decimal
+              && typeof this.decimalMaximumDigits !== 'number'
+              && !this.unit) {
+              return TextCellViewBaseAlignment.right;
+          }
+          return TextCellViewBaseAlignment.left;
       }
   }
   __decorate$1([
-      attr({ attribute: 'width-mode' })
-  ], TableColumnIcon.prototype, "widthMode", void 0);
-  const nimbleTableColumnIcon = TableColumnIcon.compose({
-      baseName: 'table-column-icon',
-      template: template$8,
-      styles: styles$a
+      attr
+  ], TableColumnNumberText.prototype, "format", void 0);
+  __decorate$1([
+      attr
+  ], TableColumnNumberText.prototype, "alignment", void 0);
+  __decorate$1([
+      attr({ attribute: 'decimal-digits', converter: nullableNumberConverter })
+  ], TableColumnNumberText.prototype, "decimalDigits", void 0);
+  __decorate$1([
+      attr({
+          attribute: 'decimal-maximum-digits',
+          converter: nullableNumberConverter
+      })
+  ], TableColumnNumberText.prototype, "decimalMaximumDigits", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnNumberText.prototype, "unitElements", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnNumberText.prototype, "unit", void 0);
+  const nimbleTableColumnNumberText = TableColumnNumberText.compose({
+      baseName: 'table-column-number-text',
+      template: template$6,
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
-      .register(nimbleTableColumnIcon());
+      .register(nimbleTableColumnNumberText());
 
   /**
    * A cell view for displaying string fields as text