@fluentui/web-components 2.2.2 → 2.3.1

package/dist/web-components.js

@@ -3405,7 +3405,10 @@ class ArrayObserver extends SubscriberSet {
     this.splices = void 0;
     this.needsQueue = true;
     this.call = this.flush;
-    source.$fastController = this;
+    Reflect.defineProperty(source, "$fastController", {
+      value: this,
+      enumerable: false
+    });
   }
 
   addSplice(splice) {
@@ -3469,16 +3472,26 @@ function enableArrayObservation() {
   Observable.setArrayObserverFactory(collection => {
     return new ArrayObserver(collection);
   });
-  const arrayProto = Array.prototype;
-  const pop = arrayProto.pop;
-  const push = arrayProto.push;
-  const reverse = arrayProto.reverse;
-  const shift = arrayProto.shift;
-  const sort = arrayProto.sort;
-  const splice = arrayProto.splice;
-  const unshift = arrayProto.unshift;
-
-  arrayProto.pop = function () {
+  const proto = Array.prototype; // Don't patch Array if it has already been patched
+  // by another copy of fast-element.
+
+  if (proto.$fastPatch) {
+    return;
+  }
+
+  Reflect.defineProperty(proto, "$fastPatch", {
+    value: 1,
+    enumerable: false
+  });
+  const pop = proto.pop;
+  const push = proto.push;
+  const reverse = proto.reverse;
+  const shift = proto.shift;
+  const sort = proto.sort;
+  const splice = proto.splice;
+  const unshift = proto.unshift;
+
+  proto.pop = function () {
     const notEmpty = this.length > 0;
     const methodCallResult = pop.apply(this, arguments);
     const o = this.$fastController;
@@ -3490,7 +3503,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.push = function () {
+  proto.push = function () {
     const methodCallResult = push.apply(this, arguments);
     const o = this.$fastController;
 
@@ -3501,7 +3514,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.reverse = function () {
+  proto.reverse = function () {
     let oldArray;
     const o = this.$fastController;
 
@@ -3519,7 +3532,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.shift = function () {
+  proto.shift = function () {
     const notEmpty = this.length > 0;
     const methodCallResult = shift.apply(this, arguments);
     const o = this.$fastController;
@@ -3531,7 +3544,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.sort = function () {
+  proto.sort = function () {
     let oldArray;
     const o = this.$fastController;
 
@@ -3549,7 +3562,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.splice = function () {
+  proto.splice = function () {
     const methodCallResult = splice.apply(this, arguments);
     const o = this.$fastController;
 
@@ -3560,7 +3573,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.unshift = function () {
+  proto.unshift = function () {
     const methodCallResult = unshift.apply(this, arguments);
     const o = this.$fastController;
 
@@ -5919,6 +5932,24 @@ var Orientation;
   Orientation["vertical"] = "vertical";
 })(Orientation || (Orientation = {}));
 
+/**
+ * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
+ *
+ * @param array - the array to test
+ * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
+ */
+function findLastIndex(array, predicate) {
+  let k = array.length;
+
+  while (k--) {
+    if (predicate(array[k], k, array)) {
+      return k;
+    }
+  }
+
+  return -1;
+}
+
 /**
  * Checks if the DOM is available to access and use
  */
@@ -6147,6 +6178,18 @@ function wrapInBounds(min, max, value) {
 function limit(min, max, value) {
   return Math.min(Math.max(value, min), max);
 }
+/**
+ * Determines if a number value is within a specified range.
+ *
+ * @param value - the value to check
+ * @param min - the range start
+ * @param max - the range end
+ */
+
+function inRange(value, min, max = 0) {
+  [min, max] = [min, max].sort((a, b) => a - b);
+  return min <= value && value < max;
+}
 
 let uniqueIdCounter = 0;
 /**
@@ -6266,7 +6309,7 @@ class Accordion extends FoundationElement {
 
     this.activeItemChange = event => {
       const selectedItem = event.target;
-      this.activeid = event.target.getAttribute("id");
+      this.activeid = selectedItem.getAttribute("id");
 
       if (this.isSingleExpandMode()) {
         this.resetItems();
@@ -10452,7 +10495,6 @@ class ListboxOption extends FoundationElement {
      */
 
     this.dirtyValue = false;
-    this.initialValue = this.initialValue || "";
 
     if (text) {
       this.textContent = text;
@@ -10540,7 +10582,9 @@ class ListboxOption extends FoundationElement {
   }
 
   get label() {
-    return this.value ? this.value : this.textContent ? this.textContent : "";
+    var _a, _b;
+
+    return (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.textContent) !== null && _b !== void 0 ? _b : "";
   }
 
   get text() {
@@ -10559,8 +10603,10 @@ class ListboxOption extends FoundationElement {
   }
 
   get value() {
+    var _a, _b;
+
     Observable.track(this, "value");
-    return this._value ? this._value : this.text;
+    return (_b = (_a = this._value) !== null && _a !== void 0 ? _a : this.textContent) !== null && _b !== void 0 ? _b : "";
   }
 
   get form() {
@@ -10681,6 +10727,16 @@ class Listbox$1 extends FoundationElement {
 
     return (_a = this.selectedOptions[0]) !== null && _a !== void 0 ? _a : null;
   }
+  /**
+   * Returns true if there is one or more selectable option.
+   *
+   * @internal
+   */
+
+
+  get hasSelectableOptions() {
+    return this.options.length > 0 && !this.options.every(o => o.disabled);
+  }
   /**
    * The number of options.
    *
@@ -10689,11 +10745,9 @@ class Listbox$1 extends FoundationElement {
 
 
   get length() {
-    if (this.options) {
-      return this.options.length;
-    }
+    var _a, _b;
 
-    return 0;
+    return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
   }
   /**
    * The list of options.
@@ -10742,17 +10796,23 @@ class Listbox$1 extends FoundationElement {
     }
   }
   /**
-   * Focus the first selected option and scroll it into view.
+   * Ensures that the provided option is focused and scrolled into view.
    *
+   * @param optionToFocus - The option to focus
    * @internal
    */
 
 
-  focusAndScrollOptionIntoView() {
-    if (this.contains(document.activeElement) && this.firstSelectedOption) {
-      this.firstSelectedOption.focus();
+  focusAndScrollOptionIntoView(optionToFocus = this.firstSelectedOption) {
+    // To ensure that the browser handles both `focus()` and `scrollIntoView()`, the
+    // timing here needs to guarantee that they happen on different frames. Since this
+    // function is typically called from the `openChanged` observer, `DOM.queueUpdate`
+    // causes the calls to be grouped into the same frame. To prevent this,
+    // `requestAnimationFrame` is used instead of `DOM.queueUpdate`.
+    if (this.contains(document.activeElement) && optionToFocus !== null) {
+      optionToFocus.focus();
       requestAnimationFrame(() => {
-        this.firstSelectedOption.scrollIntoView({
+        optionToFocus.scrollIntoView({
           block: "nearest"
         });
       });
@@ -10775,6 +10835,72 @@ class Listbox$1 extends FoundationElement {
 
     this.shouldSkipFocus = false;
   }
+  /**
+   * Returns the options which match the current typeahead buffer.
+   *
+   * @internal
+   */
+
+
+  getTypeaheadMatches() {
+    const pattern = this.typeaheadBuffer.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&");
+    const re = new RegExp(`^${pattern}`, "gi");
+    return this.options.filter(o => o.text.trim().match(re));
+  }
+  /**
+   * Determines the index of the next option which is selectable, if any.
+   *
+   * @param prev - the previous selected index
+   * @param next - the next index to select
+   *
+   * @internal
+   */
+
+
+  getSelectableIndex(prev = this.selectedIndex, next) {
+    const direction = prev > next ? -1 : prev < next ? 1 : 0;
+    const potentialDirection = prev + direction;
+    let nextSelectableOption = null;
+
+    switch (direction) {
+      case -1:
+        {
+          nextSelectableOption = this.options.reduceRight((nextSelectableOption, thisOption, index) => !nextSelectableOption && !thisOption.disabled && index < potentialDirection ? thisOption : nextSelectableOption, nextSelectableOption);
+          break;
+        }
+
+      case 1:
+        {
+          nextSelectableOption = this.options.reduce((nextSelectableOption, thisOption, index) => !nextSelectableOption && !thisOption.disabled && index > potentialDirection ? thisOption : nextSelectableOption, nextSelectableOption);
+          break;
+        }
+    }
+
+    return this.options.indexOf(nextSelectableOption);
+  }
+  /**
+   * Handles external changes to child options.
+   *
+   * @param source - the source object
+   * @param propertyName - the property
+   *
+   * @internal
+   */
+
+
+  handleChange(source, propertyName) {
+    switch (propertyName) {
+      case "selected":
+        {
+          if (Listbox$1.slottedOptionFilter(source)) {
+            this.selectedIndex = this.options.indexOf(source);
+          }
+
+          this.setSelectedOptions();
+          break;
+        }
+    }
+  }
   /**
    * Moves focus to an option whose label matches characters typed by the user.
    * Consecutive keystrokes are batched into a buffer of search text used
@@ -10782,6 +10908,8 @@ class Listbox$1 extends FoundationElement {
    * between consecutive keystrokes, the search restarts.
    *
    * @param key - the key to be evaluated
+   *
+   * @internal
    */
 
 
@@ -10897,6 +11025,19 @@ class Listbox$1 extends FoundationElement {
     this.shouldSkipFocus = !this.contains(document.activeElement);
     return true;
   }
+  /**
+   * Switches between single-selection and multi-selection mode.
+   *
+   * @param prev - the previous value of the `multiple` attribute
+   * @param next - the next value of the `multiple` attribute
+   *
+   * @internal
+   */
+
+
+  multipleChanged(prev, next) {
+    this.ariaMultiSelectable = next ? "true" : undefined;
+  }
   /**
    * Updates the list of selected options when the `selectedIndex` changes.
    *
@@ -10908,6 +11049,25 @@ class Listbox$1 extends FoundationElement {
 
 
   selectedIndexChanged(prev, next) {
+    var _a;
+
+    if (!this.hasSelectableOptions) {
+      this.selectedIndex = -1;
+      return;
+    }
+
+    if (((_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && typeof prev === "number") {
+      const selectableIndex = this.getSelectableIndex(prev, next);
+      const newNext = selectableIndex > -1 ? selectableIndex : prev;
+      this.selectedIndex = newNext;
+
+      if (next === newNext) {
+        this.selectedIndexChanged(next, newNext);
+      }
+
+      return;
+    }
+
     this.setSelectedOptions();
   }
   /**
@@ -10921,11 +11081,15 @@ class Listbox$1 extends FoundationElement {
 
 
   selectedOptionsChanged(prev, next) {
-    if (this.$fastController.isConnected) {
-      this.options.forEach(o => {
-        o.selected = next.includes(o);
-      });
-    }
+    var _a;
+
+    const filteredNext = next.filter(Listbox$1.slottedOptionFilter);
+    (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
+      const notifier = Observable.getNotifier(o);
+      notifier.unsubscribe(this, "selected");
+      o.selected = filteredNext.includes(o);
+      notifier.subscribe(this, "selected");
+    });
   }
   /**
    * Moves focus to the first selectable option.
@@ -10935,8 +11099,10 @@ class Listbox$1 extends FoundationElement {
 
 
   selectFirstOption() {
+    var _a, _b;
+
     if (!this.disabled) {
-      this.selectedIndex = 0;
+      this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(o => !o.disabled)) !== null && _b !== void 0 ? _b : -1;
     }
   }
   /**
@@ -10948,7 +11114,7 @@ class Listbox$1 extends FoundationElement {
 
   selectLastOption() {
     if (!this.disabled) {
-      this.selectedIndex = this.options.length - 1;
+      this.selectedIndex = findLastIndex(this.options, o => !o.disabled);
     }
   }
   /**
@@ -10959,7 +11125,7 @@ class Listbox$1 extends FoundationElement {
 
 
   selectNextOption() {
-    if (!this.disabled && this.options && this.selectedIndex < this.options.length - 1) {
+    if (!this.disabled && this.selectedIndex < this.options.length - 1) {
       this.selectedIndex += 1;
     }
   }
@@ -10983,8 +11149,10 @@ class Listbox$1 extends FoundationElement {
 
 
   setDefaultSelectedOption() {
-    if (this.options && this.$fastController.isConnected) {
-      const selectedIndex = this.options.findIndex(el => el.getAttribute("selected") !== null);
+    var _a;
+
+    if (this.$fastController.isConnected) {
+      const selectedIndex = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(el => el.getAttribute("selected") !== null);
 
       if (selectedIndex !== -1) {
         this.selectedIndex = selectedIndex;
@@ -10995,7 +11163,7 @@ class Listbox$1 extends FoundationElement {
     }
   }
   /**
-   * Sets the selected option and gives it focus.
+   * Sets an option as selected and gives it focus.
    *
    * @public
    */
@@ -11004,9 +11172,8 @@ class Listbox$1 extends FoundationElement {
   setSelectedOptions() {
     var _a, _b, _c;
 
-    if (this.$fastController.isConnected && this.options) {
-      const selectedOption = (_a = this.options[this.selectedIndex]) !== null && _a !== void 0 ? _a : null;
-      this.selectedOptions = this.options.filter(el => el.isSameNode(selectedOption));
+    if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) && !this.disabled) {
+      this.selectedOptions = [this.options[this.selectedIndex]];
       this.ariaActiveDescendant = (_c = (_b = this.firstSelectedOption) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : "";
       this.focusAndScrollOptionIntoView();
     }
@@ -11056,12 +11223,10 @@ class Listbox$1 extends FoundationElement {
 
   typeaheadBufferChanged(prev, next) {
     if (this.$fastController.isConnected) {
-      const pattern = this.typeaheadBuffer.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&");
-      const re = new RegExp(`^${pattern}`, "gi");
-      const filteredOptions = this.options.filter(o => o.text.trim().match(re));
+      const typeaheadMatches = this.getTypeaheadMatches();
 
-      if (filteredOptions.length) {
-        const selectedIndex = this.options.indexOf(filteredOptions[0]);
+      if (typeaheadMatches.length) {
+        const selectedIndex = this.options.indexOf(typeaheadMatches[0]);
 
         if (selectedIndex > -1) {
           this.selectedIndex = selectedIndex;
@@ -11094,6 +11259,10 @@ __decorate$1([attr({
   mode: "boolean"
 })], Listbox$1.prototype, "disabled", void 0);
 
+__decorate$1([attr({
+  mode: "boolean"
+})], Listbox$1.prototype, "multiple", void 0);
+
 __decorate$1([observable], Listbox$1.prototype, "selectedIndex", void 0);
 
 __decorate$1([observable], Listbox$1.prototype, "selectedOptions", void 0);
@@ -11116,6 +11285,8 @@ __decorate$1([observable], DelegatesARIAListbox.prototype, "ariaDisabled", void
 
 __decorate$1([observable], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
 
+__decorate$1([observable], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
+
 applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
 applyMixins(Listbox$1, DelegatesARIAListbox);
 
@@ -11127,6 +11298,400 @@ applyMixins(Listbox$1, DelegatesARIAListbox);
  */
 
 class ListboxElement extends Listbox$1 {
+  constructor() {
+    super(...arguments);
+    /**
+     * The index of the most recently checked option.
+     *
+     * @internal
+     * @remarks
+     * Multiple-selection mode only.
+     */
+
+    this.activeIndex = -1;
+    /**
+     * The start index when checking a range of options.
+     *
+     * @internal
+     */
+
+    this.rangeStartIndex = -1;
+  }
+  /**
+   * Returns the last checked option.
+   *
+   * @internal
+   */
+
+
+  get activeOption() {
+    return this.options[this.activeIndex];
+  }
+  /**
+   * Returns the list of checked options.
+   *
+   * @internal
+   */
+
+
+  get checkedOptions() {
+    var _a;
+
+    return (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter(o => o.checked);
+  }
+  /**
+   * Returns the index of the first selected option.
+   *
+   * @internal
+   */
+
+
+  get firstSelectedOptionIndex() {
+    return this.options.indexOf(this.firstSelectedOption);
+  }
+  /**
+   * Updates the `ariaActiveDescendant` property when the active index changes.
+   *
+   * @param prev - the previous active index
+   * @param next - the next active index
+   *
+   * @internal
+   */
+
+
+  activeIndexChanged(prev, next) {
+    var _a, _b;
+
+    this.ariaActiveDescendant = (_b = (_a = this.options[next]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "";
+    this.focusAndScrollOptionIntoView();
+  }
+  /**
+   * Toggles the checked state for the currently active option.
+   *
+   * @remarks
+   * Multiple-selection mode only.
+   *
+   * @internal
+   */
+
+
+  checkActiveIndex() {
+    if (!this.multiple) {
+      return;
+    }
+
+    const activeItem = this.activeOption;
+
+    if (activeItem) {
+      activeItem.checked = true;
+    }
+  }
+  /**
+   * Sets the active index to the first option and marks it as checked.
+   *
+   * @remarks
+   * Multi-selection mode only.
+   *
+   * @param preserveChecked - mark all options unchecked before changing the active index
+   *
+   * @internal
+   */
+
+
+  checkFirstOption(preserveChecked = false) {
+    if (preserveChecked) {
+      if (this.rangeStartIndex === -1) {
+        this.rangeStartIndex = this.activeIndex + 1;
+      }
+
+      this.options.forEach((o, i) => {
+        o.checked = inRange(i, this.rangeStartIndex);
+      });
+    } else {
+      this.uncheckAllOptions();
+    }
+
+    this.activeIndex = 0;
+    this.checkActiveIndex();
+  }
+  /**
+   * Decrements the active index and sets the matching option as checked.
+   *
+   * @remarks
+   * Multi-selection mode only.
+   *
+   * @param preserveChecked - mark all options unchecked before changing the active index
+   *
+   * @internal
+   */
+
+
+  checkLastOption(preserveChecked = false) {
+    if (preserveChecked) {
+      if (this.rangeStartIndex === -1) {
+        this.rangeStartIndex = this.activeIndex;
+      }
+
+      this.options.forEach((o, i) => {
+        o.checked = inRange(i, this.rangeStartIndex, this.options.length);
+      });
+    } else {
+      this.uncheckAllOptions();
+    }
+
+    this.activeIndex = this.options.length - 1;
+    this.checkActiveIndex();
+  }
+  /**
+   * @override
+   * @internal
+   */
+
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("focusout", this.focusoutHandler);
+  }
+  /**
+   * @override
+   * @internal
+   */
+
+
+  disconnectedCallback() {
+    this.removeEventListener("focusout", this.focusoutHandler);
+    super.disconnectedCallback();
+  }
+  /**
+   * Increments the active index and marks the matching option as checked.
+   *
+   * @remarks
+   * Multiple-selection mode only.
+   *
+   * @param preserveChecked - mark all options unchecked before changing the active index
+   *
+   * @internal
+   */
+
+
+  checkNextOption(preserveChecked = false) {
+    if (preserveChecked) {
+      if (this.rangeStartIndex === -1) {
+        this.rangeStartIndex = this.activeIndex;
+      }
+
+      this.options.forEach((o, i) => {
+        o.checked = inRange(i, this.rangeStartIndex, this.activeIndex + 1);
+      });
+    } else {
+      this.uncheckAllOptions();
+    }
+
+    this.activeIndex += this.activeIndex < this.options.length - 1 ? 1 : 0;
+    this.checkActiveIndex();
+  }
+  /**
+   * Decrements the active index and marks the matching option as checked.
+   *
+   * @remarks
+   * Multiple-selection mode only.
+   *
+   * @param preserveChecked - mark all options unchecked before changing the active index
+   *
+   * @internal
+   */
+
+
+  checkPreviousOption(preserveChecked = false) {
+    if (preserveChecked) {
+      if (this.rangeStartIndex === -1) {
+        this.rangeStartIndex = this.activeIndex;
+      }
+
+      if (this.checkedOptions.length === 1) {
+        this.rangeStartIndex += 1;
+      }
+
+      this.options.forEach((o, i) => {
+        o.checked = inRange(i, this.activeIndex, this.rangeStartIndex);
+      });
+    } else {
+      this.uncheckAllOptions();
+    }
+
+    this.activeIndex -= this.activeIndex > 0 ? 1 : 0;
+    this.checkActiveIndex();
+  }
+  /**
+   * Handles click events for listbox options.
+   *
+   * @param e - the event object
+   *
+   * @override
+   * @internal
+   */
+
+
+  clickHandler(e) {
+    var _a;
+
+    if (!this.multiple) {
+      return super.clickHandler(e);
+    }
+
+    const captured = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(`[role=option]`);
+
+    if (!captured || captured.disabled) {
+      return;
+    }
+
+    this.uncheckAllOptions();
+    this.activeIndex = this.options.indexOf(captured);
+    this.checkActiveIndex();
+    this.toggleSelectedForAllCheckedOptions();
+    return true;
+  }
+  /**
+   * @override
+   * @internal
+   */
+
+
+  focusAndScrollOptionIntoView() {
+    super.focusAndScrollOptionIntoView(this.activeOption);
+  }
+  /**
+   * In multiple-selection mode:
+   * If any options are selected, the first selected option is checked when
+   * the listbox receives focus. If no options are selected, the first
+   * selectable option is checked.
+   *
+   * @override
+   * @internal
+   */
+
+
+  focusinHandler(e) {
+    if (!this.multiple) {
+      return super.focusinHandler(e);
+    }
+
+    if (!this.shouldSkipFocus && e.target === e.currentTarget) {
+      this.uncheckAllOptions();
+
+      if (this.activeIndex === -1) {
+        this.activeIndex = this.firstSelectedOptionIndex !== -1 ? this.firstSelectedOptionIndex : 0;
+      }
+
+      this.checkActiveIndex();
+      this.setSelectedOptions();
+      this.focusAndScrollOptionIntoView();
+    }
+
+    this.shouldSkipFocus = false;
+  }
+  /**
+   * Unchecks all options when the listbox loses focus.
+   *
+   * @internal
+   */
+
+
+  focusoutHandler(e) {
+    if (this.multiple) {
+      this.uncheckAllOptions();
+    }
+  }
+  /**
+   * Handles keydown actions for listbox navigation and typeahead
+   *
+   * @override
+   * @internal
+   */
+
+
+  keydownHandler(e) {
+    if (!this.multiple) {
+      return super.keydownHandler(e);
+    }
+
+    if (this.disabled) {
+      return true;
+    }
+
+    const {
+      key,
+      shiftKey
+    } = e;
+    this.shouldSkipFocus = false;
+
+    switch (key) {
+      // Select the first available option
+      case keyHome:
+        {
+          this.checkFirstOption(shiftKey);
+          return;
+        }
+      // Select the next selectable option
+
+      case keyArrowDown:
+        {
+          this.checkNextOption(shiftKey);
+          return;
+        }
+      // Select the previous selectable option
+
+      case keyArrowUp:
+        {
+          this.checkPreviousOption(shiftKey);
+          return;
+        }
+      // Select the last available option
+
+      case keyEnd:
+        {
+          this.checkLastOption(shiftKey);
+          return;
+        }
+
+      case keyTab:
+        {
+          this.focusAndScrollOptionIntoView();
+          return true;
+        }
+
+      case keyEscape:
+        {
+          if (this.multiple) {
+            this.uncheckAllOptions();
+            this.checkActiveIndex();
+          }
+
+          return true;
+        }
+
+      case keySpace:
+        {
+          e.preventDefault();
+
+          if (this.typeAheadExpired) {
+            this.toggleSelectedForAllCheckedOptions();
+          }
+
+          return;
+        }
+      // Send key to Typeahead handler
+
+      default:
+        {
+          if (key.length === 1) {
+            this.handleTypeAhead(`${key}`);
+          }
+
+          return true;
+        }
+    }
+  }
   /**
    * Prevents `focusin` events from firing before `click` events when the
    * element is unfocused.
@@ -11134,11 +11699,53 @@ class ListboxElement extends Listbox$1 {
    * @override
    * @internal
    */
+
+
   mousedownHandler(e) {
     if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) {
       return super.mousedownHandler(e);
     }
   }
+  /**
+   * Switches between single-selection and multi-selection mode.
+   *
+   * @override
+   * @internal
+   */
+
+
+  multipleChanged(prev, next) {
+    var _a;
+
+    super.multipleChanged(prev, next);
+    (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
+      o.checked = next ? false : undefined;
+    });
+    this.setSelectedOptions();
+
+    if (next && !this.size) {
+      this.size = 0;
+    }
+  }
+  /**
+   * Sets an option as selected and gives it focus.
+   *
+   * @override
+   * @public
+   */
+
+
+  setSelectedOptions() {
+    if (!this.multiple) {
+      super.setSelectedOptions();
+      return;
+    }
+
+    if (this.$fastController.isConnected && this.options) {
+      this.selectedOptions = this.options.filter(o => o.selected);
+      this.focusAndScrollOptionIntoView();
+    }
+  }
   /**
    * Ensures the size is a positive integer when the property is updated.
    *
@@ -11158,9 +11765,74 @@ class ListboxElement extends Listbox$1 {
       });
     }
   }
+  /**
+   * Toggles the selected state of the provided options. If any provided items
+   * are in an unselected state, all items are set to selected. If every
+   * provided item is selected, they are all unselected.
+   *
+   * @internal
+   */
+
+
+  toggleSelectedForAllCheckedOptions() {
+    const enabledCheckedOptions = this.checkedOptions.filter(o => !o.disabled);
+    const force = !enabledCheckedOptions.every(o => o.selected);
+    enabledCheckedOptions.forEach(o => o.selected = force);
+    this.selectedIndex = this.options.indexOf(enabledCheckedOptions[enabledCheckedOptions.length - 1]);
+    this.setSelectedOptions();
+  }
+  /**
+   * @override
+   * @internal
+   */
+
+
+  typeaheadBufferChanged(prev, next) {
+    if (!this.multiple) {
+      super.typeaheadBufferChanged(prev, next);
+      return;
+    }
+
+    if (this.$fastController.isConnected) {
+      const typeaheadMatches = this.getTypeaheadMatches();
+
+      if (typeaheadMatches) {
+        const activeIndex = this.options.indexOf(this.getTypeaheadMatches[0]);
+
+        if (activeIndex > -1) {
+          this.activeIndex = activeIndex;
+          this.uncheckAllOptions();
+          this.checkActiveIndex();
+        }
+      }
+
+      this.typeAheadExpired = false;
+    }
+  }
+  /**
+   * Unchecks all options.
+   *
+   * @remarks
+   * Multiple-selection mode only.
+   *
+   * @param preserveChecked - reset the rangeStartIndex
+   *
+   * @internal
+   */
+
+
+  uncheckAllOptions(preserveChecked = false) {
+    this.options.forEach(o => o.checked = this.multiple ? false : undefined);
+
+    if (!preserveChecked) {
+      this.rangeStartIndex = -1;
+    }
+  }
 
 }
 
+__decorate$1([observable], ListboxElement.prototype, "activeIndex", void 0);
+
 __decorate$1([attr({
   converter: nullableNumberConverter
 })], ListboxElement.prototype, "size", void 0);
@@ -11170,7 +11842,7 @@ __decorate$1([attr({
  * @public
  */
 
-const listboxTemplate = (context, definition) => html`<template aria-activedescendant="${x => x.ariaActiveDescendant}" class="listbox" role="listbox" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><slot ${slotted({
+const listboxTemplate = (context, definition) => html`<template aria-activedescendant="${x => x.ariaActiveDescendant}" aria-multiselectable="${x => x.ariaMultiSelectable}" class="listbox" role="listbox" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><slot ${slotted({
   filter: ListboxElement.slottedOptionFilter,
   flatten: true,
   property: "slottedOptions"
@@ -11255,7 +11927,7 @@ class Combobox$1 extends FormAssociatedCombobox {
 
     this.forcedPosition = false;
     /**
-     * The unique id of the internal listbox.
+     * The unique id for the internal listbox element.
      *
      * @internal
      */
@@ -11318,10 +11990,12 @@ class Combobox$1 extends FormAssociatedCombobox {
 
   openChanged() {
     if (this.open) {
-      this.ariaControls = this.listbox.id;
+      this.ariaControls = this.listboxId;
       this.ariaExpanded = "true";
       this.setPositioning();
-      this.focusAndScrollOptionIntoView();
+      this.focusAndScrollOptionIntoView(); // focus is directed to the element when `open` is changed programmatically
+
+      DOM.queueUpdate(() => this.focus());
       return;
     }
 
@@ -11357,6 +12031,11 @@ class Combobox$1 extends FormAssociatedCombobox {
       this.proxy.placeholder = this.placeholder;
     }
   }
+
+  positionChanged() {
+    this.positionAttribute = this.position;
+    this.setPositioning();
+  }
   /**
    * The value property.
    *
@@ -11429,10 +12108,6 @@ class Combobox$1 extends FormAssociatedCombobox {
     if (this.value) {
       this.initialValue = this.value;
     }
-
-    if (!this.listbox.id) {
-      this.listbox.id = uniqueId("listbox-");
-    }
   }
   /**
    * Synchronize the `aria-disabled` property when the `disabled` property changes.
@@ -11491,7 +12166,9 @@ class Combobox$1 extends FormAssociatedCombobox {
 
       if (this.firstSelectedOption) {
         requestAnimationFrame(() => {
-          this.firstSelectedOption.scrollIntoView({
+          var _a;
+
+          (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
             block: "nearest"
           });
         });
@@ -11843,7 +12520,7 @@ applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
  * @public
  */
 
-const comboboxTemplate = (context, definition) => html`<template aria-disabled="${x => x.ariaDisabled}" autocomplete="${x => x.autocomplete}" class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><div class="control" part="control">${startSlotTemplate(context, definition)}<slot name="control"><input aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}" aria-autocomplete="${x => x.ariaAutoComplete}" aria-controls="${x => x.ariaControls}" aria-disabled="${x => x.ariaDisabled}" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" class="selected-value" part="selected-value" placeholder="${x => x.placeholder}" role="combobox" type="text" ?disabled="${x => x.disabled}" :value="${x => x.value}" @input="${(x, c) => x.inputHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}" ${ref("control")} /><div class="indicator" part="indicator" aria-hidden="true"><slot name="indicator">${definition.indicator || ""}</slot></div></slot>${endSlotTemplate(context, definition)}</div><div class="listbox" part="listbox" role="listbox" ?disabled="${x => x.disabled}" ?hidden="${x => !x.open}" ${ref("listbox")}><slot ${slotted({
+const comboboxTemplate = (context, definition) => html`<template aria-disabled="${x => x.ariaDisabled}" autocomplete="${x => x.autocomplete}" class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}" ?open="${x => x.open}" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><div class="control" part="control">${startSlotTemplate(context, definition)}<slot name="control"><input aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}" aria-autocomplete="${x => x.ariaAutoComplete}" aria-controls="${x => x.ariaControls}" aria-disabled="${x => x.ariaDisabled}" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" class="selected-value" part="selected-value" placeholder="${x => x.placeholder}" role="combobox" type="text" ?disabled="${x => x.disabled}" :value="${x => x.value}" @input="${(x, c) => x.inputHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}" ${ref("control")} /><div class="indicator" part="indicator" aria-hidden="true"><slot name="indicator">${definition.indicator || ""}</slot></div></slot>${endSlotTemplate(context, definition)}</div><div class="listbox" id="${x => x.listboxId}" part="listbox" role="listbox" ?disabled="${x => x.disabled}" ?hidden="${x => !x.open}" ${ref("listbox")}><slot ${slotted({
   filter: Listbox$1.slottedOptionFilter,
   flatten: true,
   property: "slottedOptions"
@@ -12107,6 +12784,7 @@ class PropertyStyleSheetBehavior {
   /**
    * Change event for the provided element.
    * @param source - the element for which to attach or detach styles.
+   * @param key - the key to lookup to know if the element already has the styles
    * @internal
    */
 
@@ -14448,7 +15126,7 @@ class Menu$1 extends FoundationElement {
 
 
     this.handleFocusOut = e => {
-      if (!this.contains(e.relatedTarget)) {
+      if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
         this.collapseExpandedItem(); // find our first focusable element
 
         const focusIndex = this.menuItems.findIndex(this.isFocusableElement); // set the current focus index's tabindex to -1
@@ -14464,7 +15142,7 @@ class Menu$1 extends FoundationElement {
     this.handleItemFocus = e => {
       const targetItem = e.target;
 
-      if (targetItem !== this.menuItems[this.focusIndex]) {
+      if (this.menuItems !== undefined && targetItem !== this.menuItems[this.focusIndex]) {
         this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
         this.focusIndex = this.menuItems.indexOf(targetItem);
         targetItem.setAttribute("tabindex", "0");
@@ -14472,7 +15150,7 @@ class Menu$1 extends FoundationElement {
     };
 
     this.handleExpandedChanged = e => {
-      if (e.defaultPrevented || e.target === null || this.menuItems.indexOf(e.target) < 0) {
+      if (e.defaultPrevented || e.target === null || this.menuItems === undefined || this.menuItems.indexOf(e.target) < 0) {
         return;
       }
 
@@ -14496,7 +15174,19 @@ class Menu$1 extends FoundationElement {
       }
     };
 
+    this.removeItemListeners = () => {
+      if (this.menuItems !== undefined) {
+        this.menuItems.forEach(item => {
+          item.removeEventListener("expanded-change", this.handleExpandedChanged);
+          item.removeEventListener("focus", this.handleItemFocus);
+        });
+      }
+    };
+
     this.setItems = () => {
+      const newItems = this.domChildren();
+      this.removeItemListeners();
+      this.menuItems = newItems;
       const menuItems = this.menuItems.filter(this.isMenuItemElement); // if our focus index is not -1 we have items
 
       if (menuItems.length) {
@@ -14533,19 +15223,16 @@ class Menu$1 extends FoundationElement {
         }
       });
     };
-
-    this.resetItems = oldValue => {
-      oldValue.forEach(item => {
-        item.removeEventListener("expanded-change", this.handleExpandedChanged);
-        item.removeEventListener("focus", this.handleItemFocus);
-      });
-    };
     /**
      * handle change from child element
      */
 
 
     this.changeHandler = e => {
+      if (this.menuItems === undefined) {
+        return;
+      }
+
       const changedMenuItem = e.target;
       const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
 
@@ -14602,9 +15289,10 @@ class Menu$1 extends FoundationElement {
   }
 
   itemsChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected) {
-      this.menuItems = this.domChildren();
-      this.resetItems(oldValue);
+    // only update children after the component is connected and
+    // the setItems has run on connectedCallback
+    // (menuItems is undefined until then)
+    if (this.$fastController.isConnected && this.menuItems !== undefined) {
       this.setItems();
     }
   }
@@ -14615,7 +15303,11 @@ class Menu$1 extends FoundationElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.menuItems = this.domChildren();
+    DOM.queueUpdate(() => {
+      // wait until children have had a chance to
+      // connect before setting/checking their props/attributes
+      this.setItems();
+    });
     this.addEventListener("change", this.changeHandler);
   }
   /**
@@ -14625,7 +15317,8 @@ class Menu$1 extends FoundationElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.menuItems = [];
+    this.removeItemListeners();
+    this.menuItems = undefined;
     this.removeEventListener("change", this.changeHandler);
   }
   /**
@@ -14657,7 +15350,7 @@ class Menu$1 extends FoundationElement {
 
 
   handleMenuKeyDown(e) {
-    if (e.defaultPrevented) {
+    if (e.defaultPrevented || this.menuItems === undefined) {
       return;
     }
 
@@ -16305,7 +16998,7 @@ __decorate$1([attr], HorizontalScroll$1.prototype, "duration", void 0);
 __decorate$1([attr], HorizontalScroll$1.prototype, "easing", void 0);
 
 __decorate$1([attr({
-  attribute: "aria-hidden",
+  attribute: "flippers-hidden-from-at",
   converter: booleanConverter
 })], HorizontalScroll$1.prototype, "flippersHiddenFromAT", void 0);
 
@@ -16554,6 +17247,13 @@ class Select$1 extends FormAssociatedSelect {
      */
 
     this.position = SelectPosition.below;
+    /**
+     * The unique id for the internal listbox element.
+     *
+     * @internal
+     */
+
+    this.listboxId = uniqueId("listbox-");
     /**
      * The max height for the listbox when opened.
      *
@@ -16572,11 +17272,13 @@ class Select$1 extends FormAssociatedSelect {
 
   openChanged() {
     if (this.open) {
-      this.ariaControls = this.listbox.id;
+      this.ariaControls = this.listboxId;
       this.ariaExpanded = "true";
       this.setPositioning();
       this.focusAndScrollOptionIntoView();
-      this.indexWhenOpened = this.selectedIndex;
+      this.indexWhenOpened = this.selectedIndex; // focus is directed to the element when `open` is changed programmatically
+
+      DOM.queueUpdate(() => this.focus());
       return;
     }
 
@@ -16596,9 +17298,11 @@ class Select$1 extends FormAssociatedSelect {
   }
 
   set value(next) {
+    var _a;
+
     const prev = `${this._value}`;
 
-    if (this.$fastController.isConnected && this.options) {
+    if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
       const selectedIndex = this.options.findIndex(el => el.value === next);
       const prevSelectedOption = this.options[this.selectedIndex];
       const nextSelectedOption = this.options[selectedIndex];
@@ -16650,6 +17354,11 @@ class Select$1 extends FormAssociatedSelect {
     super.selectedIndexChanged(prev, next);
     this.updateValue();
   }
+
+  positionChanged() {
+    this.positionAttribute = this.position;
+    this.setPositioning();
+  }
   /**
    * Calculate and apply listbox positioning based on available viewport space.
    *
@@ -16697,8 +17406,10 @@ class Select$1 extends FormAssociatedSelect {
 
 
   formResetCallback() {
-    this.setProxyOptions();
-    this.setDefaultSelectedOption();
+    this.setProxyOptions(); // Call the base class's implementation setDefaultSelectedOption instead of the select's
+    // override, in order to reset the selectedIndex without using the value property.
+
+    super.setDefaultSelectedOption();
     this.value = this.firstSelectedOption.value;
   }
   /**
@@ -16777,6 +17488,20 @@ class Select$1 extends FormAssociatedSelect {
     this.setProxyOptions();
     this.updateValue();
   }
+
+  setDefaultSelectedOption() {
+    var _a;
+
+    const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox$1.slottedOptionFilter);
+    const selectedIndex = options === null || options === void 0 ? void 0 : options.findIndex(el => el.hasAttribute("selected") || el.selected || el.value === this.value);
+
+    if (selectedIndex !== -1) {
+      this.selectedIndex = selectedIndex;
+      return;
+    }
+
+    this.selectedIndex = 0;
+  }
   /**
    * Reset and fill the proxy to match the component's options.
    *
@@ -16858,10 +17583,6 @@ class Select$1 extends FormAssociatedSelect {
   connectedCallback() {
     super.connectedCallback();
     this.forcedPosition = !!this.positionAttribute;
-
-    if (!this.listbox.id) {
-      this.listbox.id = uniqueId("listbox-");
-    }
   }
 
 }
@@ -16899,7 +17620,7 @@ applyMixins(Select$1, StartEnd, DelegatesARIASelect);
  * @public
  */
 
-const selectTemplate = (context, definition) => html`<template class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}" aria-activedescendant="${x => x.ariaActiveDescendant}" aria-controls="${x => x.ariaControls}" aria-disabled="${x => x.ariaDisabled}" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" role="combobox" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><div class="control" part="control" ?disabled="${x => x.disabled}">${startSlotTemplate(context, definition)}<slot name="button-container"><div class="selected-value" part="selected-value"><slot name="selected-value">${x => x.displayValue}</slot></div><div aria-hidden="true" class="indicator" part="indicator"><slot name="indicator">${definition.indicator || ""}</slot></div></slot>${endSlotTemplate(context, definition)}</div><div class="listbox" part="listbox" role="listbox" ?disabled="${x => x.disabled}" ?hidden="${x => !x.open}" ${ref("listbox")}><slot ${slotted({
+const selectTemplate = (context, definition) => html`<template class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}" aria-activedescendant="${x => x.ariaActiveDescendant}" aria-controls="${x => x.ariaControls}" aria-disabled="${x => x.ariaDisabled}" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" ?open="${x => x.open}" role="combobox" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><div class="control" part="control" ?disabled="${x => x.disabled}">${startSlotTemplate(context, definition)}<slot name="button-container"><div class="selected-value" part="selected-value"><slot name="selected-value">${x => x.displayValue}</slot></div><div aria-hidden="true" class="indicator" part="indicator"><slot name="indicator">${definition.indicator || ""}</slot></div></slot>${endSlotTemplate(context, definition)}</div><div class="listbox" id="${x => x.listboxId}" part="listbox" role="listbox" ?disabled="${x => x.disabled}" ?hidden="${x => !x.open}" ${ref("listbox")}><slot ${slotted({
   filter: Listbox$1.slottedOptionFilter,
   flatten: true,
   property: "slottedOptions"
@@ -17552,7 +18273,7 @@ class Slider extends FormAssociatedSlider {
 
   setThumbPositionForOrientation(direction) {
     const newPct = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
-    const percentage = Math.round((1 - newPct) * 100);
+    const percentage = (1 - newPct) * 100;
 
     if (this.orientation === Orientation.horizontal) {
       this.position = this.isDragging ? `right: ${percentage}%; transition: none;` : `right: ${percentage}%; transition: all 0.2s ease;`;
@@ -18969,7 +19690,7 @@ class Tooltip$1 extends FoundationElement {
 
   anchorChanged() {
     if (this.$fastController.isConnected) {
-      this.updateLayout();
+      this.anchorElement = this.getAnchor();
     }
   }
 
@@ -19031,7 +19752,6 @@ class Tooltip$1 extends FoundationElement {
   connectedCallback() {
     super.connectedCallback();
     this.anchorElement = this.getAnchor();
-    this.updateLayout();
     this.updateTooltipVisibility();
   }
 
@@ -19127,7 +19847,7 @@ __decorate$1([observable], Tooltip$1.prototype, "currentDirection", void 0);
  * @public
  */
 
-const treeItemTemplate = (context, definition) => html`<template role="treeitem" slot="${x => x.isNestedItem() ? "item" : void 0}" tabindex="${x => !x.focusable ? -1 : 0}" class="${x => x.expanded ? "expanded" : ""} ${x => x.selected ? "selected" : ""} ${x => x.nested ? "nested" : ""} ${x => x.disabled ? "disabled" : ""}" aria-expanded="${x => x.childItems && x.childItemLength() > 0 ? x.expanded : void 0}" aria-selected="${x => x.selected}" aria-disabled="${x => x.disabled}" @click="${(x, c) => x.handleClick(c.event)}" ${children({
+const treeItemTemplate = (context, definition) => html`<template role="treeitem" slot="${x => x.isNestedItem() ? "item" : void 0}" tabindex="-1" class="${x => x.expanded ? "expanded" : ""} ${x => x.selected ? "selected" : ""} ${x => x.nested ? "nested" : ""} ${x => x.disabled ? "disabled" : ""}" aria-expanded="${x => x.childItems && x.childItemLength() > 0 ? x.expanded : void 0}" aria-selected="${x => x.selected}" aria-disabled="${x => x.disabled}" @focusin="${(x, c) => x.handleFocus(c.event)}" @focusout="${(x, c) => x.handleBlur(c.event)}" ${children({
   property: "childItems",
   filter: elements()
 })}><div class="positioning-region" part="positioning-region"><div class="content-region" part="content-region">${when(x => x.childItems && x.childItemLength() > 0, html`<div aria-hidden="true" class="expand-collapse-button" part="expand-collapse-button" @click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}" ${ref("expandCollapseButton")}><slot name="expand-collapse-glyph">${definition.expandCollapseGlyph || ""}</slot></div>`)} ${startSlotTemplate(context, definition)}<slot></slot>${endSlotTemplate(context, definition)}</div></div>${when(x => x.childItems && x.childItemLength() > 0 && (x.expanded || x.renderCollapsedChildren), html`<div role="group" class="items" part="items"><slot name="item" ${slotted("items")}></slot></div>`)}</template>`;
@@ -19159,32 +19879,66 @@ class TreeItem extends FoundationElement {
      */
 
     this.expanded = false;
+    /**
+     * Whether the item is focusable
+     *
+     * @internal
+     */
+
     this.focusable = false;
+    /**
+     * Whether the tree is nested
+     *
+     * @public
+     */
+
+    this.isNestedItem = () => {
+      return isTreeItemElement(this.parentElement);
+    };
+    /**
+     * Handle expand button click
+     *
+     * @internal
+     */
+
 
     this.handleExpandCollapseButtonClick = e => {
-      if (!this.disabled) {
-        e.preventDefault();
-        this.setExpanded(!this.expanded);
+      if (!this.disabled && !e.defaultPrevented) {
+        this.expanded = !this.expanded;
       }
     };
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
 
-    this.handleClick = e => {
-      if (!e.defaultPrevented) {
-        const target = e.composedPath();
-        const clickedTreeItem = target.find(t => t instanceof HTMLElement && isTreeItemElement(t));
 
-        if (clickedTreeItem === this) {
-          this.handleSelected();
-        } // do not prevent default as it completely eats the click
+    this.handleFocus = e => {
+      this.setAttribute("tabindex", "0");
+    };
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
 
 
-        return true;
-      }
+    this.handleBlur = e => {
+      this.setAttribute("tabindex", "-1");
     };
+  }
 
-    this.isNestedItem = () => {
-      return isTreeItemElement(this.parentElement);
-    };
+  expandedChanged() {
+    if (this.$fastController.isConnected) {
+      this.$emit("expanded-change", this);
+    }
+  }
+
+  selectedChanged() {
+    if (this.$fastController.isConnected) {
+      this.$emit("selected-change", this);
+    }
   }
 
   itemsChanged(oldValue, newValue) {
@@ -19199,6 +19953,8 @@ class TreeItem extends FoundationElement {
   }
   /**
    * Places document focus on a tree item
+   *
+   * @public
    * @param el - the element to focus
    */
 
@@ -19207,6 +19963,12 @@ class TreeItem extends FoundationElement {
     el.focusable = true;
     el.focus();
   }
+  /**
+   * Gets number of children
+   *
+   * @internal
+   */
+
 
   childItemLength() {
     const treeChildren = this.childItems.filter(item => {
@@ -19215,23 +19977,6 @@ class TreeItem extends FoundationElement {
     return treeChildren ? treeChildren.length : 0;
   }
 
-  handleSelected(e) {
-    if (e === null || e === void 0 ? void 0 : e.defaultPrevented) {
-      return;
-    }
-
-    e === null || e === void 0 ? void 0 : e.preventDefault();
-
-    if (!this.disabled) {
-      this.$emit("selected-change", e);
-    }
-  }
-
-  setExpanded(expanded) {
-    this.expanded = expanded;
-    this.$emit("expanded-change", this);
-  }
-
 }
 
 __decorate$1([attr({
@@ -19263,7 +20008,7 @@ applyMixins(TreeItem, StartEnd);
  * @public
  */
 
-const treeViewTemplate = (context, definition) => html`<template role="tree" ${ref("treeView")} @keydown="${(x, c) => x.handleKeyDown(c.event)}" @focusout="${(x, c) => x.handleBlur(c.event)}" @focusin="${(x, c) => x.handleFocus(c.event)}"><slot ${slotted("slottedTreeItems")}></slot></template>`;
+const treeViewTemplate = (context, definition) => html`<template role="tree" ${ref("treeView")} @keydown="${(x, c) => x.handleKeyDown(c.event)}" @focusin="${(x, c) => x.handleFocus(c.event)}" @focusout="${(x, c) => x.handleBlur(c.event)}" @click="${(x, c) => x.handleClick(c.event)}" @selected-change="${(x, c) => x.handleSelectedChange(c.event)}"><slot ${slotted("slottedTreeItems")}></slot></template>`;
 
 /**
  * A Tree view Custom HTML Element.
@@ -19275,57 +20020,86 @@ const treeViewTemplate = (context, definition) => html`<template role="tree" ${r
 class TreeView extends FoundationElement {
   constructor() {
     super(...arguments);
+    /**
+     * The tree item that is designated to be in the tab queue.
+     *
+     * @internal
+     */
 
-    this.handleBlur = e => {
-      const {
-        relatedTarget,
-        target
-      } = e;
-
-      if (target instanceof HTMLElement && (relatedTarget === null || !this.contains(relatedTarget))) {
-        this.setAttribute("tabindex", "0");
-      }
-    };
+    this.currentFocused = null;
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
 
     this.handleFocus = e => {
-      const {
-        relatedTarget,
-        target
-      } = e;
+      if (this.slottedTreeItems.length < 1) {
+        // no child items, nothing to do
+        return;
+      }
 
-      if (target instanceof HTMLElement && (relatedTarget === null || !this.contains(relatedTarget))) {
-        const treeView = this;
+      if (e.target === this) {
+        if (this.currentFocused === null) {
+          this.currentFocused = this.getValidFocusableItem();
+        }
 
-        if (target === this && this.currentFocused instanceof TreeItem) {
+        if (this.currentFocused !== null) {
           TreeItem.focusItem(this.currentFocused);
-          this.currentFocused.setAttribute("tabindex", "0");
         }
 
-        treeView.setAttribute("tabindex", "-1");
+        return;
+      }
+
+      if (this.contains(e.target)) {
+        this.setAttribute("tabindex", "-1");
+        this.currentFocused = e.target;
+      }
+    };
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+
+
+    this.handleBlur = e => {
+      if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
+        this.setAttribute("tabindex", "0");
       }
     };
+    /**
+     * KeyDown handler
+     *
+     *  @internal
+     */
+
 
     this.handleKeyDown = e => {
-      if (!this.treeItems) {
+      if (e.defaultPrevented) {
+        return;
+      }
+
+      if (this.slottedTreeItems.length < 1) {
         return true;
       }
 
+      const treeItems = this.getVisibleNodes();
+
       switch (e.key) {
         case keyHome:
-          if (this.treeItems && this.treeItems.length) {
-            TreeItem.focusItem(this.treeItems[0]);
-            this.treeItems[0].setAttribute("tabindex", "0");
+          if (treeItems.length) {
+            TreeItem.focusItem(treeItems[0]);
           }
 
-          break;
+          return;
 
         case keyEnd:
-          if (this.treeItems && this.treeItems.length) {
-            TreeItem.focusItem(this.treeItems[this.treeItems.length - 1]);
-            this.treeItems[this.treeItems.length - 1].setAttribute("tabindex", "0");
+          if (treeItems.length) {
+            TreeItem.focusItem(treeItems[treeItems.length - 1]);
           }
 
-          break;
+          return;
 
         case keyArrowLeft:
           if (e.target && this.isFocusableElement(e.target)) {
@@ -19336,7 +20110,7 @@ class TreeView extends FoundationElement {
             }
           }
 
-          break;
+          return false;
 
         case keyArrowRight:
           if (e.target && this.isFocusableElement(e.target)) {
@@ -19347,62 +20121,84 @@ class TreeView extends FoundationElement {
             }
           }
 
-          break;
+          return;
 
         case keyArrowDown:
           if (e.target && this.isFocusableElement(e.target)) {
             this.focusNextNode(1, e.target);
           }
 
-          break;
+          return;
 
         case keyArrowUp:
           if (e.target && this.isFocusableElement(e.target)) {
             this.focusNextNode(-1, e.target);
           }
 
-          break;
+          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.handleSelected(e.target);
-          break;
+          this.handleClick(e);
+          return;
+      } // don't prevent default if we took no action
 
-        default:
-          return true;
-      }
+
+      return true;
     };
+    /**
+     * Handles the selected-changed events bubbling up
+     * from child tree items
+     *
+     *  @internal
+     */
 
-    this.setItems = () => {
-      let focusIndex = this.treeItems.findIndex(this.isSelectedElement);
 
-      if (focusIndex === -1) {
-        focusIndex = this.treeItems.findIndex(this.isFocusableElement);
+    this.handleSelectedChange = e => {
+      if (e.defaultPrevented) {
+        return;
       }
 
-      for (let item = 0; item < this.treeItems.length; item++) {
-        if (item === focusIndex) {
-          this.treeItems[item].setAttribute("tabindex", "0");
-          this.currentFocused = this.treeItems[item];
-        }
-
-        this.treeItems[item].addEventListener("selected-change", this.handleItemSelected);
+      if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
+        return true;
       }
-    };
 
-    this.resetItems = () => {
-      for (let item = 0; item < this.treeItems.length; item++) {
-        this.treeItems[item].removeEventListener("selected-change", this.handleItemSelected);
+      const item = e.target;
+
+      if (item.selected && this.currentSelected !== item) {
+        // new selected item
+        this.currentSelected = item;
+      } else if (!item.selected && this.currentSelected === item) {
+        // selected item deselected
+        this.currentSelected = null;
       }
+
+      return;
     };
+    /**
+     * Updates the tree view when slottedTreeItems changes
+     */
 
-    this.handleItemSelected = e => {
-      const newSelection = e.target;
 
-      if (newSelection !== this.currentSelected) {
-        this.handleSelected(newSelection);
-      }
+    this.setItems = () => {
+      // force single selection
+      // defaults to first one found
+      const selectedItem = this.treeView.querySelector("[aria-selected='true']");
+      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();
+      } // toggle properties on child elements
+
+
+      this.nested = this.checkForNestedItems();
+      const treeItems = this.getVisibleNodes();
+      treeItems.forEach(node => {
+        if (isTreeItemElement(node)) {
+          node.nested = this.nested;
+        }
+      });
     };
     /**
      * check if the item is focusable
@@ -19418,95 +20214,94 @@ class TreeView extends FoundationElement {
     };
   }
 
-  slottedTreeItemsChanged(oldValue, newValue) {
+  slottedTreeItemsChanged() {
     if (this.$fastController.isConnected) {
-      // filter the tree items until that's done for us in the framework
-      this.resetItems();
-      this.treeItems = this.getVisibleNodes();
-      this.setItems(); // check if any tree items have nested items
-      // if they do, apply the nested attribute
-
-      if (this.checkForNestedItems()) {
-        this.slottedTreeItems.forEach(node => {
-          if (isTreeItemElement(node)) {
-            node.nested = true;
-          }
-        });
-      }
+      // update for slotted children change
+      this.setItems();
     }
   }
 
-  checkForNestedItems() {
-    return this.slottedTreeItems.some(node => {
-      return isTreeItemElement(node) && node.querySelector("[role='treeitem']");
-    });
-  }
-
   connectedCallback() {
     super.connectedCallback();
-    this.treeItems = this.getVisibleNodes();
+    this.setAttribute("tabindex", "0");
     DOM.queueUpdate(() => {
-      //only supporting single select
-      const node = this.treeView.querySelector("[aria-selected='true']");
-
-      if (node) {
-        this.currentSelected = node;
-      }
+      this.setItems();
     });
   }
+  /**
+   * Handles click events bubbling up
+   *
+   *  @internal
+   */
 
-  focusNextNode(delta, item) {
-    const visibleNodes = this.getVisibleNodes();
 
-    if (!visibleNodes) {
+  handleClick(e) {
+    if (e.defaultPrevented) {
+      // handled, do nothing
       return;
     }
 
-    const index = visibleNodes.indexOf(item);
-    const lastItem = visibleNodes[index];
+    if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
+      // not a tree item, ignore
+      return true;
+    }
+
+    const item = e.target;
+
+    if (!item.disabled) {
+      item.selected = !item.selected;
+    }
+
+    return;
+  }
+  /**
+   * Move focus to a tree item based on its offset from the provided item
+   */
+
+
+  focusNextNode(delta, item) {
+    const visibleNodes = this.getVisibleNodes();
 
-    if (delta < 0 && index > 0) {
-      lastItem.setAttribute("tabindex", "-1");
-    } else if (delta > 0 && index < visibleNodes.length - 1) {
-      lastItem.setAttribute("tabindex", "-1");
+    if (!visibleNodes) {
+      return;
     }
 
     const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
 
     if (isHTMLElement(focusItem)) {
       TreeItem.focusItem(focusItem);
-      focusItem.setAttribute("tabindex", "0");
-      this.currentFocused = focusItem;
     }
   }
+  /**
+   * checks if there are any nested tree items
+   */
 
-  handleSelected(item) {
-    if (this.currentSelected !== item) {
-      item.setAttribute("tabindex", "0");
-
-      if (this.currentSelected instanceof TreeItem && this.currentFocused) {
-        if (!item.disabled) {
-          this.currentSelected.selected = false;
-        }
 
-        this.currentFocused.setAttribute("tabindex", "-1");
-      }
+  getValidFocusableItem() {
+    const treeItems = this.getVisibleNodes(); // default to selected element if there is one
 
-      if (!this.currentSelected) {
-        this.slottedTreeItems.forEach(item => {
-          if (item instanceof TreeItem) {
-            item.setAttribute("tabindex", "-1");
-          }
-        });
-      }
+    let focusIndex = treeItems.findIndex(this.isSelectedElement);
 
-      if (!item.disabled) {
-        item.selected = true;
-        this.currentSelected = item;
-      }
+    if (focusIndex === -1) {
+      // otherwise first focusable tree item
+      focusIndex = treeItems.findIndex(this.isFocusableElement);
+    }
 
-      this.currentFocused = item;
+    if (focusIndex !== -1) {
+      return treeItems[focusIndex];
     }
+
+    return null;
+  }
+  /**
+   * checks if there are any nested tree items
+   */
+
+
+  checkForNestedItems() {
+    return this.slottedTreeItems.some(node => {
+      return isTreeItemElement(node) && node.querySelector("[role='treeitem']");
+    });
   }
 
   getVisibleNodes() {
@@ -19521,8 +20316,6 @@ __decorate$1([attr({
 
 __decorate$1([observable], TreeView.prototype, "currentSelected", void 0);
 
-__decorate$1([observable], TreeView.prototype, "nested", void 0);
-
 __decorate$1([observable], TreeView.prototype, "slottedTreeItems", void 0);
 
 /**
@@ -19965,22 +20758,50 @@ function rgbToRelativeLuminance(rgb) {
 
   return rgbToLinearLuminance(new ColorRGBA64(luminanceHelper(rgb.r), luminanceHelper(rgb.g), luminanceHelper(rgb.b), 1));
 }
+
+function calcChannelOverlay(match, background, overlay) {
+  if (overlay - background === 0) {
+    return 0;
+  } else {
+    return (match - background) / (overlay - background);
+  }
+}
+
+function calcRgbOverlay(rgbMatch, rgbBackground, rgbOverlay) {
+  const rChannel = calcChannelOverlay(rgbMatch.r, rgbBackground.r, rgbOverlay.r);
+  const gChannel = calcChannelOverlay(rgbMatch.g, rgbBackground.g, rgbOverlay.g);
+  const bChannel = calcChannelOverlay(rgbMatch.b, rgbBackground.b, rgbOverlay.b);
+  return (rChannel + gChannel + bChannel) / 3;
+}
 /**
- * Calculate an overlay color that uses rgba (rgb + alpha) that matches the appareance of a given solid color when placed on the same background
+ * Calculate an overlay color that uses rgba (rgb + alpha) that matches the appearance of a given solid color when placed on the same background
  * @param rgbMatch - The solid color the overlay should match in appearance when placed over the rgbBackground
  * @param rgbBackground - The background on which the overlay rests
- * @param rgbOverlay - The rgb color of the overlay. Typically this is either pure white or pure black. This color will be used in the returned output
+ * @param rgbOverlay - The rgb color of the overlay. Typically this is either pure white or pure black and when not provided will be determined automatically. This color will be used in the returned output
  * @returns The rgba (rgb + alpha) color of the overlay
  *
  * @public
  */
 
-function calculateOverlayColor(rgbMatch, rgbBackground, rgbOverlay) {
-  const rChannel = (rgbMatch.r - rgbBackground.r) / (rgbOverlay.r - rgbBackground.r);
-  const gChannel = (rgbMatch.g - rgbBackground.g) / (rgbOverlay.g - rgbBackground.g);
-  const bChannel = (rgbMatch.b - rgbBackground.b) / (rgbOverlay.b - rgbBackground.b);
-  const alpha = (rChannel + gChannel + bChannel) / 3;
-  return new ColorRGBA64(rgbOverlay.r, rgbOverlay.g, rgbOverlay.b, alpha);
+
+function calculateOverlayColor(rgbMatch, rgbBackground, rgbOverlay = null) {
+  let alpha = 0;
+  let overlay = rgbOverlay;
+
+  if (overlay !== null) {
+    alpha = calcRgbOverlay(rgbMatch, rgbBackground, overlay);
+  } else {
+    overlay = new ColorRGBA64(0, 0, 0, 1);
+    alpha = calcRgbOverlay(rgbMatch, rgbBackground, overlay);
+
+    if (alpha <= 0) {
+      overlay = new ColorRGBA64(1, 1, 1, 1);
+      alpha = calcRgbOverlay(rgbMatch, rgbBackground, overlay);
+    }
+  }
+
+  alpha = Math.round(alpha * 1000) / 1000;
+  return new ColorRGBA64(overlay.r, overlay.g, overlay.b, alpha);
 }
 /**
  * Converts a {@link @microsoft/fast-colors#ColorRGBA64} to a {@link @microsoft/fast-colors#ColorHSL}
@@ -21148,7 +21969,7 @@ const typeRampPlus1LineHeight = create('type-ramp-plus-1-line-height').withDefau
 const typeRampPlus2FontSize = create('type-ramp-plus-2-font-size').withDefault('20px');
 /** @public */
 
-const typeRampPlus2LineHeight = create('type-ramp-plus-2-line-height').withDefault('28px');
+const typeRampPlus2LineHeight = create('type-ramp-plus-2-line-height').withDefault('26px');
 /** @public */
 
 const typeRampPlus3FontSize = create('type-ramp-plus-3-font-size').withDefault('24px');
@@ -22906,6 +23727,9 @@ __decorate([attr({
 const fluentCombobox = Combobox.compose({
   baseName: 'combobox',
   baseClass: Combobox$1,
+  shadowOptions: {
+    delegatesFocus: true
+  },
   template: comboboxTemplate,
   styles: comboboxStyles$1,
   indicator: `