@ni/nimble-components 18.12.6 → 18.13.0

package/dist/all-components-bundle.js

@@ -16356,7 +16356,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Wed, 26 Apr 2023 17:25:12 GMT
+     * Generated on Mon, 01 May 2023 20:20:11 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16726,9 +16726,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$r = html `<slot></slot>`;
+    const template$s = html `<slot></slot>`;
 
-    const styles$O = css `
+    const styles$P = css `
     :host {
         display: contents;
     }
@@ -16784,8 +16784,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$O,
-        template: template$r
+        styles: styles$P,
+        template: template$s
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -16969,7 +16969,7 @@
         }
     }
 
-    const styles$N = css `
+    const styles$O = css `
     ${display('inline')}
 
     :host {
@@ -17052,7 +17052,7 @@
 `;
 
     // prettier-ignore
-    const template$q = (context, definition) => html `
+    const template$r = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17126,14 +17126,14 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$q,
-        styles: styles$N,
+        template: template$r,
+        styles: styles$O,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchor());
-    DesignSystem.tagFor(Anchor);
+    const anchorTag = DesignSystem.tagFor(Anchor);
 
     /**
      * Types of button appearance.
@@ -17213,7 +17213,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$M = css `
+    const styles$N = css `
     ${display('inline-flex')}
 
     :host {
@@ -17494,8 +17494,8 @@
             }
         `));
 
-    const styles$L = css `
-    ${styles$M}
+    const styles$M = css `
+    ${styles$N}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17503,7 +17503,7 @@
     }
 `;
 
-    const template$p = (context, definition) => html `
+    const template$q = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17585,8 +17585,8 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$p,
-        styles: styles$L,
+        template: template$q,
+        styles: styles$M,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17594,7 +17594,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
     DesignSystem.tagFor(AnchorButton);
 
-    const styles$K = css `
+    const styles$L = css `
     ${display('grid')}
 
     :host {
@@ -17671,7 +17671,7 @@
     }
 `;
 
-    const template$o = (context, definition) => html `
+    const template$p = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17777,8 +17777,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$o,
-        styles: styles$K,
+        template: template$p,
+        styles: styles$L,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17802,7 +17802,7 @@
         }
     });
 
-    const styles$J = css `
+    const styles$K = css `
     ${display('inline-flex')}
 
     :host {
@@ -17908,8 +17908,8 @@
     }
 `;
 
-    const styles$I = css `
-    ${styles$J}
+    const styles$J = css `
+    ${styles$K}
 
     a {
         text-decoration: none;
@@ -17927,7 +17927,7 @@
     }
 `;
 
-    const template$n = (context, definition) => html `
+    const template$o = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17980,13 +17980,13 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$n,
-        styles: styles$I
+        template: template$o,
+        styles: styles$J
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
     DesignSystem.tagFor(AnchorTab);
 
-    const styles$H = css `
+    const styles$I = css `
     ${display('grid')}
 
     :host {
@@ -18004,7 +18004,7 @@
     }
 `;
 
-    const template$m = (context, definition) => html `
+    const template$n = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18201,8 +18201,8 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$m,
-        styles: styles$H,
+        template: template$n,
+        styles: styles$I,
         shadowOptions: {
             delegatesFocus: false
         }
@@ -18210,7 +18210,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
     DesignSystem.tagFor(AnchorTabs);
 
-    const styles$G = css `
+    const styles$H = css `
     ${display('block')}
 
     :host {
@@ -18314,7 +18314,7 @@
     }
 `;
 
-    const template$l = (context, definition) => html `
+    const template$m = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18451,8 +18451,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$l,
-        styles: styles$G,
+        template: template$m,
+        styles: styles$H,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -18462,7 +18462,7 @@
         .register(nimbleAnchorTreeItem());
     DesignSystem.tagFor(AnchorTreeItem);
 
-    const styles$F = css `
+    const styles$G = css `
     :host {
         contain: layout;
         display: block;
@@ -18486,7 +18486,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$F
+        styles: styles$G
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -18566,7 +18566,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$E = css `
+    const styles$F = css `
     ${display('flex')}
 
     :host {
@@ -18724,8 +18724,8 @@
             }
         `));
 
-    const styles$D = css `
-    ${styles$M}
+    const styles$E = css `
+    ${styles$N}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18771,7 +18771,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$D,
+        styles: styles$E,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19409,13 +19409,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$k = html `
+    const template$l = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$C = css `
+    const styles$D = css `
     ${display('inline-flex')}
 
     :host {
@@ -19468,8 +19468,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$k,
-            styles: styles$C,
+            template: template$l,
+            styles: styles$D,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19535,7 +19535,7 @@
     };
 
     // prettier-ignore
-    const template$j = html `
+    const template$k = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19654,13 +19654,13 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$j,
-        styles: styles$E
+        template: template$k,
+        styles: styles$F
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
     DesignSystem.tagFor(Banner);
 
-    const styles$B = css `
+    const styles$C = css `
     ${display('inline-block')}
 
     :host {
@@ -19701,12 +19701,12 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$B
+        styles: styles$C
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
     DesignSystem.tagFor(Breadcrumb);
 
-    const styles$A = css `
+    const styles$B = css `
     ${display('inline-flex')}
 
     :host {
@@ -19782,7 +19782,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$A,
+        styles: styles$B,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -19790,7 +19790,7 @@
         .register(nimbleBreadcrumbItem());
     DesignSystem.tagFor(BreadcrumbItem);
 
-    const styles$z = css `
+    const styles$A = css `
     ${display('inline-flex')}
 
     :host {
@@ -19949,7 +19949,7 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$z,
+        styles: styles$A,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19957,7 +19957,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
     DesignSystem.tagFor(CardButton);
 
-    const styles$y = css `
+    const styles$z = css `
     ${display('inline-flex')}
 
     :host {
@@ -20075,15 +20075,15 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$y,
+        styles: styles$z,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
     const checkboxTag = DesignSystem.tagFor(Checkbox);
 
-    const styles$x = css `
-    ${styles$M}
+    const styles$y = css `
+    ${styles$N}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -20109,7 +20109,7 @@
     }
 `;
 
-    const template$i = (context, definition) => html `
+    const template$j = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20184,8 +20184,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$i,
-        styles: styles$x,
+        template: template$j,
+        styles: styles$y,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -20217,7 +20217,7 @@
         block: 'block'
     };
 
-    const styles$w = css `
+    const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -20453,7 +20453,7 @@
             }
         `));
 
-    const styles$v = css `
+    const styles$w = css `
     .error-icon {
         display: none;
     }
@@ -20487,9 +20487,9 @@
     }
 `;
 
-    const styles$u = css `
+    const styles$v = css `
+    ${styles$x}
     ${styles$w}
-    ${styles$v}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20725,7 +20725,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$u,
+        styles: styles$v,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20770,7 +20770,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$t = css `
+    const styles$u = css `
     ${display('grid')}
 
     dialog {
@@ -20886,7 +20886,7 @@
             }
         `));
 
-    const template$h = html `
+    const template$i = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21012,14 +21012,14 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$h,
-        styles: styles$t,
+        template: template$i,
+        styles: styles$u,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
     DesignSystem.tagFor(Dialog);
 
-    const styles$s = css `
+    const styles$t = css `
     ${display('block')}
 
     :host {
@@ -21172,7 +21172,7 @@
             }
         `));
 
-    const template$g = html `
+    const template$h = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21286,8 +21286,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$g,
-        styles: styles$s
+        template: template$h,
+        styles: styles$t
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
     DesignSystem.tagFor(Drawer);
@@ -23116,7 +23116,7 @@
     registerIcon('icon-xmark-check', IconXmarkCheck);
     DesignSystem.tagFor(IconXmarkCheck);
 
-    const styles$r = css `
+    const styles$s = css `
     ${display('flex')}
 
     :host {
@@ -23196,12 +23196,12 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$r
+        styles: styles$s
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
     DesignSystem.tagFor(ListOption);
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('grid')}
 
     :host {
@@ -23268,12 +23268,12 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$q
+        styles: styles$r
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
     DesignSystem.tagFor(Menu);
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('inline-block')}
 
     :host {
@@ -23292,7 +23292,7 @@
 `;
 
     // prettier-ignore
-    const template$f = html `
+    const template$g = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23547,8 +23547,8 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$f,
-        styles: styles$p,
+        template: template$g,
+        styles: styles$q,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -23556,7 +23556,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
     const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('grid')}
 
     :host {
@@ -23654,7 +23654,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$o,
+        styles: styles$p,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -23669,9 +23669,9 @@
         block: 'block'
     };
 
-    const styles$n = css `
+    const styles$o = css `
     ${display('inline-block')}
-    ${styles$v}
+    ${styles$w}
 
     :host {
         font: ${bodyFont};
@@ -23885,7 +23885,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$n,
+        styles: styles$o,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -23927,7 +23927,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
     DesignSystem.tagFor(NumberField);
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('inline-flex')}
 
     :host {
@@ -24028,13 +24028,13 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$m,
+        styles: styles$n,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
     DesignSystem.tagFor(Radio);
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -24069,7 +24069,7 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$l,
+        styles: styles$m,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -24077,9 +24077,9 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
     DesignSystem.tagFor(RadioGroup);
 
-    const styles$k = css `
+    const styles$l = css `
+    ${styles$x}
     ${styles$w}
-    ${styles$v}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -24155,7 +24155,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$k,
+        styles: styles$l,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${iconExclamationMarkTag}
@@ -24168,7 +24168,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
     DesignSystem.tagFor(Select);
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('inline-flex')}
 
     :host {
@@ -24314,7 +24314,7 @@
             }
         `));
 
-    const template$e = html `
+    const template$f = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -24331,13 +24331,13 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$e,
-        styles: styles$j
+        template: template$f,
+        styles: styles$k
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
     DesignSystem.tagFor(Spinner);
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('inline-flex')}
 
     :host {
@@ -24500,7 +24500,7 @@
         `));
 
     // prettier-ignore
-    const template$d = html `
+    const template$e = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -24544,8 +24544,8 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$d,
-        styles: styles$i
+        template: template$e,
+        styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
     DesignSystem.tagFor(Switch);
@@ -24559,12 +24559,12 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$J
+        styles: styles$K
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
     DesignSystem.tagFor(Tab);
 
-    const styles$h = css `
+    const styles$i = css `
     ${display('block')}
 
     :host {
@@ -24584,7 +24584,7 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$h
+        styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
     DesignSystem.tagFor(TabPanel);
@@ -27895,12 +27895,36 @@
      * Each TableColumn type has a corresponding TableCellView type (linked via TableColumn.cellViewTag).
      */
     class TableCellView extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.delegatedEvents = [];
+            this.delegatedEventHandler = () => { };
+        }
         /**
          * 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() { }
+        columnChanged() {
+            for (const eventName of this.delegatedEvents) {
+                this.removeEventListener(eventName, this.delegatedEventHandler);
+            }
+            this.delegatedEvents = [];
+            this.delegatedEventHandler = () => { };
+            if (!this.column) {
+                return;
+            }
+            this.delegatedEvents = this.column.columnInternals.delegatedEvents;
+            this.delegatedEventHandler = (event) => {
+                this.column?.dispatchEvent(new CustomEvent('delegated-event', {
+                    detail: { originalEvent: event }
+                }));
+            };
+            for (const delegatedEvent of this.delegatedEvents) {
+                this.addEventListener(delegatedEvent, this.delegatedEventHandler);
+            }
+        }
     }
     __decorate$1([
         observable
@@ -27908,6 +27932,9 @@
     __decorate$1([
         observable
     ], TableCellView.prototype, "columnConfig", void 0);
+    __decorate$1([
+        observable
+    ], TableCellView.prototype, "column", void 0);
 
     const validateCellViewTemplate = (cellViewTag) => {
         let instance;
@@ -27927,6 +27954,7 @@
         <${cellViewTag}
             :cellRecord="${y => y.cellState?.cellRecord}"
             :columnConfig="${y => y.cellState?.columnConfig}"
+            :column="${y => y.column}"
             class="cell-view"
         >
         </${cellViewTag}>
@@ -27973,6 +28001,7 @@
             this.cellRecordFieldNames = options.cellRecordFieldNames;
             this.cellViewTemplate = createCellViewTemplate(options.cellViewTag);
             this.groupHeaderViewTemplate = createGroupHeaderViewTemplate(options.groupHeaderViewTag);
+            this.delegatedEvents = options.delegatedEvents;
         }
         fractionalWidthChanged() {
             this.currentFractionalWidth = this.fractionalWidth;
@@ -28159,7 +28188,7 @@
         }
     }
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('flex')}
 
     :host {
@@ -28266,7 +28295,7 @@
             }
         `));
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('flex')}
 
     :host {
@@ -28287,7 +28316,7 @@
 `;
 
     // prettier-ignore
-    const template$c = html `
+    const template$d = html `
     <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
 
@@ -28344,13 +28373,13 @@
     ], TableHeader.prototype, "isGrouped", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$c,
-        styles: styles$f
+        template: template$d,
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
     const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('flex')}
 
     :host {
@@ -28439,8 +28468,8 @@
             }
         `));
 
-    const styles$d = css `
-    ${display('grid')}
+    const styles$e = css `
+    ${display('flex')}
 
     :host {
         --ni-private-table-cell-nesting-level: 0;
@@ -28451,7 +28480,6 @@
         );
         align-self: center;
         height: 100%;
-        grid-template-columns: 1fr auto;
         /* A default value that will be overridden by the row */
         --ni-private-table-cell-action-menu-display: block;
     }
@@ -28464,11 +28492,14 @@
 
     .action-menu {
         display: var(--ni-private-table-cell-action-menu-display);
+        margin-left: auto;
+        flex-shrink: 0;
+        flex-grow: 0;
     }
 `;
 
     // prettier-ignore
-    const template$b = html `
+    const template$c = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
         ${x => x.cellViewTemplate}
         ${when(x => x.hasActionMenu, html `
@@ -28510,6 +28541,9 @@
     __decorate$1([
         observable
     ], TableCell.prototype, "cellState", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "column", void 0);
     __decorate$1([
         attr({ attribute: 'has-action-menu', mode: 'boolean' })
     ], TableCell.prototype, "hasActionMenu", void 0);
@@ -28527,14 +28561,14 @@
     ], TableCell.prototype, "nestingLevel", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$b,
-        styles: styles$d
+        template: template$c,
+        styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
     const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
-    const template$a = html `
+    const template$b = html `
     <template role="row" aria-selected=${x => x.ariaSelected}>
         ${when(x => x.selectable && !x.hideSelection, html `
             <span role="gridcell" class="checkbox-container">
@@ -28559,6 +28593,7 @@
                         class="cell"
                         :cellState="${x => x.cellState}"
                         :cellViewTemplate="${x => x.column.columnInternals.cellViewTemplate}"
+                        :column="${x => x.column}"
                         ?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)}"
@@ -28721,13 +28756,13 @@
     ], TableRow.prototype, "ariaSelected", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$a,
-        styles: styles$e
+        template: template$b,
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
     const tableRowTag = DesignSystem.tagFor(TableRow);
 
-    const styles$c = css `
+    const styles$d = css `
     ${display('flex')}
 
     :host {
@@ -28820,7 +28855,7 @@
 
     /* eslint-disable @typescript-eslint/indent */
     // prettier-ignore
-    const template$9 = html `
+    const template$a = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -28949,14 +28984,14 @@
     ], TableGroupRow.prototype, "animationClass", void 0);
     const nimbleTableGroupRow = TableGroupRow.compose({
         baseName: 'table-group-row',
-        template: template$9,
-        styles: styles$c
+        template: template$a,
+        styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
     const tableGroupRowTag = DesignSystem.tagFor(TableGroupRow);
 
     // prettier-ignore
-    const template$8 = html `
+    const template$9 = html `
     <template
         role="grid"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
@@ -28966,7 +29001,7 @@
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
             --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
             --ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
-            --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px; 
+            --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px;
             --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''};
             ">
             <div role="rowgroup" class="header-container">
@@ -28976,7 +29011,7 @@
                             <${checkboxTag}
                                 ${ref('selectionCheckbox')}
                                 class="${x => `selection-checkbox ${x.selectionMode ?? ''}`}"
-                                @change="${async (x, c) => x.onAllRowsSelectionChange(c.event)}"
+                                @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
                             >
                             </${checkboxTag}>
                         </span>
@@ -29024,7 +29059,7 @@
                                     :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
                                     ?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
                                     selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
-                                    @group-selection-toggle="${async (x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
+                                    @group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                     @group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
                                 >
                                 </${tableGroupRowTag}>
@@ -29039,10 +29074,10 @@
                                     :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                     :columns="${(_, c) => c.parent.columns}"
                                     :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
-                                    @click="${async (x, c) => c.parent.onRowClick(x.index)}"
-                                    @row-selection-toggle="${async (x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
-                                    @row-action-menu-beforetoggle="${async (x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
-                                    @row-action-menu-toggle="${async (_, c) => c.parent.onRowActionMenuToggle(c.event)}"
+                                    @click="${(x, c) => c.parent.onRowClick(x.index)}"
+                                    @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)}"
                                 >
                                 ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
                                     ${repeat((_, c) => c.parent.actionMenuSlots, html `
@@ -29051,7 +29086,7 @@
                                             slot="${x => `row-action-menu-${x}`}">
                                         </slot>
                                     `)}
-                                `)}                        
+                                `)}
                                 </${tableRowTag}>
                             `)}
                         `)}
@@ -30183,7 +30218,7 @@
             }
         }
         /** @internal */
-        async onRowSelectionToggle(rowIndex, event) {
+        onRowSelectionToggle(rowIndex, event) {
             event.stopImmediatePropagation();
             if (this.selectionMode === TableRowSelectionMode.none) {
                 return;
@@ -30200,55 +30235,31 @@
                     .getRowModel()
                     .rows[rowIndex]?.toggleSelected(event.detail.newState);
             }
-            await this.emitSelectionChangeEvent();
+            void this.emitSelectionChangeEvent();
         }
         /** @internal */
-        async onRowClick(rowIndex) {
-            return this.selectSingleRow(rowIndex);
+        onRowClick(rowIndex) {
+            void this.selectSingleRow(rowIndex);
+            return true;
         }
         /** @internal */
-        async onAllRowsSelectionChange(event) {
+        onAllRowsSelectionChange(event) {
             event.stopPropagation();
             if (this.ignoreSelectionChangeEvents) {
                 return;
             }
             this.table.toggleAllRowsSelected(this.selectionCheckbox.checked);
-            await this.emitSelectionChangeEvent();
+            void this.emitSelectionChangeEvent();
         }
         /** @internal */
-        async onRowActionMenuBeforeToggle(rowIndex, event) {
+        onRowActionMenuBeforeToggle(rowIndex, event) {
             event.stopImmediatePropagation();
-            let recordIds = event.detail.recordIds;
-            if (this.selectionMode !== TableRowSelectionMode.none) {
-                const row = this.table.getRowModel().rows[rowIndex];
-                if (row && !row.getIsSelected()) {
-                    await this.selectSingleRow(rowIndex);
-                }
-                else {
-                    recordIds = await this.getSelectedRecordIds();
-                }
-            }
-            this.openActionMenuRecordId = event.detail.recordIds[0];
-            const detail = {
-                ...event.detail,
-                recordIds
-            };
-            this.$emit('action-menu-beforetoggle', detail);
+            void this.handleActionMenuBeforeToggleEvent(rowIndex, event);
         }
         /** @internal */
-        async onRowActionMenuToggle(event) {
+        onRowActionMenuToggle(event) {
             event.stopImmediatePropagation();
-            const recordIds = this.selectionMode === TableRowSelectionMode.multiple
-                ? await this.getSelectedRecordIds()
-                : event.detail.recordIds;
-            const detail = {
-                ...event.detail,
-                recordIds
-            };
-            this.$emit('action-menu-toggle', detail);
-            if (!event.detail.newState) {
-                this.openActionMenuRecordId = undefined;
-            }
+            void this.handleRowActionMenuToggleEvent(event);
         }
         /** @internal */
         handleCollapseAllGroupRows() {
@@ -30311,6 +30322,37 @@
             this.observeColumns();
             this.updateTracker.trackColumnInstancesChanged();
         }
+        async handleActionMenuBeforeToggleEvent(rowIndex, event) {
+            let recordIds = event.detail.recordIds;
+            if (this.selectionMode !== TableRowSelectionMode.none) {
+                const row = this.table.getRowModel().rows[rowIndex];
+                if (row && !row.getIsSelected()) {
+                    await this.selectSingleRow(rowIndex);
+                }
+                else {
+                    recordIds = await this.getSelectedRecordIds();
+                }
+            }
+            this.openActionMenuRecordId = event.detail.recordIds[0];
+            const detail = {
+                ...event.detail,
+                recordIds
+            };
+            this.$emit('action-menu-beforetoggle', detail);
+        }
+        async handleRowActionMenuToggleEvent(event) {
+            const recordIds = this.selectionMode === TableRowSelectionMode.multiple
+                ? await this.getSelectedRecordIds()
+                : event.detail.recordIds;
+            const detail = {
+                ...event.detail,
+                recordIds
+            };
+            this.$emit('action-menu-toggle', detail);
+            if (!event.detail.newState) {
+                this.openActionMenuRecordId = undefined;
+            }
+        }
         removeColumnObservers() {
             this.columnNotifiers.forEach(notifier => {
                 notifier.unsubscribe(this);
@@ -30670,13 +30712,13 @@
     ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$8,
-        styles: styles$g
+        template: template$9,
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
     DesignSystem.tagFor(Table);
 
-    const styles$b = css `
+    const styles$c = css `
     :host {
         display: contents;
     }
@@ -30688,7 +30730,7 @@
     }
 `;
 
-    const template$7 = html `
+    const template$8 = html `
     <template slot="${x => x.columnInternals.uniqueId}">
         <span class="header-content">
             <slot></slot>
@@ -30764,6 +30806,120 @@
         return GroupableColumn;
     }
 
+    const styles$b = css `
+    :host {
+        width: fit-content;
+        max-width: 100%;
+        height: fit-content;
+        align-self: center;
+    }
+
+    nimble-anchor {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .placeholder {
+        color: ${controlLabelFontColor};
+    }
+`;
+
+    /* eslint-disable @typescript-eslint/indent */
+    // prettier-ignore
+    const template$7 = html `
+    <template
+        @click="${(x, c) => {
+    if (typeof x.cellRecord.href === 'string') {
+        c.event.stopPropagation();
+    }
+    return true;
+}}"
+    >
+        ${when(x => typeof x.cellRecord.href === 'string', html `
+            <${anchorTag}
+                ${ref('anchor')}
+                href="${x => x.cellRecord.href}"
+                hreflang="${x => x.columnConfig.hreflang}"
+                ping="${x => x.columnConfig.ping}"
+                referrerpolicy="${x => x.columnConfig.referrerpolicy}"
+                rel="${x => x.columnConfig.rel}"
+                target="${x => x.columnConfig.target}"
+                type="${x => x.columnConfig.type}"
+                download="${x => x.columnConfig.download}"
+                underline-hidden="${x => x.columnConfig.underlineHidden}"
+                appearance="${x => x.columnConfig.appearance}"
+                title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
+                @mouseover="${x => {
+    x.isValidContentAndHasOverflow = !!x.content && x.anchor.offsetWidth < x.anchor.scrollWidth;
+}}"
+                @mouseout="${x => {
+    x.isValidContentAndHasOverflow = false;
+}}"
+            >
+                ${x => x.content}
+            </${anchorTag}>`)}
+        ${when(x => typeof x.cellRecord.href !== 'string', html `
+            <span
+                ${ref('textSpan')}
+                class="${x => (typeof x.cellRecord.label === 'string' ? '' : 'placeholder')}"
+                title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
+                @mouseover="${x => {
+    x.isValidContentAndHasOverflow = !!x.content && x.textSpan.offsetWidth < x.textSpan.scrollWidth;
+}}"
+                @mouseout="${x => {
+    x.isValidContentAndHasOverflow = false;
+}}"
+            >
+                ${x => x.content}
+            </span>`)}
+    </template>
+`;
+
+    /**
+     * A cell view for displaying links
+     */
+    class TableColumnAnchorCellView extends TableCellView {
+        constructor() {
+            super(...arguments);
+            /** @internal */
+            this.isValidContentAndHasOverflow = false;
+        }
+        get content() {
+            if (typeof this.cellRecord.label === 'string') {
+                return this.cellRecord.label;
+            }
+            if (typeof this.cellRecord.href === 'string') {
+                return this.cellRecord.href;
+            }
+            return this.columnConfig.placeholder;
+        }
+        focusedRecycleCallback() {
+            this.anchor?.blur();
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableColumnAnchorCellView.prototype, "isValidContentAndHasOverflow", void 0);
+    __decorate$1([
+        volatile
+    ], TableColumnAnchorCellView.prototype, "content", null);
+    const anchorCellView = TableColumnAnchorCellView.compose({
+        baseName: 'table-column-anchor-cell-view',
+        template: template$7,
+        styles: styles$b
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
+    const tableColumnAnchorCellViewTag = DesignSystem.tagFor(TableColumnAnchorCellView);
+
     const template$6 = html `
     <span
         ${ref('textSpan')}
@@ -30830,6 +30986,124 @@
         .register(tableColumnTextGroupHeaderView());
     const tableColumnTextGroupHeaderTag = DesignSystem.tagFor(TableColumnTextGroupHeaderView);
 
+    /**
+     * A table column for displaying links.
+     */
+    class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumn))) {
+        constructor() {
+            super({
+                cellRecordFieldNames: ['label', 'href'],
+                cellViewTag: tableColumnAnchorCellViewTag,
+                groupHeaderViewTag: tableColumnTextGroupHeaderTag,
+                delegatedEvents: ['click']
+            });
+            this.underlineHidden = false;
+            this.columnInternals.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
+        }
+        labelFieldNameChanged() {
+            this.columnInternals.dataRecordFieldNames = [
+                this.labelFieldName,
+                this.hrefFieldName
+            ];
+            this.columnInternals.operandDataRecordFieldName = this.labelFieldName;
+        }
+        hrefFieldNameChanged() {
+            this.columnInternals.dataRecordFieldNames = [
+                this.labelFieldName,
+                this.hrefFieldName
+            ];
+        }
+        placeholderChanged() {
+            this.updateColumnConfig();
+        }
+        appearanceChanged() {
+            this.updateColumnConfig();
+        }
+        underlineHiddenChanged() {
+            this.updateColumnConfig();
+        }
+        hreflangChanged() {
+            this.updateColumnConfig();
+        }
+        pingChanged() {
+            this.updateColumnConfig();
+        }
+        referrerpolicyChanged() {
+            this.updateColumnConfig();
+        }
+        relChanged() {
+            this.updateColumnConfig();
+        }
+        targetChanged() {
+            this.updateColumnConfig();
+        }
+        typeChanged() {
+            this.updateColumnConfig();
+        }
+        downloadChanged() {
+            this.updateColumnConfig();
+        }
+        updateColumnConfig() {
+            this.columnInternals.columnConfig = {
+                placeholder: this.placeholder ?? '',
+                appearance: this.appearance,
+                underlineHidden: this.underlineHidden,
+                hreflang: this.hreflang,
+                ping: this.ping,
+                referrerpolicy: this.referrerpolicy,
+                rel: this.rel,
+                target: this.target,
+                type: this.type,
+                download: this.download
+            };
+        }
+    }
+    __decorate$1([
+        attr({ attribute: 'label-field-name' })
+    ], TableColumnAnchor.prototype, "labelFieldName", void 0);
+    __decorate$1([
+        attr({ attribute: 'href-field-name' })
+    ], TableColumnAnchor.prototype, "hrefFieldName", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnAnchor.prototype, "placeholder", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnAnchor.prototype, "appearance", void 0);
+    __decorate$1([
+        attr({ attribute: 'underline-hidden', mode: 'boolean' })
+    ], TableColumnAnchor.prototype, "underlineHidden", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnAnchor.prototype, "hreflang", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnAnchor.prototype, "ping", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnAnchor.prototype, "referrerpolicy", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnAnchor.prototype, "rel", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnAnchor.prototype, "target", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnAnchor.prototype, "type", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnAnchor.prototype, "download", void 0);
+    const nimbleTableColumnAnchor = TableColumnAnchor.compose({
+        baseName: 'table-column-anchor',
+        template: template$8,
+        styles: styles$c
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleTableColumnAnchor());
+    DesignSystem.tagFor(TableColumnAnchor);
+
     const styles$9 = css `
     span {
         font: ${bodyFont};
@@ -30897,7 +31171,8 @@
             super({
                 cellRecordFieldNames: ['value'],
                 cellViewTag: tableColumnTextCellViewTag,
-                groupHeaderViewTag: tableColumnTextGroupHeaderTag
+                groupHeaderViewTag: tableColumnTextGroupHeaderTag,
+                delegatedEvents: []
             });
             this.columnInternals.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
         }
@@ -30919,8 +31194,8 @@
     ], TableColumnText.prototype, "placeholder", void 0);
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
-        template: template$7,
-        styles: styles$b
+        template: template$8,
+        styles: styles$c
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -31018,7 +31293,7 @@
 
     const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$v}
+    ${styles$w}
 
     :host {
         font: ${bodyFont};
@@ -31364,7 +31639,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$v}
+    ${styles$w}
 
     :host {
         font: ${bodyFont};