@fluentui/web-components 3.0.0-rc.13 → 3.0.0-rc.14

package/dist/web-components.js

@@ -4646,15 +4646,22 @@ function requestIdleCallback(callback, options) {
       didTimeout: options?.timeout ? Date.now() - start >= options.timeout : false,
       timeRemaining: () => 0
     });
-  }, 1);
+  }, options?.timeout ?? 1);
 }
 function waitForConnectedDescendants(target, callback, options) {
   const shallow = options?.shallow ?? false;
   const timeout = options?.timeout ?? 50;
+  const useIdleCallback = options?.idleCallback ?? false;
   const selector = `${shallow ? ":scope > " : ""}:not(:defined)`;
   const scheduleCheck = deadline => {
     if (target.querySelector(selector) === null || deadline && deadline.timeRemaining() <= 0) {
-      requestAnimationFrame(callback);
+      if (useIdleCallback) {
+        requestIdleCallback(callback, {
+          timeout
+        });
+      } else {
+        callback();
+      }
       return;
     }
     requestIdleCallback(scheduleCheck, {
@@ -4684,6 +4691,11 @@ var __decorateClass$M = (decorators, target, key, kind) => {
 class Accordion extends FASTElement {
   constructor() {
     super(...arguments);
+    /**
+     * Guard flag to prevent re-entrant calls to setSingleExpandMode.
+     * @internal
+     */
+    this._isAdjusting = false;
     this.activeItemIndex = 0;
     /**
      * Resets event listeners and sets the `accordionItems` property
@@ -4750,15 +4762,13 @@ class Accordion extends FASTElement {
       this.setSingleExpandMode(expandedItem);
       return;
     }
-    expandedItem?.expandbutton.removeAttribute("aria-disabled");
+    expandedItem?.expandbutton?.removeAttribute("aria-disabled");
   }
   /**
    * @internal
    */
   slottedAccordionItemsChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected) {
-      this.setItems();
-    }
+    this.setItems();
   }
   /**
    * Watch for changes to the slotted accordion items `disabled` and `expanded` attributes
@@ -4768,8 +4778,10 @@ class Accordion extends FASTElement {
     if (propertyName === "disabled") {
       this.setItems();
     } else if (propertyName === "expanded") {
-      if (source.expanded && this.isSingleExpandMode()) {
+      if (source.expanded && this.isSingleExpandMode() && !this._isAdjusting) {
+        this._isAdjusting = true;
         this.setSingleExpandMode(source);
+        this._isAdjusting = false;
       }
     }
   }
@@ -4796,33 +4808,29 @@ class Accordion extends FASTElement {
    * @returns {void}
    */
   setSingleExpandMode(expandedItem) {
-    requestAnimationFrame(() => {
-      if (this.accordionItems.length === 0) {
-        return;
-      }
-      const currentItems = Array.from(this.accordionItems);
-      this.activeItemIndex = currentItems.indexOf(expandedItem);
-      currentItems.forEach((item, index) => {
-        if (isAccordionItem(item)) {
-          if (this.activeItemIndex === index) {
-            item.expanded = true;
-            item.expandbutton.setAttribute("aria-disabled", "true");
-          } else {
-            item.expanded = false;
-            if (!item.hasAttribute("disabled")) {
-              item.expandbutton.removeAttribute("aria-disabled");
-            }
+    if (this.accordionItems.length === 0) {
+      return;
+    }
+    const currentItems = Array.from(this.accordionItems);
+    this.activeItemIndex = currentItems.indexOf(expandedItem);
+    currentItems.forEach((item, index) => {
+      if (isAccordionItem(item)) {
+        if (this.activeItemIndex === index) {
+          item.expanded = true;
+          item.expandbutton?.setAttribute("aria-disabled", "true");
+        } else {
+          item.expanded = false;
+          if (!item.hasAttribute("disabled")) {
+            item.expandbutton?.removeAttribute("aria-disabled");
           }
         }
-      });
+      }
     });
   }
   connectedCallback() {
     super.connectedCallback();
-    requestAnimationFrame(() => {
-      this.expandmode = this.expandmode || AccordionExpandMode.multi;
-      this.setItems();
-    });
+    this.expandmode = this.expandmode || AccordionExpandMode.multi;
+    this.setItems();
   }
 }
 __decorateClass$M([attr({
@@ -7346,6 +7354,11 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
+    /**
+     * Guard flag to prevent reentrant calls to `insertControl`.
+     * @internal
+     */
+    this._insertingControl = false;
     this.elementInternals.role = "presentation";
   }
   get activeDescendant() {
@@ -7440,7 +7453,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
       const notifier = Observable.getNotifier(this);
       notifier.subscribe(next);
       notifier.notify("multiple");
-      Updates.enqueue(() => {
+      waitForConnectedDescendants(next, () => {
         this.options.forEach(option => {
           option.disabled = option.disabledAttribute || this.disabled;
           option.name = this.name;
@@ -7449,6 +7462,8 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
           x.selected = this.multiple || i === 0;
         });
         this.setValidity();
+      }, {
+        idleCallback: true
       });
       if (AnchorPositioningCSSSupported) {
         const anchorName = uniqueId("--dropdown-anchor-");
@@ -7792,12 +7807,17 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
    * This method can be overridden in derived classes to provide custom control elements, though this is not recommended.
    */
   insertControl() {
+    if (this._insertingControl) {
+      return;
+    }
+    this._insertingControl = true;
     this.controlSlot?.assignedNodes().forEach(x => this.removeChild(x));
     if (this.type === DropdownType.combobox) {
       dropdownInputTemplate.render(this, this);
       return;
     }
     dropdownButtonTemplate.render(this, this);
+    this._insertingControl = false;
   }
   /**
    * Handles the keydown events for the dropdown.
@@ -7896,7 +7916,9 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
    */
   selectOption(index = this.selectedIndex, shouldEmit = false) {
     this.listbox.selectOption(index);
-    this.control.value = this.displayValue;
+    if (this.control) {
+      this.control.value = this.displayValue;
+    }
     this.setValidity();
     this.updateFreeformOption();
     if (shouldEmit) {
@@ -7913,17 +7935,18 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
    * @internal
    */
   setValidity(flags, message, anchor) {
-    if (this.$fastController.isConnected) {
-      if (this.disabled || !this.required) {
-        this.elementInternals.setValidity({});
-        return;
-      }
-      const valueMissing = this.required && this.listbox.selectedOptions.length === 0;
-      this.elementInternals.setValidity({
-        valueMissing,
-        ...flags
-      }, message ?? this.validationMessage, anchor ?? this.control);
+    if (!this.elementInternals) {
+      return;
     }
+    if (this.disabled || !this.required) {
+      this.elementInternals.setValidity({});
+      return;
+    }
+    const valueMissing = this.required && this.listbox.selectedOptions.length === 0;
+    this.elementInternals.setValidity({
+      valueMissing,
+      ...flags
+    }, message ?? this.validationMessage, anchor ?? this.control);
   }
   /**
    * Handles the `slotchange` event for the dropdown.
@@ -8085,7 +8108,7 @@ __decorateClass$w([attr], Dropdown.prototype, "size", 2);
 const styles$q = css`
   ${display("inline-flex")}
 
-  :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){color:GrayText}`;
+  :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted(:not([slot]):not([popover])),::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){color:GrayText}`;
 
 const definition$r = Dropdown.compose({
   name: `${FluentDesignSystem.prefix}-dropdown`,
@@ -9276,7 +9299,33 @@ class Menu extends FASTElement {
    * @internal
    */
   slottedMenuListChanged(prev, next) {
-    this.setComponent();
+    this._menuListAbortController?.abort();
+    if (!next?.length) {
+      return;
+    }
+    this._menuList = next[0];
+    this._menuList.popover = this.openOnContext ? "manual" : "";
+    this.addMenuListListeners();
+  }
+  /**
+   * Ensures the trigger is properly set up when the slotted triggers change.
+   * This includes setting ARIA attributes and adding event listeners based on the current property values.
+   *
+   * @param prev - The previous items in the slotted triggers list.
+   * @param next - The current items in the slotted triggers list.
+   * @internal
+   */
+  slottedTriggersChanged(prev, next) {
+    this._triggerAbortController?.abort();
+    if (next?.length) {
+      const trigger = next[0];
+      this._trigger = trigger;
+      if (this._trigger?.isConnected) {
+        this._trigger.setAttribute("aria-haspopup", "true");
+        this._trigger.setAttribute("aria-expanded", `${this._open}`);
+        this.addTriggerListeners();
+      }
+    }
   }
   /**
    * Called when the element is connected to the DOM.
@@ -9294,32 +9343,16 @@ class Menu extends FASTElement {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeListeners();
+    this._triggerAbortController?.abort();
+    this._menuListAbortController?.abort();
   }
   /**
    * Sets the component.
-   * Sets the trigger and menu list elements and adds event listeners.
+   * @deprecated This method is no longer used. Trigger and menu-list listeners are now
+   * managed by their respective slot-changed callbacks.
    * @public
    */
-  setComponent() {
-    waitForConnectedDescendants(this, () => {
-      const trigger = this.slottedTriggers?.[0];
-      const menuList = this.slottedMenuList?.[0];
-      if (!trigger || !menuList) {
-        this.removeListeners();
-        return;
-      }
-      this._trigger = trigger;
-      this._menuList = menuList;
-      this._trigger.setAttribute("aria-haspopup", "true");
-      this._trigger.setAttribute("aria-expanded", `${this._open}`);
-      this._menuList.setAttribute("popover", this.openOnContext ? "manual" : "");
-      this.removeListeners();
-      this.addListeners();
-    }, {
-      shallow: true
-    });
-  }
+  setComponent() {}
   /**
    * Focuses on the menu list.
    * @public
@@ -9347,10 +9380,9 @@ class Menu extends FASTElement {
    * @public
    */
   openOnHoverChanged(oldValue, newValue) {
-    if (newValue) {
-      this._trigger?.addEventListener("mouseover", this.openMenu);
-    } else {
-      this._trigger?.removeEventListener("mouseover", this.openMenu);
+    if (this._trigger) {
+      this._triggerAbortController?.abort();
+      this.addTriggerListeners();
     }
   }
   /**
@@ -9361,10 +9393,9 @@ class Menu extends FASTElement {
    * @param newValue - The new value of 'persistOnItemClick'.
    */
   persistOnItemClickChanged(oldValue, newValue) {
-    if (!newValue) {
-      this._menuList?.addEventListener("change", this.closeMenu);
-    } else {
-      this._menuList?.removeEventListener("change", this.closeMenu);
+    if (this._menuList) {
+      this._menuListAbortController?.abort();
+      this.addMenuListListeners();
     }
   }
   /**
@@ -9376,9 +9407,13 @@ class Menu extends FASTElement {
    */
   openOnContextChanged(oldValue, newValue) {
     if (newValue) {
-      this._trigger?.addEventListener("contextmenu", this.openMenu);
+      this._menuList?.setAttribute("popover", "manual");
     } else {
-      this._trigger?.removeEventListener("contextmenu", this.openMenu);
+      this._menuList?.setAttribute("popover", "");
+    }
+    if (this._trigger) {
+      this._triggerAbortController?.abort();
+      this.addTriggerListeners();
     }
   }
   /**
@@ -9396,50 +9431,50 @@ class Menu extends FASTElement {
     }
   }
   /**
-   * Adds event listeners.
-   * Adds click and keydown event listeners to the trigger.
-   * Adds a 'toggle' event listener to the menu list.
-   * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-   * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
+   * Adds trigger-related event listeners.
    * @internal
    */
-  addListeners() {
-    this._menuList?.addEventListener("toggle", this.toggleHandler);
-    this._trigger?.addEventListener("keydown", this.triggerKeydownHandler);
-    if (!this.persistOnItemClick) {
-      this._menuList?.addEventListener("change", this.closeMenu);
-    }
+  addTriggerListeners() {
+    this._triggerAbortController = new AbortController();
+    const {
+      signal
+    } = this._triggerAbortController;
+    this._trigger?.addEventListener("keydown", this.triggerKeydownHandler, {
+      signal
+    });
     if (this.openOnHover) {
-      this._trigger?.addEventListener("mouseover", this.openMenu);
+      this._trigger?.addEventListener("mouseover", this.openMenu, {
+        signal
+      });
     } else if (this.openOnContext) {
-      this._trigger?.addEventListener("contextmenu", this.openMenu);
-      document.addEventListener("click", this.documentClickHandler);
+      this._trigger?.addEventListener("contextmenu", this.openMenu, {
+        signal
+      });
+      document.addEventListener("click", this.documentClickHandler, {
+        signal
+      });
     } else {
-      this._trigger?.addEventListener("click", this.toggleMenu);
+      this._trigger?.addEventListener("click", this.toggleMenu, {
+        signal
+      });
     }
   }
   /**
-   * Removes event listeners.
-   * Removes click and keydown event listeners from the trigger.
-   * Also removes toggle event listener from the menu list.
-   * Also removes 'mouseover' event listeners from the trigger.
-   * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
+   * Adds menu-list event listeners.
    * @internal
    */
-  removeListeners() {
-    this._menuList?.removeEventListener("toggle", this.toggleHandler);
-    this._trigger?.removeEventListener("keydown", this.triggerKeydownHandler);
+  addMenuListListeners() {
+    this._menuListAbortController = new AbortController();
+    const {
+      signal
+    } = this._menuListAbortController;
+    this._menuList?.addEventListener("toggle", this.toggleHandler, {
+      signal
+    });
     if (!this.persistOnItemClick) {
-      this._menuList?.removeEventListener("change", this.closeMenu);
-    }
-    if (this.openOnHover) {
-      this._trigger?.removeEventListener("mouseover", this.openMenu);
-    }
-    if (this.openOnContext) {
-      this._trigger?.removeEventListener("contextmenu", this.openMenu);
-      document.removeEventListener("click", this.documentClickHandler);
-    } else {
-      this._trigger?.removeEventListener("click", this.toggleMenu);
+      this._menuList?.addEventListener("change", this.closeMenu, {
+        signal
+      });
     }
   }
   /**
@@ -11746,9 +11781,9 @@ class BaseTablist extends FASTElement {
     });
   }
   getTabIds() {
-    return this.tabs.map(tab => {
+    return this.tabs?.map(tab => {
       return tab.getAttribute("id") ?? `tab-${uniqueId$1()}`;
-    });
+    }) ?? [];
   }
   setComponent() {
     if (this.activeTabIndex !== this.prevActiveTabIndex) {
@@ -11793,6 +11828,8 @@ class BaseTablist extends FASTElement {
     waitForConnectedDescendants(this, () => {
       this.tabIds = this.getTabIds();
       this.setTabs();
+    }, {
+      shallow: true
     });
   }
 }