@ni/nimble-components 18.10.3 → 18.10.5

package/dist/all-components-bundle.js

@@ -16744,9 +16744,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$o = html `<slot></slot>`;
+    const template$q = html `<slot></slot>`;
 
-    const styles$M = css `
+    const styles$O = css `
     :host {
         display: contents;
     }
@@ -16802,8 +16802,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$M,
-        template: template$o
+        styles: styles$O,
+        template: template$q
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -16895,7 +16895,7 @@
     const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
     // Animation Tokens
     const smallDelay = DesignToken.create(styleNameFromTokenName(tokenNames.smallDelay)).withDefault(SmallDelay);
-    DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
+    const mediumDelay = DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
     const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(LargeDelay);
     // Private helpers functions
     function hexToRgbPartial(hexValue) {
@@ -16987,7 +16987,7 @@
         }
     }
 
-    const styles$L = css `
+    const styles$N = css `
     ${display('inline')}
 
     :host {
@@ -17070,7 +17070,7 @@
 `;
 
     // prettier-ignore
-    const template$n = (context, definition) => html `
+    const template$p = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17144,8 +17144,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$n,
-        styles: styles$L,
+        template: template$p,
+        styles: styles$N,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17231,7 +17231,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$K = css `
+    const styles$M = css `
     ${display('inline-flex')}
 
     :host {
@@ -17512,8 +17512,8 @@
             }
         `));
 
-    const styles$J = css `
-    ${styles$K}
+    const styles$L = css `
+    ${styles$M}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17521,7 +17521,7 @@
     }
 `;
 
-    const template$m = (context, definition) => html `
+    const template$o = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17603,8 +17603,8 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$m,
-        styles: styles$J,
+        template: template$o,
+        styles: styles$L,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17612,7 +17612,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
     DesignSystem.tagFor(AnchorButton);
 
-    const styles$I = css `
+    const styles$K = css `
     ${display('grid')}
 
     :host {
@@ -17689,7 +17689,7 @@
     }
 `;
 
-    const template$l = (context, definition) => html `
+    const template$n = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17795,8 +17795,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$l,
-        styles: styles$I,
+        template: template$n,
+        styles: styles$K,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17820,7 +17820,7 @@
         }
     });
 
-    const styles$H = css `
+    const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -17926,8 +17926,8 @@
     }
 `;
 
-    const styles$G = css `
-    ${styles$H}
+    const styles$I = css `
+    ${styles$J}
 
     a {
         text-decoration: none;
@@ -17945,7 +17945,7 @@
     }
 `;
 
-    const template$k = (context, definition) => html `
+    const template$m = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17998,13 +17998,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$k,
-        styles: styles$G
+        template: template$m,
+        styles: styles$I
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
     DesignSystem.tagFor(AnchorTab);
 
-    const styles$F = css `
+    const styles$H = css `
     ${display('grid')}
 
     :host {
@@ -18022,7 +18022,7 @@
     }
 `;
 
-    const template$j = (context, definition) => html `
+    const template$l = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18219,8 +18219,8 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$j,
-        styles: styles$F,
+        template: template$l,
+        styles: styles$H,
         shadowOptions: {
             delegatesFocus: false
         }
@@ -18228,7 +18228,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
     DesignSystem.tagFor(AnchorTabs);
 
-    const styles$E = css `
+    const styles$G = css `
     ${display('block')}
 
     :host {
@@ -18332,7 +18332,7 @@
     }
 `;
 
-    const template$i = (context, definition) => html `
+    const template$k = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18469,8 +18469,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$i,
-        styles: styles$E,
+        template: template$k,
+        styles: styles$G,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -18480,7 +18480,7 @@
         .register(nimbleAnchorTreeItem());
     DesignSystem.tagFor(AnchorTreeItem);
 
-    const styles$D = css `
+    const styles$F = css `
     :host {
         contain: layout;
         display: block;
@@ -18504,7 +18504,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$D
+        styles: styles$F
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -18584,7 +18584,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$C = css `
+    const styles$E = css `
     ${display('flex')}
 
     :host {
@@ -18742,8 +18742,8 @@
             }
         `));
 
-    const styles$B = css `
-    ${styles$K}
+    const styles$D = css `
+    ${styles$M}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18789,7 +18789,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$B,
+        styles: styles$D,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19411,13 +19411,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$h = html `
+    const template$j = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$A = css `
+    const styles$C = css `
     ${display('inline-flex')}
 
     :host {
@@ -19470,8 +19470,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$h,
-            styles: styles$A,
+            template: template$j,
+            styles: styles$C,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19537,7 +19537,7 @@
     };
 
     // prettier-ignore
-    const template$g = html `
+    const template$i = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19656,13 +19656,13 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$g,
-        styles: styles$C
+        template: template$i,
+        styles: styles$E
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
     DesignSystem.tagFor(Banner);
 
-    const styles$z = css `
+    const styles$B = css `
     ${display('inline-block')}
 
     :host {
@@ -19703,12 +19703,12 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$z
+        styles: styles$B
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
     DesignSystem.tagFor(Breadcrumb);
 
-    const styles$y = css `
+    const styles$A = css `
     ${display('inline-flex')}
 
     :host {
@@ -19784,7 +19784,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$y,
+        styles: styles$A,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -19792,7 +19792,7 @@
         .register(nimbleBreadcrumbItem());
     DesignSystem.tagFor(BreadcrumbItem);
 
-    const styles$x = css `
+    const styles$z = css `
     ${display('inline-flex')}
 
     :host {
@@ -19951,7 +19951,7 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$x,
+        styles: styles$z,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19959,7 +19959,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
     DesignSystem.tagFor(CardButton);
 
-    const styles$w = css `
+    const styles$y = css `
     ${display('inline-flex')}
 
     :host {
@@ -20077,15 +20077,15 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$w,
+        styles: styles$y,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
     DesignSystem.tagFor(Checkbox);
 
-    const styles$v = css `
-    ${styles$K}
+    const styles$x = css `
+    ${styles$M}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -20111,7 +20111,7 @@
     }
 `;
 
-    const template$f = (context, definition) => html `
+    const template$h = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20186,8 +20186,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$f,
-        styles: styles$v,
+        template: template$h,
+        styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -20219,7 +20219,7 @@
         block: 'block'
     };
 
-    const styles$u = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -20455,7 +20455,7 @@
             }
         `));
 
-    const styles$t = css `
+    const styles$v = css `
     .error-icon {
         display: none;
     }
@@ -20489,9 +20489,9 @@
     }
 `;
 
-    const styles$s = css `
-    ${styles$u}
-    ${styles$t}
+    const styles$u = css `
+    ${styles$w}
+    ${styles$v}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20727,7 +20727,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$s,
+        styles: styles$u,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20772,7 +20772,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$r = css `
+    const styles$t = css `
     ${display('grid')}
 
     dialog {
@@ -20888,7 +20888,7 @@
             }
         `));
 
-    const template$e = html `
+    const template$g = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21014,14 +21014,14 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$e,
-        styles: styles$r,
+        template: template$g,
+        styles: styles$t,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
     DesignSystem.tagFor(Dialog);
 
-    const styles$q = css `
+    const styles$s = css `
     ${display('block')}
 
     :host {
@@ -21174,7 +21174,7 @@
             }
         `));
 
-    const template$d = html `
+    const template$f = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21288,8 +21288,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$d,
-        styles: styles$q
+        template: template$f,
+        styles: styles$s
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
     DesignSystem.tagFor(Drawer);
@@ -21352,7 +21352,7 @@
         }
     }
     registerIcon('icon-arrow-expander-right', IconArrowExpanderRight);
-    DesignSystem.tagFor(IconArrowExpanderRight);
+    const iconArrowExpanderRightTag = DesignSystem.tagFor(IconArrowExpanderRight);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -23070,7 +23070,7 @@
     registerIcon('icon-xmark-check', IconXmarkCheck);
     DesignSystem.tagFor(IconXmarkCheck);
 
-    const styles$p = css `
+    const styles$r = css `
     ${display('flex')}
 
     :host {
@@ -23150,12 +23150,12 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$p
+        styles: styles$r
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
     DesignSystem.tagFor(ListOption);
 
-    const styles$o = css `
+    const styles$q = css `
     ${display('grid')}
 
     :host {
@@ -23222,12 +23222,12 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$o
+        styles: styles$q
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
     DesignSystem.tagFor(Menu);
 
-    const styles$n = css `
+    const styles$p = css `
     ${display('inline-block')}
 
     :host {
@@ -23246,7 +23246,7 @@
 `;
 
     // prettier-ignore
-    const template$c = html `
+    const template$e = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23501,8 +23501,8 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$c,
-        styles: styles$n,
+        template: template$e,
+        styles: styles$p,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -23510,7 +23510,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
     const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-    const styles$m = css `
+    const styles$o = css `
     ${display('grid')}
 
     :host {
@@ -23608,7 +23608,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$m,
+        styles: styles$o,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -23623,9 +23623,9 @@
         block: 'block'
     };
 
-    const styles$l = css `
+    const styles$n = css `
     ${display('inline-block')}
-    ${styles$t}
+    ${styles$v}
 
     :host {
         font: ${bodyFont};
@@ -23839,7 +23839,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$l,
+        styles: styles$n,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -23881,7 +23881,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
     DesignSystem.tagFor(NumberField);
 
-    const styles$k = css `
+    const styles$m = css `
     ${display('inline-flex')}
 
     :host {
@@ -23982,13 +23982,13 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$k,
+        styles: styles$m,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
     DesignSystem.tagFor(Radio);
 
-    const styles$j = css `
+    const styles$l = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -24023,7 +24023,7 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$j,
+        styles: styles$l,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -24031,9 +24031,9 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
     DesignSystem.tagFor(RadioGroup);
 
-    const styles$i = css `
-    ${styles$u}
-    ${styles$t}
+    const styles$k = css `
+    ${styles$w}
+    ${styles$v}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -24109,7 +24109,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$i,
+        styles: styles$k,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${iconExclamationMarkTag}
@@ -24122,7 +24122,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
     DesignSystem.tagFor(Select);
 
-    const styles$h = css `
+    const styles$j = css `
     ${display('inline-flex')}
 
     :host {
@@ -24266,7 +24266,7 @@
             }
         `));
 
-    const template$b = html `
+    const template$d = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -24283,13 +24283,13 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$b,
-        styles: styles$h
+        template: template$d,
+        styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
     DesignSystem.tagFor(Spinner);
 
-    const styles$g = css `
+    const styles$i = css `
     ${display('inline-flex')}
 
     :host {
@@ -24452,7 +24452,7 @@
         `));
 
     // prettier-ignore
-    const template$a = html `
+    const template$c = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -24496,8 +24496,8 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$a,
-        styles: styles$g
+        template: template$c,
+        styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
     DesignSystem.tagFor(Switch);
@@ -24511,12 +24511,12 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$H
+        styles: styles$J
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
     DesignSystem.tagFor(Tab);
 
-    const styles$f = css `
+    const styles$h = css `
     ${display('block')}
 
     :host {
@@ -24536,7 +24536,7 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$f
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
     DesignSystem.tagFor(TabPanel);
@@ -27570,9 +27570,195 @@
       });
     }
 
+    function getGroupedRowModel() {
+      return table => memo$1(() => [table.getState().grouping, table.getPreGroupedRowModel()], (grouping, rowModel) => {
+        if (!rowModel.rows.length || !grouping.length) {
+          return rowModel;
+        }
+
+        // Filter the grouping list down to columns that exist
+        const existingGrouping = grouping.filter(columnId => table.getColumn(columnId));
+        const groupedFlatRows = [];
+        const groupedRowsById = {};
+        // const onlyGroupedFlatRows: Row[] = [];
+        // const onlyGroupedRowsById: Record<RowId, Row> = {};
+        // const nonGroupedFlatRows: Row[] = [];
+        // const nonGroupedRowsById: Record<RowId, Row> = {};
+
+        // Recursively group the data
+        const groupUpRecursively = function (rows, depth, parentId) {
+          if (depth === void 0) {
+            depth = 0;
+          }
+          // Grouping depth has been been met
+          // Stop grouping and simply rewrite thd depth and row relationships
+          if (depth >= existingGrouping.length) {
+            return rows.map(row => {
+              row.depth = depth;
+              groupedFlatRows.push(row);
+              groupedRowsById[row.id] = row;
+              if (row.subRows) {
+                row.subRows = groupUpRecursively(row.subRows, depth + 1);
+              }
+              return row;
+            });
+          }
+          const columnId = existingGrouping[depth];
+
+          // Group the rows together for this level
+          const rowGroupsMap = groupBy(rows, columnId);
+
+          // Peform aggregations for each group
+          const aggregatedGroupedRows = Array.from(rowGroupsMap.entries()).map((_ref, index) => {
+            let [groupingValue, groupedRows] = _ref;
+            let id = `${columnId}:${groupingValue}`;
+            id = parentId ? `${parentId}>${id}` : id;
+
+            // First, Recurse to group sub rows before aggregation
+            const subRows = groupUpRecursively(groupedRows, depth + 1, id);
+
+            // Flatten the leaf rows of the rows in this group
+            const leafRows = depth ? flattenBy(groupedRows, row => row.subRows) : groupedRows;
+            const row = createRow(table, id, leafRows[0].original, index, depth);
+            Object.assign(row, {
+              groupingColumnId: columnId,
+              groupingValue,
+              subRows,
+              leafRows,
+              getValue: columnId => {
+                // Don't aggregate columns that are in the grouping
+                if (existingGrouping.includes(columnId)) {
+                  if (row._valuesCache.hasOwnProperty(columnId)) {
+                    return row._valuesCache[columnId];
+                  }
+                  if (groupedRows[0]) {
+                    var _groupedRows$0$getVal;
+                    row._valuesCache[columnId] = (_groupedRows$0$getVal = groupedRows[0].getValue(columnId)) != null ? _groupedRows$0$getVal : undefined;
+                  }
+                  return row._valuesCache[columnId];
+                }
+                if (row._groupingValuesCache.hasOwnProperty(columnId)) {
+                  return row._groupingValuesCache[columnId];
+                }
+
+                // Aggregate the values
+                const column = table.getColumn(columnId);
+                const aggregateFn = column == null ? void 0 : column.getAggregationFn();
+                if (aggregateFn) {
+                  row._groupingValuesCache[columnId] = aggregateFn(columnId, leafRows, groupedRows);
+                  return row._groupingValuesCache[columnId];
+                }
+              }
+            });
+            subRows.forEach(subRow => {
+              groupedFlatRows.push(subRow);
+              groupedRowsById[subRow.id] = subRow;
+              // if (subRow.getIsGrouped?.()) {
+              //   onlyGroupedFlatRows.push(subRow);
+              //   onlyGroupedRowsById[subRow.id] = subRow;
+              // } else {
+              //   nonGroupedFlatRows.push(subRow);
+              //   nonGroupedRowsById[subRow.id] = subRow;
+              // }
+            });
+
+            return row;
+          });
+          return aggregatedGroupedRows;
+        };
+        const groupedRows = groupUpRecursively(rowModel.rows, 0, '');
+        groupedRows.forEach(subRow => {
+          groupedFlatRows.push(subRow);
+          groupedRowsById[subRow.id] = subRow;
+          // if (subRow.getIsGrouped?.()) {
+          //   onlyGroupedFlatRows.push(subRow);
+          //   onlyGroupedRowsById[subRow.id] = subRow;
+          // } else {
+          //   nonGroupedFlatRows.push(subRow);
+          //   nonGroupedRowsById[subRow.id] = subRow;
+          // }
+        });
+
+        return {
+          rows: groupedRows,
+          flatRows: groupedFlatRows,
+          rowsById: groupedRowsById
+        };
+      }, {
+        key: 'getGroupedRowModel',
+        debug: () => {
+          var _table$options$debugA;
+          return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
+        },
+        onChange: () => {
+          table._queue(() => {
+            table._autoResetExpanded();
+            table._autoResetPageIndex();
+          });
+        }
+      });
+    }
+    function groupBy(rows, columnId) {
+      const groupMap = new Map();
+      return rows.reduce((map, row) => {
+        const resKey = `${row.getValue(columnId)}`;
+        const previous = map.get(resKey);
+        if (!previous) {
+          map.set(resKey, [row]);
+        } else {
+          previous.push(row);
+        }
+        return map;
+      }, groupMap);
+    }
+
+    function getExpandedRowModel() {
+      return table => memo$1(() => [table.getState().expanded, table.getPreExpandedRowModel(), table.options.paginateExpandedRows], (expanded, rowModel, paginateExpandedRows) => {
+        if (!rowModel.rows.length || expanded !== true && !Object.keys(expanded != null ? expanded : {}).length) {
+          return rowModel;
+        }
+        if (!paginateExpandedRows) {
+          // Only expand rows at this point if they are being paginated
+          return rowModel;
+        }
+        return expandRows(rowModel);
+      }, {
+        key: 'getExpandedRowModel',
+        debug: () => {
+          var _table$options$debugA;
+          return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
+        }
+      });
+    }
+    function expandRows(rowModel) {
+      const expandedRows = [];
+      const handleRow = row => {
+        var _row$subRows;
+        expandedRows.push(row);
+        if ((_row$subRows = row.subRows) != null && _row$subRows.length && row.getIsExpanded()) {
+          row.subRows.forEach(handleRow);
+        }
+      };
+      rowModel.rows.forEach(handleRow);
+      return {
+        rows: expandedRows,
+        flatRows: rowModel.flatRows,
+        rowsById: rowModel.rowsById
+      };
+    }
+
+    const createGroupHeaderViewTemplate = (groupHeaderViewTag) => html `
+        <${groupHeaderViewTag}
+            :groupHeaderValue="${x => x.groupRowValue}"
+            :columnConfig="${x => x.groupColumn?.columnConfig}"
+            class="group-header-value"
+            >
+        </${groupHeaderViewTag}>
+    `;
+
     // prettier-ignore
-    const template$9 = html `
-    <template role="cell">
+    const template$b = html `
+    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
         ${x => x.cellViewTemplate}
         ${when(x => x.hasActionMenu, html `
             <${menuButtonTag} ${ref('actionMenuButton')}
@@ -27603,6 +27789,22 @@
         ascending: 'ascending',
         descending: 'descending'
     };
+    /**
+     * The selection modes of rows in the table.
+     */
+    const TableRowSelectionMode = {
+        none: undefined,
+        single: 'single'
+    };
+    /**
+     * @internal
+     *
+     * The possible selection states that the table or a table row can be in.
+     */
+    const TableRowSelectionState = {
+        notSelected: 'notSelected',
+        selected: 'selected'
+    };
 
     /**
      * The possible operations to use when sorting a table column.
@@ -27646,6 +27848,11 @@
              * The minimum size in pixels according to the design doc
              */
             this.internalMinPixelWidth = defaultMinPixelWidth;
+            /**
+             * @internal
+             * Whether or not this column can be used to group rows by
+             */
+            this.internalGroupingDisabled = false;
             /**
              * @internal
              *
@@ -27679,6 +27886,11 @@
         internalPixelWidthChanged() {
             this.currentPixelWidth = this.internalPixelWidth;
         }
+        groupHeaderViewTagChanged() {
+            this.internalGroupHeaderViewTemplate = this.groupHeaderViewTag
+                ? createGroupHeaderViewTemplate(this.groupHeaderViewTag)
+                : undefined;
+        }
     }
     __decorate$1([
         attr({ attribute: 'column-id' })
@@ -27713,6 +27925,18 @@
     __decorate$1([
         observable
     ], TableColumn.prototype, "internalMinPixelWidth", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "internalGroupingDisabled", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "internalGroupIndex", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "groupHeaderViewTag", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "internalGroupHeaderViewTemplate", void 0);
     __decorate$1([
         observable
     ], TableColumn.prototype, "cellViewTag", void 0);
@@ -27744,6 +27968,9 @@
             this.duplicateColumnId = false;
             this.missingColumnId = false;
             this.duplicateSortIndex = false;
+            this.duplicateGroupIndex = false;
+            this.idFieldNameNotConfigured = false;
+            this.recordIds = new Set();
         }
         getValidity() {
             return {
@@ -27752,21 +27979,38 @@
                 invalidRecordId: this.invalidRecordId,
                 duplicateColumnId: this.duplicateColumnId,
                 missingColumnId: this.missingColumnId,
-                duplicateSortIndex: this.duplicateSortIndex
+                duplicateSortIndex: this.duplicateSortIndex,
+                duplicateGroupIndex: this.duplicateGroupIndex,
+                idFieldNameNotConfigured: this.idFieldNameNotConfigured
             };
         }
         isValid() {
             return Object.values(this.getValidity()).every(x => x === false);
         }
+        areRecordIdsValid() {
+            const validity = this.getValidity();
+            return (!validity.duplicateRecordId
+                && !validity.missingRecordId
+                && !validity.invalidRecordId);
+        }
+        validateSelectionMode(selectionMode, idFieldName) {
+            if (selectionMode === TableRowSelectionMode.none) {
+                this.idFieldNameNotConfigured = false;
+            }
+            else {
+                this.idFieldNameNotConfigured = typeof idFieldName !== 'string';
+            }
+            return !this.idFieldNameNotConfigured;
+        }
         validateRecordIds(data, idFieldName) {
             // Start off by assuming all IDs are valid.
             this.duplicateRecordId = false;
             this.missingRecordId = false;
             this.invalidRecordId = false;
+            this.recordIds.clear();
             if (typeof idFieldName !== 'string') {
                 return true;
             }
-            const ids = new Set();
             for (const record of data) {
                 if (!Object.prototype.hasOwnProperty.call(record, idFieldName)) {
                     this.missingRecordId = true;
@@ -27777,10 +28021,10 @@
                     this.invalidRecordId = true;
                     continue;
                 }
-                if (ids.has(id)) {
+                if (this.recordIds.has(id)) {
                     this.duplicateRecordId = true;
                 }
-                ids.add(id);
+                this.recordIds.add(id);
             }
             return (!this.missingRecordId
                 && !this.invalidRecordId
@@ -27807,19 +28051,23 @@
             return !this.missingColumnId && !this.duplicateColumnId;
         }
         validateColumnSortIndices(sortIndices) {
-            this.duplicateSortIndex = false;
-            const sortIndexSet = new Set();
-            for (const sortIndex of sortIndices) {
-                if (sortIndexSet.has(sortIndex)) {
-                    this.duplicateSortIndex = true;
-                }
-                sortIndexSet.add(sortIndex);
-            }
+            this.duplicateSortIndex = !this.validateIndicesAreUnique(sortIndices);
             return !this.duplicateSortIndex;
         }
+        validateColumnGroupIndices(groupIndices) {
+            this.duplicateGroupIndex = !this.validateIndicesAreUnique(groupIndices);
+            return !this.duplicateGroupIndex;
+        }
+        getPresentRecordIds(requestedRecordIds) {
+            return requestedRecordIds.filter(id => this.recordIds.has(id));
+        }
+        validateIndicesAreUnique(indices) {
+            const numberSet = new Set(indices);
+            return numberSet.size === indices.length;
+        }
     }
 
-    const styles$e = css `
+    const styles$g = css `
     ${display('flex')}
 
     :host {
@@ -27893,9 +28141,17 @@
         pointer-events: none;
     }
 
-    .row:hover::before {
+    :host([selection-mode='single']) .row:hover::before {
         background: ${fillHoverColor};
     }
+
+    :host([selection-mode='single']) .row[selected]::before {
+        background: ${fillSelectedColor};
+    }
+
+    :host([selection-mode='single']) .row[selected]:hover::before {
+        background: ${fillHoverSelectedColor};
+    }
 `.withBehaviors(themeBehavior(Theme.color, css `
             .header-row::before {
                 content: '';
@@ -27910,12 +28166,20 @@
                 background: ${fillHoverColor};
             }
 
-            .row:hover::before {
+            :host([selection-mode='single']) .row:hover::before {
                 background: ${hexToRgbaCssColor(White, 0.15)};
             }
+
+            :host([selection-mode='single']) .row[selected]::before {
+                background: ${hexToRgbaCssColor(White, 0.25)};
+            }
+
+            :host([selection-mode='single']) .row[selected]:hover::before {
+                background: ${hexToRgbaCssColor(White, 0.2)};
+            }
         `));
 
-    const styles$d = css `
+    const styles$f = css `
     ${display('flex')}
 
     :host {
@@ -27934,7 +28198,7 @@
 `;
 
     // prettier-ignore
-    const template$8 = html `
+    const template$a = html `
     <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
 
@@ -27984,13 +28248,13 @@
     ], TableHeader.prototype, "firstSortedColumn", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$8,
-        styles: styles$d
+        template: template$a,
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
     const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
-    const styles$c = css `
+    const styles$e = css `
     ${display('grid')}
 
     :host {
@@ -28014,13 +28278,25 @@
     :host(:hover) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
+
+    :host([selected]) nimble-table-cell {
+        --ni-private-table-cell-action-menu-display: block;
+    }
 `;
 
-    const styles$b = css `
+    const styles$d = css `
     ${display('grid')}
 
     :host {
+        --ni-private-table-cell-nesting-level: 0;
         padding: 0px calc(${standardPadding} / 2);
+        padding-left: calc(
+            ${standardPadding} / 2 +
+                (
+                    var(--ni-private-table-cell-nesting-level) *
+                        ${standardPadding} * 2
+                )
+        );
         align-self: center;
         height: 100%;
         grid-template-columns: 1fr auto;
@@ -28048,6 +28324,7 @@
             super(...arguments);
             this.hasActionMenu = false;
             this.menuOpen = false;
+            this.nestingLevel = 0;
         }
         onActionMenuBeforeToggle(event) {
             this.$emit('cell-action-menu-beforetoggle', event.detail);
@@ -28072,17 +28349,20 @@
     __decorate$1([
         observable
     ], TableCell.prototype, "cellViewTemplate", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "nestingLevel", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$9,
-        styles: styles$b
+        template: template$b,
+        styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
     const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
-    const template$7 = html `
-    <template role="row">
+    const template$9 = html `
+    <template role="row" aria-selected=${x => x.ariaSelected}>
         ${repeat(x => x.columnStates, html `
             ${when(x => !x.column.columnHidden, html `
                 <${tableCellTag}
@@ -28093,6 +28373,7 @@
                     action-menu-label="${x => x.column.actionMenuLabel}"
                     @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
                     @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x.column)}"
+                    :nestingLevel="${x => x.cellIndentLevel};"
                 >
 
                     ${when((x, c) => (c.parent.currentActionMenuColumn === x.column) && x.column.actionMenuSlot, html `
@@ -28114,18 +28395,21 @@
     class TableRow extends FoundationElement {
         constructor() {
             super(...arguments);
+            this.selectable = false;
+            this.selected = false;
             this.columns = [];
+            this.nestingLevel = 0;
             this.menuOpen = false;
         }
         get columnStates() {
-            return this.columns.map(column => {
+            return this.columns.map((column, i) => {
                 const fieldNames = column.dataRecordFieldNames;
                 let cellState;
                 if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
                     const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
-                    const cellRecord = Object.fromEntries(column.cellRecordFieldNames.map((k, i) => [
+                    const cellRecord = Object.fromEntries(column.cellRecordFieldNames.map((k, j) => [
                         k,
-                        cellDataValues[i]
+                        cellDataValues[j]
                     ]));
                     const columnConfig = column.columnConfig ?? {};
                     cellState = {
@@ -28134,11 +28418,21 @@
                     };
                 }
                 else {
-                    cellState = { cellRecord: {}, columnConfig: {} };
+                    cellState = {
+                        cellRecord: {},
+                        columnConfig: {}
+                    };
                 }
-                return { column, cellState };
+                const cellIndentLevel = i === 0 ? this.nestingLevel : 0;
+                return { column, cellState, cellIndentLevel };
             });
         }
+        get ariaSelected() {
+            if (this.selectable) {
+                return this.selected ? 'true' : 'false';
+            }
+            return null;
+        }
         onCellActionMenuBeforeToggle(event, column) {
             this.currentActionMenuColumn = column;
             this.emitToggleEvent('row-action-menu-beforetoggle', event.detail, column);
@@ -28171,6 +28465,12 @@
     __decorate$1([
         attr({ attribute: 'record-id' })
     ], TableRow.prototype, "recordId", void 0);
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], TableRow.prototype, "selectable", void 0);
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], TableRow.prototype, "selected", void 0);
     __decorate$1([
         observable
     ], TableRow.prototype, "dataRecord", void 0);
@@ -28180,23 +28480,165 @@
     __decorate$1([
         observable
     ], TableRow.prototype, "currentActionMenuColumn", void 0);
+    __decorate$1([
+        observable
+    ], TableRow.prototype, "nestingLevel", void 0);
     __decorate$1([
         attr({ attribute: 'menu-open', mode: 'boolean' })
     ], TableRow.prototype, "menuOpen", void 0);
     __decorate$1([
         volatile
     ], TableRow.prototype, "columnStates", null);
+    __decorate$1([
+        volatile
+    ], TableRow.prototype, "ariaSelected", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$7,
-        styles: styles$c
+        template: template$9,
+        styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
     const tableRowTag = DesignSystem.tagFor(TableRow);
 
+    const styles$c = css `
+    ${display('flex')}
+
+    :host {
+        align-items: center;
+        height: calc(${controlHeight} + 2 * ${borderWidth});
+        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
+        padding-left: calc(
+            ${smallPadding} * 2 + ${standardPadding} * 2 *
+                var(--ni-private-table-group-row-indent-level)
+        );
+    }
+
+    :host(:hover) {
+        background: ${fillHoverColor};
+    }
+
+    :host([expanded]) .animating,
+    :host .animating {
+        transition: ${mediumDelay} ease-in-out;
+    }
+
+    .expand-collapse-button {
+        width: ${controlSlimHeight};
+        height: ${controlSlimHeight};
+    }
+
+    :host([expanded]) .expander-icon {
+        transform: rotate(90deg);
+    }
+
+    .expander-icon {
+        transform: rotate(0deg);
+    }
+
+    .group-row-header-content {
+        display: flex;
+        overflow: hidden;
+    }
+
+    .group-header-value {
+        padding-left: calc(${standardPadding} / 2);
+        user-select: none;
+        overflow: hidden;
+        display: flex;
+    }
+
+    .group-row-child-count {
+        padding-left: 2px;
+        pointer-events: none;
+        user-select: none;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host .animating,
+        :host([expanded]) .animating {
+            transition-duration: 0s;
+        }
+    }
+`;
+
+    /* eslint-disable @typescript-eslint/indent */
     // prettier-ignore
-    const template$6 = html `
-    <template role="table" ${children$1({ property: 'childItems', filter: elements() })}>
+    const template$8 = html `
+    <template @click=${x => x.onGroupExpandToggle()} style="--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};">
+        <${buttonTag}
+            appearance="${ButtonAppearance.ghost}"
+            content-hidden
+            class="expand-collapse-button"
+            tabindex="-1"
+        >
+            <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
+        </${buttonTag}>
+        <div class="group-row-header-content">
+            ${x => x.groupColumn?.internalGroupHeaderViewTemplate}
+            <div class="group-row-child-count">(${x => x.leafItemCount})</span>
+        </div>
+    </template>
+`;
+
+    /**
+     * A styled cell that is used within the nimble-table-row.
+     * @internal
+     */
+    class TableGroupRow extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.nestingLevel = 0;
+            this.expanded = false;
+            /**
+             * @internal
+             */
+            this.animationClass = '';
+            this.removeAnimatingClass = () => {
+                this.animationClass = '';
+                this.expandIcon.removeEventListener('transitionend', this.removeAnimatingClass);
+            };
+        }
+        onGroupExpandToggle() {
+            this.$emit('group-expand-toggle');
+            // To avoid a visual glitch with improper expand/collapse icons performing an
+            // animation, we apply a class to the appropriate group row such that we can have
+            // a more targeted CSS animation. We use the 'transitionend' event to remove the
+            // temporary class and register a function reference as the handler to avoid issues
+            // that may result from the 'transitionend' event not firing, as it will never result
+            // in multiple event listeners being registered.
+            this.animationClass = 'animating';
+            this.expandIcon.addEventListener('transitionend', this.removeAnimatingClass);
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "groupRowValue", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "nestingLevel", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "leafItemCount", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "groupColumn", void 0);
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], TableGroupRow.prototype, "expanded", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "animationClass", void 0);
+    const nimbleTableGroupRow = TableGroupRow.compose({
+        baseName: 'table-group-row',
+        template: template$8,
+        styles: styles$c
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
+    const tableGroupRowTag = DesignSystem.tagFor(TableGroupRow);
+
+    // prettier-ignore
+    const template$7 = html `
+    <template role="grid" ${children$1({ property: 'childItems', filter: elements() })}>
         <div class="table-container" style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
             --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
@@ -28226,23 +28668,41 @@
                      role="rowgroup">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
-                            <${tableRowTag}
-                                class="row"
-                                record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
-                                :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
-                                :columns="${(_, c) => c.parent.columns}"
-                                @row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(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 `
-                                    <slot
-                                        name="${x => x}"
-                                        slot="${x => `row-action-menu-${x}`}">
-                                    </slot>
-                                `)}
-                            `)}                        
-                            </${tableRowTag}>
+                            ${when((x, c) => c.parent.tableData[x.index]?.isGrouped, html `
+                                <${tableGroupRowTag}
+                                    class="group-row"
+                                    :groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
+                                    ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
+                                    :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
+                                    :leafItemCount="${(x, c) => c.parent.tableData[x.index]?.leafItemCount}"
+                                    :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
+                                    @group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
+                                    >
+                                </${tableGroupRowTag}>
+                            `)}
+                            ${when((x, c) => !c.parent.tableData[x.index]?.isGrouped, html `
+                                <${tableRowTag}
+                                    class="row"
+                                    record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
+                                    ?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
+                                    ?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
+                                    :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-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(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 `
+                                        <slot
+                                            name="${x => x}"
+                                            slot="${x => `row-action-menu-${x}`}">
+                                        </slot>
+                                    `)}
+                                `)}                        
+                                </${tableRowTag}>
+                            `)}
                         `)}
                     `)}
                 </div>
@@ -28901,12 +29361,13 @@
      * @internal
      */
     class Virtualizer {
-        constructor(table) {
+        constructor(table, tanStackTable) {
             this.visibleItems = [];
             this.allRowsHeight = 0;
             this.headerContainerMarginRight = 0;
             this.rowContainerYOffset = 0;
             this.table = table;
+            this.tanStackTable = tanStackTable;
             this.viewportResizeObserver = new ResizeObserver(entries => {
                 const borderBoxSize = entries[0]?.borderBoxSize[0];
                 if (borderBoxSize) {
@@ -28944,7 +29405,7 @@
             const rowHeight = parseFloat(controlHeight.getValueFor(this.table))
                 + 2 * parseFloat(borderWidth.getValueFor(this.table));
             return {
-                count: this.table.tableData.length,
+                count: this.tanStackTable.getRowModel().rows.length,
                 getScrollElement: () => {
                     return this.table.viewport;
                 },
@@ -29057,11 +29518,13 @@
         constructor(table) {
             this.requiredUpdates = {
                 rowIds: false,
+                groupRows: false,
                 columnIds: false,
                 columnSort: false,
                 columnWidths: false,
                 columnDefinition: false,
-                actionMenuSlots: false
+                actionMenuSlots: false,
+                selectionMode: false
             };
             this.updateQueued = false;
             this.table = table;
@@ -29069,6 +29532,9 @@
         get updateRowIds() {
             return this.requiredUpdates.rowIds;
         }
+        get updateGroupRows() {
+            return this.requiredUpdates.groupRows;
+        }
         get updateColumnIds() {
             return this.requiredUpdates.columnIds;
         }
@@ -29084,10 +29550,15 @@
         get updateActionMenuSlots() {
             return this.requiredUpdates.actionMenuSlots;
         }
+        get updateSelectionMode() {
+            return this.requiredUpdates.selectionMode;
+        }
         get requiresTanStackUpdate() {
             return (this.requiredUpdates.rowIds
                 || this.requiredUpdates.columnSort
-                || this.requiredUpdates.columnDefinition);
+                || this.requiredUpdates.columnDefinition
+                || this.requiredUpdates.groupRows
+                || this.requiredUpdates.selectionMode);
         }
         get requiresTanStackDataReset() {
             return (this.requiredUpdates.rowIds || this.requiredUpdates.columnDefinition);
@@ -29096,6 +29567,9 @@
             this.setAllKeys(true);
             this.queueUpdate();
         }
+        get hasPendingUpdates() {
+            return this.updateQueued;
+        }
         trackColumnPropertyChanged(changedColumnProperty) {
             if (isColumnProperty(changedColumnProperty, 'columnId')) {
                 this.requiredUpdates.columnIds = true;
@@ -29112,6 +29586,9 @@
             else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
                 this.requiredUpdates.actionMenuSlots = true;
             }
+            else if (isColumnProperty(changedColumnProperty, 'internalGroupIndex', 'internalGroupingDisabled')) {
+                this.requiredUpdates.groupRows = true;
+            }
             this.queueUpdate();
         }
         trackColumnInstancesChanged() {
@@ -29120,12 +29597,17 @@
             this.requiredUpdates.columnSort = true;
             this.requiredUpdates.columnWidths = true;
             this.requiredUpdates.actionMenuSlots = true;
+            this.requiredUpdates.groupRows = true;
             this.queueUpdate();
         }
         trackIdFieldNameChanged() {
             this.requiredUpdates.rowIds = true;
             this.queueUpdate();
         }
+        trackSelectionModeChanged() {
+            this.requiredUpdates.selectionMode = true;
+            this.queueUpdate();
+        }
         setAllKeys(value) {
             Object.keys(this.requiredUpdates).forEach(key => {
                 this.requiredUpdates[key] = value;
@@ -29176,6 +29658,7 @@
     class Table extends FoundationElement {
         constructor() {
             super();
+            this.selectionMode = TableRowSelectionMode.none;
             /**
              * @internal
              */
@@ -29207,34 +29690,120 @@
             this.tableValidator = new TableValidator();
             this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
+            this.isInitialized = false;
+            this.collapsedRows = new Set();
             this.onViewPortScroll = (event) => {
                 this.scrollX = event.target.scrollLeft;
             };
+            this.getIsRowExpanded = (row) => {
+                if (!row.getIsGrouped()) {
+                    return false;
+                }
+                const expandedState = this.table.options.state.expanded;
+                if (expandedState === true) {
+                    return true;
+                }
+                if (Object.keys(expandedState ?? {}).includes(row.id)) {
+                    return expandedState[row.id];
+                }
+                return !this.collapsedRows.has(row.id);
+            };
+            this.handleRowSelectionChange = (updaterOrValue) => {
+                const rowSelectionState = updaterOrValue instanceof Function
+                    ? updaterOrValue(this.table.getState().rowSelection)
+                    : updaterOrValue;
+                this.updateTableOptions({
+                    state: {
+                        rowSelection: rowSelectionState
+                    }
+                });
+            };
+            this.handleExpandedChange = (updaterOrValue) => {
+                const expandedState = updaterOrValue instanceof Function
+                    ? updaterOrValue(this.table.getState().expanded)
+                    : updaterOrValue;
+                this.updateTableOptions({
+                    state: {
+                        expanded: expandedState
+                    }
+                });
+            };
             this.options = {
                 data: [],
                 onStateChange: (_) => { },
+                onRowSelectionChange: this.handleRowSelectionChange,
+                onExpandedChange: this.handleExpandedChange,
                 getCoreRowModel: getCoreRowModel(),
                 getSortedRowModel: getSortedRowModel(),
+                getGroupedRowModel: getGroupedRowModel(),
+                getExpandedRowModel: getExpandedRowModel(),
+                getIsRowExpanded: this.getIsRowExpanded,
                 columns: [],
-                state: {},
+                state: {
+                    rowSelection: {},
+                    grouping: [],
+                    expanded: true // Workaround until we can apply a fix to TanStack regarding leveraging our getIsRowExpanded implementation
+                },
+                enableRowSelection: false,
                 enableSorting: true,
+                enableGrouping: true,
                 renderFallbackValue: null,
                 autoResetAll: false
             };
             this.table = createTable(this.options);
-            this.virtualizer = new Virtualizer(this);
+            this.virtualizer = new Virtualizer(this, this.table);
         }
         get validity() {
             return this.tableValidator.getValidity();
         }
-        setData(newData) {
-            this.setTableData(newData);
+        async setData(newData) {
+            await this.processPendingUpdates();
+            const data = newData.map(record => {
+                return { ...record };
+            });
+            const tanStackUpdates = {
+                data
+            };
+            this.validateWithData(data);
+            if (this.tableValidator.areRecordIdsValid()) {
+                // Update the selection state to remove previously selected records that no longer exist in the
+                // data set while maintaining the selection state of records that still exist in the data set.
+                const previousSelection = await this.getSelectedRecordIds();
+                tanStackUpdates.state = {
+                    rowSelection: this.calculateTanStackSelectionState(previousSelection)
+                };
+            }
+            this.updateTableOptions(tanStackUpdates);
+        }
+        async getSelectedRecordIds() {
+            await this.processPendingUpdates();
+            const tanStackSelectionState = this.options.state.rowSelection;
+            if (!tanStackSelectionState) {
+                return [];
+            }
+            const selectedRecordIds = [];
+            Object.entries(tanStackSelectionState).forEach(([recordId, isSelected]) => {
+                if (isSelected) {
+                    selectedRecordIds.push(recordId);
+                }
+            });
+            return selectedRecordIds;
+        }
+        async setSelectedRecordIds(recordIds) {
+            await this.processPendingUpdates();
+            if (this.selectionMode === TableRowSelectionMode.none) {
+                return;
+            }
+            this.updateTableOptions({
+                state: {
+                    rowSelection: this.calculateTanStackSelectionState(recordIds)
+                }
+            });
         }
         connectedCallback() {
             super.connectedCallback();
+            this.initialize();
             this.virtualizer.connectedCallback();
-            this.updateTracker.trackAllStateChanged();
-            this.observeColumns();
             this.viewport.addEventListener('scroll', this.onViewPortScroll, {
                 passive: true
             });
@@ -29242,7 +29811,6 @@
         disconnectedCallback() {
             super.disconnectedCallback();
             this.virtualizer.disconnectedCallback();
-            this.removeColumnObservers();
             this.viewport.removeEventListener('scroll', this.onViewPortScroll);
         }
         checkValidity() {
@@ -29260,16 +29828,42 @@
                 this.updateTracker.trackColumnPropertyChanged(args);
             }
         }
+        /** @internal */
+        async onRowClick(rowIndex) {
+            if (this.selectionMode === TableRowSelectionMode.none) {
+                return;
+            }
+            const row = this.table.getRowModel().rows[rowIndex];
+            if (!row) {
+                return;
+            }
+            const currentSelection = await this.getSelectedRecordIds();
+            if (currentSelection.length === 1 && currentSelection[0] === row.id) {
+                // The clicked row is already the only selected row. Do nothing.
+                return;
+            }
+            this.table.toggleAllRowsSelected(false);
+            row.toggleSelected(true);
+            await this.emitSelectionChangeEvent();
+        }
+        /** @internal */
         onRowActionMenuBeforeToggle(event) {
+            event.stopImmediatePropagation();
             this.openActionMenuRecordId = event.detail.recordIds[0];
             this.$emit('action-menu-beforetoggle', event.detail);
         }
+        /** @internal */
         onRowActionMenuToggle(event) {
+            event.stopImmediatePropagation();
             this.$emit('action-menu-toggle', event.detail);
             if (!event.detail.newState) {
                 this.openActionMenuRecordId = undefined;
             }
         }
+        handleGroupRowExpanded(rowIndex, event) {
+            this.toggleGroupExpanded(rowIndex);
+            event.stopPropagation();
+        }
         /**
          * @internal
          */
@@ -29285,6 +29879,12 @@
                 this.updateRowGridColumns();
             }
         }
+        selectionModeChanged(_prev, _next) {
+            if (!this.$fastController.isConnected) {
+                return;
+            }
+            this.updateTracker.trackSelectionModeChanged();
+        }
         idFieldNameChanged(_prev, _next) {
             if (!this.$fastController.isConnected) {
                 return;
@@ -29304,6 +29904,24 @@
             });
             this.columnNotifiers = [];
         }
+        initialize() {
+            if (this.isInitialized) {
+                // The table is already initialized. There is nothing more to do.
+                return;
+            }
+            this.isInitialized = true;
+            // Initialize the controller to ensure that FAST functionality such as Observables work as expected.
+            this.$fastController.onConnectedCallback();
+            this.updateTracker.trackAllStateChanged();
+            this.observeColumns();
+        }
+        async processPendingUpdates() {
+            this.initialize();
+            await DOM.nextUpdate();
+            if (this.updateTracker.hasPendingUpdates) {
+                throw new Error('Expected pending updates to be resolved');
+            }
+        }
         observeColumns() {
             this.removeColumnObservers();
             for (const column of this.columns) {
@@ -29316,6 +29934,10 @@
             return this.columns.filter(x => x.sortDirection !== TableColumnSortDirection.none
                 && typeof x.sortIndex === 'number');
         }
+        getColumnsParticipatingInGrouping() {
+            return this.columns.filter(x => !x.internalGroupingDisabled
+                && typeof x.internalGroupIndex === 'number');
+        }
         childItemsChanged() {
             void this.updateColumnsFromChildItems();
         }
@@ -29327,9 +29949,8 @@
             this.columns = this.childItems.filter((x) => x instanceof TableColumn);
         }
         updateTanStack() {
-            const updatedOptions = {
-                state: {}
-            };
+            const updatedOptions = {};
+            updatedOptions.state = {};
             if (this.updateTracker.updateColumnSort) {
                 updatedOptions.state.sorting = this.calculateTanStackSortState();
             }
@@ -29338,11 +29959,21 @@
             }
             if (this.updateTracker.updateRowIds) {
                 updatedOptions.getRowId = this.calculateTanStackRowIdFunction();
+                updatedOptions.state.rowSelection = {};
+            }
+            if (this.updateTracker.updateSelectionMode) {
+                updatedOptions.enableRowSelection = this.selectionMode !== TableRowSelectionMode.none;
+                updatedOptions.state.rowSelection = {};
             }
             if (this.updateTracker.requiresTanStackDataReset) {
                 // Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
                 updatedOptions.data = [...this.table.options.data];
             }
+            if (this.updateTracker.updateGroupRows) {
+                updatedOptions.state.grouping = this.calculateTanStackGroupingState();
+                updatedOptions.state.expanded = true;
+                this.collapsedRows.clear();
+            }
             this.updateTableOptions(updatedOptions);
         }
         updateActionMenuSlots() {
@@ -29358,34 +29989,54 @@
             this.rowGridColumns = TableLayoutHelper.getGridTemplateColumns(this.columns);
         }
         validate() {
+            this.tableValidator.validateSelectionMode(this.selectionMode, this.idFieldName);
             this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
             this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
+            this.tableValidator.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.internalGroupIndex));
             this.validateWithData(this.table.options.data);
         }
         validateWithData(data) {
             this.tableValidator.validateRecordIds(data, this.idFieldName);
             this.canRenderRows = this.checkValidity();
         }
-        setTableData(newData) {
-            const data = newData.map(record => {
-                return { ...record };
-            });
-            this.validateWithData(data);
-            this.updateTableOptions({
-                data
-            });
+        async emitSelectionChangeEvent() {
+            const detail = {
+                selectedRecordIds: await this.getSelectedRecordIds()
+            };
+            this.$emit('selection-change', detail);
         }
         refreshRows() {
             const rows = this.table.getRowModel().rows;
             this.tableData = rows.map(row => {
                 const rowState = {
                     record: row.original,
-                    id: row.id
+                    id: row.id,
+                    selectionState: row.getIsSelected()
+                        ? TableRowSelectionState.selected
+                        : TableRowSelectionState.notSelected,
+                    isGrouped: row.getIsGrouped(),
+                    isExpanded: row.getIsExpanded(),
+                    groupRowValue: row.getIsGrouped()
+                        ? row.getValue(row.groupingColumnId)
+                        : undefined,
+                    nestingLevel: row.depth,
+                    leafItemCount: row
+                        .getLeafRows()
+                        .filter(leafRow => leafRow.getLeafRows().length === 0)
+                        .length,
+                    groupColumn: this.getGroupRowColumn(row)
                 };
                 return rowState;
             });
             this.virtualizer.dataChanged();
         }
+        getGroupRowColumn(row) {
+            const groupedId = row.groupingColumnId;
+            if (groupedId !== undefined) {
+                return this.columns.find(c => c.internalUniqueId === groupedId);
+            }
+            return undefined;
+        }
         updateTableOptions(updatedOptions) {
             this.options = {
                 ...this.options,
@@ -29395,6 +30046,18 @@
             this.table.setOptions(this.options);
             this.refreshRows();
         }
+        toggleGroupExpanded(rowIndex) {
+            const row = this.table.getRowModel().rows[rowIndex];
+            const wasExpanded = row.getIsExpanded();
+            // must update the collapsedRows before toggling expanded state
+            if (wasExpanded) {
+                this.collapsedRows.add(row.id);
+            }
+            else {
+                this.collapsedRows.delete(row.id);
+            }
+            row.toggleExpanded();
+        }
         calculateTanStackSortState() {
             const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.sortIndex - y.sortIndex);
             this.firstSortedColumn = sortedColumns.length
@@ -29407,6 +30070,10 @@
                 };
             });
         }
+        calculateTanStackGroupingState() {
+            const groupedColumns = this.getColumnsParticipatingInGrouping().sort((x, y) => x.internalGroupIndex - y.internalGroupIndex);
+            return groupedColumns.map(column => column.internalUniqueId);
+        }
         calculateTanStackRowIdFunction() {
             return this.idFieldName === null || this.idFieldName === undefined
                 ? undefined
@@ -29427,10 +30094,26 @@
                 };
             });
         }
+        calculateTanStackSelectionState(recordIdsToSelect) {
+            if (this.selectionMode === TableRowSelectionMode.none) {
+                return {};
+            }
+            const tanstackSelectionState = {};
+            const selectableRecordIds = this.tableValidator.getPresentRecordIds(recordIdsToSelect);
+            if (selectableRecordIds.length) {
+                // In single selection mode, only select the first record ID that is requested
+                const firstSelectableRecordId = selectableRecordIds[0];
+                tanstackSelectionState[firstSelectableRecordId] = true;
+            }
+            return tanstackSelectionState;
+        }
     }
     __decorate$1([
         attr({ attribute: 'id-field-name' })
     ], Table.prototype, "idFieldName", void 0);
+    __decorate$1([
+        attr({ attribute: 'selection-mode' })
+    ], Table.prototype, "selectionMode", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "tableData", void 0);
@@ -29463,13 +30146,13 @@
     ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$6,
-        styles: styles$e
+        template: template$7,
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
     DesignSystem.tagFor(Table);
 
-    const styles$a = css `
+    const styles$b = css `
     :host {
         display: contents;
     }
@@ -29481,7 +30164,7 @@
     }
 `;
 
-    const template$5 = html `
+    const template$6 = html `
     <template>
         <span class="header-content">
             <slot></slot>
@@ -29528,6 +30211,123 @@
         return FractionalWidthColumn;
     }
 
+    // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+    function mixinGroupableColumnAPI(base) {
+        /**
+         * The Mixin that provides a concrete column with the API to allow grouping
+         * by the values in that column.
+         */
+        class GroupableColumn extends base {
+            constructor() {
+                super(...arguments);
+                this.groupingDisabled = false;
+                this.groupIndex = null;
+            }
+            groupingDisabledChanged() {
+                this.internalGroupingDisabled = this.groupingDisabled;
+            }
+            groupIndexChanged() {
+                if (typeof this.groupIndex === 'number') {
+                    this.internalGroupIndex = this.groupIndex;
+                }
+                else {
+                    this.internalGroupIndex = undefined;
+                }
+            }
+        }
+        attr({ attribute: 'grouping-disabled', mode: 'boolean' })(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        GroupableColumn.prototype, 'groupingDisabled');
+        attr({ attribute: 'group-index', converter: nullableNumberConverter })(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        GroupableColumn.prototype, 'groupIndex');
+        return GroupableColumn;
+    }
+
+    /**
+     * The base class for group header views, which are displayed in a TableGroupRow.
+     * A TableColumn that uses the GroupableColumn mixin must provide a TableGroupHeaderView
+     * type (linked via TableColumn.groupHeaderViewTag).
+     */
+    class TableGroupHeaderView extends FoundationElement {
+    }
+    __decorate$1([
+        observable
+    ], TableGroupHeaderView.prototype, "groupHeaderValue", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupHeaderView.prototype, "columnConfig", void 0);
+
+    const template$5 = html `
+    <span
+        ${ref('textSpan')}
+        class="${x => (typeof x.groupHeaderValue === 'string' ? '' : 'placeholder')}"
+        @mouseover="${x => x.updateTitleOverflow()}"
+        @mouseout="${x => x.clearTitleOverflow()}"
+        title="${x => (x.isValidContentAndHasOverflow && x.content
+    ? x.content
+    : undefined)}"
+    >
+        ${x => x.content}
+    </span>
+`;
+
+    const styles$a = css `
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .placeholder {
+        color: ${controlLabelFontColor};
+    }
+`;
+
+    /**
+     * The custom element used to render a group row header for a group representing rows
+     * grouped by a TableColumnText column.
+     */
+    class TableColumnTextGroupHeaderView extends TableGroupHeaderView {
+        constructor() {
+            super(...arguments);
+            /** @internal */
+            this.isValidContentAndHasOverflow = false;
+        }
+        get content() {
+            return typeof this.groupHeaderValue === 'string'
+                ? this.groupHeaderValue
+                : this.columnConfig?.placeholder ?? '';
+        }
+        updateTitleOverflow() {
+            this.isValidContentAndHasOverflow = this.textSpan.offsetWidth < this.textSpan.scrollWidth;
+        }
+        clearTitleOverflow() {
+            this.isValidContentAndHasOverflow = false;
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableColumnTextGroupHeaderView.prototype, "columnConfig", void 0);
+    __decorate$1([
+        observable
+    ], TableColumnTextGroupHeaderView.prototype, "isValidContentAndHasOverflow", void 0);
+    __decorate$1([
+        volatile
+    ], TableColumnTextGroupHeaderView.prototype, "content", null);
+    const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
+        baseName: 'table-column-text-group-header',
+        template: template$5,
+        styles: styles$a
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(tableColumnTextGroupHeaderView());
+    const tableColumnTextGroupHeaderTag = DesignSystem.tagFor(TableColumnTextGroupHeaderView);
+
     const styles$9 = css `
     span {
         font: ${bodyFont};
@@ -29614,12 +30414,16 @@
     /**
      * The table column for displaying strings.
      */
-    class TableColumnText extends mixinFractionalWidthColumnAPI(TableColumnTextBase) {
+    class TableColumnText extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumnTextBase)) {
+        constructor() {
+            super(...arguments);
+            this.groupHeaderViewTag = tableColumnTextGroupHeaderTag;
+        }
     }
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
-        template: template$5,
-        styles: styles$a
+        template: template$6,
+        styles: styles$b
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -29717,7 +30521,7 @@
 
     const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$t}
+    ${styles$v}
 
     :host {
         font: ${bodyFont};
@@ -30063,7 +30867,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$t}
+    ${styles$v}
 
     :host {
         font: ${bodyFont};
@@ -30719,7 +31523,7 @@
     .expand-collapse-button svg {
         width: ${iconSize};
         height: ${iconSize};
-        transition: transform 0.2s ease-in;
+        transition: transform ${mediumDelay} ease-in;
         pointer-events: none;
         fill: currentcolor;
     }