@fluentui/web-components 2.2.1 → 2.3.0

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;
 
@@ -3634,7 +3647,8 @@ function when(binding, templateOrTemplateBinding) {
 }
 
 const defaultRepeatOptions = Object.freeze({
-  positioning: false
+  positioning: false,
+  recycle: true
 });
 
 function bindWithoutPositioning(view, items, index, context) {
@@ -3778,7 +3792,7 @@ class RepeatBehavior {
       for (; addIndex < end; ++addIndex) {
         const neighbor = views[addIndex];
         const location = neighbor ? neighbor.firstChild : this.location;
-        const view = totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
+        const view = this.options.recycle && totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
         views.splice(addIndex, 0, view);
         bindView(view, items, addIndex, childContext);
         view.insertBefore(location);
@@ -4176,7 +4190,7 @@ const startTemplate = html`<span part="start" ${ref("startContainer")}><slot nam
  * @public
  */
 
-const accordionItemTemplate = (context, definition) => html`<template class="${x => x.expanded ? "expanded" : ""}" slot="item"><div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}" @click="${(x, c) => x.clickHandler(c.event)}"><span class="heading"><slot name="heading" part="heading"></slot></span></button>${startSlotTemplate(context, definition)} ${endSlotTemplate(context, definition)}<span class="icon" part="icon" aria-hidden="true"><slot name="expanded-icon" part="expanded-icon">${definition.expandedIcon || ""}</slot><slot name="collapsed-icon" part="collapsed-icon">${definition.collapsedIcon || ""}</slot><span></div><div class="region" part="region" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div></template>`;
+const accordionItemTemplate = (context, definition) => html`<template class="${x => x.expanded ? "expanded" : ""}"><div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}" @click="${(x, c) => x.clickHandler(c.event)}"><span class="heading"><slot name="heading" part="heading"></slot></span></button>${startSlotTemplate(context, definition)} ${endSlotTemplate(context, definition)}<span class="icon" part="icon" aria-hidden="true"><slot name="expanded-icon" part="expanded-icon">${definition.expandedIcon || ""}</slot><slot name="collapsed-icon" part="collapsed-icon">${definition.collapsedIcon || ""}</slot><span></div><div class="region" part="region" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div></template>`;
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -5904,7 +5918,12 @@ applyMixins(AccordionItem, StartEnd);
  * @public
  */
 
-const accordionTemplate = (context, definition) => html`<template><slot name="item" part="item" ${slotted("accordionItems")}></slot></template>`;
+const accordionTemplate = (context, definition) =>
+/* TODO: deprecate slot name `item` to only support default slot https://github.com/microsoft/fast/issues/5515 */
+html`<template><slot ${slotted({
+  property: "accordionItems",
+  filter: elements()
+})}></slot><slot name="item" part="item" ${slotted("accordionItems")}></slot></template>`;
 
 var Orientation;
 
@@ -5913,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
  */
@@ -6112,12 +6149,12 @@ const ArrowKeys = {
 /**
  * Expose ltr and rtl strings
  */
-var Direction$1;
+var Direction;
 
 (function (Direction) {
   Direction["ltr"] = "ltr";
   Direction["rtl"] = "rtl";
-})(Direction$1 || (Direction$1 = {}));
+})(Direction || (Direction = {}));
 
 /**
  * This method keeps a given value within the bounds of a min and max value. If the value
@@ -6141,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;
 /**
@@ -6151,6 +6200,28 @@ function uniqueId(prefix = "") {
   return `${prefix}${uniqueIdCounter++}`;
 }
 
+/**
+ * Define system colors for use in CSS stylesheets.
+ *
+ * https://drafts.csswg.org/css-color/#css-system-colors
+ */
+var SystemColors;
+
+(function (SystemColors) {
+  SystemColors["Canvas"] = "Canvas";
+  SystemColors["CanvasText"] = "CanvasText";
+  SystemColors["LinkText"] = "LinkText";
+  SystemColors["VisitedText"] = "VisitedText";
+  SystemColors["ActiveText"] = "ActiveText";
+  SystemColors["ButtonFace"] = "ButtonFace";
+  SystemColors["ButtonText"] = "ButtonText";
+  SystemColors["Field"] = "Field";
+  SystemColors["FieldText"] = "FieldText";
+  SystemColors["Highlight"] = "Highlight";
+  SystemColors["HighlightText"] = "HighlightText";
+  SystemColors["GrayText"] = "GrayText";
+})(SystemColors || (SystemColors = {}));
+
 /**
  * Expand mode for {@link Accordion}
  * @public
@@ -6238,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();
@@ -6562,7 +6633,7 @@ const anchoredRegionTemplate = (context, definition) => html`<template class="${
 
 const getDirection = rootNode => {
   const dirNode = rootNode.closest("[dir]");
-  return dirNode !== null && dirNode.dir === "rtl" ? Direction$1.rtl : Direction$1.ltr;
+  return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
 };
 
 /**
@@ -6850,7 +6921,7 @@ class AnchoredRegion extends FoundationElement {
     this.baseVerticalOffset = 0;
     this.pendingPositioningUpdate = false;
     this.pendingReset = false;
-    this.currentDirection = Direction$1.ltr;
+    this.currentDirection = Direction.ltr;
     this.regionVisible = false; // indicates that a layout update should occur even if geometry has not changed
     // used to ensure some attribute changes are applied
 
@@ -7079,7 +7150,7 @@ class AnchoredRegion extends FoundationElement {
               return;
             }
 
-            if (this.currentDirection === Direction$1.ltr) {
+            if (this.currentDirection === Direction.ltr) {
               dirCorrectedHorizontalDefaultPosition = dirCorrectedHorizontalDefaultPosition === "start" ? "left" : "right";
             } else {
               dirCorrectedHorizontalDefaultPosition = dirCorrectedHorizontalDefaultPosition === "start" ? "right" : "left";
@@ -8480,10 +8551,23 @@ class FormAssociatedButton extends FormAssociated(_Button) {
 class Button$1 extends FormAssociatedButton {
   constructor() {
     super(...arguments);
+    /**
+     * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
+     * @internal
+     */
+
+    this.handleClick = e => {
+      var _a;
+
+      if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
+        e.stopPropagation();
+      }
+    };
     /**
      * Submits the parent form
      */
 
+
     this.handleSubmission = () => {
       if (!this.form) {
         return;
@@ -8578,9 +8662,35 @@ class Button$1 extends FormAssociatedButton {
 
 
   connectedCallback() {
+    var _a;
+
     super.connectedCallback();
     this.proxy.setAttribute("type", this.type);
     this.handleUnsupportedDelegatesFocus();
+    const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+
+    if (elements) {
+      elements.forEach(span => {
+        span.addEventListener("click", this.handleClick);
+      });
+    }
+  }
+  /**
+   * @internal
+   */
+
+
+  disconnectedCallback() {
+    var _a;
+
+    super.disconnectedCallback();
+    const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+
+    if (elements) {
+      elements.forEach(span => {
+        span.removeEventListener("click", this.handleClick);
+      });
+    }
   }
 
 }
@@ -10341,28 +10451,6 @@ __decorate$1([observable], Checkbox.prototype, "defaultSlottedNodes", void 0);
 
 __decorate$1([observable], Checkbox.prototype, "indeterminate", void 0);
 
-/**
- * Positioning directions for the listbox when a select is open.
- * @public
- */
-var SelectPosition;
-
-(function (SelectPosition) {
-  SelectPosition["above"] = "above";
-  SelectPosition["below"] = "below";
-})(SelectPosition || (SelectPosition = {}));
-/**
- * Select role.
- * @public
- */
-
-
-var SelectRole;
-
-(function (SelectRole) {
-  SelectRole["combobox"] = "combobox";
-})(SelectRole || (SelectRole = {}));
-
 /**
  * Determines if the element is a {@link (ListboxOption:class)}
  *
@@ -10407,7 +10495,6 @@ class ListboxOption extends FoundationElement {
      */
 
     this.dirtyValue = false;
-    this.initialValue = this.initialValue || "";
 
     if (text) {
       this.textContent = text;
@@ -10428,6 +10515,24 @@ class ListboxOption extends FoundationElement {
     this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
     this.proxy.disabled = this.disabled;
   }
+  /**
+   * Updates the ariaChecked property when the checked property changes.
+   *
+   * @param prev - the previous checked value
+   * @param next - the current checked value
+   *
+   * @public
+   */
+
+
+  checkedChanged(prev, next) {
+    if (typeof next === "boolean") {
+      this.ariaChecked = next ? "true" : "false";
+      return;
+    }
+
+    this.ariaChecked = undefined;
+  }
 
   defaultSelectedChanged() {
     if (!this.dirtySelected) {
@@ -10440,6 +10545,8 @@ class ListboxOption extends FoundationElement {
   }
 
   disabledChanged(prev, next) {
+    this.ariaDisabled = this.disabled ? "true" : "false";
+
     if (this.proxy instanceof HTMLOptionElement) {
       this.proxy.disabled = this.disabled;
     }
@@ -10454,14 +10561,14 @@ class ListboxOption extends FoundationElement {
   }
 
   selectedChanged() {
-    if (this.$fastController.isConnected) {
-      if (!this.dirtySelected) {
-        this.dirtySelected = true;
-      }
+    this.ariaSelected = this.selected ? "true" : "false";
 
-      if (this.proxy instanceof HTMLOptionElement) {
-        this.proxy.selected = this.selected;
-      }
+    if (!this.dirtySelected) {
+      this.dirtySelected = true;
+    }
+
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.selected = this.selected;
     }
   }
 
@@ -10475,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() {
@@ -10494,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() {
@@ -10504,6 +10615,8 @@ class ListboxOption extends FoundationElement {
 
 }
 
+__decorate$1([observable], ListboxOption.prototype, "checked", void 0);
+
 __decorate$1([observable], ListboxOption.prototype, "defaultSelected", void 0);
 
 __decorate$1([attr({
@@ -10521,18 +10634,25 @@ __decorate$1([attr({
   attribute: "value",
   mode: "fromView"
 })], ListboxOption.prototype, "initialValue", void 0);
-
-applyMixins(ListboxOption, StartEnd);
-
 /**
- * Listbox role.
+ * States and properties relating to the ARIA `option` role.
+ *
  * @public
  */
-var ListboxRole;
 
-(function (ListboxRole) {
-  ListboxRole["listbox"] = "listbox";
-})(ListboxRole || (ListboxRole = {}));
+
+class DelegatesARIAListboxOption {}
+
+__decorate$1([observable], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+
+__decorate$1([observable], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+
+__decorate$1([observable], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+
+__decorate$1([observable], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+
+applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
+applyMixins(ListboxOption, StartEnd, DelegatesARIAListboxOption);
 
 /**
  * A Listbox Custom HTML Element.
@@ -10551,15 +10671,6 @@ class Listbox$1 extends FoundationElement {
      */
 
     this._options = [];
-    /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `role`
-     */
-
-    this.role = ListboxRole.listbox;
     /**
      * The index of the selected option.
      *
@@ -10616,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.
    *
@@ -10624,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.
@@ -10677,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"
         });
       });
@@ -10710,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
@@ -10717,6 +10908,8 @@ class Listbox$1 extends FoundationElement {
    * between consecutive keystrokes, the search restarts.
    *
    * @param key - the key to be evaluated
+   *
+   * @internal
    */
 
 
@@ -10832,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.
    *
@@ -10843,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();
   }
   /**
@@ -10856,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.
@@ -10870,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;
     }
   }
   /**
@@ -10883,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);
     }
   }
   /**
@@ -10894,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;
     }
   }
@@ -10918,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;
@@ -10930,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
    */
@@ -10939,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();
     }
@@ -10957,17 +11189,24 @@ class Listbox$1 extends FoundationElement {
 
 
   slottedOptionsChanged(prev, next) {
-    if (this.$fastController.isConnected) {
-      this.options = next.reduce((options, item) => {
-        if (isListboxOption(item)) {
-          options.push(item);
-        }
+    this.options = next.reduce((options, item) => {
+      if (isListboxOption(item)) {
+        options.push(item);
+      }
 
-        return options;
-      }, []);
-      this.options.forEach(o => {
-        o.id = o.id || uniqueId("option-");
-      });
+      return options;
+    }, []);
+    const setSize = `${this.options.length}`;
+    this.options.forEach((option, index) => {
+      if (!option.id) {
+        option.id = uniqueId("option-");
+      }
+
+      option.ariaPosInSet = `${index + 1}`;
+      option.ariaSetSize = setSize;
+    });
+
+    if (this.$fastController.isConnected) {
       this.setSelectedOptions();
       this.setDefaultSelectedOption();
     }
@@ -10984,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;
@@ -11022,7 +11259,9 @@ __decorate$1([attr({
   mode: "boolean"
 })], Listbox$1.prototype, "disabled", void 0);
 
-__decorate$1([attr], Listbox$1.prototype, "role", void 0);
+__decorate$1([attr({
+  mode: "boolean"
+})], Listbox$1.prototype, "multiple", void 0);
 
 __decorate$1([observable], Listbox$1.prototype, "selectedIndex", void 0);
 
@@ -11038,18 +11277,7 @@ __decorate$1([observable], Listbox$1.prototype, "typeaheadBuffer", void 0);
  */
 
 
-class DelegatesARIAListbox {
-  constructor() {
-    /**
-     * See {@link https://www.w3.org/WAI/PF/aria/roles#listbox} for more information
-     * @public
-     * @remarks
-     * HTML Attribute: aria-activedescendant
-     */
-    this.ariaActiveDescendant = "";
-  }
-
-}
+class DelegatesARIAListbox {}
 
 __decorate$1([observable], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
 
@@ -11057,24 +11285,595 @@ __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);
 
-class _Combobox extends Listbox$1 {}
 /**
- * A form-associated base class for the {@link (Combobox:class)} component.
+ * A Listbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
  *
- * @internal
+ * @public
  */
 
-
-class FormAssociatedCombobox extends FormAssociated(_Combobox) {
+class ListboxElement extends Listbox$1 {
   constructor() {
     super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-
-}
+    /**
+     * 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.
+   *
+   * @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.
+   *
+   * @param prev - the previous size value
+   * @param next - the current size value
+   *
+   * @internal
+   */
+
+
+  sizeChanged(prev, next) {
+    const size = Math.max(0, parseInt(next.toFixed(), 10));
+
+    if (size !== next) {
+      DOM.queueUpdate(() => {
+        this.size = size;
+      });
+    }
+  }
+  /**
+   * 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);
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#(Listbox:class)} component.
+ * @public
+ */
+
+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"
+})}></slot></template>`;
+
+/**
+ * Positioning directions for the listbox when a select is open.
+ * @public
+ */
+var SelectPosition;
+
+(function (SelectPosition) {
+  SelectPosition["above"] = "above";
+  SelectPosition["below"] = "below";
+})(SelectPosition || (SelectPosition = {}));
+
+class _Combobox extends Listbox$1 {}
+/**
+ * A form-associated base class for the {@link (Combobox:class)} component.
+ *
+ * @internal
+ */
+
+
+class FormAssociatedCombobox extends FormAssociated(_Combobox) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+
+}
 
 /**
  * Autocomplete values for combobox.
@@ -11128,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
      */
@@ -11157,15 +11956,6 @@ class Combobox$1 extends FormAssociatedCombobox {
      */
 
     this.position = SelectPosition.below;
-    /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: role
-     */
-
-    this.role = SelectRole.combobox;
   }
   /**
    * Reset the element to its first selectable option when its parent form is reset.
@@ -11199,12 +11989,18 @@ class Combobox$1 extends FormAssociatedCombobox {
   }
 
   openChanged() {
-    this.ariaExpanded = this.open ? "true" : "false";
-
     if (this.open) {
+      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;
     }
+
+    this.ariaControls = "";
+    this.ariaExpanded = "false";
   }
   /**
    * The list of options.
@@ -11235,6 +12031,11 @@ class Combobox$1 extends FormAssociatedCombobox {
       this.proxy.placeholder = this.placeholder;
     }
   }
+
+  positionChanged() {
+    this.positionAttribute = this.position;
+    this.setPositioning();
+  }
   /**
    * The value property.
    *
@@ -11365,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"
           });
         });
@@ -11705,12 +12508,11 @@ __decorate$1([observable], Combobox$1.prototype, "position", void 0);
 
 class DelegatesARIACombobox {}
 
-__decorate$1([attr({
-  attribute: "aria-autocomplete",
-  mode: "fromView"
-})], DelegatesARIACombobox.prototype, "ariaAutocomplete", void 0);
+__decorate$1([observable], DelegatesARIACombobox.prototype, "ariaAutoComplete", void 0);
+
+__decorate$1([observable], DelegatesARIACombobox.prototype, "ariaControls", void 0);
 
-applyMixins(DelegatesARIACombobox, ARIAGlobalStatesAndProperties);
+applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
 applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
 
 /**
@@ -11718,7 +12520,7 @@ applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
  * @public
  */
 
-const comboboxTemplate = (context, definition) => html`<template autocomplete="${x => x.autocomplete}" class="${x => x.disabled ? "disabled" : ""} ${x => x.position}" tabindex="${x => !x.disabled ? "0" : null}" aria-disabled="${x => x.ariaDisabled}" aria-autocomplete="${x => x.autocomplete}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}"><div class="control" part="control">${startSlotTemplate(context, definition)}<slot name="control"><input class="selected-value" part="selected-value" placeholder="${x => x.placeholder}" role="${x => x.role}" type="text" aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}" aria-controls="${x => x.listboxId}" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" ?disabled="${x => x.disabled}" :value="${x => x.value}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(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 aria-disabled="${x => x.disabled}" class="listbox" id="${x => x.listboxId}" 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"
@@ -11982,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
    */
 
@@ -13822,7 +14625,7 @@ __decorate$1([attr({
  * @public
  */
 
-const dividerTemplate = (context, definition) => html`<template role="${x => x.role}"></template>`;
+const dividerTemplate = (context, definition) => html`<template role="${x => x.role}" aria-orientation="${x => x.orientation}"></template>`;
 
 /**
  * Divider roles
@@ -13862,12 +14665,23 @@ class Divider extends FoundationElement {
      */
 
     this.role = DividerRole.separator;
+    /**
+     * The orientation of the divider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+
+    this.orientation = Orientation.horizontal;
   }
 
 }
 
 __decorate$1([attr], Divider.prototype, "role", void 0);
 
+__decorate$1([attr], Divider.prototype, "orientation", void 0);
+
 /**
  * The direction options for flipper.
  * @public
@@ -13956,64 +14770,7 @@ __decorate$1([attr], Flipper.prototype, "direction", void 0);
  * @public
  */
 
-const listboxOptionTemplate = (context, definition) => html`<template aria-selected="${x => x.selected}" class="${x => x.selected ? "selected" : ""} ${x => x.disabled ? "disabled" : ""}" role="option">${startSlotTemplate(context, definition)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(context, definition)}</template>`;
-
-/**
- * A Listbox Custom HTML Element.
- * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
- *
- * @public
- */
-
-class ListboxElement extends Listbox$1 {
-  /**
-   * Prevents `focusin` events from firing before `click` events when the
-   * element is unfocused.
-   *
-   * @override
-   * @internal
-   */
-  mousedownHandler(e) {
-    if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) {
-      return super.mousedownHandler(e);
-    }
-  }
-  /**
-   * Ensures the size is a positive integer when the property is updated.
-   *
-   * @param prev - the previous size value
-   * @param next - the current size value
-   *
-   * @internal
-   */
-
-
-  sizeChanged(prev, next) {
-    const size = Math.max(0, parseInt(next.toFixed(), 10));
-
-    if (size !== next) {
-      DOM.queueUpdate(() => {
-        this.size = size;
-      });
-    }
-  }
-
-}
-
-__decorate$1([attr({
-  converter: nullableNumberConverter
-})], ListboxElement.prototype, "size", void 0);
-
-/**
- * The template for the {@link @microsoft/fast-foundation#(Listbox:class)} component.
- * @public
- */
-
-const listboxTemplate = (context, definition) => html`<template aria-activedescendant="${x => x.ariaActiveDescendant}" class="listbox" role="${x => x.role}" 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"
-})}></slot></template>`;
+const listboxOptionTemplate = (context, definition) => html`<template aria-checked="${x => x.ariaChecked}" aria-disabled="${x => x.ariaDisabled}" aria-posinset="${x => x.ariaPosInSet}" aria-selected="${x => x.ariaSelected}" aria-setsize="${x => x.ariaSetSize}" class="${x => [x.checked && "checked", x.selected && "selected", x.disabled && "disabled"].filter(Boolean).join(" ")}" role="option">${startSlotTemplate(context, definition)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(context, definition)}</template>`;
 
 /**
  * Menu items roles.
@@ -14078,7 +14835,7 @@ class MenuItem extends FoundationElement {
      * @internal
      */
 
-    this.currentDirection = Direction$1.ltr;
+    this.currentDirection = Direction.ltr;
     this.focusSubmenuOnLoad = false;
     /**
      * @internal
@@ -14369,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
@@ -14385,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");
@@ -14393,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;
       }
 
@@ -14417,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) {
@@ -14454,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);
 
@@ -14523,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();
     }
   }
@@ -14536,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);
   }
   /**
@@ -14546,7 +15317,8 @@ class Menu$1 extends FoundationElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.menuItems = [];
+    this.removeItemListeners();
+    this.menuItems = undefined;
     this.removeEventListener("change", this.changeHandler);
   }
   /**
@@ -14578,7 +15350,7 @@ class Menu$1 extends FoundationElement {
 
 
   handleMenuKeyDown(e) {
-    if (e.defaultPrevented) {
+    if (e.defaultPrevented || this.menuItems === undefined) {
       return;
     }
 
@@ -14981,6 +15753,20 @@ class NumberField$1 extends FormAssociatedNumberField {
 
     this.value = this.getValidValue(this.value);
   }
+  /**
+   * The value property, typed as a number.
+   *
+   * @public
+   */
+
+
+  get valueAsNumber() {
+    return parseFloat(super.value);
+  }
+
+  set valueAsNumber(next) {
+    this.value = next.toString();
+  }
   /**
    * Validates that the value is a number between the min and max
    * @param previous - previous stored value
@@ -15013,7 +15799,6 @@ class NumberField$1 extends FormAssociatedNumberField {
   /**
    * Sets the internal value to a valid number between the min and max properties
    * @param value - user input
-   * @param updateControl - should the text field update to the valid value
    *
    * @internal
    */
@@ -15517,7 +16302,7 @@ class RadioGroup extends FoundationElement {
         case keyArrowRight:
         case keyArrowDown:
           {
-            if (this.direction === Direction$1.ltr) {
+            if (this.direction === Direction.ltr) {
               this.moveRight(e);
             } else {
               this.moveLeft(e);
@@ -15529,7 +16314,7 @@ class RadioGroup extends FoundationElement {
         case keyArrowLeft:
         case keyArrowUp:
           {
-            if (this.direction === Direction$1.ltr) {
+            if (this.direction === Direction.ltr) {
               this.moveLeft(e);
             } else {
               this.moveRight(e);
@@ -16213,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);
 
@@ -16456,21 +17241,19 @@ class Select$1 extends FormAssociatedSelect {
 
     this.forcedPosition = false;
     /**
-     * The role of the element.
+     * Holds the current state for the calculated position of the listbox.
      *
      * @public
-     * @remarks
-     * HTML Attribute: role
      */
 
-    this.role = SelectRole.combobox;
+    this.position = SelectPosition.below;
     /**
-     * Holds the current state for the calculated position of the listbox.
+     * The unique id for the internal listbox element.
      *
-     * @public
+     * @internal
      */
 
-    this.position = SelectPosition.below;
+    this.listboxId = uniqueId("listbox-");
     /**
      * The max height for the listbox when opened.
      *
@@ -16488,13 +17271,19 @@ class Select$1 extends FormAssociatedSelect {
   }
 
   openChanged() {
-    this.ariaExpanded = this.open ? "true" : "false";
-
     if (this.open) {
+      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;
     }
+
+    this.ariaControls = "";
+    this.ariaExpanded = "false";
   }
   /**
    * The value property.
@@ -16509,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];
@@ -16563,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.
    *
@@ -16610,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;
   }
   /**
@@ -16690,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.
    *
@@ -16798,14 +17610,9 @@ __decorate$1([observable], Select$1.prototype, "displayValue", void 0);
 
 class DelegatesARIASelect {}
 
-__decorate$1([observable], DelegatesARIASelect.prototype, "ariaExpanded", void 0);
-
-__decorate$1([attr({
-  attribute: "aria-pressed",
-  mode: "fromView"
-})], DelegatesARIASelect.prototype, "ariaPressed", void 0);
+__decorate$1([observable], DelegatesARIASelect.prototype, "ariaControls", void 0);
 
-applyMixins(DelegatesARIASelect, ARIAGlobalStatesAndProperties);
+applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
 applyMixins(Select$1, StartEnd, DelegatesARIASelect);
 
 /**
@@ -16813,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}" role="${x => x.role}" tabindex="${x => !x.disabled ? "0" : null}" aria-disabled="${x => x.ariaDisabled}" aria-expanded="${x => x.ariaExpanded}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><div aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}" aria-controls="listbox" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" class="control" part="control" role="button" ?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 class="indicator" part="indicator"><slot name="indicator">${definition.indicator || ""}</slot></div></slot>${endSlotTemplate(context, definition)}</div><div aria-disabled="${x => x.disabled}" class="listbox" id="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"
@@ -16872,7 +17679,7 @@ const sliderLabelTemplate = (context, definition) => html`<template aria-disable
 function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   let pct = limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
 
-  if (direction === Direction$1.rtl) {
+  if (direction === Direction.rtl) {
     pct = 1 - pct;
   }
 
@@ -16882,7 +17689,7 @@ function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
 const defaultConfig = {
   min: 0,
   max: 0,
-  direction: Direction$1.ltr,
+  direction: Direction.ltr,
   orientation: Orientation.horizontal,
   disabled: false
 };
@@ -16908,11 +17715,11 @@ class SliderLabel extends FoundationElement {
      * @internal
      */
 
-    this.sliderDirection = Direction$1.ltr;
+    this.sliderDirection = Direction.ltr;
 
     this.getSliderConfiguration = () => {
       if (!this.isSliderConfig(this.parentNode)) {
-        this.sliderDirection = defaultConfig.direction || Direction$1.ltr;
+        this.sliderDirection = defaultConfig.direction || Direction.ltr;
         this.sliderOrientation = defaultConfig.orientation || Orientation.horizontal;
         this.sliderMaxPosition = defaultConfig.max;
         this.sliderMinPosition = defaultConfig.min;
@@ -16930,7 +17737,7 @@ class SliderLabel extends FoundationElement {
           this.disabled = disabled;
         }
 
-        this.sliderDirection = direction || Direction$1.ltr;
+        this.sliderDirection = direction || Direction.ltr;
         this.sliderOrientation = orientation || Orientation.horizontal;
         this.sliderMaxPosition = max;
         this.sliderMinPosition = min;
@@ -16938,7 +17745,7 @@ class SliderLabel extends FoundationElement {
     };
 
     this.positionAsStyle = () => {
-      const direction = this.sliderDirection ? this.sliderDirection : Direction$1.ltr;
+      const direction = this.sliderDirection ? this.sliderDirection : Direction.ltr;
       const pct = convertPixelToPercent(Number(this.position), Number(this.sliderMinPosition), Number(this.sliderMaxPosition));
       let rightNum = Math.round((1 - pct) * 100);
       let leftNum = Math.round(pct * 100);
@@ -16949,7 +17756,7 @@ class SliderLabel extends FoundationElement {
       }
 
       if (this.sliderOrientation === Orientation.horizontal) {
-        return direction === Direction$1.rtl ? `right: ${leftNum}%; left: ${rightNum}%;` : `left: ${leftNum}%; right: ${rightNum}%;`;
+        return direction === Direction.rtl ? `right: ${leftNum}%; left: ${rightNum}%;` : `left: ${leftNum}%; right: ${rightNum}%;`;
       } else {
         return `top: ${leftNum}%; bottom: ${rightNum}%;`;
       }
@@ -17096,7 +17903,7 @@ class Slider extends FormAssociatedSlider {
      * @internal
      */
 
-    this.direction = Direction$1.ltr;
+    this.direction = Direction.ltr;
     /**
      * @internal
      */
@@ -17348,6 +18155,20 @@ class Slider extends FormAssociatedSlider {
       this.proxy.readOnly = this.readOnly;
     }
   }
+  /**
+   * The value property, typed as a number.
+   *
+   * @public
+   */
+
+
+  get valueAsNumber() {
+    return parseFloat(super.value);
+  }
+
+  set valueAsNumber(next) {
+    this.value = next.toString();
+  }
   /**
    * @internal
    */
@@ -17424,7 +18245,7 @@ class Slider extends FormAssociatedSlider {
 
 
   increment() {
-    const newVal = this.direction !== Direction$1.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
+    const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
     const incrementedVal = this.convertToConstrainedValue(newVal);
     const incrementedValString = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
     this.value = incrementedValString;
@@ -17437,7 +18258,7 @@ class Slider extends FormAssociatedSlider {
 
 
   decrement() {
-    const newVal = this.direction !== Direction$1.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
+    const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
     const decrementedVal = this.convertToConstrainedValue(newVal);
     const decrementedValString = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
     this.value = decrementedValString;
@@ -17452,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;`;
@@ -18251,14 +19072,14 @@ const ToolbarArrowKeyMap = Object.freeze({
   },
   [ArrowKeys.ArrowLeft]: {
     [Orientation.horizontal]: {
-      [Direction$1.ltr]: -1,
-      [Direction$1.rtl]: 1
+      [Direction.ltr]: -1,
+      [Direction.rtl]: 1
     }
   },
   [ArrowKeys.ArrowRight]: {
     [Orientation.horizontal]: {
-      [Direction$1.ltr]: 1,
-      [Direction$1.rtl]: -1
+      [Direction.ltr]: 1,
+      [Direction.rtl]: -1
     }
   }
 });
@@ -18285,7 +19106,7 @@ class Toolbar$1 extends FoundationElement {
      * @internal
      */
 
-    this.direction = Direction$1.ltr;
+    this.direction = Direction.ltr;
     /**
      * The orientation of the toolbar.
      *
@@ -18625,7 +19446,7 @@ class Tooltip$1 extends FoundationElement {
      * @internal
      */
 
-    this.horizontalInset = "true";
+    this.horizontalInset = "false";
     /**
      * @internal
      */
@@ -18635,7 +19456,7 @@ class Tooltip$1 extends FoundationElement {
      * @internal
      */
 
-    this.horizontalScaling = "anchor";
+    this.horizontalScaling = "content";
     /**
      * @internal
      */
@@ -18663,7 +19484,7 @@ class Tooltip$1 extends FoundationElement {
      * @internal
      */
 
-    this.currentDirection = Direction$1.ltr;
+    this.currentDirection = Direction.ltr;
     /**
      * The timer that tracks delay time before the tooltip is shown on hover
      */
@@ -18685,10 +19506,12 @@ class Tooltip$1 extends FoundationElement {
       this.classList.toggle("bottom", this.region.verticalPosition === "end");
       this.classList.toggle("inset-top", this.region.verticalPosition === "insetStart");
       this.classList.toggle("inset-bottom", this.region.verticalPosition === "insetEnd");
+      this.classList.toggle("center-vertical", this.region.verticalPosition === "center");
       this.classList.toggle("left", this.region.horizontalPosition === "start");
       this.classList.toggle("right", this.region.horizontalPosition === "end");
       this.classList.toggle("inset-left", this.region.horizontalPosition === "insetStart");
       this.classList.toggle("inset-right", this.region.horizontalPosition === "insetEnd");
+      this.classList.toggle("center-horizontal", this.region.horizontalPosition === "center");
     };
     /**
      * mouse enters anchor
@@ -18867,7 +19690,7 @@ class Tooltip$1 extends FoundationElement {
 
   anchorChanged() {
     if (this.$fastController.isConnected) {
-      this.updateLayout();
+      this.anchorElement = this.getAnchor();
     }
   }
 
@@ -18929,7 +19752,6 @@ class Tooltip$1 extends FoundationElement {
   connectedCallback() {
     super.connectedCallback();
     this.anchorElement = this.getAnchor();
-    this.updateLayout();
     this.updateTooltipVisibility();
   }
 
@@ -18948,38 +19770,26 @@ class Tooltip$1 extends FoundationElement {
       case TooltipPosition.top:
       case TooltipPosition.bottom:
         this.verticalPositioningMode = "locktodefault";
-        this.horizontalPositioningMode = "dynamic";
+        this.horizontalPositioningMode = "locktodefault";
         this.verticalDefaultPosition = this.position;
-        this.horizontalDefaultPosition = undefined;
-        this.horizontalInset = "true";
-        this.verticalInset = "false";
-        this.horizontalScaling = "anchor";
-        this.verticalScaling = "content";
+        this.horizontalDefaultPosition = "center";
         break;
 
       case TooltipPosition.right:
       case TooltipPosition.left:
       case TooltipPosition.start:
       case TooltipPosition.end:
-        this.verticalPositioningMode = "dynamic";
+        this.verticalPositioningMode = "locktodefault";
         this.horizontalPositioningMode = "locktodefault";
-        this.verticalDefaultPosition = undefined;
+        this.verticalDefaultPosition = "center";
         this.horizontalDefaultPosition = this.position;
-        this.horizontalInset = "false";
-        this.verticalInset = "true";
-        this.horizontalScaling = "content";
-        this.verticalScaling = "anchor";
         break;
 
       default:
         this.verticalPositioningMode = "dynamic";
         this.horizontalPositioningMode = "dynamic";
-        this.verticalDefaultPosition = undefined;
-        this.horizontalDefaultPosition = undefined;
-        this.horizontalInset = "true";
-        this.verticalInset = "false";
-        this.horizontalScaling = "anchor";
-        this.verticalScaling = "content";
+        this.verticalDefaultPosition = void 0;
+        this.horizontalDefaultPosition = "center";
         break;
     }
   }
@@ -19037,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>`;
@@ -19069,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) {
@@ -19109,6 +19953,8 @@ class TreeItem extends FoundationElement {
   }
   /**
    * Places document focus on a tree item
+   *
+   * @public
    * @param el - the element to focus
    */
 
@@ -19117,6 +19963,12 @@ class TreeItem extends FoundationElement {
     el.focusable = true;
     el.focus();
   }
+  /**
+   * Gets number of children
+   *
+   * @internal
+   */
+
 
   childItemLength() {
     const treeChildren = this.childItems.filter(item => {
@@ -19125,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({
@@ -19173,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.
@@ -19185,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)) {
@@ -19246,7 +20110,7 @@ class TreeView extends FoundationElement {
             }
           }
 
-          break;
+          return false;
 
         case keyArrowRight:
           if (e.target && this.isFocusableElement(e.target)) {
@@ -19257,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
@@ -19328,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() {
@@ -19431,42 +20316,8 @@ __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);
 
-/**
- * Expose ltr and rtl strings
- */
-var Direction;
-
-(function (Direction) {
-  Direction["ltr"] = "ltr";
-  Direction["rtl"] = "rtl";
-})(Direction || (Direction = {}));
-
-/**
- * Define system colors for use in CSS stylesheets.
- *
- * https://drafts.csswg.org/css-color/#css-system-colors
- */
-var SystemColors;
-
-(function (SystemColors) {
-  SystemColors["Canvas"] = "Canvas";
-  SystemColors["CanvasText"] = "CanvasText";
-  SystemColors["LinkText"] = "LinkText";
-  SystemColors["VisitedText"] = "VisitedText";
-  SystemColors["ActiveText"] = "ActiveText";
-  SystemColors["ButtonFace"] = "ButtonFace";
-  SystemColors["ButtonText"] = "ButtonText";
-  SystemColors["Field"] = "Field";
-  SystemColors["FieldText"] = "FieldText";
-  SystemColors["Highlight"] = "Highlight";
-  SystemColors["HighlightText"] = "HighlightText";
-  SystemColors["GrayText"] = "GrayText";
-})(SystemColors || (SystemColors = {}));
-
 /**
  * Ensures that an input number does not exceed a max value and is not less than a min value.
  * @param i - the number to clamp
@@ -19907,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}
@@ -21090,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');
@@ -22848,6 +23727,9 @@ __decorate([attr({
 const fluentCombobox = Combobox.compose({
   baseName: 'combobox',
   baseClass: Combobox$1,
+  shadowOptions: {
+    delegatesFocus: true
+  },
   template: comboboxTemplate,
   styles: comboboxStyles$1,
   indicator: `