@ni/nimble-components 29.7.8 → 29.8.0

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 08 Jul 2024 22:30:19 GMT
+   * Generated on Wed, 10 Jul 2024 16:10:17 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16789,9 +16789,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$I = html `<slot></slot>`;
+  const template$K = html `<slot></slot>`;
 
-  const styles$$ = css `
+  const styles$10 = css `
     ${display('contents')}
 `;
 
@@ -16906,8 +16906,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$$,
-      template: template$I
+      styles: styles$10,
+      template: template$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -17100,7 +17100,7 @@
       }
   }
 
-  const styles$_ = css `
+  const styles$$ = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -17179,7 +17179,7 @@
 `;
 
   // prettier-ignore
-  const template$H = (_context, definition) => html `${
+  const template$J = (_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
@@ -17282,8 +17282,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$H,
-      styles: styles$_,
+      template: template$J,
+      styles: styles$$,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17395,7 +17395,7 @@
     padding: 0;
 `;
 
-  const styles$Z = css `
+  const styles$_ = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17471,6 +17471,10 @@
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
 
+        slot[name='start']::slotted(*) {
+            flex-shrink: 0;
+        }
+
         :host([content-hidden]) .content {
             ${accessiblyHidden}
         }
@@ -17479,6 +17483,10 @@
             display: contents;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
+
+        slot[name='end']::slotted(*) {
+            flex-shrink: 0;
+        }
     }
 
     @layer hover {
@@ -17670,8 +17678,8 @@
             }
         `));
 
-  const styles$Y = css `
-    ${styles$Z}
+  const styles$Z = css `
+    ${styles$_}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17691,7 +17699,7 @@
     }
 `;
 
-  const template$G = (context, definition) => html `
+  const template$I = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17773,8 +17781,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$G,
-      styles: styles$Y,
+      template: template$I,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17782,7 +17790,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$X = css `
+  const styles$Y = css `
     ${display('grid')}
 
     :host {
@@ -17865,7 +17873,7 @@
     }
 `;
 
-  const template$F = (context, definition) => html `
+  const template$H = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17966,8 +17974,8 @@
   // 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$F,
-      styles: styles$X,
+      template: template$H,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17977,7 +17985,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$W = css `
+  const styles$X = css `
     ${display('inline-flex')}
 
     :host {
@@ -18093,7 +18101,7 @@
     }
 `;
 
-  const template$E = (context, definition) => html `
+  const template$G = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18145,15 +18153,15 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$E,
-      styles: styles$W,
+      template: template$G,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$V = css `
+  const styles$W = css `
     ${display('grid')}
 
     :host {
@@ -18174,7 +18182,7 @@
     }
 `;
 
-  const template$D = (context, definition) => html `
+  const template$F = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18380,8 +18388,8 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$D,
-      styles: styles$V,
+      template: template$F,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18397,7 +18405,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$U = css `
+  const styles$V = css `
     ${display('block')}
 
     :host {
@@ -18502,7 +18510,7 @@
     }
 `;
 
-  const template$C = (context, definition) => html `
+  const template$E = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18639,8 +18647,8 @@
   // 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$C,
-      styles: styles$U,
+      template: template$E,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18656,7 +18664,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$T = css `
+  const styles$U = css `
     ${display('block')}
 
     :host {
@@ -18687,7 +18695,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$T
+      styles: styles$U
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18767,7 +18775,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$S = css `
+  const styles$T = css `
     ${display('flex')}
 
     :host {
@@ -18882,12 +18890,12 @@
             }
         `));
 
-  const styles$R = css `
-    ${styles$Z}
+  const styles$S = css `
+    ${styles$_}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$B = (context, definition) => html `
+  const template$D = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -18978,8 +18986,8 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$B,
-      styles: styles$R,
+      template: template$D,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19750,13 +19758,13 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$A = html `<div
+  const template$C = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display('inline-flex')}
 
     :host {
@@ -19809,8 +19817,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$A,
-          styles: styles$Q
+          template: template$C,
+          styles: styles$R
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19928,7 +19936,7 @@
   }).withDefault(coreLabelDefaults.loadingLabel);
 
   // prettier-ignore
-  const template$z = html `
+  const template$B = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -20046,12 +20054,12 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$z,
-      styles: styles$S
+      template: template$B,
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display('inline-block')}
 
     .list {
@@ -20081,11 +20089,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$P
+      styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$O = css `
+  const styles$P = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -20182,14 +20190,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$O,
+      styles: styles$P,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$N = css `
+  const styles$O = css `
     ${display('flex')}
 
     :host {
@@ -20213,7 +20221,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$y = html `
+  const template$A = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20228,12 +20236,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$y,
-      styles: styles$N
+      template: template$A,
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$M = css `
+  const styles$N = css `
     ${display('inline-flex')}
 
     :host {
@@ -20391,14 +20399,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$M,
+      styles: styles$N,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$L = css `
+  const styles$M = css `
     ${display('inline-flex')}
 
     :host {
@@ -20506,7 +20514,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$x = (_context, definition) => html `
+  const template$z = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20555,16 +20563,16 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$x,
-      styles: styles$L,
+      template: template$z,
+      styles: styles$M,
       checkedIndicator: checkLarge16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$K = css `
-    ${styles$Z}
+  const styles$L = css `
+    ${styles$_}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20613,7 +20621,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$w = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20709,8 +20717,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$w,
-      styles: styles$K,
+      template: template$y,
+      styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20748,7 +20756,7 @@ so this becomes the fallback color for the slot */ ''}
   };
 
   // prettier-ignore
-  const styles$J = css `
+  const styles$K = css `
     ${display('inline-flex')}
 
     :host {
@@ -20990,7 +20998,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$I = css `
+  const styles$J = css `
     .error-icon {
         display: none;
     }
@@ -21038,9 +21046,9 @@ so this becomes the fallback color for the slot */ ''}
       manual: 'manual'
   };
 
-  const styles$H = css `
+  const styles$I = css `
+    ${styles$K}
     ${styles$J}
-    ${styles$I}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21176,7 +21184,7 @@ so this becomes the fallback color for the slot */ ''}
   }
 
   // prettier-ignore
-  const template$v = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21874,8 +21882,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$v,
-      styles: styles$H,
+      template: template$x,
+      styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21920,7 +21928,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$G = css `
+  const styles$H = css `
     ${display('grid')}
 
     dialog {
@@ -22026,7 +22034,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$u = html `
+  const template$w = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22174,13 +22182,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$u,
-      styles: styles$G,
+      template: template$w,
+      styles: styles$H,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$F = css `
+  const styles$G = css `
     ${display('block')}
 
     :host {
@@ -22332,7 +22340,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$t = html `
+  const template$v = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22475,8 +22483,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$t,
-      styles: styles$F
+      template: template$v,
+      styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24766,7 +24774,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$E = css `
+  const styles$F = css `
     ${display('none')}
 `;
 
@@ -24819,7 +24827,7 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderCore.prototype, "loading", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$E
+      styles: styles$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -24986,13 +24994,13 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$E
+      styles: styles$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$D = css `
+  const styles$E = css `
     ${display('flex')}
 
     :host {
@@ -25069,7 +25077,7 @@ so this becomes the fallback color for the slot */ ''}
    * @public
    */
   // prettier-ignore
-  const template$s = (context, definition) => html `
+  const template$u = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25174,13 +25182,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$s,
-      styles: styles$D
+      template: template$u,
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$C = css `
+  const styles$D = css `
     ${display('flex')}
 
     :host {
@@ -25243,7 +25251,7 @@ so this becomes the fallback color for the slot */ ''}
       return n instanceof ListOption;
   };
   // prettier-ignore
-  const template$r = html `
+  const template$t = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -25389,8 +25397,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$r,
-      styles: styles$C
+      template: template$t,
+      styles: styles$D
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -25405,9 +25413,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$q = html `<template slot="mapping"></template>`;
+  const template$s = html `<template slot="mapping"></template>`;
 
-  const styles$B = css `
+  const styles$C = css `
     ${display('none')}
 `;
 
@@ -25423,8 +25431,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$q,
-      styles: styles$B
+      template: template$s,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -25494,8 +25502,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$q,
-      styles: styles$B
+      template: template$s,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -25518,8 +25526,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$q,
-      styles: styles$B
+      template: template$s,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -25535,12 +25543,12 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$q,
-      styles: styles$B
+      template: template$s,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
-  const styles$A = css `
+  const styles$B = css `
     ${display('grid')}
 
     :host {
@@ -25612,7 +25620,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$A
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -25629,7 +25637,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$z = css `
+  const styles$A = css `
     ${display('inline-block')}
 
     :host {
@@ -25648,7 +25656,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   // prettier-ignore
-  const template$p = html `
+  const template$r = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -25898,8 +25906,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$p,
-      styles: styles$z,
+      template: template$r,
+      styles: styles$A,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -25907,7 +25915,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$y = css `
+  const styles$z = css `
     ${display('grid')}
 
     :host {
@@ -26004,7 +26012,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$y,
+      styles: styles$z,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -26018,9 +26026,9 @@ so this becomes the fallback color for the slot */ ''}
       block: 'block'
   };
 
-  const styles$x = css `
+  const styles$y = css `
     ${display('inline-block')}
-    ${styles$I}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};
@@ -26233,7 +26241,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$x,
+      styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -26276,7 +26284,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$w = css `
+  const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -26376,12 +26384,12 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$w,
+      styles: styles$x,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$v = css `
+  const styles$w = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -26416,7 +26424,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$v,
+      styles: styles$w,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -44100,7 +44108,7 @@ img.ProseMirror-separator {
       },
   });
 
-  const styles$u = css `
+  const styles$v = css `
     ${display('inline')}
 
     .positioning-region {
@@ -44137,7 +44145,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$u,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -44169,8 +44177,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$t = css `
-    ${styles$J}
+  const styles$u = css `
+    ${styles$K}
 
     :host {
         height: auto;
@@ -44189,7 +44197,7 @@ img.ProseMirror-separator {
 `;
 
   // prettier-ignore
-  const template$o = html `
+  const template$q = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -44461,8 +44469,8 @@ img.ProseMirror-separator {
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$o,
-      styles: styles$t
+      template: template$q,
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -44470,7 +44478,7 @@ img.ProseMirror-separator {
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
   // prettier-ignore
-  const template$n = html `
+  const template$p = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -44572,9 +44580,9 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$s = css `
+  const styles$t = css `
     ${display('inline-flex')}
-    ${styles$I}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};
@@ -59302,8 +59310,8 @@ img.ProseMirror-separator {
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$n,
-      styles: styles$s,
+      template: template$p,
+      styles: styles$t,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -59312,13 +59320,13 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$m = html `
+  const template$o = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$r = css `
+  const styles$s = css `
     ${display('flex')}
 
     :host {
@@ -59429,16 +59437,16 @@ img.ProseMirror-separator {
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$m,
-      styles: styles$r
+      template: template$o,
+      styles: styles$s
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$q = css `
+  const styles$r = css `
+    ${styles$K}
     ${styles$J}
-    ${styles$I}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -59608,7 +59616,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$p = css `
+  const styles$q = css `
     ${display('inline-grid')}
 
     :host {
@@ -59778,7 +59786,7 @@ img.ProseMirror-separator {
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$l = html `
+  const template$n = html `
     <template role="progressbar">
         ${''
 /**
@@ -59825,8 +59833,8 @@ img.ProseMirror-separator {
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$l,
-      styles: styles$p
+      template: template$n,
+      styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -59839,7 +59847,7 @@ img.ProseMirror-separator {
   };
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$k = (context, definition) => html `
+  const template$m = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -60074,7 +60082,7 @@ img.ProseMirror-separator {
               }
               newValue = this.firstSelectedOption?.value ?? newValue;
           }
-          if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
+          if (prev !== newValue) {
               this._value = newValue;
               super.valueChanged(prev, newValue);
               Observable.notify(this, 'value');
@@ -60163,12 +60171,12 @@ img.ProseMirror-separator {
           }
           const previousSelectedIndex = this.selectedIndex;
           super.clickHandler(e);
-          this.open = this.collapsible && !this.open;
-          if (!this.open
+          if (this.open
               && this.selectedIndex !== previousSelectedIndex
               && optionClicked) {
               this.updateValue(true);
           }
+          this.open = this.collapsible && !this.open;
       }
       /**
        * Updates the value when an option's value changes.
@@ -60349,6 +60357,7 @@ img.ProseMirror-separator {
               return true;
           }
           let currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
+          let commitValueThenClose = false;
           switch (key) {
               case keySpace: {
                   // when dropdown is open allow user to enter a space for filter text
@@ -60375,8 +60384,13 @@ img.ProseMirror-separator {
                       || this.filteredOptions.every(o => o.disabled)) {
                       return false;
                   }
-                  this.open = !this.open;
-                  if (!this.open) {
+                  if (this.open) {
+                      commitValueThenClose = true;
+                  }
+                  else {
+                      this.open = true;
+                  }
+                  if (commitValueThenClose) {
                       this.focus();
                   }
                   break;
@@ -60399,11 +60413,16 @@ img.ProseMirror-separator {
                   break;
               }
           }
-          if (!this.open && this.selectedIndex !== currentActiveIndex) {
-              this.selectedIndex = currentActiveIndex;
+          if (!this.open || commitValueThenClose) {
+              if (this.selectedIndex !== currentActiveIndex) {
+                  this.selectedIndex = currentActiveIndex;
+              }
+              if (initialSelectedIndex !== this.selectedIndex) {
+                  this.updateValue(true);
+              }
           }
-          if (!this.open && initialSelectedIndex !== this.selectedIndex) {
-              this.updateValue(true);
+          if (commitValueThenClose) {
+              this.open = false;
           }
           return !(key === keyArrowDown || key === keyArrowUp);
       }
@@ -60966,8 +60985,8 @@ img.ProseMirror-separator {
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$k,
-      styles: styles$q,
+      template: template$m,
+      styles: styles$r,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -60980,7 +60999,7 @@ img.ProseMirror-separator {
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$o = css `
+  const styles$p = css `
     ${display('inline-flex')}
 
     :host {
@@ -61142,7 +61161,7 @@ img.ProseMirror-separator {
         `));
 
   // prettier-ignore
-  const template$j = html `
+  const template$l = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -61186,12 +61205,12 @@ img.ProseMirror-separator {
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$j,
-      styles: styles$o
+      template: template$l,
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$n = css `
+  const styles$o = css `
     ${display('inline-flex')}
 
     :host {
@@ -61301,11 +61320,11 @@ img.ProseMirror-separator {
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$n
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$m = css `
+  const styles$n = css `
     ${display('block')}
 
     :host {
@@ -61324,7 +61343,7 @@ img.ProseMirror-separator {
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$m
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -64542,7 +64561,6 @@ img.ProseMirror-separator {
       partiallySelected: 'partially-selected'
   };
   /**
-   * @internal
    * Table keyboard focus types
    */
   const TableFocusType = {
@@ -64687,6 +64705,13 @@ img.ProseMirror-separator {
       observable
   ], TableCellView.prototype, "recordId", void 0);
 
+  function uniquifySlotNameForColumnId(uniqueColumnId, slotName) {
+      return `${uniqueColumnId}-${slotName}`;
+  }
+  function uniquifySlotNameForColumn(column, slotName) {
+      return uniquifySlotNameForColumnId(column.columnInternals.uniqueId, slotName);
+  }
+
   const validateCellViewTemplate = (cellViewTag) => {
       let instance;
       try {
@@ -64699,6 +64724,7 @@ img.ProseMirror-separator {
           throw new Error(`Cell view tag name (${cellViewTag}) must evaluate to an element extending TableCellView`);
       }
   };
+  // prettier-ignore
   const createCellViewTemplate = (cellViewTag) => {
       validateCellViewTemplate(cellViewTag);
       return html `
@@ -64709,6 +64735,12 @@ img.ProseMirror-separator {
             :recordId="${y => y.recordId}"
             class="cell-view"
         >
+            ${repeat(y => y.column?.columnInternals.slotNames || [], html `
+                <slot
+                    name="${(x, c) => uniquifySlotNameForColumn(c.parent.column, x)}"
+                    slot="${x => x}"
+                ></slot>
+            `)}
         </${cellViewTag}>
     `;
   };
@@ -64735,7 +64767,7 @@ img.ProseMirror-separator {
           /**
            * Whether or not this column can be used to group rows by
            */
-          this.groupingDisabled = false;
+          this.groupingDisabled = true;
           /**
            * Used by column plugins to size a column proportionally to the available
            * width of a row. Sets currentFractionalWidth when changed.
@@ -64762,7 +64794,7 @@ img.ProseMirror-separator {
           /**
            * Whether or not this column can be sorted
            */
-          this.sortingDisabled = false;
+          this.sortingDisabled = true;
           /**
            * @internal Do not write to this value directly. It is used by the Table in order to store
            * the resolved value of the sortDirection after programmatic or interactive updates.
@@ -64770,8 +64802,11 @@ img.ProseMirror-separator {
           this.currentSortDirection = TableColumnSortDirection.none;
           this.cellRecordFieldNames = options.cellRecordFieldNames;
           this.cellViewTemplate = createCellViewTemplate(options.cellViewTag);
-          this.groupHeaderViewTemplate = createGroupHeaderViewTemplate(options.groupHeaderViewTag);
+          if (options.groupHeaderViewTag) {
+              this.groupHeaderViewTemplate = createGroupHeaderViewTemplate(options.groupHeaderViewTag);
+          }
           this.delegatedEvents = options.delegatedEvents;
+          this.slotNames = options.slotNames ?? [];
           this.sortOperation = options.sortOperation ?? TableColumnSortOperation.basic;
           this.validator = options.validator;
       }
@@ -65017,7 +65052,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$l = css `
+  const styles$m = css `
     ${display('flex')}
 
     :host {
@@ -65221,7 +65256,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$k = css `
+  const styles$l = css `
     ${display('flex')}
 
     :host {
@@ -65248,7 +65283,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$i = html `
+  const template$k = html `
     <template role="columnheader"
         aria-sort="${x => x.ariaSort}"
         ${'' /* Prevent header double clicks from selecting text */}
@@ -65329,13 +65364,13 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$i,
-      styles: styles$k
+      template: template$k,
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$j = css `
+  const styles$k = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -65360,9 +65395,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$i = css `
+  const styles$j = css `
     ${display('flex')}
-    ${styles$j}
+    ${styles$k}
 
     :host {
         width: fit-content;
@@ -65526,7 +65561,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$h = css `
+  const styles$i = css `
     ${display('flex')}
 
     :host {
@@ -65572,7 +65607,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$h = html `
+  const template$j = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -65669,14 +65704,14 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$h,
-      styles: styles$h
+      template: template$j,
+      styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
   // prettier-ignore
-  const template$g = html `
+  const template$i = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -65743,6 +65778,7 @@ focus outline in that case.
                         action-menu-label="${x => x.actionMenuLabel}"
                         @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x)}"
                         @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x)}"
+                        @cell-view-slots-request="${(x, c) => c.parent.onCellViewSlotsRequest(x, c.event)}"
                         :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]}"
                     >
 
@@ -65752,6 +65788,13 @@ focus outline in that case.
                                 slot="cellActionMenu"
                             ></slot>
                         `)}
+
+                        ${repeat(x => x.columnInternals.slotNames, html `
+                            <slot
+                                name="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
+                                slot="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
+                            ></slot>
+                        `)}
                     </${tableCellTag}>
                 `)}
             `, { recycle: false, positioning: true })}
@@ -65898,6 +65941,20 @@ focus outline in that case.
           this.animationClass = 'animating';
           this.expandIcon?.addEventListener('transitionend', this.removeAnimatingClass);
       }
+      onCellViewSlotsRequest(column, event) {
+          event.stopImmediatePropagation();
+          if (typeof this.recordId !== 'string') {
+              // The recordId is expected to be defined on any row that can be interacted with, but if
+              // it isn't defined, nothing can be done with the request to slot content into the row.
+              return;
+          }
+          const eventDetails = {
+              recordId: this.recordId,
+              columnInternalId: column.columnInternals.uniqueId,
+              slots: event.detail.slots
+          };
+          this.$emit('row-slots-request', eventDetails);
+      }
       emitActionMenuToggleEvent(eventType, menuButtonEventDetail, column) {
           const detail = {
               newState: menuButtonEventDetail.newState,
@@ -66041,15 +66098,15 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$g,
-      styles: styles$i
+      template: template$i,
+      styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$g = css `
+  const styles$h = css `
     ${display('grid')}
-    ${styles$j}
+    ${styles$k}
 
     :host {
         align-items: center;
@@ -66139,7 +66196,7 @@ focus outline in that case.
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$f = html `
+  const template$h = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -66289,14 +66346,14 @@ focus outline in that case.
   ], TableGroupRow.prototype, "animationClass", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$f,
-      styles: styles$g
+      template: template$h,
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
   // prettier-ignore
-  const template$e = html `
+  const template$g = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -66446,6 +66503,7 @@ focus outline in that case.
                                         @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                         @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
                                         @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
+                                        @row-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
                                         @row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
                                     >
                                     ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
@@ -66456,6 +66514,12 @@ focus outline in that case.
                                             </slot>
                                         `)}
                                     `)}
+                                    ${repeat((x, c) => (c.parent.tableData[x.index]?.slots || []), html `
+                                        <slot
+                                            name="${x => x.name}"
+                                            slot="${x => x.slot}"
+                                        ></slot>
+                                    `)}
                                     </${tableRowTag}>
                                 `)}
                             `)}
@@ -69444,6 +69508,9 @@ focus outline in that case.
           // the selection checkbox 'checked' value should be ingored.
           // https://github.com/microsoft/fast/issues/5750
           this.ignoreSelectionChangeEvents = false;
+          // Map from the external slot name to the record ID of the row that should have the slot
+          // and the unique slot name that the slot should be slotted into.
+          this.columnRequestedSlots = new Map();
           this.onViewPortScroll = (event) => {
               this.scrollX = event.target.scrollLeft;
           };
@@ -69636,6 +69703,18 @@ focus outline in that case.
           void this.handleRowActionMenuToggleEvent(event);
       }
       /** @internal */
+      onRowSlotsRequest(event) {
+          event.stopImmediatePropagation();
+          for (const slotMetadata of event.detail.slots) {
+              const uniqueSlot = uniquifySlotNameForColumnId(event.detail.columnInternalId, slotMetadata.slot);
+              this.columnRequestedSlots.set(slotMetadata.name, {
+                  recordId: event.detail.recordId,
+                  uniqueSlot
+              });
+          }
+          this.refreshRows();
+      }
+      /** @internal */
       handleCollapseAllRows() {
           this.expansionManager.collapseAll();
       }
@@ -69830,12 +69909,19 @@ focus outline in that case.
           this.observeColumns();
           this.tableUpdateTracker.trackColumnInstancesChanged();
       }
+      removeActionMenuSlotsFromColumnRequestedSlots() {
+          for (const actionMenuSlot of this.actionMenuSlots) {
+              this.columnRequestedSlots.delete(actionMenuSlot);
+          }
+          this.refreshRows();
+      }
       async handleActionMenuBeforeToggleEvent(rowIndex, event) {
           const selectionChanged = this.selectionManager.handleActionMenuOpening(this.tableData[rowIndex]);
           if (selectionChanged) {
               await this.emitSelectionChangeEvent();
           }
           this.openActionMenuRecordId = event.detail.recordIds[0];
+          this.removeActionMenuSlotsFromColumnRequestedSlots();
           const detail = await this.getActionMenuToggleEventDetail(event);
           this.$emit('action-menu-beforetoggle', detail);
       }
@@ -70027,6 +70113,7 @@ focus outline in that case.
           this.selectionState = this.getTableSelectionState();
           let hasDataHierarchy = false;
           const rows = this.table.getRowModel().rows;
+          const slotsByRecordId = this.getRequestedSlotsByRecordId();
           this.tableData = rows.map(row => {
               const isGroupRow = row.getIsGrouped();
               const hasParentRow = isGroupRow ? false : row.getParentRow();
@@ -70052,7 +70139,8 @@ focus outline in that case.
                   immediateChildCount: row.subRows.length,
                   groupColumn: this.getGroupRowColumn(row),
                   resolvedRowIndex: row.index,
-                  isLoadingChildren: this.expansionManager.isLoadingChildren(row.id)
+                  isLoadingChildren: this.expansionManager.isLoadingChildren(row.id),
+                  slots: slotsByRecordId[row.id] ?? []
               };
               hasDataHierarchy = hasDataHierarchy || isParent;
               return rowState;
@@ -70061,6 +70149,20 @@ focus outline in that case.
               || this.getColumnsParticipatingInGrouping().length > 0;
           this.virtualizer.dataChanged();
       }
+      getRequestedSlotsByRecordId() {
+          const slotsByRecordId = {};
+          for (const [slotName, { recordId, uniqueSlot }] of this
+              .columnRequestedSlots) {
+              if (!Object.prototype.hasOwnProperty.call(slotsByRecordId, recordId)) {
+                  slotsByRecordId[recordId] = [];
+              }
+              slotsByRecordId[recordId].push({
+                  name: slotName,
+                  slot: uniqueSlot
+              });
+          }
+          return slotsByRecordId;
+      }
       getTableSelectionState() {
           if (this.table.getIsAllRowsSelected()) {
               return TableRowSelectionState.selected;
@@ -70239,12 +70341,12 @@ focus outline in that case.
   ], Table$1.prototype, "documentShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$e,
-      styles: styles$l
+      template: template$g,
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$f = css `
+  const styles$g = css `
     ${display('contents')}
 
     .header-content {
@@ -70257,7 +70359,7 @@ focus outline in that case.
   // 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$d = html `<span
+  const template$f = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -70332,7 +70434,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$e = css `
+  const styles$f = css `
     ${display('flex')}
 
     :host {
@@ -70365,7 +70467,7 @@ focus outline in that case.
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$c = html `
+  const template$e = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -70460,8 +70562,8 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$c,
-      styles: styles$e
+      template: template$e,
+      styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -70538,7 +70640,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$b = html `
+  const template$d = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -70547,7 +70649,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$d = css `
+  const styles$e = css `
     ${display('flex')}
 
     span {
@@ -70571,8 +70673,8 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$b,
-      styles: styles$d
+      template: template$d,
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -70740,8 +70842,8 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$d,
-      styles: styles$f
+      template: template$f,
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -70793,8 +70895,8 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$b,
-      styles: styles$d
+      template: template$d,
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -70810,7 +70912,7 @@ focus outline in that case.
   };
 
   // prettier-ignore
-  const template$a = html `
+  const template$c = html `
     <template
         class="
             ${x => (x.alignment === TextCellViewBaseAlignment.right ? 'right-align' : '')}
@@ -70826,7 +70928,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$c = css `
+  const styles$d = css `
     ${display('flex')}
 
     :host {
@@ -70928,8 +71030,8 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$a,
-      styles: styles$c
+      template: template$c,
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -71189,8 +71291,8 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$d,
-      styles: styles$f
+      template: template$f,
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -71206,8 +71308,8 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$a,
-      styles: styles$c
+      template: template$c,
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -71308,8 +71410,8 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$b,
-      styles: styles$d
+      template: template$d,
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -71361,8 +71463,8 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$d,
-      styles: styles$f
+      template: template$f,
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -71470,15 +71572,15 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$b = css `
-    ${styles$f}
+  const styles$c = css `
+    ${styles$g}
 
     slot[name='mapping'] {
         display: none;
     }
 `;
 
-  const template$9 = html `${template$d}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$b = html `${template$f}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -71564,7 +71666,7 @@ focus outline in that case.
       }
   }
 
-  const styles$a = css `
+  const styles$b = css `
     ${display('inline-flex')}
 
     :host {
@@ -71589,7 +71691,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$8 = html `
+  const template$a = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -71738,15 +71840,15 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$8,
-      styles: styles$a
+      template: template$a,
+      styles: styles$b
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$9 = css `
+  const styles$a = css `
     ${display('inline-flex')}
 
     :host {
@@ -71771,7 +71873,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$7 = html `
+  const template$9 = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -71858,8 +71960,8 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$7,
-      styles: styles$9
+      template: template$9,
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -71943,13 +72045,181 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$9,
-      styles: styles$b
+      template: template$b,
+      styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
+  const template$8 = html `
+    <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
+        >${template$f}</template
+    >
+`;
+
+  /** @internal */
+  const cellViewMenuSlotName = 'menu-button-menu';
+
+  // prettier-ignore
+  const template$7 = html `
+    ${when(x => x.showMenuButton, html `
+        <${menuButtonTag}
+            ${ref('menuButton')}
+            appearance="${ButtonAppearance.ghost}"
+            @beforetoggle="${(x, c) => x.onMenuButtonBeforeToggle(c.event)}"
+            @mouseover="${x => x.onMenuButtonMouseOver()}"
+            @mouseout="${x => x.onMenuButtonMouseOut()}"
+            @click="${(x, c) => x.onMenuButtonClick(c.event)}"
+            title=${x => (x.hasOverflow ? x.cellRecord.value : null)}
+        >
+            <span ${ref('valueSpan')} class="value-label">${x => x.cellRecord.value}</span>
+            <${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>
+
+            <slot name="${cellViewMenuSlotName}" slot="menu"></slot>
+        </${menuButtonTag}>
+    `)}
+`;
+
+  const styles$9 = css `
+    :host {
+        align-self: center;
+        width: 100%;
+    }
+
+    nimble-menu-button {
+        height: ${controlSlimHeight};
+        width: 100%;
+    }
+
+    .value-label {
+        margin-right: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+
+  /**
+   * The cell view base class for displaying a string field as a menu button.
+   */
+  class TableColumnMenuButtonCellView extends TableCellView {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.hasOverflow = false;
+      }
+      /** @internal */
+      get showMenuButton() {
+          return !!this.cellRecord?.value;
+      }
+      get tabbableChildren() {
+          if (this.showMenuButton) {
+              return [this.menuButton];
+          }
+          return [];
+      }
+      /** @internal */
+      onMenuButtonBeforeToggle(event) {
+          const configuredSlotName = this.columnConfig?.menuSlot;
+          if (configuredSlotName && event.detail.newState) {
+              const eventDetail = {
+                  slots: [
+                      { name: configuredSlotName, slot: cellViewMenuSlotName }
+                  ]
+              };
+              this.$emit('cell-view-slots-request', eventDetail);
+          }
+          return true;
+      }
+      /** @internal */
+      onMenuButtonMouseOver() {
+          if (this.valueSpan) {
+              this.hasOverflow = this.valueSpan.offsetWidth < this.valueSpan.scrollWidth;
+          }
+      }
+      /** @internal */
+      onMenuButtonMouseOut() {
+          this.hasOverflow = false;
+      }
+      /** @internal */
+      onMenuButtonClick(e) {
+          // Stop propagation of the click event to prevent clicking the menu button
+          // from affecting row selection.
+          e.stopPropagation();
+      }
+  }
+  __decorate$1([
+      observable
+  ], TableColumnMenuButtonCellView.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      volatile
+  ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
+  const menuButtonCellView = TableColumnMenuButtonCellView.compose({
+      baseName: 'table-column-menu-button-cell-view',
+      template: template$7,
+      styles: styles$9
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
+  const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
+
+  /**
+   * The table column for displaying string fields as the content within a menu button.
+   */
+  class TableColumnMenuButton extends mixinFractionalWidthColumnAPI((TableColumn)) {
+      /** @internal */
+      onDelegatedEvent(e) {
+          e.stopImmediatePropagation();
+          const event = e;
+          const originalEvent = event.detail.originalEvent;
+          if (originalEvent.type === 'beforetoggle'
+              || originalEvent.type === 'toggle') {
+              const newEventName = `menu-button-column-${originalEvent.type}`;
+              const originalToggleEvent = originalEvent;
+              const detail = {
+                  ...originalToggleEvent.detail,
+                  recordId: event.detail.recordId
+              };
+              this.$emit(newEventName, detail);
+          }
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnMenuButtonCellViewTag,
+              delegatedEvents: ['beforetoggle', 'toggle'],
+              slotNames: [cellViewMenuSlotName],
+              validator: new ColumnValidator([])
+          };
+      }
+      fieldNameChanged() {
+          this.columnInternals.dataRecordFieldNames = [this.fieldName];
+          this.columnInternals.operandDataRecordFieldName = this.fieldName;
+      }
+      menuSlotChanged() {
+          this.updateColumnConfig();
+      }
+      updateColumnConfig() {
+          this.columnInternals.columnConfig = {
+              menuSlot: this.menuSlot
+          };
+      }
+  }
+  __decorate$1([
+      attr({ attribute: 'field-name' })
+  ], TableColumnMenuButton.prototype, "fieldName", void 0);
+  __decorate$1([
+      attr({ attribute: 'menu-slot' })
+  ], TableColumnMenuButton.prototype, "menuSlot", void 0);
+  const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
+      baseName: 'table-column-menu-button',
+      template: template$8,
+      styles: styles$g
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleTableColumnMenuButton());
+
   // 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
@@ -71972,8 +72242,8 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$b,
-      styles: styles$d
+      template: template$d,
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -71994,8 +72264,8 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$a,
-      styles: styles$c
+      template: template$c,
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -72536,7 +72806,7 @@ focus outline in that case.
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
       template: template$6,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -72554,8 +72824,8 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$a,
-      styles: styles$c
+      template: template$c,
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -72582,8 +72852,8 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$d,
-      styles: styles$f
+      template: template$f,
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -72680,7 +72950,7 @@ focus outline in that case.
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$I}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};
@@ -73025,7 +73295,7 @@ focus outline in that case.
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$I}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};