@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.30

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

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './tree.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const tree = document.createElement('fluent-tree');
     return tree;

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

@@ -1 +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"}
+{"version":3,"file":"tree.bench.js","sourceRoot":"","sources":["../../../src/tree/tree.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,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

@@ -9,26 +9,37 @@ import { BaseTree } from './tree.base.js';
 export declare class Tree extends BaseTree {
     /**
      * The size of the tree item element
-     * @public
+     * The size of the tree item element
+     *
      * HTML Attribute: size
+     *
+     * @public
      */
     size: TreeItemSize;
     protected sizeChanged(): void;
     /**
      * The appearance variants of the tree item element
-     * @public
+     * The appearance variants of the tree item element
+     *
      * HTML Attribute: appearance
+     *
+     * @public
      */
     appearance: TreeItemAppearance;
     protected appearanceChanged(): void;
+    private fg?;
+    private fgItems?;
     /**
      * child tree items supered change event
      * @internal
      */
     childTreeItemsChanged(): void;
+    disconnectedCallback(): 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;
+    /** @internal */
+    itemToggleHandler(): void;
 }

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

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-tree element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

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

@@ -0,0 +1,14 @@
+import { tagName } from './tree.options.js';
+/**
+ * The async definition configuration for the fluent-tree element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=tree.definition-async.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.definition-async.js","sourceRoot":"","sources":["../../../src/tree/tree.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

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

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

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

@@ -1,16 +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';
+import { tagName } from './tree.options.js';
+import { styles } from './tree.styles.js';
+import { template } from './tree.template.js';
 /**
+ * The definition for the `<fluent-tree>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-tree\>
  */
-export const definition = Tree.compose({
-    name: `${FluentDesignSystem.prefix}-tree`,
-    template: treeTemplate,
-    styles: treeStyle,
-});
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    styles,
+    template,
+};
 //# sourceMappingURL=tree.definition.js.map

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

@@ -1 +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"}
+{"version":3,"file":"tree.definition.js","sourceRoot":"","sources":["../../../src/tree/tree.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

package/dist/esm/tree/tree.js

@@ -1,6 +1,8 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
+import { FocusGroup } from '@microsoft/focusgroup-polyfill/shadowless';
 import { TreeItemAppearance, TreeItemSize } from '../tree-item/tree-item.options.js';
+import { ArrayItemCollection } from '../utils/focusgroup.js';
 import { BaseTree } from './tree.base.js';
 /**
  * The Fluent Tree Element. Implements {@link @microsoft/fast-foundation#BaseTree}.
@@ -13,14 +15,20 @@ export class Tree extends BaseTree {
         super(...arguments);
         /**
          * The size of the tree item element
-         * @public
+         * The size of the tree item element
+         *
          * HTML Attribute: size
+         *
+         * @public
          */
         this.size = TreeItemSize.small;
         /**
          * The appearance variants of the tree item element
-         * @public
+         * The appearance variants of the tree item element
+         *
          * HTML Attribute: appearance
+         *
+         * @public
          */
         this.appearance = TreeItemAppearance.subtle;
     }
@@ -37,6 +45,23 @@ export class Tree extends BaseTree {
     childTreeItemsChanged() {
         super.childTreeItemsChanged();
         this.updateSizeAndAppearance();
+        this.fgItems ??= new ArrayItemCollection(() => this.descendantTreeItems.filter(i => !i.isHidden), () => this.currentSelected ?? null);
+        if (!this.fg) {
+            this.fg = new FocusGroup(this, this.fgItems, {
+                definition: {
+                    behavior: 'menu',
+                    axis: undefined,
+                    memory: false,
+                },
+            });
+        }
+        else {
+            this.fg.update();
+        }
+    }
+    disconnectedCallback() {
+        this.fg?.disconnect();
+        super.disconnectedCallback();
     }
     /**
      * 1. Update the child items' size based on the tree's size
@@ -51,6 +76,10 @@ export class Tree extends BaseTree {
             item.appearance = this.appearance;
         });
     }
+    /** @internal */
+    itemToggleHandler() {
+        this.fg?.update();
+    }
 }
 __decorate([
     attr

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

@@ -1 +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"}
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/tree/tree.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C;;;;;GAKG;AACH,MAAM,OAAO,IAAK,SAAQ,QAAQ;IAAlC;;QACE;;;;;;;WAOG;QAEI,SAAI,GAAiB,YAAY,CAAC,KAAK,CAAC;QAK/C;;;;;;;WAOG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,MAAM,CAAC;IA2DpE,CAAC;IAxEW,WAAW;QACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAYS,iBAAiB;QACzB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAMD;;;OAGG;IACI,qBAAqB;QAC1B,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAE9B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,IAAI,CAAC,OAAO,KAAK,IAAI,mBAAmB,CACtC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAe,EACrE,GAAG,EAAE,CAAE,IAAI,CAAC,eAAmC,IAAI,IAAI,CACxD,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACb,IAAI,CAAC,EAAE,GAAG,IAAI,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE;gBAC3C,UAAU,EAAE;oBACV,QAAQ,EAAE,MAAM;oBAChB,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,KAAK;iBACd;aACF,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC;QACtB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,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;IAED,gBAAgB;IACT,iBAAiB;QACtB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC;IACpB,CAAC;CACF;AAzEQ;IADN,IAAI;kCAC0C;AAcxC;IADN,IAAI;wCAC6D"}

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

@@ -0,0 +1,6 @@
+/**
+ * The tag name for the tree element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-tree";

package/dist/esm/tree/tree.options.js

@@ -0,0 +1,8 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+/**
+ * The tag name for the tree element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-tree`;
+//# sourceMappingURL=tree.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.options.js","sourceRoot":"","sources":["../../../src/tree/tree.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,OAAgB,CAAC"}

package/dist/esm/tree/tree.styles.css

@@ -0,0 +1,10 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: block;
+}
+
+:host {
+  outline: none;
+}

package/dist/esm/tree/tree.template.html

@@ -0,0 +1,13 @@
+<f-template name="fluent-tree" shadowrootmode="open">
+  <template
+    tabindex="0"
+    focusgroup="menu inline block nowrap nomemory"
+    @click="{clickHandler($e)}"
+    @keydown="{keydownHandler($e)}"
+    @change="{changeHandler($e)}"
+    @toggle="{itemToggleHandler()}"
+  >
+    {{styles}}
+    <slot f-ref="{defaultSlot}" @slotchange="{handleDefaultSlotChange()}"></slot>
+  </template>
+</f-template>

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

@@ -2,11 +2,11 @@ import { html, ref } from '@microsoft/fast-element';
 export const template = html `
   <template
     tabindex="0"
+    focusgroup="menu inline block nowrap nomemory"
     @click="${(x, c) => x.clickHandler(c.event)}"
-    @focusin="${(x, c) => x.focusHandler(c.event)}"
-    @focusout="${(x, c) => x.blurHandler(c.event)}"
     @keydown="${(x, c) => x.keydownHandler(c.event)}"
     @change="${(x, c) => x.changeHandler(c.event)}"
+    @toggle="${(x, c) => x.itemToggleHandler()}"
   >
     <slot ${ref('defaultSlot')} @slotchange="${x => x.handleDefaultSlotChange()}"></slot>
   </template>

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

@@ -1 +1 @@
-{"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;;cAGpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC/B,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;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;eACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;YAErC,GAAG,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB,EAAE;;CAE9E,CAAC"}
+{"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;;;cAIpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;eACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;eAClC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;;YAElC,GAAG,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB,EAAE;;CAE9E,CAAC"}

package/dist/esm/tree-item/define-async.d.ts

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

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

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './tree-item.definition-async.js';
+import { TreeItem } from './tree-item.js';
+RenderableFASTElement(TreeItem).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/tree-item/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,qBAAqB,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/tree-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/tree-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

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

@@ -4,3 +4,4 @@ export { template as TreeItemTemplate } from './tree-item.template.js';
 export { styles as TreeItemStyles } from './tree-item.styles.js';
 export { definition as TreeItemDefinition } from './tree-item.definition.js';
 export type { isTreeItem, TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
+export { tagName as TreeItemTagName } from './tree-item.options.js';

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

@@ -3,4 +3,5 @@ export { TreeItem } from './tree-item.js';
 export { template as TreeItemTemplate } from './tree-item.template.js';
 export { styles as TreeItemStyles } from './tree-item.styles.js';
 export { definition as TreeItemDefinition } from './tree-item.definition.js';
+export { tagName as TreeItemTagName } from './tree-item.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -1,4 +1,13 @@
 import { FASTElement } from '@microsoft/fast-element';
+/**
+ * Base class for Tree Item Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li | `<li>`} element.
+ *
+ * @fires { ToggleEvent } toggle - Fires when the expanded state changes
+ * @fires { Event } change - Fires when the selected state changes
+ *
+ * @public
+ */
 export declare class BaseTreeItem extends FASTElement {
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
@@ -8,11 +17,22 @@ export declare class BaseTreeItem extends FASTElement {
     elementInternals: ElementInternals;
     /** @internal */
     itemSlot: HTMLSlotElement;
+    /**
+     * Calls the slot change handler when the `itemSlot` reference is updated
+     * by the template binding.
+     *
+     * @internal
+     */
+    itemSlotChanged(): void;
     constructor();
+    connectedCallback(): void;
     /**
      * When true, the control will be appear expanded by user interaction.
-     * @public
+     * When true, the control will be appear expanded by user interaction.
+     *
      * HTML Attribute: `expanded`
+     *
+     * @public
      */
     expanded: boolean;
     /**
@@ -40,8 +60,11 @@ export declare class BaseTreeItem extends FASTElement {
     protected selectedChanged(prev: boolean, next: boolean): void;
     /**
      * When true, the control has no child tree items
-     * @public
+     * When true, the control has no child tree items
+     *
      * HTML Attribute: empty
+     *
+     * @public
      */
     empty: boolean;
     private styles;
@@ -60,7 +83,6 @@ export declare class BaseTreeItem extends FASTElement {
      * @public
      */
     childTreeItemsChanged(): void;
-    connectedCallback(): void;
     /**
      * Updates the childrens indent
      *
@@ -78,11 +100,15 @@ export declare class BaseTreeItem extends FASTElement {
      */
     toggleExpansion(): void;
     /**
-     * Whether the tree is nested
+     * Whether the tree item is nested
      * @internal
      */
     get isNestedItem(): boolean;
-    protected updateTabindexBySelected(): void;
+    /**
+     * Whether the tree item is nested in a collapsed tree item.
+     * @internal
+     */
+    get isHidden(): boolean;
     /** @internal */
     handleItemSlotChange(): void;
 }

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

@@ -1,8 +1,27 @@
 import { __decorate } from "tslib";
 import { attr, css, FASTElement, observable } from '@microsoft/fast-element';
 import { toggleState } from '../utils/element-internals.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 import { isTreeItem } from './tree-item.options.js';
+/**
+ * Base class for Tree Item Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li | `<li>`} element.
+ *
+ * @fires { ToggleEvent } toggle - Fires when the expanded state changes
+ * @fires { Event } change - Fires when the selected state changes
+ *
+ * @public
+ */
 export class BaseTreeItem extends FASTElement {
+    /**
+     * Calls the slot change handler when the `itemSlot` reference is updated
+     * by the template binding.
+     *
+     * @internal
+     */
+    itemSlotChanged() {
+        this.handleItemSlotChange();
+    }
     constructor() {
         super();
         /**
@@ -13,27 +32,34 @@ export class BaseTreeItem extends FASTElement {
         this.elementInternals = this.attachInternals();
         /**
          * When true, the control will be appear expanded by user interaction.
-         * @public
+         * When true, the control will be appear expanded by user interaction.
+         *
          * HTML Attribute: `expanded`
-         */
-        this.expanded = false;
-        /**
-         * When true, the control will appear selected by user interaction.
+         *
          * @public
-         * @remarks
-         * HTML Attribute: selected
          */
-        this.selected = false;
+        this.expanded = false;
         /**
          * When true, the control has no child tree items
-         * @public
+         * When true, the control has no child tree items
+         *
          * HTML Attribute: empty
+         *
+         * @public
          */
         this.empty = false;
         /** @internal */
         this.childTreeItems = [];
         this.elementInternals.role = 'treeitem';
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIndex = Number(this.getAttribute('tabindex') || '0');
+        if (isTreeItem(this.parentElement)) {
+            this.slot ||= 'item';
+        }
+        maybeSetAutoFocus(this);
+    }
     /**
      * Handles changes to the expanded attribute
      * @param prev - the previous state
@@ -47,8 +73,24 @@ export class BaseTreeItem extends FASTElement {
             newState: next ? 'open' : 'closed',
         });
         toggleState(this.elementInternals, 'expanded', next);
-        if (this.childTreeItems && this.childTreeItems.length > 0) {
+        if (this.childTreeItems?.length) {
             this.elementInternals.ariaExpanded = next ? 'true' : 'false';
+            // Update focusgroup attributes after subtree show/hide rendering is done.
+            requestAnimationFrame(() => {
+                const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT, node => isTreeItem(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);
+                while (walker.nextNode()) {
+                    const item = walker.currentNode;
+                    if (next) {
+                        item.removeAttribute('focusgroup');
+                    }
+                    else {
+                        if (item.selected) {
+                            item.selected = false;
+                        }
+                        item.setAttribute('focusgroup', 'none');
+                    }
+                }
+            });
         }
     }
     /**
@@ -59,10 +101,11 @@ export class BaseTreeItem extends FASTElement {
      * @internal
      */
     selectedChanged(prev, next) {
-        this.updateTabindexBySelected();
         this.$emit('change');
-        toggleState(this.elementInternals, 'selected', next);
-        this.elementInternals.ariaSelected = next ? 'true' : 'false';
+        if (this.elementInternals) {
+            toggleState(this.elementInternals, 'selected', next);
+            this.elementInternals.ariaSelected = next ? 'true' : 'false';
+        }
     }
     dataIndentChanged(prev, next) {
         if (this.styles !== undefined) {
@@ -84,10 +127,6 @@ export class BaseTreeItem extends FASTElement {
         this.empty = this.childTreeItems?.length === 0;
         this.updateChildTreeItems();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateTabindexBySelected();
-    }
     /**
      * Updates the childrens indent
      *
@@ -123,16 +162,25 @@ export class BaseTreeItem extends FASTElement {
         }
     }
     /**
-     * Whether the tree is nested
+     * Whether the tree item is nested
      * @internal
      */
     get isNestedItem() {
         return isTreeItem(this.parentElement);
     }
-    updateTabindexBySelected() {
-        if (this.$fastController.isConnected) {
-            this.tabIndex = this.selected ? 0 : -1;
+    /**
+     * Whether the tree item is nested in a collapsed tree item.
+     * @internal
+     */
+    get isHidden() {
+        let parent = this.parentElement;
+        while (isTreeItem(parent)) {
+            if (!parent.expanded) {
+                return true;
+            }
+            parent = parent.parentElement;
         }
+        return false;
     }
     /** @internal */
     handleItemSlotChange() {

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

@@ -1 +1 @@
-{"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAsB,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;GAQG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAY3C;;;;;OAKG;IACI,eAAe;QACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAtBV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAiCnE;;;;;;;WAOG;QAEH,aAAQ,GAAY,KAAK,CAAC;QA8D1B;;;;;;;WAOG;QAEI,UAAK,GAAY,KAAK,CAAC;QA0B9B,gBAAgB;QAET,mBAAc,GAA+B,EAAE,CAAC;QA3HrD,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,UAAU,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,CAAC;QAE7D,IAAI,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACvB,CAAC;QAED,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAaD;;;;;;OAMG;IACI,eAAe,CAAC,IAAa,EAAE,IAAa;QACjD,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACnB,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;YAClC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SACnC,CAAC,CAAC;QACH,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;QACrD,IAAI,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YAChC,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YAC7D,0EAA0E;YAC1E,qBAAqB,CAAC,GAAG,EAAE;gBACzB,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,CAC7E,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CACrE,CAAC;gBACF,OAAO,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;oBACzB,MAAM,IAAI,GAAG,MAAM,CAAC,WAA2B,CAAC;oBAChD,IAAI,IAAI,EAAE,CAAC;wBACT,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;oBACrC,CAAC;yBAAM,CAAC;wBACN,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;4BAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;wBACxB,CAAC;wBACD,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;oBAC1C,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAWD;;;;;;OAMG;IACO,eAAe,CAAC,IAAa,EAAE,IAAa;QACpD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAErB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;YACrD,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC/D,CAAC;IACH,CAAC;IAuBS,iBAAiB,CAAC,IAAY,EAAE,IAAY;QACpD,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAC9B,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA;;oBAED,IAAW;;KAE1B,CAAC;QAEF,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;IAMD;;;;OAIG;IACI,qBAAqB;QAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,KAAK,CAAC,CAAC;QAC/C,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACI,oBAAoB;QACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,8GAA8G;QAC9G,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7F,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,SAAS,CAAC,IAAkB;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,CAAC,CAAC;IAC/B,CAAC;IAED;;;;OAIG;IACI,eAAe;QACpB,IAAI,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,IAAI,YAAY;QACd,OAAO,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACxC,CAAC;IAED;;;OAGG;IACH,IAAI,QAAQ;QACV,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,OAAO,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACrB,OAAO,IAAI,CAAC;YACd,CAAC;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,gBAAgB;IACT,oBAAoB;QACzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;IACtF,CAAC;CACF;AAvNQ;IADN,UAAU;8CACuB;AAsClC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACA;AA4C1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACP;AA2BZ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACI;AAUvB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;gDACI;AAkBhC;IADN,UAAU;oDAC4C"}

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

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

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

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './tree-item.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const treeItem = document.createElement('fluent-tree-item');
     return treeItem;

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

@@ -1 +1 @@
-{"version":3,"file":"tree-item.bench.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"tree-item.bench.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

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

@@ -5,6 +5,21 @@ import { TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
  *
  * @tag fluent-tree-item
  *
+ * @slot - The default slot. Accepts the content of the tree item.
+ * @slot start - Content shown before the item label.
+ * @slot end - Content shown after the item label.
+ * @slot aside - Content shown at the far end of the row.
+ * @slot item - Child tree items.
+ *
+ * @csspart positioning-region - The container for item content and aside regions.
+ * @csspart content - The item content region.
+ * @csspart chevron - The expand/collapse indicator region.
+ * @csspart aside - The trailing aside region.
+ * @csspart items - The child items group region.
+ *
+ * @fires { ToggleEvent } toggle - Fired when expanded state toggles.
+ * @fires { Event } change - Fired when selected state changes.
+ *
  */
 export declare class TreeItem extends BaseTreeItem {
     /**

package/dist/esm/tree-item/tree-item.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-tree-item element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;