@ni/nimble-components 20.17.7 → 20.18.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 17 Jan 2024 00:34:10 GMT
+   * Generated on Wed, 17 Jan 2024 14:08:42 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16704,7 +16704,7 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$D = html `<slot></slot>`;
+  const template$F = html `<slot></slot>`;
 
   const styles$X = css `
     :host {
@@ -16824,7 +16824,7 @@
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
       styles: styles$X,
-      template: template$D
+      template: template$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -17116,7 +17116,7 @@
 `;
 
   // prettier-ignore
-  const template$C = (_context, definition) => html `${
+  const template$E = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -17215,7 +17215,7 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$C,
+      template: template$E,
       styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
@@ -17605,7 +17605,7 @@
     }
 `;
 
-  const template$B = (context, definition) => html `
+  const template$D = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17687,7 +17687,7 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$B,
+      template: template$D,
       styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
@@ -17773,7 +17773,7 @@
     }
 `;
 
-  const template$A = (context, definition) => html `
+  const template$C = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17874,7 +17874,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$A,
+      template: template$C,
       styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
@@ -18014,7 +18014,7 @@
     }
 `;
 
-  const template$z = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18066,7 +18066,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$z,
+      template: template$B,
       styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
@@ -18096,7 +18096,7 @@
     }
 `;
 
-  const template$y = (context, definition) => html `
+  const template$A = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18302,7 +18302,7 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$y,
+      template: template$A,
       styles: styles$R,
       shadowOptions: {
           delegatesFocus: false
@@ -18420,7 +18420,7 @@
     }
 `;
 
-  const template$x = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18557,7 +18557,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$x,
+      template: template$z,
       styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
@@ -19579,7 +19579,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$w = html `<div
+  const template$y = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -19638,7 +19638,7 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$w,
+          template: template$y,
           styles: styles$M,
           baseClass: iconClass
       });
@@ -19743,7 +19743,7 @@
   }).withDefault(coreLabelDefaults.informationIconLabel);
 
   // prettier-ignore
-  const template$v = html `
+  const template$x = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19859,7 +19859,7 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$v,
+      template: template$x,
       styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -20014,7 +20014,7 @@
     }
 `;
 
-  const template$u = html `
+  const template$w = html `
     ${'' /* Explicitly set role to work around Lighthouse error. See https://github.com/ni/nimble/issues/1650. */}
     <section role="region" aria-labelledby="title-slot">
         <slot name="title" id="title-slot"></slot>
@@ -20030,7 +20030,7 @@
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$u,
+      template: template$w,
       styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
@@ -20406,7 +20406,7 @@
     }
 `;
 
-  const template$t = (context, definition) => html `
+  const template$v = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20481,7 +20481,7 @@
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$t,
+      template: template$v,
       styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
@@ -20915,7 +20915,7 @@
   }
 
   // prettier-ignore
-  const template$s = (context, definition) => html `
+  const template$u = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21193,7 +21193,7 @@
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: Combobox$1,
-      template: template$s,
+      template: template$u,
       styles: styles$D,
       shadowOptions: {
           delegatesFocus: true
@@ -21340,7 +21340,7 @@
             }
         `));
 
-  const template$r = html `
+  const template$t = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21467,7 +21467,7 @@
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$r,
+      template: template$t,
       styles: styles$C,
       baseClass: Dialog
   });
@@ -21626,7 +21626,7 @@
             }
         `));
 
-  const template$q = html `
+  const template$s = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21740,7 +21740,7 @@
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$q,
+      template: template$s,
       styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -24104,7 +24104,7 @@
    * @public
    */
   // prettier-ignore
-  const template$p = (context, definition) => html `
+  const template$r = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -24152,7 +24152,7 @@
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$p,
+      template: template$r,
       styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
@@ -24167,7 +24167,7 @@
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$o = html `<template slot="mapping"></template>`;
+  const template$q = html `<template slot="mapping"></template>`;
 
   /**
    * Defines a mapping from one data value ('key' property) to display text ('text' property).
@@ -24181,7 +24181,7 @@
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$o
+      template: template$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -24244,7 +24244,7 @@
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$o
+      template: template$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -24260,7 +24260,7 @@
   ], MappingSpinner.prototype, "text", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$o
+      template: template$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -24354,7 +24354,7 @@
 `;
 
   // prettier-ignore
-  const template$n = html `
+  const template$p = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -24609,7 +24609,7 @@
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$n,
+      template: template$p,
       styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
@@ -42158,7 +42158,7 @@ img.ProseMirror-separator {
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListbox());
 
   // prettier-ignore
-  const template$m = html `
+  const template$o = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -42419,7 +42419,7 @@ img.ProseMirror-separator {
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$m,
+      template: template$o,
       styles: styles$s
   });
   DesignSystem.getOrCreate()
@@ -42428,7 +42428,7 @@ img.ProseMirror-separator {
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
   // prettier-ignore
-  const template$l = html `
+  const template$n = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -52380,6 +52380,13 @@ img.ProseMirror-separator {
       }
   }
 
+  async function waitUntilCustomElementsDefinedAsync(elements) {
+      const definedElements = elements.map(async (item) => (item.matches(':not(:defined)')
+          ? customElements.whenDefined(item.localName)
+          : Promise.resolve()));
+      await Promise.all(definedElements);
+  }
+
   /**
    * Base class for rich text components
    */
@@ -52415,10 +52422,7 @@ img.ProseMirror-separator {
           void this.updateMentionElementsFromChildItems();
       }
       async updateMentionElementsFromChildItems() {
-          const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
-              ? customElements.whenDefined(item.localName)
-              : Promise.resolve()));
-          await Promise.all(definedElements);
+          await waitUntilCustomElementsDefinedAsync(this.childItems);
           this.mentionElements = this.childItems.filter((x) => x instanceof RichTextMention);
       }
       observeMentionInternals() {
@@ -56873,7 +56877,7 @@ img.ProseMirror-separator {
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$l,
+      template: template$n,
       styles: styles$q,
       shadowOptions: {
           delegatesFocus: true
@@ -56883,7 +56887,7 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$k = html `
+  const template$m = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
@@ -56998,7 +57002,7 @@ img.ProseMirror-separator {
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$k,
+      template: template$m,
       styles: styles$p
   });
   DesignSystem.getOrCreate()
@@ -57035,7 +57039,7 @@ img.ProseMirror-separator {
         `));
 
   // prettier-ignore
-  const template$j = (context, definition) => html `
+  const template$l = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -57178,7 +57182,7 @@ img.ProseMirror-separator {
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$1,
-      template: template$j,
+      template: template$l,
       styles: styles$o,
       indicator: arrowExpanderDown16X16.data,
       end: html `
@@ -57353,7 +57357,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const template$i = html `
+  const template$k = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -57391,7 +57395,7 @@ img.ProseMirror-separator {
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$i,
+      template: template$k,
       styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
@@ -57560,7 +57564,7 @@ img.ProseMirror-separator {
         `));
 
   // prettier-ignore
-  const template$h = html `
+  const template$j = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -57604,7 +57608,7 @@ img.ProseMirror-separator {
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$h,
+      template: template$j,
       styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
@@ -61784,7 +61788,7 @@ img.ProseMirror-separator {
 `;
 
   // prettier-ignore
-  const template$g = html `
+  const template$i = html `
     <template role="columnheader"
         aria-sort="${x => x.ariaSort}"
         ${'' /* Prevent header double clicks from selecting text */}
@@ -61858,7 +61862,7 @@ img.ProseMirror-separator {
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$g,
+      template: template$i,
       styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
@@ -62029,7 +62033,7 @@ img.ProseMirror-separator {
 `;
 
   // prettier-ignore
-  const template$f = html `
+  const template$h = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
         ${x => x.cellViewTemplate}
         ${when(x => x.hasActionMenu, html `
@@ -62098,14 +62102,14 @@ img.ProseMirror-separator {
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$f,
+      template: template$h,
       styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
   // prettier-ignore
-  const template$e = html `
+  const template$g = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -62412,7 +62416,7 @@ img.ProseMirror-separator {
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$e,
+      template: template$g,
       styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
@@ -62507,7 +62511,7 @@ img.ProseMirror-separator {
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$d = html `
+  const template$f = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -62645,14 +62649,14 @@ img.ProseMirror-separator {
   ], TableGroupRow.prototype, "animationClass", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$d,
+      template: template$f,
       styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
   // prettier-ignore
-  const template$c = html `
+  const template$e = html `
     <template
         role="grid"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
@@ -64733,10 +64737,7 @@ img.ProseMirror-separator {
           void this.updateColumnsFromChildItems();
       }
       async updateColumnsFromChildItems() {
-          const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
-              ? customElements.whenDefined(item.localName)
-              : Promise.resolve()));
-          await Promise.all(definedElements);
+          await waitUntilCustomElementsDefinedAsync(this.childItems);
           this.columns = this.childItems.filter((x) => x instanceof TableColumn);
       }
       updateTanStack() {
@@ -65039,7 +65040,7 @@ img.ProseMirror-separator {
   ], Table.prototype, "documentShiftKeyDown", void 0);
   const nimbleTable = Table.compose({
       baseName: 'table',
-      template: template$c,
+      template: template$e,
       styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
@@ -65059,7 +65060,7 @@ img.ProseMirror-separator {
   // Avoiding a wrapping <template> and be careful about starting and ending whitspace
   // so the template can be composed into other column header templates
   // prettier-ignore
-  const template$b = html `<span
+  const template$d = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -65160,7 +65161,7 @@ img.ProseMirror-separator {
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$a = html `
+  const template$c = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -65227,7 +65228,7 @@ img.ProseMirror-separator {
   ], TableColumnAnchorCellView.prototype, "text", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$a,
+      template: template$c,
       styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
@@ -65254,7 +65255,7 @@ img.ProseMirror-separator {
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$9 = html `
+  const template$b = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -65285,7 +65286,7 @@ img.ProseMirror-separator {
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$9,
+      template: template$b,
       styles: styles$b
   });
   DesignSystem.getOrCreate()
@@ -65399,7 +65400,7 @@ img.ProseMirror-separator {
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$b,
+      template: template$d,
       styles: styles$d
   });
   DesignSystem.getOrCreate()
@@ -65454,7 +65455,7 @@ img.ProseMirror-separator {
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$9,
+      template: template$b,
       styles: styles$b
   });
   DesignSystem.getOrCreate()
@@ -65470,7 +65471,7 @@ img.ProseMirror-separator {
       right: 'right'
   };
 
-  const template$8 = html `
+  const template$a = html `
     <template
         class="${x => (x.alignment === TextCellViewBaseAlignment.right
     ? 'right-align'
@@ -65548,7 +65549,7 @@ img.ProseMirror-separator {
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$8,
+      template: template$a,
       styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
@@ -65852,7 +65853,7 @@ img.ProseMirror-separator {
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$b,
+      template: template$d,
       styles: styles$d
   });
   DesignSystem.getOrCreate()
@@ -65875,7 +65876,7 @@ img.ProseMirror-separator {
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$8,
+      template: template$a,
       styles: styles$a
   });
   DesignSystem.getOrCreate()
@@ -65983,7 +65984,7 @@ img.ProseMirror-separator {
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$9,
+      template: template$b,
       styles: styles$b
   });
   DesignSystem.getOrCreate()
@@ -66036,7 +66037,7 @@ img.ProseMirror-separator {
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$b,
+      template: template$d,
       styles: styles$d
   });
   DesignSystem.getOrCreate()
@@ -66157,7 +66158,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$7 = html `${template$b}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$9 = html `${template$d}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -66268,7 +66269,7 @@ img.ProseMirror-separator {
   }
   const enumTextCellView = TableColumnEnumTextCellView.compose({
       baseName: 'table-column-enum-text-cell-view',
-      template: template$8,
+      template: template$a,
       styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(enumTextCellView());
@@ -66298,7 +66299,7 @@ img.ProseMirror-separator {
   }
   const enumTextGroupHeaderView = TableColumnEnumTextGroupHeaderView.compose({
       baseName: 'table-column-enum-text-group-header-view',
-      template: template$9,
+      template: template$b,
       styles: styles$b
   });
   DesignSystem.getOrCreate()
@@ -66341,13 +66342,25 @@ img.ProseMirror-separator {
   }
   const nimbleTableColumnEnumText = TableColumnEnumText.compose({
       baseName: 'table-column-enum-text',
-      template: template$7,
+      template: template$9,
       styles: styles$9
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnEnumText());
 
+  // 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$8 = 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.
    */
@@ -66359,13 +66372,12 @@ img.ProseMirror-separator {
           this.updateText();
       }
       updateText() {
-          this.text = this.columnConfig?.formatter?.formatValue(this.groupHeaderValue)
-              ?? '';
+          this.text = this.columnConfig?.formatter?.format(this.groupHeaderValue) ?? '';
       }
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$9,
+      template: template$b,
       styles: styles$b
   });
   DesignSystem.getOrCreate()
@@ -66385,13 +66397,12 @@ img.ProseMirror-separator {
           this.updateText();
       }
       updateText() {
-          this.text = this.columnConfig?.formatter?.formatValue(this.cellRecord?.value)
-              ?? '';
+          this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';
       }
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$8,
+      template: template$a,
       styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
@@ -66415,19 +66426,19 @@ img.ProseMirror-separator {
   };
 
   /**
-   * The base class for number formatters used by the number-text column.
+   * The base class for unit formats.
    */
-  class NumberFormatter {
+  class UnitFormat {
       /**
-       * Tries to format the passed value using the `format()` function implemented by a concrete implementation of the class.
-       * Returns an empty string if the value is not a number or if `format()` throws an error.
+       * Formats a number value to a string.
+       * For nullish values or values that result in an exception being thrown, empty string is returned
        */
-      formatValue(value) {
+      format(value) {
           if (typeof value !== 'number') {
               return '';
           }
           try {
-              return this.format(value);
+              return this.tryFormat(value);
           }
           catch {
               return '';
@@ -66436,81 +66447,254 @@ img.ProseMirror-separator {
   }
 
   /**
-   * The formatter for a number-text column whose format is configured to be 'default'.
+   * 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 DefaultFormatter extends NumberFormatter {
-      constructor(locale) {
+  class PassthroughUnitScale extends UnitScale {
+      constructor() {
+          super([
+              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory())
+          ]);
+      }
+  }
+  const passthroughUnitScale = new PassthroughUnitScale();
+
+  /**
+   * 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();
-          this.defaultFormatter = new Intl.NumberFormat(locale, {
-              maximumSignificantDigits: DefaultFormatter.maximumDigits,
+          // Format options to use by default. It renders the number with a maximum of 6 signficant digits.
+          this.defaultIntlNumberFormatOptions = {
+              maximumSignificantDigits: DefaultUnitFormat.maximumDigits,
               useGrouping: true
-          });
-          this.leadingZeroFormatter = new Intl.NumberFormat(locale, {
-              maximumFractionDigits: DefaultFormatter.maximumDigits - 1,
+          };
+          this.defaultScaledUnitFormatters = new Map();
+          // Format options to use for numbers that have leading zeros. It limits the number of rendered
+          // digits using 'maximumFractionDigits', which will result in less than 6 significant digits
+          // in order to render no more than 6 total digits.
+          this.leadingZeroIntlNumberFormatOptions = {
+              maximumFractionDigits: DefaultUnitFormat.maximumDigits - 1,
               useGrouping: true
-          });
-          this.exponentialFormatter = new Intl.NumberFormat(locale, {
-              maximumSignificantDigits: DefaultFormatter.maximumDigits,
+          };
+          this.leadingZeroScaledUnitFormatters = 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'
+          };
+          for (const unit of unitScale.supportedScaledUnits) {
+              this.defaultScaledUnitFormatters.set(unit.scaleFactor, unit.scaledUnitFormatFactory({
+                  locale,
+                  intlNumberFormatOptions: this.defaultIntlNumberFormatOptions
+              }));
+              this.leadingZeroScaledUnitFormatters.set(unit.scaleFactor, unit.scaledUnitFormatFactory({
+                  locale,
+                  intlNumberFormatOptions: this.leadingZeroIntlNumberFormatOptions
+              }));
+          }
+          this.exponentialScaledUnitFormatter = unitScale.baseScaledUnit.scaledUnitFormatFactory({
+              locale,
+              intlNumberFormatOptions: this.exponentialIntlNumberFormatOptions
           });
+          this.unitScale = unitScale;
       }
-      format(number) {
-          // The NumberFormat option of `signDisplay: "negative"` is not supported in all browsers nimble supports.
-          // Because that option cannot be used to avoid rendering "-0", coerce the value -0 to 0 prior to formatting.
-          const valueToFormat = number === 0 ? 0 : number;
-          const formatter = this.getFormatterForNumber(valueToFormat);
-          return formatter.format(valueToFormat);
+      resolvedOptions() {
+          return {
+              unitScale: this.unitScale
+          };
       }
-      getFormatterForNumber(number) {
+      tryFormat(number) {
+          // Normalize +0 / -0 --> +0
+          const numberNormalized = number === 0 ? 0 : number;
+          const { scaledValue, scaledUnit } = this.unitScale.scaleNumber(numberNormalized);
+          const numberStyle = this.resolveNumberStyle(scaledValue);
+          switch (numberStyle) {
+              case 'default': {
+                  const scaledUnitFormatter = this.defaultScaledUnitFormatters.get(scaledUnit.scaleFactor);
+                  return scaledUnitFormatter.format(scaledValue);
+              }
+              case 'leadingZero': {
+                  const scaledUnitFormatter = this.leadingZeroScaledUnitFormatters.get(scaledUnit.scaleFactor);
+                  return scaledUnitFormatter.format(scaledValue);
+              }
+              case 'exponential': {
+                  const scaledUnitFormatter = this.exponentialScaledUnitFormatter;
+                  return scaledUnitFormatter.format(numberNormalized);
+              }
+              default:
+                  throw new Error('Unexpected number format style');
+          }
+      }
+      resolveNumberStyle(number) {
           if (number === 0) {
-              return this.defaultFormatter;
+              return 'default';
           }
           const absoluteValue = Math.abs(number);
-          if (absoluteValue >= DefaultFormatter.exponentialUpperBound
-              || absoluteValue < DefaultFormatter.exponentialLowerBound) {
-              return this.exponentialFormatter;
+          if (absoluteValue >= DefaultUnitFormat.exponentialUpperBound
+              || absoluteValue < DefaultUnitFormat.exponentialLowerBound) {
+              return 'exponential';
           }
           // Ideally, we could set 'roundingPriority: "lessPrecision"' with a formatter that has both 'maximumSignificantDigits' and
           // 'maximumFractionDigits' configured instead of having two different formatters that we conditionally choose between. However,
-          // 'roundingPrioirty' is not supported yet in all browsers nimble supports.
+          // 'roundingPrioirty' is not supported yet in all browsers.
           if (absoluteValue < 1) {
-              return this.leadingZeroFormatter;
+              return 'leadingZero';
           }
-          return this.defaultFormatter;
+          return 'default';
       }
   }
   // The maximum number of digits that should be rendered for any given value.
-  DefaultFormatter.maximumDigits = 6;
+  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.
-  DefaultFormatter.exponentialLowerBound = 0.000995;
+  DefaultUnitFormat.exponentialLowerBound = 0.000995;
   // Use exponential formatting for numbers whose magnitude cannot otherwise be displayed
   // with 6 digits or less.
-  DefaultFormatter.exponentialUpperBound = 999999.5;
+  DefaultUnitFormat.exponentialUpperBound = 999999.5;
 
   /**
-   * The formatter for a number-text column whose format is configured to be 'decimal'.
+   * Format for decimal numbers with units.
    */
-  class DecimalFormatter extends NumberFormatter {
-      constructor(locale, minimumFractionDigits, maximumFractionDigits) {
+  class DecimalUnitFormat extends UnitFormat {
+      constructor(locale, { minimumFractionDigits = 0, maximumFractionDigits = Math.max(3, minimumFractionDigits), unitScale = passthroughUnitScale } = {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 3,
+          unitScale: passthroughUnitScale
+      }) {
           super();
-          this.formatter = new Intl.NumberFormat(locale, {
+          this.scaledUnitFormatters = new Map();
+          const intlNumberFormatOptions = {
               maximumFractionDigits,
               minimumFractionDigits,
               useGrouping: true
-          });
+          };
+          for (const scaledUnit of unitScale.supportedScaledUnits) {
+              this.scaledUnitFormatters.set(scaledUnit.scaleFactor, scaledUnit.scaledUnitFormatFactory({
+                  locale,
+                  intlNumberFormatOptions
+              }));
+          }
           this.tenPowDecimalDigits = 10 ** maximumFractionDigits;
+          this.unitScale = unitScale;
+          this.minimumFractionDigits = minimumFractionDigits;
+          this.maximumFractionDigits = maximumFractionDigits;
+      }
+      resolvedOptions() {
+          return {
+              unitScale: this.unitScale,
+              maximumFractionDigits: this.maximumFractionDigits,
+              minimumFractionDigits: this.minimumFractionDigits
+          };
       }
-      format(number) {
-          // The NumberFormat option of `signDisplay: "negative"` is not supported in all browsers nimble supports.
-          // Because that option cannot be used to avoid rendering "-0", coerce the value -0 to 0 prior to formatting.
-          const valueToFormat = this.willRoundToZero(number) ? 0 : number;
-          return this.formatter.format(valueToFormat);
+      tryFormat(number) {
+          const { scaledValue, scaledUnit } = this.unitScale.scaleNumber(number);
+          const numberNormalized = this.willRoundToZero(scaledValue)
+              ? 0
+              : scaledValue;
+          const scaledUnitFormatter = this.scaledUnitFormatters.get(scaledUnit.scaleFactor);
+          return scaledUnitFormatter.format(numberNormalized);
       }
       willRoundToZero(number) {
-          // Multiply the value by 10 raised to decimal-digits so that Math.round can be used to emulate rounding to
-          // decimal-digits decimal places. If that rounded value is 0, then the value will be rendered with only 0s.
+          // Multiply the value by 10 raised to maximumFractionDigits so that Math.round can be used to emulate rounding to
+          // maximumFractionDigits decimal places. If that rounded value is 0, then the value will be rendered with only 0s.
           return Math.round(number * this.tenPowDecimalDigits) === 0;
       }
   }
@@ -66518,7 +66702,8 @@ img.ProseMirror-separator {
   const numberTextValidityFlagNames = [
       'invalidDecimalDigits',
       'invalidDecimalMaximumDigits',
-      'decimalDigitsMutuallyExclusiveWithDecimalMaximumDigits'
+      'decimalDigitsMutuallyExclusiveWithDecimalMaximumDigits',
+      'moreThanOneUnitSpecified'
   ];
   // The maximum and minimum allowed configuration for 'maximumFractionDigits'
   // and 'minimumFractionDigits' on the NumberFormat.
@@ -66555,12 +66740,25 @@ img.ProseMirror-separator {
               : 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);
+
   const defaultDecimalDigits = 2;
   /**
    * The table column for displaying numbers as text.
@@ -66575,6 +66773,11 @@ img.ProseMirror-separator {
                   this.updateColumnConfig();
               }
           };
+          this.unitSubscriber = {
+              handleChange: () => {
+                  this.updateColumnConfig();
+              }
+          };
       }
       connectedCallback() {
           super.connectedCallback();
@@ -66597,6 +66800,17 @@ img.ProseMirror-separator {
               sortOperation: TableColumnSortOperation.basic
           };
       }
+      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();
       }
@@ -66609,10 +66823,25 @@ img.ProseMirror-separator {
       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() {
           this.validator.validateDecimalDigits(this.format, this.decimalDigits);
           this.validator.validateDecimalMaximumDigits(this.format, this.decimalMaximumDigits);
           this.validator.validateNoMutuallyExclusiveProperties(this.format, this.decimalDigits, this.decimalMaximumDigits);
+          this.validator.validateAtMostOneUnit(this.unitElements ?? []);
           if (this.validator.isValid()) {
               const columnConfig = {
                   formatter: this.createFormatter(),
@@ -66625,19 +66854,26 @@ img.ProseMirror-separator {
           }
       }
       createFormatter() {
-          let minimumDigits;
-          let maximumDigits;
+          const unitScale = this.unit?.resolvedUnitScale;
           switch (this.format) {
-              case NumberTextFormat.decimal:
-                  minimumDigits = typeof this.decimalMaximumDigits === 'number'
+              case NumberTextFormat.decimal: {
+                  const minimumFractionDigits = typeof this.decimalMaximumDigits === 'number'
                       ? 0
                       : this.decimalDigits ?? defaultDecimalDigits;
-                  maximumDigits = this.decimalMaximumDigits
+                  const maximumFractionDigits = this.decimalMaximumDigits
                       ?? this.decimalDigits
                       ?? defaultDecimalDigits;
-                  return new DecimalFormatter(lang.getValueFor(this), minimumDigits, maximumDigits);
-              default:
-                  return new DefaultFormatter(lang.getValueFor(this));
+                  return new DecimalUnitFormat(lang.getValueFor(this), {
+                      minimumFractionDigits,
+                      maximumFractionDigits,
+                      unitScale
+                  });
+              }
+              default: {
+                  return new DefaultUnitFormat(lang.getValueFor(this), {
+                      unitScale
+                  });
+              }
           }
       }
       determineCellContentAlignment() {
@@ -66647,9 +66883,10 @@ img.ProseMirror-separator {
           if (this.alignment === NumberTextAlignment.right) {
               return TextCellViewBaseAlignment.right;
           }
-          // Look at format and decimal max digits to determine the default alignment
+          // Look at format and decimal max digits and unit to determine the default alignment
           if (this.format === NumberTextFormat.decimal
-              && typeof this.decimalMaximumDigits !== 'number') {
+              && typeof this.decimalMaximumDigits !== 'number'
+              && !this.unit) {
               return TextCellViewBaseAlignment.right;
           }
           return TextCellViewBaseAlignment.left;
@@ -66670,9 +66907,15 @@ img.ProseMirror-separator {
           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$b,
+      template: template$8,
       styles: styles$d
   });
   DesignSystem.getOrCreate()
@@ -66745,7 +66988,7 @@ img.ProseMirror-separator {
 `;
 
   // prettier-ignore
-  const template$6 = html `
+  const template$7 = html `
     ${when(x => x.visual === 'icon', html `
             ${x => x.iconTemplate}
             <span    
@@ -66837,13 +67080,13 @@ img.ProseMirror-separator {
   ], TableColumnIconGroupHeaderView.prototype, "visual", void 0);
   const iconGroupHeaderView = TableColumnIconGroupHeaderView.compose({
       baseName: 'table-column-icon-group-header-view',
-      template: template$6,
+      template: template$7,
       styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconGroupHeaderView());
   const tableColumnIconGroupHeaderViewTag = 'nimble-table-column-icon-group-header-view';
 
-  const template$5 = html `
+  const template$6 = html `
     ${when(x => x.visual === 'icon', x => x.iconTemplate)}
     ${when(x => x.visual === 'spinner', html `
         <${spinnerTag}
@@ -66900,7 +67143,7 @@ img.ProseMirror-separator {
   ], TableColumnIconCellView.prototype, "visual", void 0);
   const iconCellView = TableColumnIconCellView.compose({
       baseName: 'table-column-icon-cell-view',
-      template: template$5
+      template: template$6
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconCellView());
   const tableColumnIconCellViewTag = 'nimble-table-column-icon-cell-view';
@@ -66946,7 +67189,7 @@ img.ProseMirror-separator {
   }
   const nimbleTableColumnIcon = TableColumnIcon.compose({
       baseName: 'table-column-icon',
-      template: template$7,
+      template: template$9,
       styles: styles$9
   });
   DesignSystem.getOrCreate()
@@ -66965,7 +67208,7 @@ img.ProseMirror-separator {
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$8,
+      template: template$a,
       styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
@@ -66987,7 +67230,7 @@ img.ProseMirror-separator {
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$b,
+      template: template$d,
       styles: styles$d
   });
   DesignSystem.getOrCreate()
@@ -67061,7 +67304,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$4 = html `
+  const template$5 = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -67075,7 +67318,7 @@ img.ProseMirror-separator {
   }
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$4,
+      template: template$5,
       styles: styles$6
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -67250,7 +67493,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const template$3 = () => html `
+  const template$4 = () => html `
     <label
         part="label"
         for="control"
@@ -67413,7 +67656,7 @@ img.ProseMirror-separator {
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$3,
+      template: template$4,
       styles: styles$5,
       shadowOptions: {
           delegatesFocus: true
@@ -67802,7 +68045,7 @@ img.ProseMirror-separator {
         `));
 
   // prettier-ignore
-  const template$2 = html `
+  const template$3 = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -67854,7 +68097,7 @@ img.ProseMirror-separator {
   const nimbleTooltip = Tooltip.compose({
       baseName: 'tooltip',
       baseClass: Tooltip$1,
-      template: template$2,
+      template: template$3,
       styles: styles$3
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
@@ -68181,7 +68424,7 @@ img.ProseMirror-separator {
 `;
 
   // prettier-ignore
-  const template$1 = html `
+  const template$2 = html `
     <template
         role="tree"
         ${ref('treeView')}
@@ -68277,11 +68520,248 @@ img.ProseMirror-separator {
   const nimbleTreeView = TreeView.compose({
       baseName: 'tree-view',
       baseClass: TreeView$1,
-      template: template$1,
+      template: template$2,
       styles: styles$1
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
+  const template$1 = html `<template slot="unit"></template>`;
+
+  /**
+   * A formatter for units that are not supported by Intl.NumberFormat
+   */
+  class ManuallyTranslatedScaledUnitFormat extends ScaledUnitFormat {
+      constructor(scaledUnitFormatFactoryOptions, unitTranslations, unitPrefix) {
+          super(scaledUnitFormatFactoryOptions);
+          this.unitTranslations = unitTranslations;
+          this.unitPrefix = unitPrefix;
+          this.pluralRules = new Intl.PluralRules(this.locale);
+          this.formatter = new Intl.NumberFormat(this.locale, this.intlNumberFormatOptions);
+          this.unitTranslation = this.getTranslationToUse(this.locale);
+      }
+      static createFactory(unitTranslations, unitPrefix) {
+          return (scaledUnitFormatFactoryOptions) => new ManuallyTranslatedScaledUnitFormat(scaledUnitFormatFactoryOptions, unitTranslations, unitPrefix);
+      }
+      format(value) {
+          const formatted = this.formatter.format(value);
+          if (!this.unitPrefix.isBase()) {
+              return `${formatted} ${this.unitPrefix.text}${this.unitTranslation.symbol}`;
+          }
+          // Some languages have more than two forms (singular/plural) of cardinal
+          // numbers, but we are treating anything other than the 'one' form as plural.
+          // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules#description
+          //
+          // Because PluralRules.select() takes a number (not a string), it cannot differentiate
+          // between 1 and 1.0. When NumberFormat is configured to format with a set number
+          // of fractional digits, those fractional digits can have an effect on the pluralization
+          // of the unit. E.g. in English, it formats "1 byte" vs "1.0 bytes". Thus there is
+          // sometimes an inconsistency between unit pluralization for the same number, based
+          // on whether it's supported by NumberFormat, or manually translated.
+          const unitLabel = this.pluralRules.select(value) === 'one'
+              ? this.unitTranslation.singular
+              : this.unitTranslation.plural;
+          return `${formatted} ${unitLabel}`;
+      }
+      getTranslationToUse(locale) {
+          const localeObject = new Intl.Locale(locale ?? 'en');
+          const language = localeObject.language;
+          const region = localeObject.region;
+          const regionSpecificMatchedTranslations = region
+              ? this.unitTranslations.get(`${language}-${region}`) // do not include any other subtags that might be in the given locale string
+              : null;
+          return (regionSpecificMatchedTranslations
+              ?? this.unitTranslations.get(language)
+              ?? this.unitTranslations.get('en'));
+      }
+  }
+
+  /**
+   * A unit scale that is not supported by Intl.NumberFormat and has manually provided translation strings
+   */
+  class ManuallyTranslatedUnitScale extends UnitScale {
+      constructor(unitTranslations, supportedUnitPrefixes) {
+          super(ManuallyTranslatedUnitScale.createSupportedScaledUnits(unitTranslations, supportedUnitPrefixes));
+      }
+      static createSupportedScaledUnits(unitTranslations, supportedUnitPrefixes) {
+          if (!unitTranslations.get('en')) {
+              throw new Error('English translations must exist');
+          }
+          const supportedUnits = supportedUnitPrefixes.map(unitPrefix => new ScaledUnit(unitPrefix.scaleFactor, ManuallyTranslatedScaledUnitFormat.createFactory(unitTranslations, unitPrefix)));
+          return supportedUnits;
+      }
+  }
+
+  /**
+   * A prefix that represents a scaling factor when applied to a base unit.
+   * A base unit is represented as scale factor 1 and empty text.
+   */
+  class UnitPrefix {
+      constructor(scaleFactor, text) {
+          this.scaleFactor = scaleFactor;
+          this.text = text;
+          if (scaleFactor === 1 && text !== '') {
+              throw new Error('Base scale factor of 1 has unused text and should be empty string');
+          }
+      }
+      isBase() {
+          return this.scaleFactor === 1;
+      }
+  }
+
+  /**
+   * Representations of a base unit in a particular language
+   */
+  class UnitTranslation {
+      constructor(singular, plural, symbol) {
+          this.singular = singular;
+          this.plural = plural;
+          this.symbol = symbol;
+      }
+  }
+
+  /**
+   * Byte units (1024-based)
+   */
+  class Byte1024UnitScale extends ManuallyTranslatedUnitScale {
+      constructor() {
+          super(new Map([
+              ['en', new UnitTranslation('byte', 'bytes', 'B')],
+              ['fr', new UnitTranslation('octet', 'octets', 'o')],
+              ['de', new UnitTranslation('Byte', 'Byte', 'B')],
+              ['ja', new UnitTranslation('バイト', 'バイト', 'B')],
+              ['zh', new UnitTranslation('字节', '字节', 'B')]
+          ]), [
+              new UnitPrefix(1024 ** 0, ''),
+              new UnitPrefix(1024 ** 1, 'Ki'),
+              new UnitPrefix(1024 ** 2, 'Mi'),
+              new UnitPrefix(1024 ** 3, 'Gi'),
+              new UnitPrefix(1024 ** 4, 'Ti'),
+              new UnitPrefix(1024 ** 5, 'Pi')
+          ]);
+      }
+  }
+  const byte1024UnitScale = new Byte1024UnitScale();
+
+  /**
+   * Byte units (1000-based)
+   */
+  class ByteUnitScale extends UnitScale {
+      constructor() {
+          super([
+              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory({
+                  style: 'unit',
+                  unit: 'byte',
+                  unitDisplay: 'long'
+              })),
+              new ScaledUnit(10 ** 3, IntlNumberFormatScaledUnitFormat.createFactory({
+                  style: 'unit',
+                  unit: 'kilobyte',
+                  unitDisplay: 'short'
+              })),
+              new ScaledUnit(10 ** 6, IntlNumberFormatScaledUnitFormat.createFactory({
+                  style: 'unit',
+                  unit: 'megabyte',
+                  unitDisplay: 'short'
+              })),
+              new ScaledUnit(10 ** 9, IntlNumberFormatScaledUnitFormat.createFactory({
+                  style: 'unit',
+                  unit: 'gigabyte',
+                  unitDisplay: 'short'
+              })),
+              new ScaledUnit(10 ** 12, IntlNumberFormatScaledUnitFormat.createFactory({
+                  style: 'unit',
+                  unit: 'terabyte',
+                  unitDisplay: 'short'
+              })),
+              new ScaledUnit(10 ** 15, IntlNumberFormatScaledUnitFormat.createFactory({
+                  style: 'unit',
+                  unit: 'petabyte',
+                  unitDisplay: 'short'
+              }))
+          ]);
+      }
+  }
+  const byteUnitScale = new ByteUnitScale();
+
+  /**
+   * Element that provides a unit scale for conversion of bytes
+   */
+  class UnitByte extends Unit {
+      constructor() {
+          super();
+          /**
+           * Use binary (base 1024 scale with binary prefixes) instead of
+           * the default of decimal (base 1000 scale with metric prefixes)
+           */
+          this.binary = false;
+          this.resolvedUnitScale = byteUnitScale;
+      }
+      binaryChanged() {
+          this.resolvedUnitScale = this.binary
+              ? byte1024UnitScale
+              : byteUnitScale;
+      }
+  }
+  __decorate$1([
+      attr({ mode: 'boolean' })
+  ], UnitByte.prototype, "binary", void 0);
+  const nimbleUnitByte = UnitByte.compose({
+      baseName: 'unit-byte',
+      template: template$1
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
+
+  /**
+   * The metric unit prefixes for at least English, French, German, Japanese, and Chinese.
+   */
+  const unitPrefixesMetric = [
+      new UnitPrefix(10 ** -15, 'f'),
+      new UnitPrefix(10 ** -12, 'p'),
+      new UnitPrefix(10 ** -9, 'n'),
+      new UnitPrefix(10 ** -6, 'μ'),
+      new UnitPrefix(10 ** -3, 'm'),
+      new UnitPrefix(10 ** -2, 'c'),
+      new UnitPrefix(10 ** -1, 'd'),
+      new UnitPrefix(10 ** 0, ''),
+      new UnitPrefix(10 ** 3, 'k'),
+      new UnitPrefix(10 ** 6, 'M'),
+      new UnitPrefix(10 ** 9, 'G'),
+      new UnitPrefix(10 ** 12, 'T'),
+      new UnitPrefix(10 ** 15, 'P'),
+      new UnitPrefix(10 ** 18, 'E')
+  ];
+
+  /**
+   * Voltage unit scale
+   */
+  class VoltUnitScale extends ManuallyTranslatedUnitScale {
+      constructor() {
+          super(new Map([
+              ['en', new UnitTranslation('volt', 'volts', 'V')],
+              ['fr', new UnitTranslation('volt', 'volts', 'V')],
+              ['de', new UnitTranslation('Volt', 'Volt', 'V')],
+              ['ja', new UnitTranslation('ボルト', 'ボルト', 'V')],
+              ['zh', new UnitTranslation('伏特', '伏特', 'V')]
+          ]), unitPrefixesMetric);
+      }
+  }
+  const voltUnitScale = new VoltUnitScale();
+
+  /**
+   * Element representing units for volts
+   */
+  class UnitVolt extends Unit {
+      constructor() {
+          super();
+          this.resolvedUnitScale = voltUnitScale;
+      }
+  }
+  const nimbleUnitVolt = UnitVolt.compose({
+      baseName: 'unit-volt',
+      template: template$1
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
+
   var noop = {value: () => {}};
 
   function dispatch() {