@fluentui/web-components 3.0.0-beta.85 → 3.0.0-beta.86

package/dist/esm/tree-item/tree-item.js

@@ -1,35 +1,10 @@
 import { __decorate } from "tslib";
-import { attr, css, FASTElement, observable } from '@microsoft/fast-element';
-import { toggleState } from '../utils/element-internals.js';
-import { isTreeItem, TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
-export class TreeItem extends FASTElement {
+import { attr } from '@microsoft/fast-element';
+import { TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
+import { BaseTreeItem } from './tree-item.base';
+export class TreeItem extends BaseTreeItem {
     constructor() {
-        super();
-        /**
-         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-         *
-         * @internal
-         */
-        this.elementInternals = this.attachInternals();
-        /**
-         * When true, the control will be appear expanded by user interaction.
-         * @public
-         * HTML Attribute: `expanded`
-         */
-        this.expanded = false;
-        /**
-         * When true, the control will appear selected by user interaction.
-         * @public
-         * @remarks
-         * HTML Attribute: selected
-         */
-        this.selected = false;
-        /**
-         * When true, the control has no child tree items
-         * @public
-         * HTML Attribute: empty
-         */
-        this.empty = false;
+        super(...arguments);
         /**
          * The size of the tree item element
          * @public
@@ -40,33 +15,6 @@ export class TreeItem extends FASTElement {
          * @public
          */
         this.appearance = TreeItemAppearance.subtle;
-        this.childTreeItems = [];
-        this.elementInternals.role = 'treeitem';
-    }
-    /**
-     * Handles changes to the expanded attribute
-     * @param prev - the previous state
-     * @param next - the next state
-     *
-     * @public
-     */
-    expandedChanged(prev, next) {
-        toggleState(this.elementInternals, 'expanded', next);
-        if (this.childTreeItems && this.childTreeItems.length > 0) {
-            this.elementInternals.ariaExpanded = next ? 'true' : 'false';
-        }
-    }
-    /**
-     * Handles changes to the selected attribute
-     * @param prev - the previous state
-     * @param next - the next state
-     *
-     * @internal
-     */
-    selectedChanged(prev, next) {
-        this.$emit('change');
-        toggleState(this.elementInternals, 'selected', next);
-        this.elementInternals.ariaSelected = next ? 'true' : 'false';
     }
     /**
      * Handles changes to the size attribute
@@ -74,7 +22,7 @@ export class TreeItem extends FASTElement {
      *  @internal
      */
     sizeChanged() {
-        this.updateChildTreeItems();
+        this.updateSizeAndAppearance();
     }
     /**
      * Handles changes to the appearance attribute
@@ -82,120 +30,36 @@ export class TreeItem extends FASTElement {
      * @internal
      */
     appearanceChanged() {
-        this.updateChildTreeItems();
-    }
-    dataIndentChanged(prev, next) {
-        if (this.styles !== undefined) {
-            this.$fastController.removeStyles(this.styles);
-        }
-        this.styles = css `
-      :host {
-        --indent: ${next};
-      }
-    `;
-        this.$fastController.addStyles(this.styles);
+        this.updateSizeAndAppearance();
     }
     /**
-     * Handles changes to the child tree items
-     *
+     * child tree items supered change event
      * @internal
      */
     childTreeItemsChanged() {
-        this.empty = this.childTreeItems?.length === 0;
-        this.updateChildTreeItems();
+        super.childTreeItemsChanged();
+        this.updateSizeAndAppearance();
     }
     /**
      * 1. Update the child items' size based on the tree's size
      * 2. Update the child items' appearance based on the tree's appearance
+     *
+     * @public
      */
-    updateChildTreeItems() {
+    updateSizeAndAppearance() {
         if (!this.childTreeItems?.length) {
             return;
         }
         this.childTreeItems.forEach(item => {
-            if (!isTreeItem(item)) {
-                return;
-            }
-            this.setIndent(item);
             item.size = this.size;
             item.appearance = this.appearance;
         });
     }
-    /**
-     * Sets the indent for each item
-     */
-    setIndent(item) {
-        const indent = this.dataIndent ?? 0;
-        item.dataIndent = indent + 1;
-    }
-    /**
-     * Handle focus events
-     *
-     * @public
-     */
-    focusHandler(e) {
-        if (e.target === this ||
-            // In case where the tree-item contains a focusable element, we should not set the tabindex to 0 when the focus is on its child focusable element,
-            // so users can shift+tab to navigate to the tree-item from its child focusable element.
-            this.contains(e.target)) {
-            this.setAttribute('tabindex', '0');
-        }
-    }
-    /**
-     * Handle blur events
-     *
-     * @public
-     */
-    blurHandler(e) {
-        if (e.target === this) {
-            this.setAttribute('tabindex', '-1');
-        }
-    }
-    /**
-     * Toggle the expansion state of the tree item
-     *
-     * @public
-     */
-    toggleExpansion() {
-        if (this.childTreeItems?.length) {
-            this.expanded = !this.expanded;
-        }
-    }
-    /**
-     * Toggle the single selection state of the tree item
-     *
-     * @public
-     */
-    toggleSelection() {
-        this.selected = !this.selected;
-    }
-    /**
-     * Whether the tree is nested
-     * @internal
-     */
-    get isNestedItem() {
-        return isTreeItem(this.parentElement);
-    }
 }
-__decorate([
-    attr({ mode: 'boolean' })
-], TreeItem.prototype, "expanded", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], TreeItem.prototype, "selected", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], TreeItem.prototype, "empty", void 0);
 __decorate([
     attr
 ], TreeItem.prototype, "size", void 0);
 __decorate([
     attr
 ], TreeItem.prototype, "appearance", void 0);
-__decorate([
-    attr({ attribute: 'data-indent' })
-], TreeItem.prototype, "dataIndent", void 0);
-__decorate([
-    observable
-], TreeItem.prototype, "childTreeItems", void 0);
 //# sourceMappingURL=tree-item.js.map

package/dist/esm/tree-item/tree-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QACE;;;WAGG;QAEI,SAAI,GAAiB,YAAY,CAAC,KAAK,CAAC;QAW/C;;;WAGG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,MAAM,CAAC;IAoCpE,CAAC;IAlDC;;;;OAIG;IACK,WAAW;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IASD;;;;OAIG;IACK,iBAAiB;QACvB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;OAGG;IACI,qBAAqB;QAC1B,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAC9B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACI,uBAAuB;QAC5B,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChC,IAAiB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACnC,IAAiB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AApDQ;IADN,IAAI;sCAC0C;AAgBxC;IADN,IAAI;4CAC6D"}

package/dist/esm/tree-item/tree-item.styles.js

@@ -1,11 +1,13 @@
 import { css } from '@microsoft/fast-element';
-import { borderRadiusMedium, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, curveEasyEaseMax, durationFaster, fontSizeBase300, spacingHorizontalM, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingVerticalNone, spacingVerticalS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, } from '../theme/design-tokens.js';
+import { borderRadiusMedium, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3Selected, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, curveEasyEaseMax, durationFaster, fontSizeBase300, lineHeightBase300, spacingHorizontalM, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingVerticalNone, spacingVerticalS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, } from '../theme/design-tokens.js';
 import { display } from '../utils/display.js';
 export const styles = css `
   ${display('block')}
 
   :host {
     outline: none;
+    font-size: ${fontSizeBase300};
+    line-height: ${lineHeightBase300};
   }
 
   :host(:focus-visible) .positioning-region {
@@ -20,7 +22,7 @@ export const styles = css `
    */
   .positioning-region {
     display: flex;
-    align-items: stretch;
+    align-items: center;
     justify-content: space-between;
     cursor: pointer;
     height: ${spacingVerticalXXXL};
@@ -29,6 +31,7 @@ export const styles = css `
     border-radius: ${borderRadiusMedium};
     background-color: ${colorSubtleBackground};
     color: ${colorNeutralForeground2};
+    gap: ${spacingHorizontalXS};
   }
 
   @media (prefers-contrast: more) {
@@ -40,19 +43,16 @@ export const styles = css `
   .content {
     display: flex;
     align-items: center;
-    font-size: ${fontSizeBase300};
-    min-width: 0;
+    gap: ${spacingHorizontalXS};
   }
 
   .chevron {
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    min-width: 0;
     justify-content: center;
     width: ${spacingHorizontalXXL};
     height: ${spacingVerticalXXL};
-    color: ${colorNeutralForeground3};
     transition: transform ${durationFaster} ${curveEasyEaseMax};
     transform: rotate(0deg);
   }
@@ -61,12 +61,9 @@ export const styles = css `
     transform: rotate(180deg);
   }
 
-  .badging,
-  .toolbar {
+  .aside {
     display: flex;
     align-items: center;
-    min-width: 0;
-    font-size: ${fontSizeBase300};
   }
 
   .positioning-region:hover {
@@ -74,22 +71,13 @@ export const styles = css `
     color: ${colorNeutralForeground2Hover};
   }
 
-  .positioning-region:hover .content,
-  .positioning-region:hover .chevron {
-    color: ${colorNeutralForeground3Hover};
-  }
-
   .positioning-region:active {
     background-color: ${colorSubtleBackgroundPressed};
     color: ${colorNeutralForeground2Pressed};
   }
 
-  .positioning-region:active .content,
-  .positioning-region:active .chevron {
-    color: ${colorNeutralForeground3Pressed};
-  }
-
   ::slotted([slot='start']),
+  ::slotted([slot='end']),
   ::slotted(:not([slot])) {
     display: flex;
     align-items: center;
@@ -98,7 +86,6 @@ export const styles = css `
 
   ::slotted([slot='start']) {
     flex-shrink: 0;
-    margin-inline-end: ${spacingHorizontalXS};
   }
 
   ::slotted(:not([slot])) {

package/dist/esm/tree-item/tree-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.styles.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,oCAAoC,EACpC,sCAAsC,EACtC,uCAAuC,EACvC,4BAA4B,EAC5B,6BAA6B,EAC7B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;kBAOF,mBAAmB,IAAI,mBAAmB,IAAI,mBAAmB,IAAI,kBAAkB;QACjG,iBAAiB;;;;;;;;;;;;;cAaX,mBAAmB;iDACgB,oBAAoB;0BAC3C,gBAAgB;qBACrB,kBAAkB;wBACf,qBAAqB;aAChC,uBAAuB;;;;;2BAKT,iBAAiB;;;;;;;iBAO3B,eAAe;;;;;;;;;;aAUnB,oBAAoB;cACnB,kBAAkB;aACnB,uBAAuB;4BACR,cAAc,IAAI,gBAAgB;;;;;;;;;;;;;iBAa7C,eAAe;;;;wBAIR,0BAA0B;aACrC,4BAA4B;;;;;aAK5B,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;aAK9B,8BAA8B;;;;;;;;;;;;yBAYlB,mBAAmB;;;;sBAItB,oBAAoB;;;;;;;;;;;;;;;;;wBAiBlB,6BAA6B;aACxC,+BAA+B;;;;;aAK/B,+BAA+B;;;;cAI9B,kBAAkB;iDACiB,kBAAkB;;;;wBAI3C,oCAAoC;;;;wBAIpC,sCAAsC;;;;wBAItC,uCAAuC;aAClD,+BAA+B;;;;wBAIpB,0BAA0B;;;;wBAI1B,+BAA+B;;;;wBAI/B,iCAAiC;;;;wBAIjC,kCAAkC;aAC7C,+BAA+B;;;;;;CAM3C,CAAC"}
+{"version":3,"file":"tree-item.styles.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAI/B,+BAA+B,EAC/B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,oCAAoC,EACpC,sCAAsC,EACtC,uCAAuC,EACvC,4BAA4B,EAC5B,6BAA6B,EAC7B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;iBAIH,eAAe;mBACb,iBAAiB;;;;kBAIlB,mBAAmB,IAAI,mBAAmB,IAAI,mBAAmB,IAAI,kBAAkB;QACjG,iBAAiB;;;;;;;;;;;;;cAaX,mBAAmB;iDACgB,oBAAoB;0BAC3C,gBAAgB;qBACrB,kBAAkB;wBACf,qBAAqB;aAChC,uBAAuB;WACzB,mBAAmB;;;;;2BAKH,iBAAiB;;;;;;;WAOjC,mBAAmB;;;;;;;;aAQjB,oBAAoB;cACnB,kBAAkB;4BACJ,cAAc,IAAI,gBAAgB;;;;;;;;;;;;;;wBActC,0BAA0B;aACrC,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;;;;;;;;;;;;sBAgBrB,oBAAoB;;;;;;;;;;;;;;;;;wBAiBlB,6BAA6B;aACxC,+BAA+B;;;;;aAK/B,+BAA+B;;;;cAI9B,kBAAkB;iDACiB,kBAAkB;;;;wBAI3C,oCAAoC;;;;wBAIpC,sCAAsC;;;;wBAItC,uCAAuC;aAClD,+BAA+B;;;;wBAIpB,0BAA0B;;;;wBAI1B,+BAA+B;;;;wBAI/B,iCAAiC;;;;wBAIjC,kCAAkC;aAC7C,+BAA+B;;;;;;CAM3C,CAAC"}

package/dist/esm/tree-item/tree-item.template.js

@@ -1,4 +1,5 @@
-import { children, elements, html } from '@microsoft/fast-element';
+import { children, html } from '@microsoft/fast-element';
+import { isTreeItem } from './tree-item.options';
 const chevronIcon = html `
   <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
     <path
@@ -14,7 +15,7 @@ export const template = html `
     @focusout="${(x, c) => x.blurHandler(c.event)}"
     ${children({
     property: 'childTreeItems',
-    filter: elements(),
+    filter: node => isTreeItem(node),
 })}
   >
     <div class="positioning-region" part="positioning-region">
@@ -26,11 +27,8 @@ export const template = html `
         <slot></slot>
         <slot name="end"></slot>
       </div>
-      <div class="badging" part="badging">
-        <slot name="badging"></slot>
-      </div>
-      <div class="toolbar" part="toolbar">
-        <slot name="toolbar"></slot>
+      <div class="aside" part="aside">
+        <slot name="aside"></slot>
       </div>
     </div>
     <div role="group" class="items" part="items">

package/dist/esm/tree-item/tree-item.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGnE,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;CAMvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;;YAG1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBACnC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;MACzD,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,QAAQ,EAAE;CACnB,CAAC;;;;;iCAK2B,WAAW;;;;;;;;;;;;;;;;;CAiB3C,CAAC"}
+{"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;CAMvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;;YAG1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBACnC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;MACzD,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;CACjC,CAAC;;;;;iCAK2B,WAAW;;;;;;;;;;;;;;CAc3C,CAAC"}

package/dist/web-components.d.ts

@@ -3261,6 +3261,105 @@ export declare class BaseTextInput extends FASTElement {
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
 }
 
+declare class BaseTreeItem extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+    /**
+     * When true, the control will be appear expanded by user interaction.
+     * @public
+     * HTML Attribute: `expanded`
+     */
+    expanded: boolean;
+    /**
+     * Handles changes to the expanded attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @public
+     */
+    expandedChanged(prev: boolean, next: boolean): void;
+    /**
+     * When true, the control will appear selected by user interaction.
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+    /**
+     * Handles changes to the selected attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @internal
+     */
+    protected selectedChanged(prev: boolean, next: boolean): void;
+    /**
+     * When true, the control has no child tree items
+     * @public
+     * HTML Attribute: empty
+     */
+    empty: boolean;
+    private styles;
+    /**
+     * The indent of the tree item element.
+     * This is not needed once css attr() is supported (--indent: attr(data-indent type(<number>)));
+     * @public
+     */
+    dataIndent: number | undefined;
+    private dataIndentChanged;
+    childTreeItems: BaseTreeItem[] | undefined;
+    /**
+     * Handles changes to the child tree items
+     *
+     * @public
+     */
+    childTreeItemsChanged(): void;
+    /**
+     * Updates the childrens indent
+     *
+     * @public
+     */
+    updateChildTreeItems(): void;
+    /**
+     * Sets the indent for each item
+     */
+    private setIndent;
+    /**
+     * Handle focus events
+     *
+     * @public
+     */
+    focusHandler(e: FocusEvent): void;
+    /**
+     * Handle blur events
+     *
+     * @public
+     */
+    blurHandler(e: FocusEvent): void;
+    /**
+     * Toggle the expansion state of the tree item
+     *
+     * @public
+     */
+    toggleExpansion(): void;
+    /**
+     * Toggle the single selection state of the tree item
+     *
+     * @public
+     */
+    toggleSelection(): void;
+    /**
+     * Whether the tree is nested
+     * @internal
+     */
+    get isNestedItem(): boolean;
+}
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
  * @public
@@ -7379,7 +7478,7 @@ export declare function isListbox(element?: Node | null, tagName?: string): elem
  * @returns true if the element is a dropdown.
  * @public
  */
-export declare function isTreeItem(element?: Node | null, tagName?: string): element is TreeItem;
+export declare function isTreeItem(element?: Node | null, tagName?: string): element is BaseTreeItem;
 
 /**
  * The base class used for constructing a fluent-label custom element
@@ -11159,49 +11258,7 @@ export declare const TooltipStyles: ElementStyles;
  */
 export declare const TooltipTemplate: ViewTemplate<Tooltip, any>;
 
-export declare class TreeItem extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    constructor();
-    /**
-     * When true, the control will be appear expanded by user interaction.
-     * @public
-     * HTML Attribute: `expanded`
-     */
-    expanded: boolean;
-    /**
-     * Handles changes to the expanded attribute
-     * @param prev - the previous state
-     * @param next - the next state
-     *
-     * @public
-     */
-    expandedChanged(prev: boolean, next: boolean): void;
-    /**
-     * When true, the control will appear selected by user interaction.
-     * @public
-     * @remarks
-     * HTML Attribute: selected
-     */
-    selected: boolean;
-    /**
-     * Handles changes to the selected attribute
-     * @param prev - the previous state
-     * @param next - the next state
-     *
-     * @internal
-     */
-    protected selectedChanged(prev: boolean, next: boolean): void;
-    /**
-     * When true, the control has no child tree items
-     * @public
-     * HTML Attribute: empty
-     */
-    empty: boolean;
+export declare class TreeItem extends BaseTreeItem {
     /**
      * The size of the tree item element
      * @public
@@ -11224,59 +11281,18 @@ export declare class TreeItem extends FASTElement {
      * @internal
      */
     private appearanceChanged;
-    private styles;
-    /**
-     * The indent of the tree item element.
-     * This is not needed once css attr() is supported (--indent: attr(data-indent type(<number>)));
-     * @public
-     */
-    dataIndent: number | undefined;
-    private dataIndentChanged;
-    childTreeItems: TreeItem[] | undefined;
     /**
-     * Handles changes to the child tree items
-     *
+     * child tree items supered change event
      * @internal
      */
-    protected childTreeItemsChanged(): void;
+    childTreeItemsChanged(): void;
     /**
      * 1. Update the child items' size based on the tree's size
      * 2. Update the child items' appearance based on the tree's appearance
-     */
-    private updateChildTreeItems;
-    /**
-     * Sets the indent for each item
-     */
-    private setIndent;
-    /**
-     * Handle focus events
-     *
-     * @public
-     */
-    focusHandler(e: FocusEvent): void;
-    /**
-     * Handle blur events
-     *
-     * @public
-     */
-    blurHandler(e: FocusEvent): void;
-    /**
-     * Toggle the expansion state of the tree item
-     *
-     * @public
-     */
-    toggleExpansion(): void;
-    /**
-     * Toggle the single selection state of the tree item
      *
      * @public
      */
-    toggleSelection(): void;
-    /**
-     * Whether the tree is nested
-     * @internal
-     */
-    get isNestedItem(): boolean;
+    updateSizeAndAppearance(): void;
 }
 
 export declare const TreeItemAppearance: {