@ni/nimble-components 18.12.2 → 18.12.4

package/dist/all-components-bundle.js

@@ -14949,24 +14949,6 @@
     ], TreeItem$1.prototype, "renderCollapsedChildren", void 0);
     applyMixins(TreeItem$1, StartEnd);
 
-    /**
-     * The template for the {@link @microsoft/fast-foundation#TreeView} component.
-     * @public
-     */
-    const treeViewTemplate = (context, definition) => html `
-    <template
-        role="tree"
-        ${ref("treeView")}
-        @keydown="${(x, c) => x.handleKeyDown(c.event)}"
-        @focusin="${(x, c) => x.handleFocus(c.event)}"
-        @focusout="${(x, c) => x.handleBlur(c.event)}"
-        @click="${(x, c) => x.handleClick(c.event)}"
-        @selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
-    >
-        <slot ${slotted("slottedTreeItems")}></slot>
-    </template>
-`;
-
     /**
      * A Tree view Custom HTML Element.
      * Implements the {@link https://w3c.github.io/aria-practices/#TreeView | ARIA TreeView }.
@@ -16374,7 +16356,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Wed, 19 Apr 2023 17:42:08 GMT
+     * Generated on Tue, 25 Apr 2023 17:52:52 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16744,7 +16726,7 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$q = html `<slot></slot>`;
+    const template$r = html `<slot></slot>`;
 
     const styles$O = css `
     :host {
@@ -16803,7 +16785,7 @@
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
         styles: styles$O,
-        template: template$q
+        template: template$r
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -16852,7 +16834,7 @@
     DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
-    const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
+    const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
     // Component Sizing Tokens
     const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
     const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
@@ -17070,7 +17052,7 @@
 `;
 
     // prettier-ignore
-    const template$p = (context, definition) => html `
+    const template$q = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17144,7 +17126,7 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$p,
+        template: template$q,
         styles: styles$N,
         shadowOptions: {
             delegatesFocus: true
@@ -17521,7 +17503,7 @@
     }
 `;
 
-    const template$o = (context, definition) => html `
+    const template$p = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17603,7 +17585,7 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$o,
+        template: template$p,
         styles: styles$L,
         shadowOptions: {
             delegatesFocus: true
@@ -17689,7 +17671,7 @@
     }
 `;
 
-    const template$n = (context, definition) => html `
+    const template$o = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17795,7 +17777,7 @@
     // 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$n,
+        template: template$o,
         styles: styles$K,
         shadowOptions: {
             delegatesFocus: true
@@ -17945,7 +17927,7 @@
     }
 `;
 
-    const template$m = (context, definition) => html `
+    const template$n = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17998,7 +17980,7 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$m,
+        template: template$n,
         styles: styles$I
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
@@ -18022,7 +18004,7 @@
     }
 `;
 
-    const template$l = (context, definition) => html `
+    const template$m = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18219,7 +18201,7 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$l,
+        template: template$m,
         styles: styles$H,
         shadowOptions: {
             delegatesFocus: false
@@ -18332,7 +18314,7 @@
     }
 `;
 
-    const template$k = (context, definition) => html `
+    const template$l = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18469,7 +18451,7 @@
     // 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$k,
+        template: template$l,
         styles: styles$G,
         shadowOptions: {
             delegatesFocus: true
@@ -19427,7 +19409,7 @@
         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$j = html `
+    const template$k = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
@@ -19486,7 +19468,7 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$j,
+            template: template$k,
             styles: styles$C,
             baseClass: iconClass
         });
@@ -19553,7 +19535,7 @@
     };
 
     // prettier-ignore
-    const template$i = html `
+    const template$j = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19672,7 +19654,7 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$i,
+        template: template$j,
         styles: styles$E
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -20127,7 +20109,7 @@
     }
 `;
 
-    const template$h = (context, definition) => html `
+    const template$i = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20202,7 +20184,7 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$h,
+        template: template$i,
         styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
@@ -20904,7 +20886,7 @@
             }
         `));
 
-    const template$g = html `
+    const template$h = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21030,7 +21012,7 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$g,
+        template: template$h,
         styles: styles$t,
         baseClass: Dialog
     });
@@ -21190,7 +21172,7 @@
             }
         `));
 
-    const template$f = html `
+    const template$g = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21304,7 +21286,7 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$f,
+        template: template$g,
         styles: styles$s
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -23310,7 +23292,7 @@
 `;
 
     // prettier-ignore
-    const template$e = html `
+    const template$f = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23565,7 +23547,7 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$e,
+        template: template$f,
         styles: styles$p,
         shadowOptions: {
             delegatesFocus: true
@@ -24330,7 +24312,7 @@
             }
         `));
 
-    const template$d = html `
+    const template$e = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -24347,7 +24329,7 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$d,
+        template: template$e,
         styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
@@ -24516,7 +24498,7 @@
         `));
 
     // prettier-ignore
-    const template$c = html `
+    const template$d = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -24560,7 +24542,7 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$c,
+        template: template$d,
         styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
@@ -28197,6 +28179,7 @@
         width: 100%;
         position: relative;
         top: var(--ni-private-table-row-container-top);
+        background-color: ${tableRowBorderColor};
     }
 
     .header-container {
@@ -28239,61 +28222,20 @@
         padding-left: 0px;
     }
 
-    .row {
-        background: ${applicationBackgroundColor};
+    .group-row {
         position: relative;
-        box-sizing: border-box;
-    }
-
-    .row::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        pointer-events: none;
-    }
-
-    :host([selection-mode='single']) .row:hover::before,
-    :host([selection-mode='multiple']) .row:hover::before {
-        background: ${fillHoverColor};
     }
 
-    :host([selection-mode='single']) .row[selected]::before,
-    :host([selection-mode='multiple']) .row[selected]::before {
-        background: ${fillSelectedColor};
-    }
-
-    :host([selection-mode='single']) .row[selected]:hover::before,
-    :host([selection-mode='multiple']) .row[selected]:hover::before {
-        background: ${fillHoverSelectedColor};
+    .row {
+        position: relative;
     }
 `.withBehaviors(themeBehavior(Theme.color, css `
-            .header-row::before {
+            .table-row-container::before {
                 content: '';
                 width: 100%;
                 height: 100%;
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
                 position: absolute;
-                background: ${fillHoverColor};
-                pointer-events: none;
-            }
-
-            .row::before {
-                background: ${fillHoverColor};
-            }
-
-            :host([selection-mode='single']) .row:hover::before,
-            :host([selection-mode='multiple']) .row:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.15)};
-            }
-
-            :host([selection-mode='single']) .row[selected]::before,
-            :host([selection-mode='multiple']) .row[selected]::before {
-                background: ${hexToRgbaCssColor(White, 0.25)};
-            }
-
-            :host([selection-mode='single']) .row[selected]:hover::before,
-            :host([selection-mode='multiple']) .row[selected]:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.2)};
             }
         `));
 
@@ -28316,7 +28258,7 @@
 `;
 
     // prettier-ignore
-    const template$b = html `
+    const template$c = html `
     <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
 
@@ -28366,7 +28308,7 @@
     ], TableHeader.prototype, "firstSortedColumn", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$b,
+        template: template$c,
         styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
@@ -28376,10 +28318,35 @@
     ${display('flex')}
 
     :host {
-        height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
         width: fit-content;
         min-width: 100%;
+        background-color: ${applicationBackgroundColor};
+        height: calc(${controlHeight} + 2 * ${borderWidth});
+        border-top: calc(2 * ${borderWidth}) solid transparent;
+        box-sizing: border-box;
+        background-clip: padding-box;
+    }
+
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        box-sizing: border-box;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host([selectable]:not([selected]):hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
+    :host([selected])::before {
+        background-color: ${fillSelectedColor};
+    }
+
+    :host([selected]:hover)::before {
+        background-color: ${fillHoverSelectedColor};
     }
 
     .checkbox-container {
@@ -28417,7 +28384,19 @@
     :host([selected]) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host([selectable]:not([selected]):hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+
+            :host([selected])::before {
+                background-color: ${hexToRgbaCssColor(White, 0.25)};
+            }
+
+            :host([selected]:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.2)};
+            }
+        `));
 
     const styles$d = css `
     ${display('grid')}
@@ -28451,7 +28430,7 @@
 `;
 
     // prettier-ignore
-    const template$a = html `
+    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 `
@@ -28510,14 +28489,14 @@
     ], TableCell.prototype, "nestingLevel", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$a,
+        template: template$b,
         styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
     const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
-    const template$9 = html `
+    const template$a = html `
     <template role="row" aria-selected=${x => x.ariaSelected}>
         ${when(x => x.selectable && !x.hideSelection, html `
             <span role="gridcell" class="checkbox-container">
@@ -28701,7 +28680,7 @@
     ], TableRow.prototype, "ariaSelected", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$9,
+        template: template$a,
         styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
@@ -28713,11 +28692,8 @@
     :host {
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
-    }
-
-    :host(:hover) {
-        background: ${fillHoverColor};
+        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
+        box-sizing: border-box;
     }
 
     :host([expanded]) .animating,
@@ -28725,6 +28701,19 @@
         transition: ${mediumDelay} ease-in-out;
     }
 
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host(:hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${smallPadding} * 2 + ${standardPadding} * 2 *
@@ -28778,11 +28767,19 @@
     .selection-checkbox::part(label) {
         padding-left: 0px;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+        `), themeBehavior(Theme.dark, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
+            }
+        `));
 
     /* eslint-disable @typescript-eslint/indent */
     // prettier-ignore
-    const template$8 = html `
+    const template$9 = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -28911,14 +28908,14 @@
     ], TableGroupRow.prototype, "animationClass", void 0);
     const nimbleTableGroupRow = TableGroupRow.compose({
         baseName: 'table-group-row',
-        template: template$8,
+        template: template$9,
         styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
     const tableGroupRowTag = DesignSystem.tagFor(TableGroupRow);
 
     // prettier-ignore
-    const template$7 = html `
+    const template$8 = html `
     <template
         role="grid"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
@@ -30603,7 +30600,7 @@
     ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$7,
+        template: template$8,
         styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
@@ -30621,7 +30618,7 @@
     }
 `;
 
-    const template$6 = html `
+    const template$7 = html `
     <template slot="${x => x.columnInternals.uniqueId}">
         <span class="header-content">
             <slot></slot>
@@ -30697,7 +30694,7 @@
         return GroupableColumn;
     }
 
-    const template$5 = html `
+    const template$6 = html `
     <span
         ${ref('textSpan')}
         class="${x => (typeof x.groupHeaderValue === 'string' ? '' : 'placeholder')}"
@@ -30755,7 +30752,7 @@
     ], TableColumnTextGroupHeaderView.prototype, "content", null);
     const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
         baseName: 'table-column-text-group-header',
-        template: template$5,
+        template: template$6,
         styles: styles$a
     });
     DesignSystem.getOrCreate()
@@ -30777,7 +30774,7 @@
     }
 `;
 
-    const template$4 = html `
+    const template$5 = html `
     <span
         ${ref('textSpan')}
         class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
@@ -30816,7 +30813,7 @@
     ], TableColumnTextCellView.prototype, "content", null);
     const textCellView = TableColumnTextCellView.compose({
         baseName: 'table-column-text-cell-view',
-        template: template$4,
+        template: template$5,
         styles: styles$9
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
@@ -30852,7 +30849,7 @@
     ], TableColumnText.prototype, "placeholder", void 0);
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
-        template: template$6,
+        template: template$7,
         styles: styles$b
     });
     DesignSystem.getOrCreate()
@@ -30924,7 +30921,7 @@
     }
 `;
 
-    const template$3 = html `
+    const template$4 = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -30938,7 +30935,7 @@
     }
     const nimbleTabsToolbar = TabsToolbar.compose({
         baseName: 'tabs-toolbar',
-        template: template$3,
+        template: template$4,
         styles: styles$7
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -31114,7 +31111,7 @@
             }
         `));
 
-    const template$2 = () => html `
+    const template$3 = () => html `
     <label
         part="label"
         for="control"
@@ -31276,7 +31273,7 @@
     const nimbleTextArea = TextArea.compose({
         baseName: 'text-area',
         baseClass: TextArea$1,
-        template: template$2,
+        template: template$3,
         styles: styles$6,
         shadowOptions: {
             delegatesFocus: true
@@ -31710,7 +31707,7 @@
         `));
 
     // prettier-ignore
-    const template$1 = html `
+    const template$2 = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -31762,7 +31759,7 @@
     const nimbleTooltip = Tooltip.compose({
         baseName: 'tooltip',
         baseClass: Tooltip$1,
-        template: template$1,
+        template: template$2,
         styles: styles$3
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
@@ -32055,52 +32052,15 @@
     class TreeItem extends TreeItem$1 {
         constructor() {
             super(...arguments);
-            this.treeView = null;
-            // This prevents the toggling of selected state when a TreeItem is clicked multiple times,
-            // which is what the FAST TreeItem allows
-            this.handleSelectedChange = (event) => {
-                // only process selection
-                if (event.target === this && this.selected) {
-                    this.setGroupSelectionOnRootParentTreeItem(this);
-                }
-            };
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            this.addEventListener('selected-change', this.handleSelectedChange);
-            this.treeView = this.getParentTreeView();
-            if (this.treeView && this.selected) {
-                this.setGroupSelectionOnRootParentTreeItem(this);
-            }
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this.removeEventListener('selected-change', this.handleSelectedChange);
-            this.treeView = null;
-        }
-        clearTreeGroupSelection() {
-            const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
-            currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
-        }
-        setGroupSelectionOnRootParentTreeItem(treeItem) {
-            this.clearTreeGroupSelection();
-            let currentItem = treeItem;
-            while (currentItem?.parentElement !== this.treeView) {
-                currentItem = currentItem?.parentElement;
-            }
-            if (currentItem) {
-                currentItem.setAttribute(groupSelectedAttribute, 'true');
-            }
-        }
-        /**
-         * This was copied directly from the FAST TreeItem implementation
-         * @returns the root tree view
-         */
-        getParentTreeView() {
-            const parentNode = this.parentElement.closest("[role='tree']");
-            return parentNode;
+            /**
+             * @internal
+             */
+            this.groupSelected = false;
         }
     }
+    __decorate$1([
+        attr({ attribute: 'group-selected', mode: 'boolean' })
+    ], TreeItem.prototype, "groupSelected", void 0);
     const nimbleTreeItem = TreeItem.compose({
         baseName: 'tree-item',
         baseClass: TreeItem$1,
@@ -32125,6 +32085,22 @@
     }
 `;
 
+    // prettier-ignore
+    const template$1 = html `
+    <template
+        role="tree"
+        ${ref('treeView')}
+        ${children$1({ property: 'selectedItems', subtree: true, selector: '[role="treeitem"][selected]', attributeFilter: ['role', 'selected'] })}
+        @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+        @focusin="${(x, c) => x.handleFocus(c.event)}"
+        @focusout="${(x, c) => x.handleBlur(c.event)}"
+        @click="${(x, c) => x.handleClick(c.event)}"
+        @selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
+    >
+        <slot ${slotted('slottedTreeItems')}></slot>
+    </template>
+`;
+
     /**
      * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
      * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
@@ -32139,6 +32115,10 @@
         constructor() {
             super(...arguments);
             this.selectionMode = TreeViewSelectionMode.all;
+            /**
+             * @internal
+             */
+            this.selectedItems = [];
         }
         handleClick(e) {
             if (e.defaultPrevented) {
@@ -32177,14 +32157,32 @@
             const treeItemChild = item.querySelector('[role="treeitem"]');
             return treeItemChild !== null;
         }
+        selectedItemsChanged() {
+            for (const item of Array.from(this.children)) {
+                if (item instanceof TreeItem) {
+                    item.groupSelected = false;
+                }
+            }
+            for (let item of this.selectedItems) {
+                while (item.parentElement !== null && item.parentElement !== this) {
+                    item = item.parentElement;
+                }
+                if (item instanceof TreeItem) {
+                    item.groupSelected = true;
+                }
+            }
+        }
     }
     __decorate$1([
         attr({ attribute: 'selection-mode' })
     ], TreeView.prototype, "selectionMode", void 0);
+    __decorate$1([
+        observable
+    ], TreeView.prototype, "selectedItems", void 0);
     const nimbleTreeView = TreeView.compose({
         baseName: 'tree-view',
         baseClass: TreeView$1,
-        template: treeViewTemplate,
+        template: template$1,
         styles: styles$1
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());