@ni/nimble-components 20.15.1 → 20.16.0

package/dist/all-components-bundle.js

@@ -16274,7 +16274,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 07 Dec 2023 21:34:12 GMT
+   * Generated on Mon, 11 Dec 2023 17:20:37 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16678,7 +16678,7 @@
 
   const template$D = html `<slot></slot>`;
 
-  const styles$V = css `
+  const styles$W = css `
     :host {
         display: contents;
     }
@@ -16795,7 +16795,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$V,
+      styles: styles$W,
       template: template$D
   });
   DesignSystem.getOrCreate()
@@ -17001,7 +17001,7 @@
       }
   }
 
-  const styles$U = css `
+  const styles$V = css `
     ${display('inline')}
 
     :host {
@@ -17175,7 +17175,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$C,
-      styles: styles$U,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17278,7 +17278,7 @@
     padding: 0;
 `;
 
-  const styles$T = css `
+  const styles$U = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17555,8 +17555,8 @@
             }
         `));
 
-  const styles$S = css `
-    ${styles$T}
+  const styles$T = css `
+    ${styles$U}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17647,7 +17647,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$B,
-      styles: styles$S,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17655,7 +17655,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   DesignSystem.tagFor(AnchorButton);
 
-  const styles$R = css `
+  const styles$S = css `
     ${display('grid')}
 
     :host {
@@ -17839,7 +17839,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$A,
-      styles: styles$R,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17863,7 +17863,7 @@
       }
   });
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display('inline-flex')}
 
     :host {
@@ -18032,7 +18032,7 @@
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$z,
-      styles: styles$Q,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18040,7 +18040,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
   DesignSystem.tagFor(AnchorTab);
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display('grid')}
 
     :host {
@@ -18269,7 +18269,7 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$y,
-      styles: styles$P,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18286,7 +18286,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('block')}
 
     :host {
@@ -18525,7 +18525,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$x,
-      styles: styles$O,
+      styles: styles$P,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18535,7 +18535,7 @@
       .register(nimbleAnchorTreeItem());
   DesignSystem.tagFor(AnchorTreeItem);
 
-  const styles$N = css `
+  const styles$O = css `
     :host {
         contain: layout;
         display: block;
@@ -18559,7 +18559,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$N
+      styles: styles$O
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18639,7 +18639,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$M = css `
+  const styles$N = css `
     ${display('flex')}
 
     :host {
@@ -18782,8 +18782,8 @@
             }
         `));
 
-  const styles$L = css `
-    ${styles$T}
+  const styles$M = css `
+    ${styles$U}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18829,7 +18829,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$L,
+      styles: styles$M,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19546,7 +19546,7 @@
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$K = css `
+  const styles$L = css `
     ${display('inline-flex')}
 
     :host {
@@ -19600,7 +19600,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$w,
-          styles: styles$K,
+          styles: styles$L,
           baseClass: iconClass
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19821,12 +19821,12 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$v,
-      styles: styles$M
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
   DesignSystem.tagFor(Banner);
 
-  const styles$J = css `
+  const styles$K = css `
     ${display('inline-block')}
 
     :host {
@@ -19867,12 +19867,12 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$J
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
   DesignSystem.tagFor(Breadcrumb);
 
-  const styles$I = css `
+  const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -19946,7 +19946,7 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$I,
+      styles: styles$J,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
@@ -19954,7 +19954,7 @@
       .register(nimbleBreadcrumbItem());
   DesignSystem.tagFor(BreadcrumbItem);
 
-  const styles$H = css `
+  const styles$I = css `
     ${display('flex')}
 
     :host {
@@ -19995,12 +19995,12 @@
       baseName: 'card',
       baseClass: Card$1,
       template: template$u,
-      styles: styles$H
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
   DesignSystem.tagFor(Card);
 
-  const styles$G = css `
+  const styles$H = css `
     ${display('inline-flex')}
 
     :host {
@@ -20159,7 +20159,7 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$G,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20167,7 +20167,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   DesignSystem.tagFor(CardButton);
 
-  const styles$F = css `
+  const styles$G = css `
     ${display('inline-flex')}
 
     :host {
@@ -20285,15 +20285,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: checkboxTemplate,
-      styles: styles$F,
+      styles: styles$G,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = DesignSystem.tagFor(Checkbox);
 
-  const styles$E = css `
-    ${styles$T}
+  const styles$F = css `
+    ${styles$U}
 
     @layer base {
         .control[aria-pressed='true'] {
@@ -20448,7 +20448,7 @@
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$t,
-      styles: styles$E,
+      styles: styles$F,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20485,7 +20485,7 @@
       block: 'block'
   };
 
-  const styles$D = css `
+  const styles$E = css `
     ${display('inline-flex')}
 
     :host {
@@ -20711,7 +20711,7 @@
             }
         `));
 
-  const styles$C = css `
+  const styles$D = css `
     .error-icon {
         display: none;
     }
@@ -20745,9 +20745,9 @@
     }
 `;
 
-  const styles$B = css `
+  const styles$C = css `
+    ${styles$E}
     ${styles$D}
-    ${styles$C}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21162,7 +21162,7 @@
       baseName: 'combobox',
       baseClass: Combobox$1,
       template: template$s,
-      styles: styles$B,
+      styles: styles$C,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21207,7 +21207,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$A = css `
+  const styles$B = css `
     ${display('grid')}
 
     dialog {
@@ -21437,13 +21437,13 @@
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$r,
-      styles: styles$A,
+      styles: styles$B,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
   DesignSystem.tagFor(Dialog);
 
-  const styles$z = css `
+  const styles$A = css `
     ${display('block')}
 
     :host {
@@ -21711,7 +21711,7 @@
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$q,
-      styles: styles$z
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
   DesignSystem.tagFor(Drawer);
@@ -24024,6 +24024,8 @@
   const tableLabelDefaults = {
       tableGroupCollapseLabel: 'Collapse group',
       tableGroupExpandLabel: 'Expand group',
+      tableRowCollapseLabel: 'Collapse row',
+      tableRowExpandLabel: 'Expand row',
       tableGroupsCollapseAllLabel: 'Collapse all groups',
       tableCellActionMenuLabel: 'Options',
       tableColumnHeaderGroupedLabel: 'Grouped',
@@ -24043,6 +24045,14 @@
       name: 'table-group-expand-label',
       cssCustomPropertyName: null
   }).withDefault(tableLabelDefaults.tableGroupExpandLabel);
+  const tableRowCollapseLabel = DesignToken.create({
+      name: 'table-row-collapse-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableRowCollapseLabel);
+  const tableRowExpandLabel = DesignToken.create({
+      name: 'table-row-expand-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableRowExpandLabel);
   const tableGroupsCollapseAllLabel = DesignToken.create({
       name: 'table-groups-collapse-all-label',
       cssCustomPropertyName: null
@@ -24083,6 +24093,8 @@
   const supportedLabels = {
       groupCollapse: tableGroupCollapseLabel,
       groupExpand: tableGroupExpandLabel,
+      rowCollapse: tableRowCollapseLabel,
+      rowExpand: tableRowExpandLabel,
       groupsCollapseAll: tableGroupsCollapseAllLabel,
       cellActionMenu: tableCellActionMenuLabel,
       columnHeaderGrouped: tableColumnHeaderGroupedLabel,
@@ -24108,6 +24120,12 @@
   __decorate$1([
       attr({ attribute: 'group-expand' })
   ], LabelProviderTable.prototype, "groupExpand", void 0);
+  __decorate$1([
+      attr({ attribute: 'row-collapse' })
+  ], LabelProviderTable.prototype, "rowCollapse", void 0);
+  __decorate$1([
+      attr({ attribute: 'row-expand' })
+  ], LabelProviderTable.prototype, "rowExpand", void 0);
   __decorate$1([
       attr({ attribute: 'groups-collapse-all' })
   ], LabelProviderTable.prototype, "groupsCollapseAll", void 0);
@@ -24143,7 +24161,7 @@
       .register(nimbleLabelProviderTable());
   DesignSystem.tagFor(LabelProviderTable);
 
-  const styles$y = css `
+  const styles$z = css `
     ${display('flex')}
 
     :host {
@@ -24265,7 +24283,7 @@
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$p,
-      styles: styles$y
+      styles: styles$z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   DesignSystem.tagFor(ListOption);
@@ -24379,7 +24397,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
   DesignSystem.tagFor(MappingSpinner);
 
-  const styles$x = css `
+  const styles$y = css `
     ${display('grid')}
 
     :host {
@@ -24446,12 +24464,12 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$x
+      styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   DesignSystem.tagFor(Menu);
 
-  const styles$w = css `
+  const styles$x = css `
     ${display('inline-block')}
 
     :host {
@@ -24726,7 +24744,7 @@
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$n,
-      styles: styles$w,
+      styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -24734,7 +24752,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-  const styles$v = css `
+  const styles$w = css `
     ${display('grid')}
 
     :host {
@@ -24832,7 +24850,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$v,
+      styles: styles$w,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -24847,9 +24865,9 @@
       block: 'block'
   };
 
-  const styles$u = css `
+  const styles$v = css `
     ${display('inline-block')}
-    ${styles$C}
+    ${styles$D}
 
     :host {
         font: ${bodyFont};
@@ -25063,7 +25081,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$u,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -25107,7 +25125,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
   DesignSystem.tagFor(NumberField);
 
-  const styles$t = css `
+  const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -25208,13 +25226,13 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$t,
+      styles: styles$u,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
   DesignSystem.tagFor(Radio);
 
-  const styles$s = css `
+  const styles$t = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -25249,7 +25267,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$s,
+      styles: styles$t,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -42101,7 +42119,7 @@ img.ProseMirror-separator {
       return string.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
   }
 
-  const styles$r = css `
+  const styles$s = css `
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
@@ -42136,7 +42154,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$r,
+      styles: styles$s,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -42280,7 +42298,7 @@ img.ProseMirror-separator {
         >@${x => x.mentionLabel}</span
     ><slot contenteditable="true"></slot>`;
 
-  const styles$q = css `
+  const styles$r = css `
     ${display('inline-block')}
 
     :host {
@@ -42321,16 +42339,16 @@ img.ProseMirror-separator {
   const nimbleRichTextMentionUsersView = RichTextMentionUsersView.compose({
       baseName: 'rich-text-mention-users-view',
       template: template$l,
-      styles: styles$q
+      styles: styles$r
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionUsersView());
   const richTextMentionUsersViewTag = DesignSystem.tagFor(RichTextMentionUsersView);
 
-  const styles$p = css `
+  const styles$q = css `
     ${display('inline-flex')}
-    ${styles$C}
+    ${styles$D}
 
     :host {
         font: ${bodyFont};
@@ -60505,7 +60523,7 @@ img.ProseMirror-separator {
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$m,
-      styles: styles$p
+      styles: styles$q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -60518,7 +60536,7 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$o = css `
+  const styles$p = css `
     ${display('flex')}
 
     :host {
@@ -60629,16 +60647,16 @@ img.ProseMirror-separator {
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$k,
-      styles: styles$o
+      styles: styles$p
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
   DesignSystem.tagFor(RichTextViewer);
 
-  const styles$n = css `
+  const styles$o = css `
+    ${styles$E}
     ${styles$D}
-    ${styles$C}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -60810,7 +60828,7 @@ img.ProseMirror-separator {
       baseName: 'select',
       baseClass: Select$1,
       template: template$j,
-      styles: styles$n,
+      styles: styles$o,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -60823,7 +60841,7 @@ img.ProseMirror-separator {
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
   DesignSystem.tagFor(Select);
 
-  const styles$m = css `
+  const styles$n = css `
     ${display('inline-flex')}
 
     :host {
@@ -61024,12 +61042,12 @@ img.ProseMirror-separator {
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
       template: template$i,
-      styles: styles$m
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = DesignSystem.tagFor(Spinner);
 
-  const styles$l = css `
+  const styles$m = css `
     ${display('inline-flex')}
 
     :host {
@@ -61237,12 +61255,12 @@ img.ProseMirror-separator {
       baseClass: Switch$1,
       baseName: 'switch',
       template: template$h,
-      styles: styles$l
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
   DesignSystem.tagFor(Switch);
 
-  const styles$k = css `
+  const styles$l = css `
     ${display('inline-flex')}
 
     :host {
@@ -61353,12 +61371,12 @@ img.ProseMirror-separator {
       baseName: 'tab',
       baseClass: Tab$2,
       template: tabTemplate,
-      styles: styles$k
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
   DesignSystem.tagFor(Tab);
 
-  const styles$j = css `
+  const styles$k = css `
     ${display('block')}
 
     :host {
@@ -61378,7 +61396,7 @@ img.ProseMirror-separator {
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$j
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
   DesignSystem.tagFor(TabPanel);
@@ -65211,7 +65229,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$i = css `
+  const styles$j = css `
     ${display('flex')}
 
     :host {
@@ -65395,7 +65413,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$h = css `
+  const styles$i = css `
     ${display('flex')}
 
     :host {
@@ -65492,12 +65510,38 @@ img.ProseMirror-separator {
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
       template: template$g,
-      styles: styles$h
+      styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
+  const styles$h = css `
+    :host .animating {
+        transition: ${mediumDelay} ease-in;
+    }
+
+    .expand-collapse-button {
+        height: ${controlSlimHeight};
+        align-self: center;
+    }
+
+    .expander-icon {
+        transform: rotate(0deg);
+    }
+
+    :host([expanded]) .expander-icon {
+        transform: rotate(90deg);
+    }
+
+    @media (prefers-reduced-motion) {
+        :host .animating {
+            transition-duration: 0s;
+        }
+    }
+`;
+
   const styles$g = css `
+    ${styles$h}
     ${display('flex')}
 
     :host {
@@ -65532,6 +65576,13 @@ img.ProseMirror-separator {
         background-color: ${fillHoverSelectedColor};
     }
 
+    .expand-collapse-button {
+        padding-left: calc(
+            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *
+                ${controlHeight}
+        );
+    }
+
     .row-operations-container {
         display: flex;
     }
@@ -65549,6 +65600,10 @@ img.ProseMirror-separator {
         flex: 0 0 auto;
     }
 
+    .row-front-spacer.top-level-parent {
+        width: ${mediumPadding};
+    }
+
     .cell-container {
         display: grid;
         width: 100%;
@@ -65557,6 +65612,12 @@ img.ProseMirror-separator {
         grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
     }
 
+    .cell-container.nested-parent {
+        margin-left: calc(
+            (${controlHeight} * var(--ni-private-table-row-indent-level)) * -1
+        );
+    }
+
     nimble-table-cell {
         --ni-private-table-cell-action-menu-display: none;
     }
@@ -65593,7 +65654,7 @@ img.ProseMirror-separator {
         --ni-private-table-cell-nesting-level: 0;
         padding: 0px ${mediumPadding};
         padding-left: calc(
-            ${mediumPadding} + ${standardPadding} * 2 *
+            ${mediumPadding} + ${controlHeight} *
                 var(--ni-private-table-cell-nesting-level)
         );
         align-self: center;
@@ -65696,7 +65757,12 @@ img.ProseMirror-separator {
 
   // prettier-ignore
   const template$e = html `
-    <template role="row" aria-selected=${x => x.ariaSelected}>
+    <template 
+        role="row"
+        aria-selected=${x => x.ariaSelected}
+        aria-expanded=${x => x.expanded}
+        style="--ni-private-table-row-indent-level: ${x => x.nestingLevel};"
+    >
         ${when(x => !x.rowOperationGridCellHidden, html `
             <span role="gridcell" class="row-operations-container">
                 ${when(x => x.selectable && !x.hideSelection, html `
@@ -65712,11 +65778,24 @@ img.ProseMirror-separator {
                 `)}
             </span>
         `)}
-        ${'' /* This is needed to help align the cell widths exactly with the column headers, due to the space reserved for
-        the collapse-all button in the header. */}
-        <span class="row-front-spacer"></span>
+        <span class="row-front-spacer ${x => (x.isParentRow && x.nestingLevel === 0 ? 'top-level-parent' : '')}"></span>
+        ${when(x => x.isParentRow, html `
+            <${buttonTag}
+                appearance="${ButtonAppearance.ghost}"
+                content-hidden
+                class="expand-collapse-button"
+                tabindex="-1"
+                @click="${(x, c) => x.onRowExpandToggle(c.event)}"
+                title="${x => (x.expanded ? tableRowCollapseLabel.getValueFor(x) : tableRowExpandLabel.getValueFor(x))}"
+                aria-hidden="true"
+            >
+                <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
+            </${buttonTag}>
+        `)}
 
-        <span ${ref('cellContainer')} class="cell-container">
+        <span ${ref('cellContainer')} 
+            class="cell-container ${x => (x.isParentRow && x.nestingLevel > 0 ? 'nested-parent' : '')}"
+        >
             ${repeat(x => x.columns, html `
                 ${when(x => !x.columnHidden, html `
                     <${tableCellTag}
@@ -65730,7 +65809,7 @@ img.ProseMirror-separator {
                         action-menu-label="${x => x.actionMenuLabel}"
                         @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x)}"
                         @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x)}"
-                        :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]};"
+                        :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]}"
                     >
 
                         ${when((x, c) => (c.parent.currentActionMenuColumn === x) && x.actionMenuSlot, html `
@@ -65756,12 +65835,14 @@ img.ProseMirror-separator {
           this.selectable = false;
           this.selected = false;
           this.hideSelection = false;
+          this.expanded = false;
           /**
            * @internal
            * */
           this.columnNotifiers = [];
           this.columns = [];
           this.nestingLevel = 0;
+          this.isParentRow = false;
           this.menuOpen = false;
           this.rowOperationGridCellHidden = false;
           /**
@@ -65776,11 +65857,19 @@ img.ProseMirror-separator {
            * of each column's cell.
            * */
           this.cellStates = [];
+          /**
+           * @internal
+           */
+          this.animationClass = '';
           // Programmatically updating the selection state of a checkbox fires the 'change' event.
           // Therefore, selection change events that occur due to programmatically updating
           // the selection checkbox 'checked' value should be ingored.
           // https://github.com/microsoft/fast/issues/5750
           this.ignoreSelectionChangeEvents = false;
+          this.removeAnimatingClass = () => {
+              this.animationClass = '';
+              this.expandIcon?.removeEventListener('transitionend', this.removeAnimatingClass);
+          };
       }
       get ariaSelected() {
           if (this.selectable) {
@@ -65829,6 +65918,23 @@ img.ProseMirror-separator {
               this.updateCellStates();
           }
       }
+      onRowExpandToggle(event) {
+          const expandEventDetail = {
+              oldState: this.expanded,
+              newState: !this.expanded,
+              recordId: this.recordId
+          };
+          this.$emit('row-expand-toggle', expandEventDetail);
+          event.stopImmediatePropagation();
+          // To avoid a visual glitch with improper expand/collapse icons performing an
+          // animation (due to visual re-use apparently), we apply a class to the
+          // contained expand-collapse button temporarily. 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);
+      }
       emitActionMenuToggleEvent(eventType, menuButtonEventDetail, column) {
           const detail = {
               newState: menuButtonEventDetail.newState,
@@ -65851,10 +65957,7 @@ img.ProseMirror-separator {
       }
       updateCellIndentLevels() {
           this.cellIndentLevels = this.columns.map((_, i) => {
-              if (i === 0 && this.nestingLevel > 0) {
-                  return this.nestingLevel - 1;
-              }
-              return 0;
+              return i === 0 ? this.nestingLevel : 0;
           });
       }
       removeColumnObservers() {
@@ -65919,6 +66022,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'hide-selection', mode: 'boolean' })
   ], TableRow.prototype, "hideSelection", void 0);
+  __decorate$1([
+      attr({ mode: 'boolean' })
+  ], TableRow.prototype, "expanded", void 0);
   __decorate$1([
       observable
   ], TableRow.prototype, "dataRecord", void 0);
@@ -65931,6 +66037,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], TableRow.prototype, "nestingLevel", void 0);
+  __decorate$1([
+      attr({ attribute: 'is-parent-row', mode: 'boolean' })
+  ], TableRow.prototype, "isParentRow", void 0);
   __decorate$1([
       attr({ attribute: 'menu-open', mode: 'boolean' })
   ], TableRow.prototype, "menuOpen", void 0);
@@ -65946,6 +66055,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], TableRow.prototype, "selectionCheckbox", void 0);
+  __decorate$1([
+      observable
+  ], TableRow.prototype, "animationClass", void 0);
   __decorate$1([
       volatile
   ], TableRow.prototype, "ariaSelected", null);
@@ -65959,6 +66071,7 @@ img.ProseMirror-separator {
 
   const styles$e = css `
     ${display('grid')}
+    ${styles$h}
 
     :host {
         align-items: center;
@@ -65983,11 +66096,6 @@ img.ProseMirror-separator {
             1fr;
     }
 
-    :host([expanded]) .animating,
-    :host .animating {
-        transition: ${mediumDelay} ease-in-out;
-    }
-
     :host::before {
         content: '';
         width: 100%;
@@ -66006,15 +66114,6 @@ img.ProseMirror-separator {
             ${mediumPadding} + ${standardPadding} * 2 *
                 var(--ni-private-table-group-row-indent-level)
         );
-        height: ${controlSlimHeight};
-    }
-
-    :host([expanded]) .expander-icon {
-        transform: rotate(90deg);
-    }
-
-    .expander-icon {
-        transform: rotate(0deg);
     }
 
     .group-row-header-content {
@@ -66036,13 +66135,6 @@ img.ProseMirror-separator {
         ${userSelectNone}
     }
 
-    @media (prefers-reduced-motion) {
-        :host .animating,
-        :host([expanded]) .animating {
-            transition-duration: 0s;
-        }
-    }
-
     .checkbox-container {
         display: flex;
     }
@@ -66070,6 +66162,7 @@ img.ProseMirror-separator {
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
+        aria-expanded=${x => x.expanded}
         style="--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};"
     >
         ${when(x => x.selectable, html `
@@ -66093,9 +66186,9 @@ img.ProseMirror-separator {
                 class="expand-collapse-button"
                 tabindex="-1"
                 title="${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}"
+                aria-hidden="true"
             >
                 <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
-                ${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}
             </${buttonTag}>
         </span>
 
@@ -68388,16 +68481,17 @@ img.ProseMirror-separator {
           this.selectionState = this.getTableSelectionState();
           const rows = this.table.getRowModel().rows;
           this.tableData = rows.map(row => {
+              const isGrouped = row.getIsGrouped();
               const rowState = {
                   record: row.original.clientRecord,
                   id: row.id,
                   selectionState: this.getRowSelectionState(row),
-                  isGrouped: row.getIsGrouped(),
+                  isGrouped,
                   isExpanded: row.getIsExpanded(),
-                  groupRowValue: row.getIsGrouped()
+                  groupRowValue: isGrouped
                       ? row.getValue(row.groupingColumnId)
                       : undefined,
-                  nestingLevel: row.depth,
+                  nestingLevel: !isGrouped && row.depth > 0 ? row.depth - 1 : row.depth,
                   leafItemCount: row
                       .getLeafRows()
                       .filter(leafRow => leafRow.getLeafRows().length === 0)
@@ -68597,7 +68691,7 @@ img.ProseMirror-separator {
   const nimbleTable = Table.compose({
       baseName: 'table',
       template: template$c,
-      styles: styles$i
+      styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
   DesignSystem.tagFor(Table);
@@ -70654,7 +70748,7 @@ img.ProseMirror-separator {
 
   const styles$5 = css `
     ${display('inline-flex')}
-    ${styles$C}
+    ${styles$D}
 
     :host {
         font: ${bodyFont};
@@ -71000,7 +71094,7 @@ img.ProseMirror-separator {
 
   const styles$4 = css `
     ${display('inline-block')}
-    ${styles$C}
+    ${styles$D}
 
     :host {
         font: ${bodyFont};