@ni/nimble-components 18.9.0 → 18.10.0

package/dist/all-components-bundle.js

@@ -16744,9 +16744,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$m = html `<slot></slot>`;
+    const template$o = html `<slot></slot>`;
 
-    const styles$K = css `
+    const styles$M = 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$M,
+        template: template$o
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -16987,7 +16987,7 @@
         }
     }
 
-    const styles$J = css `
+    const styles$L = css `
     ${display('inline')}
 
     :host {
@@ -17070,7 +17070,7 @@
 `;
 
     // prettier-ignore
-    const template$l = (context, definition) => html `
+    const template$n = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17140,11 +17140,12 @@
     __decorate$1([
         attr
     ], Anchor.prototype, "appearance", void 0);
+    // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$l,
-        styles: styles$J,
+        template: template$n,
+        styles: styles$L,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17230,7 +17231,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$I = css `
+    const styles$K = css `
     ${display('inline-flex')}
 
     :host {
@@ -17511,8 +17512,8 @@
             }
         `));
 
-    const styles$H = css `
-    ${styles$I}
+    const styles$J = css `
+    ${styles$K}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17520,7 +17521,7 @@
     }
 `;
 
-    const template$k = (context, definition) => html `
+    const template$m = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17602,8 +17603,8 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$k,
-        styles: styles$H,
+        template: template$m,
+        styles: styles$J,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17611,7 +17612,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
     DesignSystem.tagFor(AnchorButton);
 
-    const styles$G = css `
+    const styles$I = css `
     ${display('grid')}
 
     :host {
@@ -17688,7 +17689,7 @@
     }
 `;
 
-    const template$j = (context, definition) => html `
+    const template$l = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17791,15 +17792,15 @@
     __decorate$1([
         observable
     ], AnchorMenuItem.prototype, "startColumnCount", void 0);
+    // 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$j,
-        styles: styles$G,
+        template: template$l,
+        styles: styles$I,
         shadowOptions: {
             delegatesFocus: true
         }
     });
-    applyMixins(AnchorMenuItem, StartEnd);
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleAnchorMenuItem());
@@ -17819,7 +17820,7 @@
         }
     });
 
-    const styles$F = css `
+    const styles$H = css `
     ${display('inline-flex')}
 
     :host {
@@ -17925,8 +17926,8 @@
     }
 `;
 
-    const styles$E = css `
-    ${styles$F}
+    const styles$G = css `
+    ${styles$H}
 
     a {
         text-decoration: none;
@@ -17934,9 +17935,17 @@
         cursor: inherit;
         outline: none;
     }
+
+    [part='start'] {
+        display: none;
+    }
+
+    [part='end'] {
+        display: none;
+    }
 `;
 
-    const template$i = () => html `
+    const template$k = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17949,7 +17958,9 @@
             type="${x => x.type}"
             tabindex="-1"
         >
+            ${startSlotTemplate(context, definition)}
             <slot></slot>
+            ${endSlotTemplate(context, definition)}
         </a>
     </template>
 `;
@@ -17972,15 +17983,16 @@
     __decorate$1([
         attr({ mode: 'boolean' })
     ], AnchorTab.prototype, "disabled", void 0);
+    // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$i,
-        styles: styles$E
+        template: template$k,
+        styles: styles$G
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
     DesignSystem.tagFor(AnchorTab);
 
-    const styles$D = css `
+    const styles$F = css `
     ${display('grid')}
 
     :host {
@@ -17998,7 +18010,7 @@
     }
 `;
 
-    const template$h = (context, definition) => html `
+    const template$j = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18195,8 +18207,8 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$h,
-        styles: styles$D,
+        template: template$j,
+        styles: styles$F,
         shadowOptions: {
             delegatesFocus: false
         }
@@ -18204,7 +18216,259 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
     DesignSystem.tagFor(AnchorTabs);
 
-    const styles$C = css `
+    const styles$E = css `
+    ${display('block')}
+
+    :host {
+        ${
+/* don't set font-size here or else it overrides what we set on .items */ ''}
+        font-family: ${bodyFontFamily};
+        font-weight: ${bodyFontWeight};
+        contain: content;
+        position: relative;
+        outline: none;
+        color: ${bodyFontColor};
+        cursor: pointer;
+        --ni-private-tree-item-nested-width: 0;
+    }
+
+    .control {
+        display: flex;
+        text-decoration: none;
+        color: ${bodyFontColor};
+    }
+
+    .control${focusVisible} {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    :host([disabled]) .control {
+        cursor: not-allowed;
+    }
+
+    .positioning-region {
+        display: flex;
+        position: relative;
+        box-sizing: border-box;
+        height: calc(${iconSize} * 2);
+        width: 100%;
+    }
+
+    .positioning-region:hover {
+        background: ${fillHoverColor};
+    }
+
+    :host([selected]) .positioning-region {
+        background: ${fillSelectedColor};
+    }
+
+    :host([selected]) .positioning-region:hover {
+        background: ${fillHoverSelectedColor};
+    }
+
+    .positioning-region::before {
+        content: '';
+        display: block;
+        width: var(--ni-private-tree-item-nested-width);
+        flex-shrink: 0;
+    }
+
+    .content-region {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+        width: 100%;
+        padding-left: 10px;
+        font: inherit;
+        font-size: ${bodyFontSize};
+        user-select: none;
+        position: relative;
+        margin-inline-start: ${iconSize};
+    }
+
+    :host([disabled]) .content-region {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    ${
+/* this rule keeps children without an icon text aligned with parents */ ''}
+    span[part="start"] {
+        width: ${iconSize};
+    }
+
+    ${ /* the start class is applied when the corresponding slot is filled */''}
+    .start {
+        display: flex;
+        fill: currentcolor;
+        margin-inline-start: ${iconSize};
+        margin-inline-end: ${iconSize};
+    }
+
+    slot[name='start']::slotted(*) {
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    ${ /* the end class is applied when the corresponding slot is filled */''}
+    .end {
+        display: flex;
+        fill: currentcolor;
+        margin-inline-start: ${iconSize};
+    }
+`;
+
+    const template$i = (context, definition) => html `
+    <template
+        role="treeitem"
+        slot="${x => (x.isNestedItem() ? 'item' : null)}"
+        tabindex="-1"
+        aria-disabled="${x => x.disabled}"
+        aria-selected="${x => x.selected}"
+        @focusin="${(x, c) => x.handleFocus(c.event)}"
+        @focusout="${(x, c) => x.handleBlur(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+    >
+        <a
+            class="control"
+            part="control"
+            tabindex="0"
+            download="${x => x.download}"
+            href=${x => (x.disabled ? null : x.href)}
+            hreflang="${x => x.hreflang}"
+            ping="${x => x.ping}"
+            referrerpolicy="${x => x.referrerpolicy}"
+            rel="${x => x.rel}"
+            target="${x => x.target}"
+            type="${x => x.type}"
+            ${ref('control')}
+        >
+            <div class="positioning-region" part="positioning-region">
+                <div class="content-region" part="content-region">
+                    ${startSlotTemplate(context, definition)}
+                    <span class="content" part="content">
+                        <slot></slot>
+                    </span>
+                    ${endSlotTemplate(context, definition)}
+                </div>
+            </div>
+        </a>
+    </template>
+`;
+
+    /**
+     * A nimble-styled anchor tree item
+     */
+    class AnchorTreeItem extends AnchorBase {
+        constructor() {
+            super(...arguments);
+            /**
+             * When true, the control will appear selected by user interaction.
+             * @public
+             * @remarks
+             * HTML Attribute: selected
+             */
+            this.selected = false;
+            /**
+             * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+             * @public
+             * @remarks
+             * HTML Attribute: disabled
+             */
+            this.disabled = false;
+        }
+        /**
+         * Whether the tree is nested
+         *
+         * @public
+         */
+        isNestedItem() {
+            return isTreeItemElement(this.parentElement);
+        }
+        /**
+         * Handle focus events
+         *
+         * @internal
+         */
+        handleFocus(_e) {
+            this.setAttribute('tabindex', '0');
+        }
+        /**
+         * Handle blur events
+         *
+         * @internal
+         */
+        handleBlur(_e) {
+            this.setAttribute('tabindex', '-1');
+        }
+        /**
+         * @internal
+         */
+        keydownHandler(e) {
+            if (e.defaultPrevented) {
+                return false;
+            }
+            switch (e.key) {
+                case keyEnter:
+                    // Do not let the event bubble up to the FAST tree, or it will
+                    // prevent the default action.
+                    e.stopPropagation();
+                    break;
+                case keyArrowLeft:
+                    // For FAST tree items, the FAST tree view handles this navigation,
+                    // but since our anchor tree item is not "instanceof FASTTreeItem",
+                    // the FAST tree view won't do this for us. We do it ourselves.
+                    if (this.parentElement && this.isNestedItem()) {
+                        TreeItem$1.focusItem(this.parentElement);
+                    }
+                    break;
+            }
+            return true;
+        }
+        /**
+         * Activating the anchor by pressing the Enter key results in a click event.
+         * This bubbles up to the Nimble tree-view's click handler, causing the tree item
+         * to be selected. We don't want that for anchor tree items. We'll stop propagation
+         * of the event to prevent that.
+         * @internal
+         */
+        clickHandler(e) {
+            if (e.defaultPrevented) {
+                return false;
+            }
+            e.stopPropagation();
+            return true;
+        }
+        selectedChanged(_prev, _next) {
+            if (this.$fastController.isConnected) {
+                this.$emit('selected-change', this);
+            }
+        }
+    }
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], AnchorTreeItem.prototype, "selected", void 0);
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], AnchorTreeItem.prototype, "disabled", void 0);
+    // 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$i,
+        styles: styles$E,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleAnchorTreeItem());
+    DesignSystem.tagFor(AnchorTreeItem);
+
+    const styles$D = css `
     :host {
         contain: layout;
         display: block;
@@ -18228,7 +18492,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$C
+        styles: styles$D
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -18308,7 +18572,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$B = css `
+    const styles$C = css `
     ${display('flex')}
 
     :host {
@@ -18466,8 +18730,8 @@
             }
         `));
 
-    const styles$A = css `
-    ${styles$I}
+    const styles$B = css `
+    ${styles$K}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18513,7 +18777,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$A,
+        styles: styles$B,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19135,13 +19399,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 +19458,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 +19525,7 @@
     };
 
     // prettier-ignore
-    const template$f = html `
+    const template$g = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19380,13 +19644,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 +19691,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 +19772,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$x,
+        styles: styles$y,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -19516,7 +19780,7 @@
         .register(nimbleBreadcrumbItem());
     DesignSystem.tagFor(BreadcrumbItem);
 
-    const styles$w = css `
+    const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -19675,7 +19939,7 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$w,
+        styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19683,7 +19947,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
     DesignSystem.tagFor(CardButton);
 
-    const styles$v = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -19801,15 +20065,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$K}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -19835,7 +20099,7 @@
     }
 `;
 
-    const template$e = (context, definition) => html `
+    const template$f = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -19910,8 +20174,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 +20207,7 @@
         block: 'block'
     };
 
-    const styles$t = css `
+    const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -20179,7 +20443,7 @@
             }
         `));
 
-    const styles$s = css `
+    const styles$t = css `
     .error-icon {
         display: none;
     }
@@ -20213,9 +20477,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 +20715,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$r,
+        styles: styles$s,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20496,7 +20760,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('grid')}
 
     dialog {
@@ -20612,7 +20876,7 @@
             }
         `));
 
-    const template$d = html `
+    const template$e = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -20738,14 +21002,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 +21162,7 @@
             }
         `));
 
-    const template$c = html `
+    const template$d = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21012,8 +21276,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 +23058,7 @@
     registerIcon('icon-xmark-check', IconXmarkCheck);
     DesignSystem.tagFor(IconXmarkCheck);
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('flex')}
 
     :host {
@@ -22874,12 +23138,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 +23210,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 +23234,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 +23489,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 +23498,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 +23596,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 +23611,9 @@
         block: 'block'
     };
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};
@@ -23563,7 +23827,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$k,
+        styles: styles$l,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -23605,7 +23869,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
     DesignSystem.tagFor(NumberField);
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('inline-flex')}
 
     :host {
@@ -23705,13 +23969,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 +24010,7 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$i,
+        styles: styles$j,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -23754,9 +24018,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 +24096,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$h,
+        styles: styles$i,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${iconExclamationMarkTag}
@@ -23845,7 +24109,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
     DesignSystem.tagFor(Select);
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('inline-flex')}
 
     :host {
@@ -23989,7 +24253,7 @@
             }
         `));
 
-    const template$a = html `
+    const template$b = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -24006,13 +24270,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 +24439,7 @@
         `));
 
     // prettier-ignore
-    const template$9 = html `
+    const template$a = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -24219,8 +24483,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 +24498,12 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$F
+        styles: styles$H
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
     DesignSystem.tagFor(Tab);
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('block')}
 
     :host {
@@ -24259,7 +24523,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 +27557,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 +27655,11 @@
             super.connectedCallback();
             this.setAttribute('slot', this.internalUniqueId);
         }
+        cellViewTagChanged() {
+            this.currentCellViewTemplate = this.cellViewTag
+                ? createCellViewTemplate(this.cellViewTag)
+                : undefined;
+        }
         internalFractionalWidthChanged() {
             this.currentFractionalWidth = this.internalFractionalWidth;
         }
@@ -27406,6 +27700,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 +27806,7 @@
         }
     }
 
-    const styles$d = css `
+    const styles$e = css `
     ${display('flex')}
 
     :host {
@@ -27602,7 +27902,7 @@
             }
         `));
 
-    const styles$c = css `
+    const styles$d = css `
     ${display('flex')}
 
     :host {
@@ -27672,12 +27972,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 +28003,7 @@
     }
 `;
 
-    const styles$a = css `
+    const styles$b = css `
     ${display('grid')}
 
     :host {
@@ -27715,7 +28015,7 @@
         --ni-private-table-cell-action-menu-display: block;
     }
 
-    .cell-content-container {
+    .cell-view {
         overflow: hidden;
         display: flex;
         align-items: center;
@@ -27726,27 +28026,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 +28035,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 +28043,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 +28056,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 +28134,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 +28175,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 +28209,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 +28863,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 +28946,7 @@
             };
         }
         handleVirtualizerChange() {
+            this.notifyFocusedCellRecycling();
             const virtualizer = this.virtualizer;
             this.visibleItems = virtualizer.getVirtualItems();
             this.allRowsHeight = virtualizer.getTotalSize();
@@ -28686,6 +28961,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 +29175,10 @@
              * @internal
              */
             this.childItems = [];
+            /**
+             * @internal
+             */
+            this.rowElements = [];
             /**
              * @internal
              */
@@ -28955,6 +29253,9 @@
         }
         onRowActionMenuToggle(event) {
             this.$emit('action-menu-toggle', event.detail);
+            if (!event.detail.newState) {
+                this.openActionMenuRecordId = undefined;
+            }
         }
         /**
          * @internal
@@ -29126,6 +29427,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 +29450,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 +29468,7 @@
     }
 `;
 
-    const template$4 = html `
+    const template$5 = html `
     <template>
         <span class="header-content">
             <slot></slot>
@@ -29211,7 +29515,7 @@
         return FractionalWidthColumn;
     }
 
-    const cellStyles = css `
+    const styles$9 = css `
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -29225,29 +29529,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 +29581,7 @@
         constructor() {
             super();
             this.cellRecordFieldNames = ['value'];
-            this.cellStyles = cellStyles;
-            this.cellTemplate = cellTemplate;
+            this.cellViewTag = tableColumnTextCellViewTag;
             this.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
         }
         fieldNameChanged() {
@@ -29280,8 +29605,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 +29704,7 @@
 
     const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};
@@ -29725,7 +30050,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};