@fluentui/web-components 3.0.0-beta.118 → 3.0.0-beta.119

package/dist/web-components.js

@@ -2872,74 +2872,6 @@ function slotted(propertyOrOptions) {
   return new SlottedDirective(propertyOrOptions);
 }
 
-/**
- * The runtime behavior for child node observation.
- * @public
- */
-class ChildrenDirective extends NodeObservationDirective {
-  /**
-   * Creates an instance of ChildrenDirective.
-   * @param options - The options to use in configuring the child observation behavior.
-   */
-  constructor(options) {
-    super(options);
-    this.observerProperty = Symbol();
-    this.handleEvent = (mutations, observer) => {
-      const target = observer.target;
-      this.updateTarget(this.getSource(target), this.computeNodes(target));
-    };
-    options.childList = true;
-  }
-  /**
-   * Begins observation of the nodes.
-   * @param target - The target to observe.
-   */
-  observe(target) {
-    let observer = target[this.observerProperty];
-    if (!observer) {
-      observer = new MutationObserver(this.handleEvent);
-      observer.toJSON = noop;
-      target[this.observerProperty] = observer;
-    }
-    observer.target = target;
-    observer.observe(target, this.options);
-  }
-  /**
-   * Disconnects observation of the nodes.
-   * @param target - The target to unobserve.
-   */
-  disconnect(target) {
-    const observer = target[this.observerProperty];
-    observer.target = null;
-    observer.disconnect();
-  }
-  /**
-   * Retrieves the raw nodes that should be assigned to the source property.
-   * @param target - The target to get the node to.
-   */
-  getNodes(target) {
-    if ("selector" in this.options) {
-      return Array.from(target.querySelectorAll(this.options.selector));
-    }
-    return Array.from(target.childNodes);
-  }
-}
-HTMLDirective.define(ChildrenDirective);
-/**
- * A directive that observes the `childNodes` of an element and updates a property
- * whenever they change.
- * @param propertyOrOptions - The options used to configure child node observation.
- * @public
- */
-function children(propertyOrOptions) {
-  if (isString(propertyOrOptions)) {
-    propertyOrOptions = {
-      property: propertyOrOptions
-    };
-  }
-  return new ChildrenDirective(propertyOrOptions);
-}
-
 const booleanMode = "boolean";
 const reflectMode = "reflect";
 /**
@@ -13581,6 +13513,9 @@ class BaseTree extends FASTElement {
     }
     if (e.target === this) {
       this.currentFocused = this.getValidFocusableItem();
+      if (this.currentFocused && this.currentFocused.tabIndex < 0) {
+        this.currentFocused.tabIndex = 0;
+      }
       this.currentFocused?.focus();
       return;
     }
@@ -13719,12 +13654,13 @@ __decorateClass$2([attr], Tree.prototype, "appearance", 2);
 
 const styles$1 = css`
   ${display("block")}
+
   :host{outline:none}`;
 
-const template$1 = html`<template tabindex="0" @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)}" ${children({
+const template$1 = html`<template tabindex="0" @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)}"><slot ${slotted({
   property: "childTreeItems",
-  filter: node => isTreeItem(node)
-})}><slot></slot></template>`;
+  filter: elements(`${FluentDesignSystem.prefix}-tree-item`)
+})}></slot></template>`;
 
 const definition$1 = Tree.compose({
   name: `${FluentDesignSystem.prefix}-tree`,
@@ -13782,6 +13718,7 @@ class BaseTreeItem extends FASTElement {
    * @internal
    */
   selectedChanged(prev, next) {
+    this.updateTabindexBySelected();
     this.$emit("change");
     toggleState(this.elementInternals, "selected", next);
     this.elementInternals.ariaSelected = next ? "true" : "false";
@@ -13803,6 +13740,10 @@ class BaseTreeItem extends FASTElement {
     this.empty = this.childTreeItems?.length === 0;
     this.updateChildTreeItems();
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateTabindexBySelected();
+  }
   /**
    * Updates the childrens indent
    *
@@ -13843,6 +13784,11 @@ class BaseTreeItem extends FASTElement {
   get isNestedItem() {
     return isTreeItem(this.parentElement);
   }
+  updateTabindexBySelected() {
+    if (this.$fastController.isConnected) {
+      this.tabIndex = this.selected ? 0 : -1;
+    }
+  }
 }
 __decorateClass$1([attr({
   mode: "boolean"
@@ -13919,13 +13865,13 @@ const styles = css`
   ${display("block")}
 
   :host{outline:none;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host(:focus-visible) .positioning-region{box-shadow:${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalXXS}
-      ${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2};gap:${spacingHorizontalXS}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;gap:${spacingHorizontalXS}}.chevron{display:flex;align-items:center;flex-shrink:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.aside{display:flex;align-items:center}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}::slotted([slot='start']),::slotted([slot='end']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
+      ${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2};gap:${spacingHorizontalXS}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;gap:${spacingHorizontalXS}}.chevron{display:flex;align-items:center;flex-shrink:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.chevron svg{inline-size:12px;block-size:12px}.aside{display:flex;align-items:center}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}::slotted([slot='start']),::slotted([slot='end']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
 
-const chevronIcon = html`<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
-const template = html`<template tabindex="${x => x.selected ? 0 : -1}" slot="${x => x.isNestedItem ? "item" : void 0}" ${children({
+const chevronIcon = html`<svg viewBox="0 0 12 12" fill="currentColor"><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
+const template = html`<template slot="${x => x.isNestedItem ? "item" : void 0}"><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron" aria-hidden="true"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item" ${slotted({
   property: "childTreeItems",
-  filter: node => isTreeItem(node)
-})}><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item"></slot></div></template>`;
+  filter: elements(`${FluentDesignSystem.prefix}-tree-item`)
+})}></slot></div></template>`;
 
 const definition = TreeItem.compose({
   name: `${FluentDesignSystem.prefix}-tree-item`,