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

package/dist/web-components.d.ts

@@ -3431,7 +3431,7 @@ declare class BaseTreeItem extends FASTElement {
      * @public
      */
     dataIndent: number | undefined;
-    private dataIndentChanged;
+    protected dataIndentChanged(prev: number, next: number): void;
     childTreeItems: BaseTreeItem[] | undefined;
     /**
      * Handles changes to the child tree items
@@ -3439,6 +3439,7 @@ declare class BaseTreeItem extends FASTElement {
      * @public
      */
     childTreeItemsChanged(): void;
+    connectedCallback(): void;
     /**
      * Updates the childrens indent
      *
@@ -3460,6 +3461,7 @@ declare class BaseTreeItem extends FASTElement {
      * @internal
      */
     get isNestedItem(): boolean;
+    protected updateTabindexBySelected(): void;
 }
 
 /**
@@ -11199,14 +11201,14 @@ export declare class Tree extends BaseTree {
      * HTML Attribute: size
      */
     size: TreeItemSize;
-    private sizeChanged;
+    protected sizeChanged(): void;
     /**
      * The appearance variants of the tree item element
      * @public
      * HTML Attribute: appearance
      */
     appearance: TreeItemAppearance;
-    private appearanceChanged;
+    protected appearanceChanged(): void;
     /**
      * child tree items supered change event
      * @internal
@@ -11244,7 +11246,7 @@ export declare class TreeItem extends BaseTreeItem {
      * we update the child tree items' size based on the size
      *  @internal
      */
-    private sizeChanged;
+    protected sizeChanged(): void;
     /**
      * The size of the tree item element
      * @public
@@ -11255,7 +11257,7 @@ export declare class TreeItem extends BaseTreeItem {
      *
      * @internal
      */
-    private appearanceChanged;
+    protected appearanceChanged(): void;
     /**
      * child tree items supered change event
      * @internal

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";
 /**
@@ -8547,6 +8479,12 @@ const MenuItemRole = {
   [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
+function isMenuItem(element, tagName = "-menu-item") {
+  if (element?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  return element.tagName.toLowerCase().endsWith(tagName);
+}
 
 var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
@@ -8870,7 +8808,7 @@ const _MenuList = class _MenuList extends FASTElement {
      * check if the item is a menu item
      */
     this.isMenuItemElement = el => {
-      return el instanceof MenuItem || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
+      return isMenuItem(el) || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
     };
     /**
      * check if the item is focusable
@@ -8970,9 +8908,7 @@ const _MenuList = class _MenuList extends FASTElement {
       return Math.max(accum, elementValue);
     }, 0);
     filteredMenuListItems?.forEach(item => {
-      if (item instanceof MenuItem) {
-        item.setAttribute("data-indent", `${indent}`);
-      }
+      item.dataset.indent = `${indent}`;
     });
   }
   /**
@@ -11901,7 +11837,7 @@ class BaseTablist extends FASTElement {
    */
   setTabs() {
     this.activeTabIndex = this.getActiveIndex();
-    const hasStartSlot = this.tabs.some(tab => tab.start.assignedNodes().length > 0);
+    const hasStartSlot = this.tabs.some(tab => !!tab.querySelector("[slot='start']"));
     this.tabs.forEach((tab, index) => {
       if (tab.slot === "tab") {
         const isActiveTab = this.activeTabIndex === index && isFocusableElement(tab);
@@ -13577,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;
     }
@@ -13715,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`,
@@ -13778,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";
@@ -13799,6 +13740,10 @@ class BaseTreeItem extends FASTElement {
     this.empty = this.childTreeItems?.length === 0;
     this.updateChildTreeItems();
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateTabindexBySelected();
+  }
   /**
    * Updates the childrens indent
    *
@@ -13839,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"
@@ -13915,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`,