@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.131

package/dist/esm/tooltip/tooltip.styles.js

@@ -0,0 +1,96 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../utils/display.js';
+import { borderRadiusMedium, colorNeutralBackground1, colorNeutralForeground1, colorNeutralShadowAmbient, colorNeutralShadowKey, colorTransparentStroke, fontFamilyBase, fontSizeBase200, lineHeightBase200, spacingHorizontalMNudge, spacingHorizontalXS, spacingVerticalXS, } from '../theme/design-tokens.js';
+import { TooltipPositioningOption } from './tooltip.options.js';
+/**
+ * Styles for the tooltip component
+ * @public
+ */
+export const styles = css `
+  ${display('inline-flex')}
+
+  :host(:not(:popover-open)) {
+    display: none;
+  }
+
+  :host {
+    --position-area: block-start;
+    --position-try-options: flip-block;
+    --block-offset: ${spacingVerticalXS};
+    --inline-offset: ${spacingHorizontalXS};
+    background: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusMedium};
+    border: 1px solid ${colorTransparentStroke};
+    box-sizing: border-box;
+    color: ${colorNeutralForeground1};
+    display: inline-flex;
+    filter: drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 4px 8px ${colorNeutralShadowKey});
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    inset: unset;
+    line-height: ${lineHeightBase200};
+    margin: unset; /* Remove browser default for [popover] */
+    max-width: 240px;
+    overflow: visible;
+    padding: 4px ${spacingHorizontalMNudge} 6px;
+    position: absolute;
+    position-area: var(--position-area);
+    position-try-options: var(--position-try-options);
+    width: auto;
+    z-index: 1;
+  }
+
+  @supports (inset-area: block-start) {
+    :host {
+      inset-area: var(--position-area);
+      position-try-fallbacks: var(--position-try-options);
+    }
+  }
+
+  :host(:is([positioning^='above'], [positioning^='below'], :not([positioning]))) {
+    margin-block: var(--block-offset);
+  }
+
+  :host(:is([positioning^='before'], [positioning^='after'])) {
+    margin-inline: var(--inline-offset);
+    --position-try-options: flip-inline;
+  }
+
+  :host([positioning='above-start']) {
+    --position-area: ${TooltipPositioningOption['above-start']};
+  }
+  :host([positioning='above']) {
+    --position-area: ${TooltipPositioningOption.above};
+  }
+  :host([positioning='above-end']) {
+    --position-area: ${TooltipPositioningOption['above-end']};
+  }
+  :host([positioning='below-start']) {
+    --position-area: ${TooltipPositioningOption['below-start']};
+  }
+  :host([positioning='below']) {
+    --position-area: ${TooltipPositioningOption.below};
+  }
+  :host([positioning='below-end']) {
+    --position-area: ${TooltipPositioningOption['below-end']};
+  }
+  :host([positioning='before-top']) {
+    --position-area: ${TooltipPositioningOption['before-top']};
+  }
+  :host([positioning='before']) {
+    --position-area: ${TooltipPositioningOption.before};
+  }
+  :host([positioning='before-bottom']) {
+    --position-area: ${TooltipPositioningOption['before-bottom']};
+  }
+  :host([positioning='after-top']) {
+    --position-area: ${TooltipPositioningOption['after-top']};
+  }
+  :host([positioning='after']) {
+    --position-area: ${TooltipPositioningOption.after};
+  }
+  :host([positioning='after-bottom']) {
+    --position-area: ${TooltipPositioningOption['after-bottom']};
+  }
+`;
+//# sourceMappingURL=tooltip.styles.js.map

package/dist/esm/tooltip/tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.styles.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,yBAAyB,EACzB,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;sBASJ,iBAAiB;uBAChB,mBAAmB;kBACxB,uBAAuB;qBACpB,kBAAkB;wBACf,sBAAsB;;aAEjC,uBAAuB;;kCAEF,yBAAyB,2BAA2B,qBAAqB;mBACxF,cAAc;iBAChB,eAAe;;mBAEb,iBAAiB;;;;mBAIjB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;uBAyBnB,wBAAwB,CAAC,aAAa,CAAC;;;uBAGvC,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,WAAW,CAAC;;;uBAGrC,wBAAwB,CAAC,aAAa,CAAC;;;uBAGvC,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,WAAW,CAAC;;;uBAGrC,wBAAwB,CAAC,YAAY,CAAC;;;uBAGtC,wBAAwB,CAAC,MAAM;;;uBAG/B,wBAAwB,CAAC,eAAe,CAAC;;;uBAGzC,wBAAwB,CAAC,WAAW,CAAC;;;uBAGrC,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,cAAc,CAAC;;CAE9D,CAAC"}

package/dist/esm/tooltip/tooltip.template.d.ts

@@ -0,0 +1,6 @@
+import type { Tooltip } from './tooltip.js';
+/**
+ * Template for the tooltip component
+ * @public
+ */
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Tooltip, any>;

package/dist/esm/tooltip/tooltip.template.js

@@ -0,0 +1,11 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Template for the tooltip component
+ * @public
+ */
+export const template = html `
+  <template popover aria-hidden="true">
+    <slot></slot>
+  </template>
+`;
+//# sourceMappingURL=tooltip.template.js.map

package/dist/esm/tooltip/tooltip.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.template.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;;;CAIpC,CAAC"}

package/dist/esm/tree/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tree/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './tree.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/dist/esm/tree/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/tree/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/tree/index.d.ts

@@ -0,0 +1,5 @@
+export { BaseTree } from './tree.base.js';
+export { Tree } from './tree.js';
+export { template as TreeTemplate } from './tree.template.js';
+export { styles as TreeStyles } from './tree.styles.js';
+export { definition as TreeDefinition } from './tree.definition.js';

package/dist/esm/tree/index.js

@@ -0,0 +1,6 @@
+export { BaseTree } from './tree.base.js';
+export { Tree } from './tree.js';
+export { template as TreeTemplate } from './tree.template.js';
+export { styles as TreeStyles } from './tree.styles.js';
+export { definition as TreeDefinition } from './tree.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/tree/tree.base.d.ts

@@ -0,0 +1,74 @@
+import { FASTElement } from '@microsoft/fast-element';
+import type { BaseTreeItem } from '../tree-item/tree-item.base';
+export declare class BaseTree extends FASTElement {
+    /**
+     * The currently selected tree item
+     * @public
+     */
+    currentSelected: HTMLElement | null;
+    /**
+     * The tree item that is designated to be in the tab queue.
+     *
+     * @internal
+     */
+    private currentFocused;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /** @internal */
+    defaultSlot: HTMLSlotElement;
+    constructor();
+    /** @internal */
+    childTreeItems: BaseTreeItem[];
+    /** @internal */
+    childTreeItemsChanged(): void;
+    /**
+     * Updates current selected when slottedTreeItems changes
+     */
+    private updateCurrentSelected;
+    /**
+     * KeyDown handler
+     *
+     *  @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    focusHandler(e: FocusEvent): void;
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    blurHandler(e: FocusEvent): void;
+    /**
+     * Handles click events bubbling up
+     *
+     *  @internal
+     */
+    clickHandler(e: Event): boolean | void;
+    /**
+     * Handles the selected-changed events bubbling up
+     * from child tree items
+     *
+     *  @internal
+     */
+    changeHandler(e: Event): boolean | void;
+    /**
+     * checks if there are any nested tree items
+     */
+    private getValidFocusableItem;
+    private getVisibleNodes;
+    /**
+     * Move focus to a tree item based on its offset from the provided item
+     */
+    private focusNextNode;
+    /** @internal */
+    handleDefaultSlotChange(): void;
+}

package/dist/esm/tree/tree.base.js

@@ -0,0 +1,237 @@
+import { __decorate } from "tslib";
+import { FASTElement, observable } from '@microsoft/fast-element';
+import { isHTMLElement, keyArrowDown, keyArrowLeft, keyArrowRight, keyArrowUp, keyEnd, keyEnter, keyHome, keySpace, } from '@microsoft/fast-web-utilities';
+import { isTreeItem } from '../tree-item/tree-item.options';
+export class BaseTree extends FASTElement {
+    constructor() {
+        super();
+        /**
+         * The currently selected tree item
+         * @public
+         */
+        this.currentSelected = null;
+        /**
+         * The tree item that is designated to be in the tab queue.
+         *
+         * @internal
+         */
+        this.currentFocused = null;
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        /** @internal */
+        this.childTreeItems = [];
+        this.elementInternals.role = 'tree';
+    }
+    /** @internal */
+    childTreeItemsChanged() {
+        this.updateCurrentSelected();
+    }
+    /**
+     * Updates current selected when slottedTreeItems changes
+     */
+    updateCurrentSelected() {
+        // force single selection
+        // defaults to first one found
+        const selectedItem = this.querySelector(`[selected]`);
+        this.currentSelected = selectedItem;
+        // invalidate the current focused item if it is no longer valid
+        if (this.currentFocused === null || !this.contains(this.currentFocused)) {
+            this.currentFocused = this.getValidFocusableItem();
+        }
+    }
+    /**
+     * KeyDown handler
+     *
+     *  @internal
+     */
+    keydownHandler(e) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        const item = e.target;
+        if (!isTreeItem(item) || this.childTreeItems.length < 1) {
+            return true;
+        }
+        const elements = this.getVisibleNodes();
+        switch (e.key) {
+            case keyHome: {
+                if (elements.length) {
+                    elements[0].focus();
+                }
+                return;
+            }
+            case keyEnd: {
+                if (elements.length) {
+                    elements[elements.length - 1].focus();
+                }
+                return;
+            }
+            case keyArrowLeft: {
+                if (item?.childTreeItems?.length && item.expanded) {
+                    item.expanded = false;
+                }
+                else if (isTreeItem(item.parentElement)) {
+                    item.parentElement.focus();
+                }
+                return;
+            }
+            case keyArrowRight: {
+                if (item?.childTreeItems?.length) {
+                    if (!item.expanded) {
+                        item.expanded = true;
+                    }
+                    else {
+                        this.focusNextNode(1, item);
+                    }
+                }
+                return;
+            }
+            case keyArrowDown: {
+                this.focusNextNode(1, item);
+                return;
+            }
+            case keyArrowUp: {
+                this.focusNextNode(-1, item);
+                return;
+            }
+            case keyEnter: {
+                // In single-select trees where selection does not follow focus (see note below),
+                // the default action is typically to select the focused node.
+                this.clickHandler(e);
+                return;
+            }
+            case keySpace: {
+                item.selected = true;
+                return;
+            }
+        }
+        // don't prevent default if we took no action
+        return true;
+    }
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    focusHandler(e) {
+        if (this.childTreeItems.length < 1) {
+            // no child items, nothing to do
+            return;
+        }
+        if (e.target === this) {
+            this.currentFocused = this.getValidFocusableItem();
+            if (this.currentFocused && this.currentFocused.tabIndex < 0) {
+                this.currentFocused.tabIndex = 0;
+            }
+            this.currentFocused?.focus();
+            return;
+        }
+        if (this.contains(e.target)) {
+            this.setAttribute('tabindex', '-1');
+            this.currentFocused = e.target;
+        }
+    }
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    blurHandler(e) {
+        if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
+            this.setAttribute('tabindex', '0');
+        }
+    }
+    /**
+     * Handles click events bubbling up
+     *
+     *  @internal
+     */
+    clickHandler(e) {
+        if (e.defaultPrevented) {
+            // handled, do nothing
+            return;
+        }
+        if (!isTreeItem(e.target)) {
+            // not a tree item, ignore
+            // return true, do not prevent default
+            return true;
+        }
+        const item = e.target;
+        item.toggleExpansion();
+        item.selected = true;
+    }
+    /**
+     * Handles the selected-changed events bubbling up
+     * from child tree items
+     *
+     *  @internal
+     */
+    changeHandler(e) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        if (!isTreeItem(e.target)) {
+            return true;
+        }
+        const item = e.target;
+        if (item.selected) {
+            // Deselect the prevously selected item
+            if (this.currentSelected && this.currentSelected !== item && isTreeItem(this.currentSelected)) {
+                this.currentSelected.selected = false;
+            }
+            // New selected item
+            this.currentSelected = item;
+        }
+        else if (!item.selected && this.currentSelected === item) {
+            // Selected item deselected
+            this.currentSelected = null;
+        }
+    }
+    /**
+     * checks if there are any nested tree items
+     */
+    getValidFocusableItem() {
+        const elements = this.getVisibleNodes();
+        // default to selected element if there is one
+        let focusIndex = elements.findIndex(el => el.selected);
+        if (focusIndex === -1) {
+            // otherwise first focusable tree item
+            focusIndex = elements.findIndex(el => isTreeItem(el));
+        }
+        if (focusIndex !== -1) {
+            return elements[focusIndex];
+        }
+        return null;
+    }
+    getVisibleNodes() {
+        return Array.from(this.querySelectorAll('*')).filter(node => isTreeItem(node) && node.offsetParent !== null);
+    }
+    /**
+     * Move focus to a tree item based on its offset from the provided item
+     */
+    focusNextNode(delta, item) {
+        const visibleNodes = this.getVisibleNodes();
+        if (!visibleNodes.length) {
+            return;
+        }
+        const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
+        if (isHTMLElement(focusItem)) {
+            focusItem.focus();
+        }
+    }
+    /** @internal */
+    handleDefaultSlotChange() {
+        this.childTreeItems = this.defaultSlot.assignedElements().filter(el => isTreeItem(el));
+    }
+}
+__decorate([
+    observable
+], BaseTree.prototype, "currentSelected", void 0);
+__decorate([
+    observable
+], BaseTree.prototype, "childTreeItems", void 0);
+//# sourceMappingURL=tree.base.js.map

package/dist/esm/tree/tree.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.base.js","sourceRoot":"","sources":["../../../src/tree/tree.base.ts"],"names":[],"mappings":"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"}

package/dist/esm/tree/tree.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/tree/tree.bench.js

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './tree.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const tree = document.createElement('fluent-tree');
+    return tree;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=tree.bench.js.map

package/dist/esm/tree/tree.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.bench.js","sourceRoot":"","sources":["../../../src/tree/tree.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACnD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/tree/tree.d.ts

@@ -0,0 +1,34 @@
+import { TreeItemAppearance, TreeItemSize } from '../tree-item/tree-item.options.js';
+import { BaseTree } from './tree.base.js';
+/**
+ * The Fluent Tree Element. Implements {@link @microsoft/fast-foundation#BaseTree}.
+ *
+ * @tag fluent-tree
+ *
+ */
+export declare class Tree extends BaseTree {
+    /**
+     * The size of the tree item element
+     * @public
+     * HTML Attribute: size
+     */
+    size: TreeItemSize;
+    protected sizeChanged(): void;
+    /**
+     * The appearance variants of the tree item element
+     * @public
+     * HTML Attribute: appearance
+     */
+    appearance: TreeItemAppearance;
+    protected appearanceChanged(): void;
+    /**
+     * child tree items supered change event
+     * @internal
+     */
+    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
+     */
+    updateSizeAndAppearance(): void;
+}

package/dist/esm/tree/tree.definition.d.ts

@@ -0,0 +1,8 @@
+import { Tree } from './tree.js';
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-tree\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tree>;

package/dist/esm/tree/tree.definition.js

@@ -0,0 +1,16 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Tree } from './tree.js';
+import { styles as treeStyle } from './tree.styles.js';
+import { template as treeTemplate } from './tree.template.js';
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-tree\>
+ */
+export const definition = Tree.compose({
+    name: `${FluentDesignSystem.prefix}-tree`,
+    template: treeTemplate,
+    styles: treeStyle,
+});
+//# sourceMappingURL=tree.definition.js.map

package/dist/esm/tree/tree.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.definition.js","sourceRoot":"","sources":["../../../src/tree/tree.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,OAAO;IACzC,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC"}

package/dist/esm/tree/tree.js

@@ -0,0 +1,61 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { TreeItemAppearance, TreeItemSize } from '../tree-item/tree-item.options.js';
+import { BaseTree } from './tree.base.js';
+/**
+ * The Fluent Tree Element. Implements {@link @microsoft/fast-foundation#BaseTree}.
+ *
+ * @tag fluent-tree
+ *
+ */
+export class Tree extends BaseTree {
+    constructor() {
+        super(...arguments);
+        /**
+         * The size of the tree item element
+         * @public
+         * HTML Attribute: size
+         */
+        this.size = TreeItemSize.small;
+        /**
+         * The appearance variants of the tree item element
+         * @public
+         * HTML Attribute: appearance
+         */
+        this.appearance = TreeItemAppearance.subtle;
+    }
+    sizeChanged() {
+        this.updateSizeAndAppearance();
+    }
+    appearanceChanged() {
+        this.updateSizeAndAppearance();
+    }
+    /**
+     * child tree items supered change event
+     * @internal
+     */
+    childTreeItemsChanged() {
+        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
+     */
+    updateSizeAndAppearance() {
+        if (!this.childTreeItems?.length) {
+            return;
+        }
+        this.childTreeItems.forEach(item => {
+            item.size = this.size;
+            item.appearance = this.appearance;
+        });
+    }
+}
+__decorate([
+    attr
+], Tree.prototype, "size", void 0);
+__decorate([
+    attr
+], Tree.prototype, "appearance", void 0);
+//# sourceMappingURL=tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/tree/tree.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C;;;;;GAKG;AACH,MAAM,OAAO,IAAK,SAAQ,QAAQ;IAAlC;;QACE;;;;WAIG;QAEI,SAAI,GAAiB,YAAY,CAAC,KAAK,CAAC;QAK/C;;;;WAIG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,MAAM,CAAC;IA4BpE,CAAC;IAtCW,WAAW;QACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IASS,iBAAiB;QACzB,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;;;OAGG;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;AAvCQ;IADN,IAAI;kCAC0C;AAWxC;IADN,IAAI;wCAC6D"}

package/dist/esm/tree/tree.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,10 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../utils/display.js';
+export const styles = css `
+  ${display('block')}
+
+  :host {
+    outline: none;
+  }
+`;
+//# sourceMappingURL=tree.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.styles.js","sourceRoot":"","sources":["../../../src/tree/tree.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;CAKnB,CAAC"}

package/dist/esm/tree/tree.template.d.ts

@@ -0,0 +1,2 @@
+import type { Tree } from './tree.js';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Tree, any>;