@ni/nimble-components 18.9.0 → 18.9.1

package/dist/all-components-bundle.js

@@ -16744,9 +16744,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$m = html `<slot></slot>`;
+    const template$n = html `<slot></slot>`;
 
-    const styles$K = css `
+    const styles$L = css `
     :host {
         display: contents;
     }
@@ -16802,8 +16802,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$K,
-        template: template$m
+        styles: styles$L,
+        template: template$n
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -16987,7 +16987,7 @@
         }
     }
 
-    const styles$J = css `
+    const styles$K = css `
     ${display('inline')}
 
     :host {
@@ -17070,7 +17070,7 @@
 `;
 
     // prettier-ignore
-    const template$l = (context, definition) => html `
+    const template$m = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17143,8 +17143,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$l,
-        styles: styles$J,
+        template: template$m,
+        styles: styles$K,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17230,7 +17230,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$I = css `
+    const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -17511,8 +17511,8 @@
             }
         `));
 
-    const styles$H = css `
-    ${styles$I}
+    const styles$I = css `
+    ${styles$J}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17520,7 +17520,7 @@
     }
 `;
 
-    const template$k = (context, definition) => html `
+    const template$l = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17602,8 +17602,8 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$k,
-        styles: styles$H,
+        template: template$l,
+        styles: styles$I,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17611,7 +17611,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
     DesignSystem.tagFor(AnchorButton);
 
-    const styles$G = css `
+    const styles$H = css `
     ${display('grid')}
 
     :host {
@@ -17688,7 +17688,7 @@
     }
 `;
 
-    const template$j = (context, definition) => html `
+    const template$k = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17793,8 +17793,8 @@
     ], AnchorMenuItem.prototype, "startColumnCount", void 0);
     const nimbleAnchorMenuItem = AnchorMenuItem.compose({
         baseName: 'anchor-menu-item',
-        template: template$j,
-        styles: styles$G,
+        template: template$k,
+        styles: styles$H,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17819,7 +17819,7 @@
         }
     });
 
-    const styles$F = css `
+    const styles$G = css `
     ${display('inline-flex')}
 
     :host {
@@ -17925,8 +17925,8 @@
     }
 `;
 
-    const styles$E = css `
-    ${styles$F}
+    const styles$F = css `
+    ${styles$G}
 
     a {
         text-decoration: none;
@@ -17936,7 +17936,7 @@
     }
 `;
 
-    const template$i = () => html `
+    const template$j = () => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17974,13 +17974,13 @@
     ], AnchorTab.prototype, "disabled", void 0);
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$i,
-        styles: styles$E
+        template: template$j,
+        styles: styles$F
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
     DesignSystem.tagFor(AnchorTab);
 
-    const styles$D = css `
+    const styles$E = css `
     ${display('grid')}
 
     :host {
@@ -17998,7 +17998,7 @@
     }
 `;
 
-    const template$h = (context, definition) => html `
+    const template$i = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18195,8 +18195,8 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$h,
-        styles: styles$D,
+        template: template$i,
+        styles: styles$E,
         shadowOptions: {
             delegatesFocus: false
         }
@@ -18204,7 +18204,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
     DesignSystem.tagFor(AnchorTabs);
 
-    const styles$C = css `
+    const styles$D = css `
     :host {
         contain: layout;
         display: block;
@@ -18228,7 +18228,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$C
+        styles: styles$D
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -18308,7 +18308,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$B = css `
+    const styles$C = css `
     ${display('flex')}
 
     :host {
@@ -18466,8 +18466,8 @@
             }
         `));
 
-    const styles$A = css `
-    ${styles$I}
+    const styles$B = css `
+    ${styles$J}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18513,7 +18513,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$A,
+        styles: styles$B,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19135,13 +19135,13 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026 4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363Zm1.155-10.68-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312Z"/></svg>`
     };
 
-    const template$g = html `
+    const template$h = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$z = css `
+    const styles$A = css `
     ${display('inline-flex')}
 
     :host {
@@ -19194,8 +19194,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$g,
-            styles: styles$z,
+            template: template$h,
+            styles: styles$A,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19261,7 +19261,7 @@
     };
 
     // prettier-ignore
-    const template$f = html `
+    const template$g = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19380,13 +19380,13 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$f,
-        styles: styles$B
+        template: template$g,
+        styles: styles$C
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
     DesignSystem.tagFor(Banner);
 
-    const styles$y = css `
+    const styles$z = css `
     ${display('inline-block')}
 
     :host {
@@ -19427,12 +19427,12 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$y
+        styles: styles$z
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
     DesignSystem.tagFor(Breadcrumb);
 
-    const styles$x = css `
+    const styles$y = css `
     ${display('inline-flex')}
 
     :host {
@@ -19508,7 +19508,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$x,
+        styles: styles$y,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -19516,7 +19516,7 @@
         .register(nimbleBreadcrumbItem());
     DesignSystem.tagFor(BreadcrumbItem);
 
-    const styles$w = css `
+    const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -19675,7 +19675,7 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$w,
+        styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19683,7 +19683,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
     DesignSystem.tagFor(CardButton);
 
-    const styles$v = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -19801,15 +19801,15 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$v,
+        styles: styles$w,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
     DesignSystem.tagFor(Checkbox);
 
-    const styles$u = css `
-    ${styles$I}
+    const styles$v = css `
+    ${styles$J}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -19835,7 +19835,7 @@
     }
 `;
 
-    const template$e = (context, definition) => html `
+    const template$f = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -19910,8 +19910,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$e,
-        styles: styles$u,
+        template: template$f,
+        styles: styles$v,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19943,7 +19943,7 @@
         block: 'block'
     };
 
-    const styles$t = css `
+    const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -20179,7 +20179,7 @@
             }
         `));
 
-    const styles$s = css `
+    const styles$t = css `
     .error-icon {
         display: none;
     }
@@ -20213,9 +20213,9 @@
     }
 `;
 
-    const styles$r = css `
+    const styles$s = css `
+    ${styles$u}
     ${styles$t}
-    ${styles$s}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20451,7 +20451,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$r,
+        styles: styles$s,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20496,7 +20496,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('grid')}
 
     dialog {
@@ -20612,7 +20612,7 @@
             }
         `));
 
-    const template$d = html `
+    const template$e = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -20738,14 +20738,14 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$d,
-        styles: styles$q,
+        template: template$e,
+        styles: styles$r,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
     DesignSystem.tagFor(Dialog);
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('block')}
 
     :host {
@@ -20898,7 +20898,7 @@
             }
         `));
 
-    const template$c = html `
+    const template$d = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21012,8 +21012,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$c,
-        styles: styles$p
+        template: template$d,
+        styles: styles$q
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
     DesignSystem.tagFor(Drawer);
@@ -22794,7 +22794,7 @@
     registerIcon('icon-xmark-check', IconXmarkCheck);
     DesignSystem.tagFor(IconXmarkCheck);
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('flex')}
 
     :host {
@@ -22874,12 +22874,12 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$o
+        styles: styles$p
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
     DesignSystem.tagFor(ListOption);
 
-    const styles$n = css `
+    const styles$o = css `
     ${display('grid')}
 
     :host {
@@ -22946,12 +22946,12 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$n
+        styles: styles$o
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
     DesignSystem.tagFor(Menu);
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('inline-block')}
 
     :host {
@@ -22970,7 +22970,7 @@
 `;
 
     // prettier-ignore
-    const template$b = html `
+    const template$c = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23225,8 +23225,8 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$b,
-        styles: styles$m,
+        template: template$c,
+        styles: styles$n,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -23234,7 +23234,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
     const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('grid')}
 
     :host {
@@ -23332,7 +23332,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$l,
+        styles: styles$m,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -23347,9 +23347,9 @@
         block: 'block'
     };
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};
@@ -23563,7 +23563,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$k,
+        styles: styles$l,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -23605,7 +23605,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
     DesignSystem.tagFor(NumberField);
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('inline-flex')}
 
     :host {
@@ -23705,13 +23705,13 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$j,
+        styles: styles$k,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
     DesignSystem.tagFor(Radio);
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -23746,7 +23746,7 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$i,
+        styles: styles$j,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -23754,9 +23754,9 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
     DesignSystem.tagFor(RadioGroup);
 
-    const styles$h = css `
+    const styles$i = css `
+    ${styles$u}
     ${styles$t}
-    ${styles$s}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -23832,7 +23832,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$h,
+        styles: styles$i,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${iconExclamationMarkTag}
@@ -23845,7 +23845,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
     DesignSystem.tagFor(Select);
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('inline-flex')}
 
     :host {
@@ -23989,7 +23989,7 @@
             }
         `));
 
-    const template$a = html `
+    const template$b = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -24006,13 +24006,13 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$a,
-        styles: styles$g
+        template: template$b,
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
     DesignSystem.tagFor(Spinner);
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('inline-flex')}
 
     :host {
@@ -24175,7 +24175,7 @@
         `));
 
     // prettier-ignore
-    const template$9 = html `
+    const template$a = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -24219,8 +24219,8 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$9,
-        styles: styles$f
+        template: template$a,
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
     DesignSystem.tagFor(Switch);
@@ -24234,12 +24234,12 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$F
+        styles: styles$G
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
     DesignSystem.tagFor(Tab);
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('block')}
 
     :host {
@@ -24259,7 +24259,7 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$e
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
     DesignSystem.tagFor(TabPanel);
@@ -27293,6 +27293,31 @@
       });
     }
 
+    // prettier-ignore
+    const template$9 = html `
+    <template role="cell">
+        ${x => x.cellViewTemplate}
+        ${when(x => x.hasActionMenu, html `
+            <${menuButtonTag} ${ref('actionMenuButton')}
+                content-hidden
+                appearance="${ButtonAppearance.ghost}"
+                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
+                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
+                class="action-menu"
+            >
+                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
+                ${x => x.actionMenuLabel}
+                <slot name="cellActionMenu" slot="menu"></slot>
+            </${menuButtonTag}>
+        `)}
+    </template>
+`;
+    const createCellViewTemplate = (cellViewTag) => html `<${cellViewTag} class="cell-view"
+        :cellRecord="${y => y.cellState?.cellRecord}"
+        :columnConfig="${y => y.cellState?.columnConfig}"
+    >
+    </${cellViewTag}>`;
+
     /**
      * The possible directions a table column can be sorted in.
      */
@@ -27366,6 +27391,11 @@
             super.connectedCallback();
             this.setAttribute('slot', this.internalUniqueId);
         }
+        cellViewTagChanged() {
+            this.currentCellViewTemplate = this.cellViewTag
+                ? createCellViewTemplate(this.cellViewTag)
+                : undefined;
+        }
         internalFractionalWidthChanged() {
             this.currentFractionalWidth = this.internalFractionalWidth;
         }
@@ -27406,6 +27436,12 @@
     __decorate$1([
         observable
     ], TableColumn.prototype, "internalMinPixelWidth", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "cellViewTag", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "currentCellViewTemplate", void 0);
     __decorate$1([
         observable
     ], TableColumn.prototype, "dataRecordFieldNames", void 0);
@@ -27506,7 +27542,7 @@
         }
     }
 
-    const styles$d = css `
+    const styles$e = css `
     ${display('flex')}
 
     :host {
@@ -27602,7 +27638,7 @@
             }
         `));
 
-    const styles$c = css `
+    const styles$d = css `
     ${display('flex')}
 
     :host {
@@ -27672,12 +27708,12 @@
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
         template: template$8,
-        styles: styles$c
+        styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
     const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
-    const styles$b = css `
+    const styles$c = css `
     ${display('grid')}
 
     :host {
@@ -27703,7 +27739,7 @@
     }
 `;
 
-    const styles$a = css `
+    const styles$b = css `
     ${display('grid')}
 
     :host {
@@ -27715,7 +27751,7 @@
         --ni-private-table-cell-action-menu-display: block;
     }
 
-    .cell-content-container {
+    .cell-view {
         overflow: hidden;
         display: flex;
         align-items: center;
@@ -27726,27 +27762,6 @@
     }
 `;
 
-    // prettier-ignore
-    const template$7 = html `
-    <template role="cell">
-        <div ${ref('cellContentContainer')} class="cell-content-container"></div>
-
-        ${when(x => x.hasActionMenu, html `
-            <${menuButtonTag}
-                content-hidden
-                appearance="${ButtonAppearance.ghost}"
-                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
-                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
-                class="action-menu"
-            >
-                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
-                ${x => x.actionMenuLabel}
-                <slot name="cellActionMenu" slot="menu"></slot>
-            </${menuButtonTag}>
-        `)}
-    </template>
-`;
-
     /**
      * A styled cell that is used within the nimble-table-row.
      * @internal
@@ -27756,18 +27771,6 @@
             super(...arguments);
             this.hasActionMenu = false;
             this.menuOpen = false;
-            this.customCellView = undefined;
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            if (this.customCellView) {
-                this.customCellView.dispose();
-                this.customCellView = undefined;
-            }
         }
         onActionMenuBeforeToggle(event) {
             this.$emit('cell-action-menu-beforetoggle', event.detail);
@@ -27776,32 +27779,10 @@
             this.menuOpen = event.detail.newState;
             this.$emit('cell-action-menu-toggle', event.detail);
         }
-        cellStateChanged() {
-            this.customCellView?.bind(this.cellState, defaultExecutionContext);
-        }
-        cellTemplateChanged() {
-            if (this.$fastController.isConnected) {
-                this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
-            }
-        }
-        cellStylesChanged(prev, next) {
-            if (prev) {
-                this.$fastController.removeStyles(prev);
-            }
-            if (next) {
-                this.$fastController.addStyles(next);
-            }
-        }
     }
     __decorate$1([
         observable
     ], TableCell.prototype, "cellState", void 0);
-    __decorate$1([
-        observable
-    ], TableCell.prototype, "cellTemplate", void 0);
-    __decorate$1([
-        observable
-    ], TableCell.prototype, "cellStyles", void 0);
     __decorate$1([
         attr({ attribute: 'has-action-menu', mode: 'boolean' })
     ], TableCell.prototype, "hasActionMenu", void 0);
@@ -27811,24 +27792,26 @@
     __decorate$1([
         attr({ attribute: 'action-menu-label' })
     ], TableCell.prototype, "actionMenuLabel", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "cellViewTemplate", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$7,
-        styles: styles$a
+        template: template$9,
+        styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
     const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
-    const template$6 = html `
+    const template$7 = html `
     <template role="row">
         ${repeat(x => x.columnStates, html `
             ${when(x => !x.column.columnHidden, html `
                 <${tableCellTag}
                     class="cell"
-                    :cellTemplate="${x => x.column.cellTemplate}"
-                    :cellStyles="${x => x.column.cellStyles}"
                     :cellState="${x => x.cellState}"
+                    :cellViewTemplate="${x => x.column.currentCellViewTemplate}"
                     ?has-action-menu="${x => !!x.column.actionMenuSlot}"
                     action-menu-label="${x => x.column.actionMenuLabel}"
                     @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
@@ -27887,6 +27870,14 @@
             this.menuOpen = event.detail.newState;
             this.emitToggleEvent('row-action-menu-toggle', event.detail, column);
         }
+        closeOpenActionMenus() {
+            if (this.menuOpen) {
+                const cellWithMenuOpen = Array.from(this.shadowRoot.children).find(c => c instanceof TableCell && c.menuOpen);
+                if (cellWithMenuOpen?.actionMenuButton?.open) {
+                    cellWithMenuOpen.actionMenuButton.toggleButton.control.click();
+                }
+            }
+        }
         emitToggleEvent(eventType, menuButtonEventDetail, column) {
             const detail = {
                 newState: menuButtonEventDetail.newState,
@@ -27920,14 +27911,14 @@
     ], TableRow.prototype, "columnStates", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$6,
-        styles: styles$b
+        template: template$7,
+        styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
     const tableRowTag = DesignSystem.tagFor(TableRow);
 
     // prettier-ignore
-    const template$5 = html `
+    const template$6 = html `
     <template role="table" ${children$1({ property: 'childItems', filter: elements() })}>
         <div class="table-container" style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
@@ -27954,7 +27945,7 @@
             </div>
             <div class="table-viewport" ${ref('viewport')}>
                 <div class="table-scroll"></div>
-                <div class="table-row-container" 
+                <div class="table-row-container" ${children$1({ property: 'rowElements', filter: elements(tableRowTag) })}
                      role="rowgroup">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
@@ -28608,6 +28599,25 @@
       };
     }
 
+    /**
+     * Base class for table cell views, which are used within the nimble-table-cell.
+     * Each TableColumn type has a corresponding TableCellView type (linked via TableColumn.cellViewTag).
+     */
+    class TableCellView extends FoundationElement {
+        /**
+         * Called if an element inside this cell view has focus, and this row/cell is being recycled.
+         * Expected implementation is to commit changes as needed, and blur the focusable element (or close
+         * the menu/popup/etc).
+         */
+        focusedRecycleCallback() { }
+    }
+    __decorate$1([
+        observable
+    ], TableCellView.prototype, "cellRecord", void 0);
+    __decorate$1([
+        observable
+    ], TableCellView.prototype, "columnConfig", void 0);
+
     /**
      * Helper class for the nimble-table for row virtualization.
      *
@@ -28672,6 +28682,7 @@
             };
         }
         handleVirtualizerChange() {
+            this.notifyFocusedCellRecycling();
             const virtualizer = this.virtualizer;
             this.visibleItems = virtualizer.getVirtualItems();
             this.allRowsHeight = virtualizer.getTotalSize();
@@ -28686,6 +28697,25 @@
             }
             this.rowContainerYOffset = rowContainerYOffset;
         }
+        notifyFocusedCellRecycling() {
+            let tableFocusedElement = this.table.shadowRoot.activeElement;
+            while (tableFocusedElement !== null
+                && !(tableFocusedElement instanceof TableCellView)) {
+                if (tableFocusedElement.shadowRoot) {
+                    tableFocusedElement = tableFocusedElement.shadowRoot.activeElement;
+                }
+                else {
+                    break;
+                }
+            }
+            if (tableFocusedElement instanceof TableCellView) {
+                tableFocusedElement.focusedRecycleCallback();
+            }
+            if (this.table.openActionMenuRecordId !== undefined) {
+                const activeRow = this.table.rowElements.find(row => row.recordId === this.table.openActionMenuRecordId);
+                activeRow?.closeOpenActionMenus();
+            }
+        }
     }
     __decorate$1([
         observable
@@ -28881,6 +28911,10 @@
              * @internal
              */
             this.childItems = [];
+            /**
+             * @internal
+             */
+            this.rowElements = [];
             /**
              * @internal
              */
@@ -28955,6 +28989,9 @@
         }
         onRowActionMenuToggle(event) {
             this.$emit('action-menu-toggle', event.detail);
+            if (!event.detail.newState) {
+                this.openActionMenuRecordId = undefined;
+            }
         }
         /**
          * @internal
@@ -29126,6 +29163,9 @@
     __decorate$1([
         observable
     ], Table.prototype, "childItems", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "rowElements", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "actionMenuSlots", void 0);
@@ -29146,13 +29186,13 @@
     ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$5,
-        styles: styles$d
+        template: template$6,
+        styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
     DesignSystem.tagFor(Table);
 
-    const styles$9 = css `
+    const styles$a = css `
     :host {
         display: contents;
     }
@@ -29164,7 +29204,7 @@
     }
 `;
 
-    const template$4 = html `
+    const template$5 = html `
     <template>
         <span class="header-content">
             <slot></slot>
@@ -29211,7 +29251,7 @@
         return FractionalWidthColumn;
     }
 
-    const cellStyles = css `
+    const styles$9 = css `
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -29225,29 +29265,51 @@
     }
 `;
 
-    const getCellContent = (cellState) => {
-        return typeof cellState.cellRecord.value === 'string'
-            ? cellState.cellRecord.value
-            : cellState.columnConfig.placeholder;
-    };
-    const setTitleWhenOverflow = (span, title) => {
-        if (title && span.offsetWidth < span.scrollWidth) {
-            span.setAttribute('title', title);
-        }
-    };
-    const removeTitle = (span) => {
-        span.removeAttribute('title');
-    };
-    const cellTemplate = html `
+    const template$4 = html `
     <span
+        ${ref('textSpan')}
         class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
-        @mouseover="${(x, c) => setTitleWhenOverflow(c.event.target, getCellContent(x))}"
-        @mouseout="${(_x, c) => removeTitle(c.event.target)}"
+        @mouseover="${x => {
+    x.isValidContentAndHasOverflow = !!x.content && x.textSpan.offsetWidth < x.textSpan.scrollWidth;
+}}"
+        @mouseout="${x => {
+    x.isValidContentAndHasOverflow = false;
+}}"
+        title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
     >
-        ${x => getCellContent(x)}
+        ${x => x.content}
     </span>
 `;
 
+    /**
+     * A cell view for displaying strings
+     */
+    class TableColumnTextCellView extends TableCellView {
+        constructor() {
+            super(...arguments);
+            /** @internal */
+            this.isValidContentAndHasOverflow = false;
+        }
+        get content() {
+            return typeof this.cellRecord.value === 'string'
+                ? this.cellRecord.value
+                : this.columnConfig.placeholder;
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableColumnTextCellView.prototype, "isValidContentAndHasOverflow", void 0);
+    __decorate$1([
+        volatile
+    ], TableColumnTextCellView.prototype, "content", null);
+    const textCellView = TableColumnTextCellView.compose({
+        baseName: 'table-column-text-cell-view',
+        template: template$4,
+        styles: styles$9
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
+    const tableColumnTextCellViewTag = DesignSystem.tagFor(TableColumnTextCellView);
+
     /**
      * The base class for a table column for displaying strings.
      */
@@ -29255,8 +29317,7 @@
         constructor() {
             super();
             this.cellRecordFieldNames = ['value'];
-            this.cellStyles = cellStyles;
-            this.cellTemplate = cellTemplate;
+            this.cellViewTag = tableColumnTextCellViewTag;
             this.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
         }
         fieldNameChanged() {
@@ -29280,8 +29341,8 @@
     }
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
-        template: template$4,
-        styles: styles$9
+        template: template$5,
+        styles: styles$a
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -29379,7 +29440,7 @@
 
     const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};
@@ -29725,7 +29786,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};