@ni/nimble-components 27.2.3 → 28.0.0

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 Mon, 06 May 2024 18:46:24 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -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,598 +68847,6 @@ 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
-   */
-  class TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
-      columnConfigChanged() {
-          super.columnConfigChanged();
-          this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
-      }
-      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'
-  };
-
-  /**
-   * The base class for unit formats.
-   */
-  class UnitFormat {
-      /**
-       * Formats a number value to a string.
-       * For nullish values or values that result in an exception being thrown, empty string is returned
-       */
-      format(value) {
-          if (typeof value !== 'number') {
-              return '';
-          }
-          try {
-              return this.tryFormat(value);
-          }
-          catch {
-              return '';
-          }
-      }
-  }
-
-  /**
-   * A class that knows how to format a numeric value as a string that includes units.
-   */
-  class ScaledUnitFormat {
-      constructor(scaledUnitFormatFactoryOptions) {
-          this.locale = scaledUnitFormatFactoryOptions.locale;
-          this.intlNumberFormatOptions = scaledUnitFormatFactoryOptions.intlNumberFormatOptions;
-      }
-  }
-
-  /**
-   * A formatter for units that can be formatted/translated by Intl.NumberFormat
-   */
-  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
-          });
-      }
-      static createFactory(unitSpecificIntlNumberFormatOptions) {
-          return (scaledUnitFormatFactoryOptions) => new IntlNumberFormatScaledUnitFormat(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions);
-      }
-      format(value) {
-          return this.formatter.format(value);
-      }
-  }
-
-  /**
-   * A unit that represents a scaled version of a base unit.
-   */
-  class ScaledUnit {
-      constructor(scaleFactor, scaledUnitFormatFactory) {
-          this.scaleFactor = scaleFactor;
-          this.scaledUnitFormatFactory = scaledUnitFormatFactory;
-      }
-      isBase() {
-          return this.scaleFactor === 1;
-      }
-  }
-
-  /**
-   * A unit scale consisting of a set of scaled units.
-   */
-  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
-          };
-      }
-  }
-
-  /**
-   * Unit scale that is used to passthrough a number without applying scaling or units
-   */
-  class PassthroughUnitScale extends UnitScale {
-      constructor() {
-          super([
-              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory({}))
-          ]);
-      }
-  }
-  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';
-  /**
-   * Format for numbers with units to show in a tabular form.
-   * Large and tiny numbers are shown exponentially and the rest as decimal.
-   */
-  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;
-
-  /**
-   * Format for decimal numbers with units.
-   */
-  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);
-      }
-  }
-
-  /**
-   * Format for numbers (with optional units) in a number-text table 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);
-      }
-      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
-              });
-          }
-          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 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.');
-          }
-          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
-          };
-      }
-  }
-  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;
-  /**
-   * Validator for TableColumnNumberText.
-   */
-  class TableColumnNumberTextValidator extends ColumnValidator {
-      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);
-      }
-      validateDecimalMaximumDigits(format, decimalMaximumDigits) {
-          const shouldValidateDecimalDigitsValue = format === NumberTextFormat.decimal
-              && typeof decimalMaximumDigits === 'number';
-          const invalid = shouldValidateDecimalDigitsValue
-              ? this.isInvalidDecimalDigitsValue(decimalMaximumDigits)
-              : false;
-          this.setConditionValue('invalidDecimalMaximumDigits', invalid);
-      }
-      validateNoMutuallyExclusiveProperties(format, decimalDigits, decimalMaximumDigits) {
-          const shouldValidateMutuallyExclusiveProperties = format === NumberTextFormat.decimal;
-          const invalid = shouldValidateMutuallyExclusiveProperties
-              ? typeof decimalDigits === 'number'
-                  && typeof decimalMaximumDigits === 'number'
-              : false;
-          this.setConditionValue('decimalDigitsMutuallyExclusiveWithDecimalMaximumDigits', invalid);
-      }
-      validateAtMostOneUnit(unitElements) {
-          const invalid = unitElements.length > 1;
-          this.setConditionValue('moreThanOneUnitSpecified', invalid);
-      }
-      isInvalidDecimalDigitsValue(decimalDigits) {
-          return (decimalDigits < minimumValidDecimalDigits
-              || decimalDigits > maximumValidDecimalDigits);
-      }
-  }
-
-  /**
-   * The base class for an element that provides a unit scale for scaled unit conversions
-   */
-  class Unit extends FoundationElement {
-  }
-  __decorate$1([
-      observable
-  ], Unit.prototype, "resolvedUnitScale", void 0);
-
-  /**
-   * The table column for displaying numbers as 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();
-      }
-      getColumnInternalsOptions() {
-          return {
-              cellRecordFieldNames: ['value'],
-              cellViewTag: tableColumnNumberTextCellViewTag,
-              groupHeaderViewTag: tableColumnNumberTextGroupHeaderTag,
-              delegatedEvents: [],
-              sortOperation: TableColumnSortOperation.basic,
-              validator: new TableColumnNumberTextValidator()
-          };
-      }
-      updateUnitNotifier() {
-          if (this.unitNotifier) {
-              this.unitNotifier.unsubscribe(this.unitSubscriber);
-              this.unitNotifier = undefined;
-          }
-          if (this.unit) {
-              const notifier = Observable.getNotifier(this.unit);
-              notifier.subscribe(this.unitSubscriber, 'resolvedUnitScale');
-              this.unitNotifier = notifier;
-          }
-      }
-      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);
-          }
-          this.updateUnitNotifier();
-      }
-      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.columnConfig = undefined;
-          }
-      }
-      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;
-          }
-          return TextCellViewBaseAlignment.left;
-      }
-  }
-  __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',
-      template: template$9,
-      styles: styles$e
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(nimbleTableColumnNumberText());
-
   /**
    * 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
@@ -69549,7 +68957,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$8 = html `${template$d}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$9 = html `${template$d}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -69589,18 +68997,18 @@ img.ProseMirror-separator {
       }
   }
 
-  const iconValidityFlagNames = [
+  const mappingColumnValidityFlagNames = [
       ...enumBaseValidityFlagNames,
       'unsupportedMappingType',
       'invalidIconName',
       'missingTextValue'
   ];
   /**
-   * Validator for TableColumnIcon
+   * Validator for TableColumnMapping
    */
-  class TableColumnIconValidator extends TableColumnEnumBaseValidator {
+  class TableColumnMappingValidator extends TableColumnEnumBaseValidator {
       constructor() {
-          super(iconValidityFlagNames);
+          super(mappingColumnValidityFlagNames);
       }
       static isIconMappingElement(mapping) {
           return mapping instanceof MappingIcon;
@@ -69622,18 +69030,18 @@ img.ProseMirror-separator {
       }
       validateIconNames(mappings) {
           const invalid = mappings
-              .filter(TableColumnIconValidator.isIconMappingElement)
-              .some(TableColumnIconValidator.hasUnresolvedIcon);
+              .filter(TableColumnMappingValidator.isIconMappingElement)
+              .some(TableColumnMappingValidator.hasUnresolvedIcon);
           this.setConditionValue('invalidIconName', invalid);
       }
       validateNoMissingText(mappings) {
           const invalid = mappings
-              .filter(TableColumnIconValidator.isSupportedMappingElement)
+              .filter(TableColumnMappingValidator.isSupportedMappingElement)
               .some(mapping => mapping.text === undefined);
           this.setConditionValue('missingTextValue', invalid);
       }
       validateMappingTypes(mappings) {
-          const valid = mappings.every(TableColumnIconValidator.isSupportedMappingElement);
+          const valid = mappings.every(TableColumnMappingValidator.isSupportedMappingElement);
           this.setConditionValue('unsupportedMappingType', !valid);
       }
   }
@@ -69663,7 +69071,7 @@ img.ProseMirror-separator {
 `;
 
   // prettier-ignore
-  const template$7 = html `
+  const template$8 = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -69737,262 +69145,857 @@ img.ProseMirror-separator {
     </${spinnerTag}>
 `;
   /**
-   * Mapping configuration corresponding to a spinner mapping
+   * Mapping configuration corresponding to a spinner mapping
+   */
+  class MappingSpinnerConfig extends MappingConfig {
+      constructor(text, textHidden) {
+          super(text);
+          this.textHidden = textHidden;
+          this.spinnerTemplate = spinnerTemplate;
+      }
+  }
+
+  /**
+   * Mapping configuration corresponding to a text mapping
+   */
+  class MappingTextConfig extends MappingConfig {
+  }
+
+  /**
+   * The group header view for the mapping column
+   */
+  class TableColumnMappingGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      constructor() {
+          super(...arguments);
+          this.textHidden = false;
+      }
+      updateText() {
+          this.resetState();
+          if (!this.columnConfig) {
+              return;
+          }
+          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;
+          }
+          else if (mappingConfig instanceof MappingSpinnerConfig) {
+              this.text = mappingConfig.text ?? '';
+              this.visualizationTemplate = mappingConfig.spinnerTemplate;
+          }
+          else if (mappingConfig instanceof MappingTextConfig) {
+              this.text = mappingConfig.text ?? '';
+          }
+      }
+      resetState() {
+          this.text = '';
+          this.visualizationTemplate = undefined;
+          this.severity = IconSeverity.default;
+      }
+  }
+  __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>
+    `)}
+`;
+
+  /**
+   * The cell view for the mapping column
+   */
+  class TableColumnMappingCellView extends TableCellView {
+      constructor() {
+          super(...arguments);
+          this.textHidden = false;
+          /** @internal */
+          this.hasOverflow = false;
+      }
+      columnConfigChanged() {
+          this.updateState();
+      }
+      cellRecordChanged() {
+          this.updateState();
+      }
+      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;
+          }
+      }
+      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';
+
+  /**
+   * Width mode for the mapping column
+   */
+  const TableColumnMappingWidthMode = {
+      default: undefined,
+      iconSize: 'icon-size'
+  };
+
+  /**
+   * Table column that maps number, boolean, or string values to an icon, a spinner,
+   * text, or an icon/spinner with text.
+   */
+  class TableColumnMapping extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
+      minPixelWidthChanged() {
+          if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {
+              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+          }
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnMappingCellViewTag,
+              groupHeaderViewTag: tableColumnMappingGroupHeaderViewTag,
+              delegatedEvents: [],
+              sortOperation: TableColumnSortOperation.basic,
+              validator: new TableColumnMappingValidator()
+          };
+      }
+      createColumnConfig(mappingConfigs) {
+          return {
+              mappingConfigs
+          };
+      }
+      createMappingConfig(mapping) {
+          if (mapping instanceof MappingIcon) {
+              return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text, mapping.textHidden);
+          }
+          if (mapping instanceof MappingSpinner) {
+              return new MappingSpinnerConfig(mapping.text, mapping.textHidden);
+          }
+          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');
+      }
+      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.resizingDisabled = false;
+              this.columnInternals.hideHeaderIndicators = false;
+              this.columnInternals.pixelWidth = undefined;
+              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+          }
+      }
+      getConfiguredMinPixelWidth() {
+          if (typeof this.minPixelWidth === 'number') {
+              return this.minPixelWidth;
+          }
+          return defaultMinPixelWidth;
+      }
+  }
+  __decorate$1([
+      attr({ attribute: 'width-mode' })
+  ], TableColumnMapping.prototype, "widthMode", void 0);
+  const nimbleTableColumnMapping = TableColumnMapping.compose({
+      baseName: 'table-column-mapping',
+      template: template$9,
+      styles: styles$a
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .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>`;
+
+  /**
+   * 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
+   */
+  class TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
+      columnConfigChanged() {
+          super.columnConfigChanged();
+          this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
+      }
+      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'
+  };
+
+  /**
+   * The base class for unit formats.
+   */
+  class UnitFormat {
+      /**
+       * Formats a number value to a string.
+       * For nullish values or values that result in an exception being thrown, empty string is returned
+       */
+      format(value) {
+          if (typeof value !== 'number') {
+              return '';
+          }
+          try {
+              return this.tryFormat(value);
+          }
+          catch {
+              return '';
+          }
+      }
+  }
+
+  /**
+   * A class that knows how to format a numeric value as a string that includes units.
+   */
+  class ScaledUnitFormat {
+      constructor(scaledUnitFormatFactoryOptions) {
+          this.locale = scaledUnitFormatFactoryOptions.locale;
+          this.intlNumberFormatOptions = scaledUnitFormatFactoryOptions.intlNumberFormatOptions;
+      }
+  }
+
+  /**
+   * A formatter for units that can be formatted/translated by Intl.NumberFormat
+   */
+  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
+          });
+      }
+      static createFactory(unitSpecificIntlNumberFormatOptions) {
+          return (scaledUnitFormatFactoryOptions) => new IntlNumberFormatScaledUnitFormat(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions);
+      }
+      format(value) {
+          return this.formatter.format(value);
+      }
+  }
+
+  /**
+   * A unit that represents a scaled version of a base unit.
+   */
+  class ScaledUnit {
+      constructor(scaleFactor, scaledUnitFormatFactory) {
+          this.scaleFactor = scaleFactor;
+          this.scaledUnitFormatFactory = scaledUnitFormatFactory;
+      }
+      isBase() {
+          return this.scaleFactor === 1;
+      }
+  }
+
+  /**
+   * A unit scale consisting of a set of scaled units.
+   */
+  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
+          };
+      }
+  }
+
+  /**
+   * Unit scale that is used to passthrough a number without applying scaling or units
+   */
+  class PassthroughUnitScale extends UnitScale {
+      constructor() {
+          super([
+              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory({}))
+          ]);
+      }
+  }
+  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';
+  /**
+   * 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