@fluentui/web-components 2.1.2 → 2.2.2

package/dist/web-components.js

@@ -1475,7 +1475,10 @@ function compileTemplate(template, directives) {
   // because something like a when, repeat, etc. could add nodes before the marker.
   // To mitigate this, we insert a stable first node. However, if we insert a node,
   // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-  DOM.isMarker(fragment.firstChild) || fragment.childNodes.length === 1 && directives.length) {
+  DOM.isMarker(fragment.firstChild) || // Or if there is only one node and a directive, it means the template's content
+  // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
+  // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
+  fragment.childNodes.length === 1 && directives.length) {
     fragment.insertBefore(document.createComment(""), fragment.firstChild);
     targetOffset = -1;
   }
@@ -3631,7 +3634,8 @@ function when(binding, templateOrTemplateBinding) {
 }
 
 const defaultRepeatOptions = Object.freeze({
-  positioning: false
+  positioning: false,
+  recycle: true
 });
 
 function bindWithoutPositioning(view, items, index, context) {
@@ -3775,7 +3779,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);
@@ -4173,7 +4177,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.
@@ -5559,7 +5563,9 @@ function isArrayIndex(value) {
         for (let i = 0; i < length; ++i) {
           ch = value.charCodeAt(i);
 
-          if (i === 0 && ch === 0x30 && length > 1 || ch < 0x30
+          if (i === 0 && ch === 0x30 && length > 1
+          /* must not start with 0 */
+          || ch < 0x30
           /* 0 */
           || ch > 0x39
           /* 9 */
@@ -5899,7 +5905,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;
 
@@ -6107,12 +6118,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
@@ -6146,6 +6157,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
@@ -6557,7 +6590,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;
 };
 
 /**
@@ -6845,7 +6878,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
 
@@ -7074,7 +7107,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";
@@ -8475,10 +8508,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;
@@ -8573,9 +8619,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);
+      });
+    }
   }
 
 }
@@ -10336,28 +10408,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)}
  *
@@ -10423,6 +10473,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) {
@@ -10435,6 +10503,8 @@ class ListboxOption extends FoundationElement {
   }
 
   disabledChanged(prev, next) {
+    this.ariaDisabled = this.disabled ? "true" : "false";
+
     if (this.proxy instanceof HTMLOptionElement) {
       this.proxy.disabled = this.disabled;
     }
@@ -10449,14 +10519,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;
     }
   }
 
@@ -10499,6 +10569,8 @@ class ListboxOption extends FoundationElement {
 
 }
 
+__decorate$1([observable], ListboxOption.prototype, "checked", void 0);
+
 __decorate$1([observable], ListboxOption.prototype, "defaultSelected", void 0);
 
 __decorate$1([attr({
@@ -10516,18 +10588,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.
@@ -10536,125 +10615,85 @@ var ListboxRole;
  * @public
  */
 
-class Listbox extends FoundationElement {
+class Listbox$1 extends FoundationElement {
   constructor() {
     super(...arguments);
     /**
-     * The index of the selected option
+     * The internal unfiltered list of selectable options.
      *
-     * @public
-     */
-
-    this.selectedIndex = -1;
-    /**
-     * @internal
-     */
-
-    this.typeaheadBuffer = "";
-    /**
      * @internal
      */
 
-    this.typeaheadTimeout = -1;
+    this._options = [];
     /**
-     * Flag for the typeahead timeout expiration.
+     * The index of the selected option.
      *
-     * @internal
+     * @public
      */
 
-    this.typeAheadExpired = true;
+    this.selectedIndex = -1;
     /**
-     * The role of the element.
+     * A collection of the selected options.
      *
      * @public
-     * @remarks
-     * HTML Attribute: role
      */
 
-    this.role = ListboxRole.listbox;
+    this.selectedOptions = [];
     /**
-     * The internal unfiltered list of selectable options.
+     * A standard `click` event creates a `focus` event before firing, so a
+     * `mousedown` event is used to skip that initial focus.
      *
      * @internal
      */
 
-    this._options = [];
+    this.shouldSkipFocus = false;
     /**
-     * A collection of the selected options.
+     * The current typeahead buffer string.
      *
-     * @public
+     * @internal
      */
 
-    this.selectedOptions = [];
+    this.typeaheadBuffer = "";
     /**
-     * A standard `click` event creates a `focus` event before firing, so a
-     * `mousedown` event is used to skip that initial focus.
+     * Flag for the typeahead timeout expiration.
      *
      * @internal
      */
 
-    this.shouldSkipFocus = false;
+    this.typeaheadExpired = true;
     /**
-     * Move focus to an option whose label matches characters typed by the user.
-     * Consecutive keystrokes are batched into a buffer of search text used
-     * to match against the set of options.  If TYPE_AHEAD_TIMEOUT_MS passes
-     * between consecutive keystrokes, the search restarts.
+     * The timeout ID for the typeahead handler.
      *
-     * @param key - the key to be evaluated
+     * @internal
      */
 
-    this.handleTypeAhead = key => {
-      if (this.typeaheadTimeout) {
-        window.clearTimeout(this.typeaheadTimeout);
-      }
-
-      this.typeaheadTimeout = window.setTimeout(() => this.typeAheadExpired = true, Listbox.TYPE_AHEAD_TIMEOUT_MS);
-
-      if (key.length > 1) {
-        return;
-      }
-
-      this.typeaheadBuffer = `${this.typeAheadExpired ? "" : this.typeaheadBuffer}${key}`;
-    };
-  }
-
-  selectedIndexChanged(prev, next) {
-    this.setSelectedOptions();
+    this.typeaheadTimeout = -1;
   }
+  /**
+   * The first selected option.
+   *
+   * @internal
+   */
 
-  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));
-
-      if (filteredOptions.length) {
-        const selectedIndex = this.options.indexOf(filteredOptions[0]);
 
-        if (selectedIndex > -1) {
-          this.selectedIndex = selectedIndex;
-        }
-      }
+  get firstSelectedOption() {
+    var _a;
 
-      this.typeAheadExpired = false;
-    }
+    return (_a = this.selectedOptions[0]) !== null && _a !== void 0 ? _a : null;
   }
+  /**
+   * The number of options.
+   *
+   * @public
+   */
 
-  slottedOptionsChanged(prev, next) {
-    if (this.$fastController.isConnected) {
-      this.options = next.reduce((options, item) => {
-        if (isListboxOption(item)) {
-          options.push(item);
-        }
 
-        return options;
-      }, []);
-      this.options.forEach(o => {
-        o.id = o.id || uniqueId("option-");
-      });
-      this.setSelectedOptions();
-      this.setDefaultSelectedOption();
+  get length() {
+    if (this.options) {
+      return this.options.length;
     }
+
+    return 0;
   }
   /**
    * The list of options.
@@ -10672,23 +10711,39 @@ class Listbox extends FoundationElement {
     this._options = value;
     Observable.notify(this, "options");
   }
+  /**
+   * Flag for the typeahead timeout expiration.
+   *
+   * @deprecated use `Listbox.typeaheadExpired`
+   * @internal
+   */
 
-  selectedOptionsChanged(prev, next) {
-    if (this.$fastController.isConnected) {
-      this.options.forEach(o => {
-        o.selected = next.includes(o);
-      });
-    }
+
+  get typeAheadExpired() {
+    return this.typeaheadExpired;
+  }
+
+  set typeAheadExpired(value) {
+    this.typeaheadExpired = value;
   }
   /**
+   * Handle click events for listbox options.
+   *
    * @internal
    */
 
 
-  get firstSelectedOption() {
-    return this.selectedOptions[0];
+  clickHandler(e) {
+    const captured = e.target.closest(`option,[role=option]`);
+
+    if (captured && !captured.disabled) {
+      this.selectedIndex = this.options.indexOf(captured);
+      return true;
+    }
   }
   /**
+   * Focus the first selected option and scroll it into view.
+   *
    * @internal
    */
 
@@ -10704,6 +10759,10 @@ class Listbox extends FoundationElement {
     }
   }
   /**
+   * Handles `focusin` actions for the component. When the component receives focus,
+   * the list of selected options is refreshed and the first selected option is scrolled
+   * into view.
+   *
    * @internal
    */
 
@@ -10717,123 +10776,30 @@ class Listbox extends FoundationElement {
     this.shouldSkipFocus = false;
   }
   /**
-   * Prevents `focusin` events from firing before `click` events when the
-   * element is unfocused.
+   * Moves focus to an option whose label matches characters typed by the user.
+   * Consecutive keystrokes are batched into a buffer of search text used
+   * to match against the set of options.  If `TYPE_AHEAD_TIMEOUT_MS` passes
+   * between consecutive keystrokes, the search restarts.
    *
-   * @internal
-   */
-
-
-  mousedownHandler(e) {
-    this.shouldSkipFocus = !this.contains(document.activeElement);
-    return true;
-  }
-  /**
-   * @internal
+   * @param key - the key to be evaluated
    */
 
 
-  setDefaultSelectedOption() {
-    if (this.options && this.$fastController.isConnected) {
-      const selectedIndex = this.options.findIndex(el => el.getAttribute("selected") !== null);
-
-      if (selectedIndex !== -1) {
-        this.selectedIndex = selectedIndex;
-        return;
-      }
-
-      this.selectedIndex = 0;
+  handleTypeAhead(key) {
+    if (this.typeaheadTimeout) {
+      window.clearTimeout(this.typeaheadTimeout);
     }
-  }
-  /**
-   * Sets an option as selected and gives it focus.
-   *
-   * @param index - option index to select
-   * @public
-   */
 
+    this.typeaheadTimeout = window.setTimeout(() => this.typeaheadExpired = true, Listbox$1.TYPE_AHEAD_TIMEOUT_MS);
 
-  setSelectedOptions() {
-    if (this.$fastController.isConnected && this.options) {
-      const selectedOption = this.options[this.selectedIndex] || null;
-      this.selectedOptions = this.options.filter(el => el.isSameNode(selectedOption));
-      this.ariaActiveDescendant = this.firstSelectedOption ? this.firstSelectedOption.id : "";
-      this.focusAndScrollOptionIntoView();
+    if (key.length > 1) {
+      return;
     }
-  }
-  /**
-   * Moves focus to the first selectable option
-   *
-   * @public
-   */
-
 
-  selectFirstOption() {
-    if (!this.disabled) {
-      this.selectedIndex = 0;
-    }
+    this.typeaheadBuffer = `${this.typeaheadExpired ? "" : this.typeaheadBuffer}${key}`;
   }
   /**
-   * Moves focus to the last selectable option
-   *
-   * @internal
-   */
-
-
-  selectLastOption() {
-    if (!this.disabled) {
-      this.selectedIndex = this.options.length - 1;
-    }
-  }
-  /**
-   * Moves focus to the next selectable option
-   *
-   * @internal
-   */
-
-
-  selectNextOption() {
-    if (!this.disabled && this.options && this.selectedIndex < this.options.length - 1) {
-      this.selectedIndex += 1;
-    }
-  }
-
-  get length() {
-    if (this.options) {
-      return this.options.length;
-    }
-
-    return 0;
-  }
-  /**
-   * Moves focus to the previous selectable option
-   *
-   * @internal
-   */
-
-
-  selectPreviousOption() {
-    if (!this.disabled && this.selectedIndex > 0) {
-      this.selectedIndex = this.selectedIndex - 1;
-    }
-  }
-  /**
-   * Handles click events for listbox options
-   *
-   * @internal
-   */
-
-
-  clickHandler(e) {
-    const captured = e.target.closest(`option,[role=option]`);
-
-    if (captured && !captured.disabled) {
-      this.selectedIndex = this.options.indexOf(captured);
-      return true;
-    }
-  }
-  /**
-   * Handles keydown actions for listbox navigation and typeahead
+   * Handles `keydown` actions for listbox navigation and typeahead.
    *
    * @internal
    */
@@ -10849,7 +10815,7 @@ class Listbox extends FoundationElement {
 
     switch (key) {
       // Select the first available option
-      case "Home":
+      case keyHome:
         {
           if (!e.shiftKey) {
             e.preventDefault();
@@ -10860,7 +10826,7 @@ class Listbox extends FoundationElement {
         }
       // Select the next selectable option
 
-      case "ArrowDown":
+      case keyArrowDown:
         {
           if (!e.shiftKey) {
             e.preventDefault();
@@ -10871,7 +10837,7 @@ class Listbox extends FoundationElement {
         }
       // Select the previous selectable option
 
-      case "ArrowUp":
+      case keyArrowUp:
         {
           if (!e.shiftKey) {
             e.preventDefault();
@@ -10882,28 +10848,28 @@ class Listbox extends FoundationElement {
         }
       // Select the last available option
 
-      case "End":
+      case keyEnd:
         {
           e.preventDefault();
           this.selectLastOption();
           break;
         }
 
-      case "Tab":
+      case keyTab:
         {
           this.focusAndScrollOptionIntoView();
           return true;
         }
 
-      case "Enter":
-      case "Escape":
+      case keyEnter:
+      case keyEscape:
         {
           return true;
         }
 
-      case " ":
+      case keySpace:
         {
-          if (this.typeAheadExpired) {
+          if (this.typeaheadExpired) {
             return true;
           }
         }
@@ -10919,67 +10885,309 @@ class Listbox extends FoundationElement {
         }
     }
   }
+  /**
+   * Prevents `focusin` events from firing before `click` events when the
+   * element is unfocused.
+   *
+   * @internal
+   */
+
+
+  mousedownHandler(e) {
+    this.shouldSkipFocus = !this.contains(document.activeElement);
+    return true;
+  }
+  /**
+   * Updates the list of selected options when the `selectedIndex` changes.
+   *
+   * @param prev - the previous selected index value
+   * @param next - the current selected index value
+   *
+   * @internal
+   */
+
+
+  selectedIndexChanged(prev, next) {
+    this.setSelectedOptions();
+  }
+  /**
+   * Updates the selectedness of each option when the list of selected options changes.
+   *
+   * @param prev - the previous list of selected options
+   * @param next - the current list of selected options
+   *
+   * @internal
+   */
+
+
+  selectedOptionsChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      this.options.forEach(o => {
+        o.selected = next.includes(o);
+      });
+    }
+  }
+  /**
+   * Moves focus to the first selectable option.
+   *
+   * @public
+   */
+
+
+  selectFirstOption() {
+    if (!this.disabled) {
+      this.selectedIndex = 0;
+    }
+  }
+  /**
+   * Moves focus to the last selectable option.
+   *
+   * @internal
+   */
+
+
+  selectLastOption() {
+    if (!this.disabled) {
+      this.selectedIndex = this.options.length - 1;
+    }
+  }
+  /**
+   * Moves focus to the next selectable option.
+   *
+   * @internal
+   */
+
+
+  selectNextOption() {
+    if (!this.disabled && this.options && this.selectedIndex < this.options.length - 1) {
+      this.selectedIndex += 1;
+    }
+  }
+  /**
+   * Moves focus to the previous selectable option.
+   *
+   * @internal
+   */
+
+
+  selectPreviousOption() {
+    if (!this.disabled && this.selectedIndex > 0) {
+      this.selectedIndex = this.selectedIndex - 1;
+    }
+  }
+  /**
+   * Updates the selected index to match the first selected option.
+   *
+   * @internal
+   */
+
+
+  setDefaultSelectedOption() {
+    if (this.options && this.$fastController.isConnected) {
+      const selectedIndex = this.options.findIndex(el => el.getAttribute("selected") !== null);
+
+      if (selectedIndex !== -1) {
+        this.selectedIndex = selectedIndex;
+        return;
+      }
+
+      this.selectedIndex = 0;
+    }
+  }
+  /**
+   * Sets the selected option and gives it focus.
+   *
+   * @public
+   */
+
+
+  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));
+      this.ariaActiveDescendant = (_c = (_b = this.firstSelectedOption) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : "";
+      this.focusAndScrollOptionIntoView();
+    }
+  }
+  /**
+   * Updates the list of options and resets the selected option when the slotted option content changes.
+   *
+   * @param prev - the previous list of slotted options
+   * @param next - the current list of slotted options
+   *
+   * @internal
+   */
+
+
+  slottedOptionsChanged(prev, next) {
+    this.options = next.reduce((options, item) => {
+      if (isListboxOption(item)) {
+        options.push(item);
+      }
+
+      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();
+    }
+  }
+  /**
+   * Updates the filtered list of options when the typeahead buffer changes.
+   *
+   * @param prev - the previous typeahead buffer value
+   * @param next - the current typeahead buffer value
+   *
+   * @internal
+   */
+
+
+  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));
+
+      if (filteredOptions.length) {
+        const selectedIndex = this.options.indexOf(filteredOptions[0]);
+
+        if (selectedIndex > -1) {
+          this.selectedIndex = selectedIndex;
+        }
+      }
+
+      this.typeaheadExpired = false;
+    }
+  }
 
 }
+/**
+ * A static filter to include only selectable options.
+ *
+ * @param n - element to filter
+ * @public
+ */
+
+Listbox$1.slottedOptionFilter = n => isListboxOption(n) && !n.disabled && !n.hidden;
 /**
  * Typeahead timeout in milliseconds.
  *
  * @internal
  */
 
-Listbox.TYPE_AHEAD_TIMEOUT_MS = 1000;
+
+Listbox$1.TYPE_AHEAD_TIMEOUT_MS = 1000;
+
+__decorate$1([attr({
+  mode: "boolean"
+})], Listbox$1.prototype, "disabled", void 0);
+
+__decorate$1([observable], Listbox$1.prototype, "selectedIndex", void 0);
+
+__decorate$1([observable], Listbox$1.prototype, "selectedOptions", void 0);
+
+__decorate$1([observable], Listbox$1.prototype, "slottedOptions", void 0);
+
+__decorate$1([observable], Listbox$1.prototype, "typeaheadBuffer", void 0);
 /**
- * A static filter to include only enabled elements
+ * Includes ARIA states and properties relating to the ARIA listbox role
  *
- * @param n - element to filter
  * @public
  */
 
-Listbox.slottedOptionFilter = n => isListboxOption(n) && !n.disabled && !n.hidden;
 
-__decorate$1([observable], Listbox.prototype, "selectedIndex", void 0);
+class DelegatesARIAListbox {}
 
-__decorate$1([observable], Listbox.prototype, "typeaheadBuffer", void 0);
+__decorate$1([observable], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
 
-__decorate$1([attr], Listbox.prototype, "role", void 0);
+__decorate$1([observable], DelegatesARIAListbox.prototype, "ariaDisabled", void 0);
 
-__decorate$1([attr({
-  mode: "boolean"
-})], Listbox.prototype, "disabled", void 0);
+__decorate$1([observable], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
 
-__decorate$1([observable], Listbox.prototype, "slottedOptions", void 0);
+applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
+applyMixins(Listbox$1, DelegatesARIAListbox);
 
-__decorate$1([observable], Listbox.prototype, "selectedOptions", void 0);
 /**
- * Includes ARIA states and properties relating to the ARIA listbox role
+ * 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
+   */
 
-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 = "";
+
+  sizeChanged(prev, next) {
+    const size = Math.max(0, parseInt(next.toFixed(), 10));
+
+    if (size !== next) {
+      DOM.queueUpdate(() => {
+        this.size = size;
+      });
+    }
   }
 
 }
 
-__decorate$1([observable], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
+__decorate$1([attr({
+  converter: nullableNumberConverter
+})], ListboxElement.prototype, "size", void 0);
 
-__decorate$1([observable], DelegatesARIAListbox.prototype, "ariaDisabled", void 0);
+/**
+ * The template for the {@link @microsoft/fast-foundation#(Listbox:class)} component.
+ * @public
+ */
 
-__decorate$1([observable], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
+const listboxTemplate = (context, definition) => html`<template aria-activedescendant="${x => x.ariaActiveDescendant}" class="listbox" role="listbox" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><slot ${slotted({
+  filter: ListboxElement.slottedOptionFilter,
+  flatten: true,
+  property: "slottedOptions"
+})}></slot></template>`;
 
-applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
-applyMixins(Listbox, DelegatesARIAListbox);
+/**
+ * Positioning directions for the listbox when a select is open.
+ * @public
+ */
+var SelectPosition;
 
-class _Combobox extends Listbox {}
+(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.
  *
@@ -11076,15 +11284,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.
@@ -11118,12 +11317,16 @@ class Combobox$1 extends FormAssociatedCombobox {
   }
 
   openChanged() {
-    this.ariaExpanded = this.open ? "true" : "false";
-
     if (this.open) {
+      this.ariaControls = this.listbox.id;
+      this.ariaExpanded = "true";
       this.setPositioning();
       this.focusAndScrollOptionIntoView();
+      return;
     }
+
+    this.ariaControls = "";
+    this.ariaExpanded = "false";
   }
   /**
    * The list of options.
@@ -11207,12 +11410,13 @@ class Combobox$1 extends FormAssociatedCombobox {
 
       this.selectedOptions = [captured];
       this.control.value = captured.text;
+      this.updateValue(true);
     }
 
     this.open = !this.open;
 
-    if (!this.open) {
-      this.updateValue(true);
+    if (this.open) {
+      this.control.focus();
     }
 
     return true;
@@ -11225,6 +11429,10 @@ class Combobox$1 extends FormAssociatedCombobox {
     if (this.value) {
       this.initialValue = this.value;
     }
+
+    if (!this.listbox.id) {
+      this.listbox.id = uniqueId("listbox-");
+    }
   }
   /**
    * Synchronize the `aria-disabled` property when the `disabled` property changes.
@@ -11268,6 +11476,28 @@ class Combobox$1 extends FormAssociatedCombobox {
       });
     }
   }
+  /**
+   * Focus the control and scroll the first selected option into view.
+   *
+   * @internal
+   * @remarks
+   * Overrides: `Listbox.focusAndScrollOptionIntoView`
+   */
+
+
+  focusAndScrollOptionIntoView() {
+    if (this.contains(document.activeElement)) {
+      this.control.focus();
+
+      if (this.firstSelectedOption) {
+        requestAnimationFrame(() => {
+          this.firstSelectedOption.scrollIntoView({
+            block: "nearest"
+          });
+        });
+      }
+    }
+  }
   /**
    * Handle focus state when the element or its children lose focus.
    *
@@ -11601,12 +11831,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);
 
 /**
@@ -11614,8 +11843,8 @@ 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({
-  filter: Listbox.slottedOptionFilter,
+const comboboxTemplate = (context, definition) => html`<template aria-disabled="${x => x.ariaDisabled}" autocomplete="${x => x.autocomplete}" class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><div class="control" part="control">${startSlotTemplate(context, definition)}<slot name="control"><input aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}" aria-autocomplete="${x => x.ariaAutoComplete}" aria-controls="${x => x.ariaControls}" aria-disabled="${x => x.ariaDisabled}" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" class="selected-value" part="selected-value" placeholder="${x => x.placeholder}" role="combobox" type="text" ?disabled="${x => x.disabled}" :value="${x => x.value}" @input="${(x, c) => x.inputHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}" ${ref("control")} /><div class="indicator" part="indicator" aria-hidden="true"><slot name="indicator">${definition.indicator || ""}</slot></div></slot>${endSlotTemplate(context, definition)}</div><div class="listbox" part="listbox" role="listbox" ?disabled="${x => x.disabled}" ?hidden="${x => !x.open}" ${ref("listbox")}><slot ${slotted({
+  filter: Listbox$1.slottedOptionFilter,
   flatten: true,
   property: "slottedOptions"
 })}></slot></div></template>`;
@@ -13718,7 +13947,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
@@ -13758,12 +13987,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
@@ -13852,18 +14092,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>`;
-
-/**
- * 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: Listbox.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.
@@ -13928,7 +14157,7 @@ class MenuItem extends FoundationElement {
      * @internal
      */
 
-    this.currentDirection = Direction$1.ltr;
+    this.currentDirection = Direction.ltr;
     this.focusSubmenuOnLoad = false;
     /**
      * @internal
@@ -14044,7 +14273,6 @@ class MenuItem extends FoundationElement {
       switch (this.role) {
         case MenuItemRole.menuitemcheckbox:
           this.checked = !this.checked;
-          this.$emit("change");
           break;
 
         case MenuItemRole.menuitem:
@@ -14781,62 +15009,121 @@ class NumberField$1 extends FormAssociatedNumberField {
      */
 
     this.step = 1;
+    /**
+     * Flag to indicate that the value change is from the user input
+     * @internal
+     */
+
+    this.isUserInput = false;
   }
+  /**
+   * Ensures that the max is greater than the min and that the value
+   *  is less than the max
+   * @param previous - the previous max value
+   * @param next - updated max value
+   *
+   * @internal
+   */
 
-  maxChanged(previousValue, nextValue) {
+
+  maxChanged(previous, next) {
     var _a;
 
-    this.max = Math.max(nextValue, (_a = this.min) !== null && _a !== void 0 ? _a : nextValue);
+    this.max = Math.max(next, (_a = this.min) !== null && _a !== void 0 ? _a : next);
     const min = Math.min(this.min, this.max);
 
     if (this.min !== undefined && this.min !== min) {
       this.min = min;
     }
 
-    this.valueChanged(this.value, this.value);
+    this.value = this.getValidValue(this.value);
   }
+  /**
+   * Ensures that the min is less than the max and that the value
+   *  is greater than the min
+   * @param previous - previous min value
+   * @param next - updated min value
+   *
+   * @internal
+   */
+
 
-  minChanged(previousValue, nextValue) {
+  minChanged(previous, next) {
     var _a;
 
-    this.min = Math.min(nextValue, (_a = this.max) !== null && _a !== void 0 ? _a : nextValue);
+    this.min = Math.min(next, (_a = this.max) !== null && _a !== void 0 ? _a : next);
     const max = Math.max(this.min, this.max);
 
     if (this.max !== undefined && this.max !== max) {
       this.max = max;
     }
 
-    this.valueChanged(this.value, this.value);
+    this.value = this.getValidValue(this.value);
   }
   /**
+   * The value property, typed as a number.
    *
-   * @param previousValue - previous stored value
-   * @param nextValue - value being updated
+   * @public
    */
 
 
-  valueChanged(previousValue, nextValue) {
-    var _a, _b;
+  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
+   * @param next - value being updated
+   * @param updateControl - should the text field be updated with value, defaults to true
+   * @internal
+   */
 
-    let value = parseFloat(nextValue);
 
-    if (isNaN(value)) {
-      value = "";
-    } else {
-      value = Math.min(value, (_a = this.max) !== null && _a !== void 0 ? _a : value);
-      value = Math.max(value, (_b = this.min) !== null && _b !== void 0 ? _b : value);
-    }
+  valueChanged(previous, next) {
+    this.value = this.getValidValue(next);
 
-    this.value = value.toString();
+    if (next !== this.value) {
+      return;
+    }
 
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.value = this.value;
+    if (this.control && !this.isUserInput) {
+      this.control.value = this.value;
     }
 
-    if (previousValue !== undefined) {
+    super.valueChanged(previous, this.value);
+
+    if (previous !== undefined && !this.isUserInput) {
       this.$emit("input");
       this.$emit("change");
     }
+
+    this.isUserInput = false;
+  }
+  /**
+   * Sets the internal value to a valid number between the min and max properties
+   * @param value - user input
+   *
+   * @internal
+   */
+
+
+  getValidValue(value) {
+    var _a, _b;
+
+    let validValue = parseFloat(parseFloat(value).toPrecision(12));
+
+    if (isNaN(validValue)) {
+      validValue = "";
+    } else {
+      validValue = Math.min(validValue, (_a = this.max) !== null && _a !== void 0 ? _a : validValue);
+      validValue = Math.max(validValue, (_b = this.min) !== null && _b !== void 0 ? _b : validValue).toString();
+    }
+
+    return validValue;
   }
   /**
    * Increments the value using the step value
@@ -14849,7 +15136,6 @@ class NumberField$1 extends FormAssociatedNumberField {
     const value = parseFloat(this.value);
     const stepUpValue = !isNaN(value) ? value + this.step : this.min > 0 ? this.min : this.max < 0 ? this.max : !this.min ? this.step : 0;
     this.value = stepUpValue.toString();
-    this.control.value = this.value;
   }
   /**
    * Decrements the value using the step value
@@ -14862,9 +15148,9 @@ class NumberField$1 extends FormAssociatedNumberField {
     const value = parseFloat(this.value);
     const stepDownValue = !isNaN(value) ? value - this.step : this.min > 0 ? this.min : this.max < 0 ? this.max : !this.min ? 0 - this.step : 0;
     this.value = stepDownValue.toString();
-    this.control.value = this.value;
   }
   /**
+   * Sets up the initial state of the number field
    * @internal
    */
 
@@ -14889,6 +15175,7 @@ class NumberField$1 extends FormAssociatedNumberField {
 
   handleTextInput() {
     this.control.value = this.control.value.replace(/[^0-9\-+e.]/g, "");
+    this.isUserInput = true;
     this.value = this.control.value;
   }
   /**
@@ -15322,7 +15609,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);
@@ -15334,7 +15621,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);
@@ -15758,7 +16045,7 @@ class HorizontalScroll$1 extends FoundationElement {
 
   scrollItemsChanged(previous, next) {
     if (next && !this.updatingItems) {
-      this.setStops();
+      DOM.queueUpdate(() => this.setStops());
     }
   }
   /**
@@ -15916,134 +16203,311 @@ class HorizontalScroll$1 extends FoundationElement {
     const outOfView = this.scrollStops.findIndex(stop => Math.abs(scrollPosition) + this.width <= Math.abs(stop));
     let nextIndex = current;
 
-    if (outOfView > current + 2) {
-      nextIndex = outOfView - 2;
-    } else if (current < this.scrollStops.length - 2) {
-      nextIndex = current + 1;
+    if (outOfView > current + 2) {
+      nextIndex = outOfView - 2;
+    } else if (current < this.scrollStops.length - 2) {
+      nextIndex = current + 1;
+    }
+
+    this.scrollToPosition(this.scrollStops[nextIndex], scrollPosition);
+  }
+  /**
+   * Handles scrolling with easing
+   * @param position - starting position
+   * @param newPosition - position to scroll to
+   * @public
+   */
+
+
+  scrollToPosition(newPosition, position = this.scrollContainer.scrollLeft) {
+    var _a;
+
+    if (this.scrolling) {
+      return;
+    }
+
+    this.scrolling = true;
+    const seconds = (_a = this.duration) !== null && _a !== void 0 ? _a : `${Math.abs(newPosition - position) / this.speed}s`;
+    this.content.style.setProperty("transition-duration", seconds);
+    const computedDuration = parseFloat(getComputedStyle(this.content).getPropertyValue("transition-duration"));
+
+    const transitionendHandler = e => {
+      if (e && e.target !== e.currentTarget) {
+        return;
+      }
+
+      this.content.style.setProperty("transition-duration", "0s");
+      this.content.style.removeProperty("transform");
+      this.scrollContainer.style.setProperty("scroll-behavior", "auto");
+      this.scrollContainer.scrollLeft = newPosition;
+      this.setFlippers();
+      this.content.removeEventListener("transitionend", transitionendHandler);
+      this.scrolling = false;
+    };
+
+    if (computedDuration === 0) {
+      transitionendHandler();
+      return;
+    }
+
+    this.content.addEventListener("transitionend", transitionendHandler);
+    const maxScrollValue = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;
+    let transitionStop = this.scrollContainer.scrollLeft - Math.min(newPosition, maxScrollValue);
+
+    if (this.isRtl) {
+      transitionStop = this.scrollContainer.scrollLeft + Math.min(Math.abs(newPosition), maxScrollValue);
+    }
+
+    this.content.style.setProperty("transition-property", "transform");
+    this.content.style.setProperty("transition-timing-function", this.easing);
+    this.content.style.setProperty("transform", `translateX(${transitionStop}px)`);
+  }
+  /**
+   * Monitors resize event on the horizontal-scroll element
+   * @public
+   */
+
+
+  resized() {
+    if (this.resizeTimeout) {
+      this.resizeTimeout = clearTimeout(this.resizeTimeout);
+    }
+
+    this.resizeTimeout = setTimeout(() => {
+      this.width = this.offsetWidth;
+      this.setFlippers();
+    }, this.frameTime);
+  }
+  /**
+   * Monitors scrolled event on the content container
+   * @public
+   */
+
+
+  scrolled() {
+    if (this.scrollTimeout) {
+      this.scrollTimeout = clearTimeout(this.scrollTimeout);
+    }
+
+    this.scrollTimeout = setTimeout(() => {
+      this.setFlippers();
+    }, this.frameTime);
+  }
+
+}
+
+__decorate$1([attr({
+  converter: nullableNumberConverter
+})], HorizontalScroll$1.prototype, "speed", void 0);
+
+__decorate$1([attr], HorizontalScroll$1.prototype, "duration", void 0);
+
+__decorate$1([attr], HorizontalScroll$1.prototype, "easing", void 0);
+
+__decorate$1([attr({
+  attribute: "aria-hidden",
+  converter: booleanConverter
+})], HorizontalScroll$1.prototype, "flippersHiddenFromAT", void 0);
+
+__decorate$1([observable], HorizontalScroll$1.prototype, "scrolling", void 0);
+
+__decorate$1([observable], HorizontalScroll$1.prototype, "scrollItems", void 0);
+
+__decorate$1([attr({
+  attribute: "view"
+})], HorizontalScroll$1.prototype, "view", void 0);
+
+/**
+ * @public
+ */
+
+const horizontalScrollTemplate = (context, definition) => {
+  var _a, _b;
+
+  return html`<template class="horizontal-scroll" @keyup="${(x, c) => x.keyupHandler(c.event)}">${startSlotTemplate(context, definition)}<div class="scroll-area" part="scroll-area"><div class="scroll-view" part="scroll-view" @scroll="${x => x.scrolled()}" ${ref("scrollContainer")}><div class="content-container" part="content-container" ${ref("content")}><slot ${slotted({
+    property: "scrollItems",
+    filter: elements()
+  })}></slot></div></div>${when(x => x.view !== "mobile", html`<div class="scroll scroll-prev" part="scroll-prev" ${ref("previousFlipperContainer")}><div class="scroll-action" part="scroll-action-previous"><slot name="previous-flipper">${definition.previousFlipper instanceof Function ? definition.previousFlipper(context, definition) : (_a = definition.previousFlipper) !== null && _a !== void 0 ? _a : ""}</slot></div></div><div class="scroll scroll-next" part="scroll-next" ${ref("nextFlipperContainer")}><div class="scroll-action" part="scroll-action-next"><slot name="next-flipper">${definition.nextFlipper instanceof Function ? definition.nextFlipper(context, definition) : (_b = definition.nextFlipper) !== null && _b !== void 0 ? _b : ""}</slot></div></div>`)}</div>${endSlotTemplate(context, definition)}</template>`;
+};
+
+class _Search extends FoundationElement {}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Search:class)} component.
+ *
+ * @internal
+ */
+
+
+class FormAssociatedSearch extends FormAssociated(_Search) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+
+}
+
+/**
+ * A Search Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search | <input type="search" /> element }.
+ *
+ * @public
+ */
+
+class Search$1 extends FormAssociatedSearch {
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+      this.validate();
+    }
+  }
+
+  autofocusChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.autofocus = this.autofocus;
+      this.validate();
+    }
+  }
+
+  placeholderChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.placeholder = this.placeholder;
+    }
+  }
+
+  listChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.setAttribute("list", this.list);
+      this.validate();
+    }
+  }
+
+  maxlengthChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.maxLength = this.maxlength;
+      this.validate();
+    }
+  }
+
+  minlengthChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.minLength = this.minlength;
+      this.validate();
+    }
+  }
+
+  patternChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.pattern = this.pattern;
+      this.validate();
+    }
+  }
+
+  sizeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.size = this.size;
     }
+  }
 
-    this.scrollToPosition(this.scrollStops[nextIndex], scrollPosition);
+  spellcheckChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.spellcheck = this.spellcheck;
+    }
   }
   /**
-   * Handles scrolling with easing
-   * @param position - starting position
-   * @param newPosition - position to scroll to
-   * @public
+   * @internal
    */
 
 
-  scrollToPosition(newPosition, position = this.scrollContainer.scrollLeft) {
-    var _a;
-
-    if (this.scrolling) {
-      return;
-    }
-
-    this.scrolling = true;
-    const seconds = (_a = this.duration) !== null && _a !== void 0 ? _a : `${Math.abs(newPosition - position) / this.speed}s`;
-    this.content.style.setProperty("transition-duration", seconds);
-    const computedDuration = parseFloat(getComputedStyle(this.content).getPropertyValue("transition-duration"));
-
-    const transitionendHandler = e => {
-      if (e && e.target !== e.currentTarget) {
-        return;
-      }
-
-      this.content.style.setProperty("transition-duration", "0s");
-      this.content.style.removeProperty("transform");
-      this.scrollContainer.style.setProperty("scroll-behavior", "auto");
-      this.scrollContainer.scrollLeft = newPosition;
-      this.setFlippers();
-      this.content.removeEventListener("transitionend", transitionendHandler);
-      this.scrolling = false;
-    };
+  connectedCallback() {
+    super.connectedCallback();
+    this.validate();
 
-    if (computedDuration === 0) {
-      transitionendHandler();
-      return;
+    if (this.autofocus) {
+      DOM.queueUpdate(() => {
+        this.focus();
+      });
     }
+  }
+  /**
+   * Handles the internal control's `input` event
+   * @internal
+   */
 
-    this.content.addEventListener("transitionend", transitionendHandler);
-    const maxScrollValue = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;
-    let transitionStop = this.scrollContainer.scrollLeft - Math.min(newPosition, maxScrollValue);
-
-    if (this.isRtl) {
-      transitionStop = this.scrollContainer.scrollLeft + Math.min(Math.abs(newPosition), maxScrollValue);
-    }
 
-    this.content.style.setProperty("transition-property", "transform");
-    this.content.style.setProperty("transition-timing-function", this.easing);
-    this.content.style.setProperty("transform", `translateX(${transitionStop}px)`);
+  handleTextInput() {
+    this.value = this.control.value;
   }
   /**
-   * Monitors resize event on the horizontal-scroll element
+   * Handles the control's clear value event
    * @public
    */
 
 
-  resized() {
-    if (this.resizeTimeout) {
-      this.resizeTimeout = clearTimeout(this.resizeTimeout);
-    }
-
-    this.resizeTimeout = setTimeout(() => {
-      this.width = this.offsetWidth;
-      this.setFlippers();
-    }, this.frameTime);
+  handleClearInput() {
+    this.value = "";
+    this.control.focus();
   }
   /**
-   * Monitors scrolled event on the content container
-   * @public
+   * Change event handler for inner control.
+   * @remarks
+   * "Change" events are not `composable` so they will not
+   * permeate the shadow DOM boundary. This fn effectively proxies
+   * the change event, emitting a `change` event whenever the internal
+   * control emits a `change` event
+   * @internal
    */
 
 
-  scrolled() {
-    if (this.scrollTimeout) {
-      this.scrollTimeout = clearTimeout(this.scrollTimeout);
-    }
-
-    this.scrollTimeout = setTimeout(() => {
-      this.setFlippers();
-    }, this.frameTime);
+  handleChange() {
+    this.$emit("change");
   }
 
 }
 
 __decorate$1([attr({
-  converter: nullableNumberConverter
-})], HorizontalScroll$1.prototype, "speed", void 0);
+  attribute: "readonly",
+  mode: "boolean"
+})], Search$1.prototype, "readOnly", void 0);
 
-__decorate$1([attr], HorizontalScroll$1.prototype, "duration", void 0);
+__decorate$1([attr({
+  mode: "boolean"
+})], Search$1.prototype, "autofocus", void 0);
 
-__decorate$1([attr], HorizontalScroll$1.prototype, "easing", void 0);
+__decorate$1([attr], Search$1.prototype, "placeholder", void 0);
+
+__decorate$1([attr], Search$1.prototype, "list", void 0);
 
 __decorate$1([attr({
-  attribute: "aria-hidden",
-  converter: booleanConverter
-})], HorizontalScroll$1.prototype, "flippersHiddenFromAT", void 0);
+  converter: nullableNumberConverter
+})], Search$1.prototype, "maxlength", void 0);
 
-__decorate$1([observable], HorizontalScroll$1.prototype, "scrolling", void 0);
+__decorate$1([attr({
+  converter: nullableNumberConverter
+})], Search$1.prototype, "minlength", void 0);
 
-__decorate$1([observable], HorizontalScroll$1.prototype, "scrollItems", void 0);
+__decorate$1([attr], Search$1.prototype, "pattern", void 0);
 
 __decorate$1([attr({
-  attribute: "view"
-})], HorizontalScroll$1.prototype, "view", void 0);
+  converter: nullableNumberConverter
+})], Search$1.prototype, "size", void 0);
+
+__decorate$1([attr({
+  mode: "boolean"
+})], Search$1.prototype, "spellcheck", void 0);
 
+__decorate$1([observable], Search$1.prototype, "defaultSlottedNodes", void 0);
 /**
+ * Includes ARIA states and properties relating to the ARIA textbox role
+ *
  * @public
  */
 
-const horizontalScrollTemplate = (context, definition) => {
-  var _a, _b;
 
-  return html`<template class="horizontal-scroll" @keyup="${(x, c) => x.keyupHandler(c.event)}">${startSlotTemplate(context, definition)}<div class="scroll-area" part="scroll-area"><div class="scroll-view" part="scroll-view" @scroll="${x => x.scrolled()}" ${ref("scrollContainer")}><div class="content-container" part="content-container" ${ref("content")}><slot ${slotted({
-    property: "scrollItems",
-    filter: elements()
-  })}></slot></div></div>${when(x => x.view !== "mobile", html`<div class="scroll scroll-prev" part="scroll-prev" ${ref("previousFlipperContainer")}><div class="scroll-action" part="scroll-action-previous"><slot name="previous-flipper">${definition.previousFlipper instanceof Function ? definition.previousFlipper(context, definition) : (_a = definition.previousFlipper) !== null && _a !== void 0 ? _a : ""}</slot></div></div><div class="scroll scroll-next" part="scroll-next" ${ref("nextFlipperContainer")}><div class="scroll-action" part="scroll-action-next"><slot name="next-flipper">${definition.nextFlipper instanceof Function ? definition.nextFlipper(context, definition) : (_b = definition.nextFlipper) !== null && _b !== void 0 ? _b : ""}</slot></div></div>`)}</div>${endSlotTemplate(context, definition)}</template>`;
-};
+class DelegatesARIASearch {}
+applyMixins(DelegatesARIASearch, ARIAGlobalStatesAndProperties);
+applyMixins(Search$1, StartEnd, DelegatesARIASearch);
 
-class _Select extends Listbox {}
+class _Select extends Listbox$1 {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Select:class)} component.
  *
@@ -16083,15 +16547,6 @@ class Select$1 extends FormAssociatedSelect {
      */
 
     this.forcedPosition = false;
-    /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: role
-     */
-
-    this.role = SelectRole.combobox;
     /**
      * Holds the current state for the calculated position of the listbox.
      *
@@ -16116,13 +16571,17 @@ class Select$1 extends FormAssociatedSelect {
   }
 
   openChanged() {
-    this.ariaExpanded = this.open ? "true" : "false";
-
     if (this.open) {
+      this.ariaControls = this.listbox.id;
+      this.ariaExpanded = "true";
       this.setPositioning();
       this.focusAndScrollOptionIntoView();
       this.indexWhenOpened = this.selectedIndex;
+      return;
     }
+
+    this.ariaControls = "";
+    this.ariaExpanded = "false";
   }
   /**
    * The value property.
@@ -16352,7 +16811,7 @@ class Select$1 extends FormAssociatedSelect {
     switch (key) {
       case " ":
         {
-          if (this.typeAheadExpired) {
+          if (this.typeaheadExpired) {
             e.preventDefault();
             this.open = !this.open;
           }
@@ -16399,6 +16858,10 @@ class Select$1 extends FormAssociatedSelect {
   connectedCallback() {
     super.connectedCallback();
     this.forcedPosition = !!this.positionAttribute;
+
+    if (!this.listbox.id) {
+      this.listbox.id = uniqueId("listbox-");
+    }
   }
 
 }
@@ -16426,14 +16889,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);
 
 /**
@@ -16441,8 +16899,8 @@ 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({
-  filter: Listbox.slottedOptionFilter,
+const selectTemplate = (context, definition) => html`<template class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}" aria-activedescendant="${x => x.ariaActiveDescendant}" aria-controls="${x => x.ariaControls}" aria-disabled="${x => x.ariaDisabled}" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" role="combobox" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><div class="control" part="control" ?disabled="${x => x.disabled}">${startSlotTemplate(context, definition)}<slot name="button-container"><div class="selected-value" part="selected-value"><slot name="selected-value">${x => x.displayValue}</slot></div><div aria-hidden="true" class="indicator" part="indicator"><slot name="indicator">${definition.indicator || ""}</slot></div></slot>${endSlotTemplate(context, definition)}</div><div class="listbox" part="listbox" role="listbox" ?disabled="${x => x.disabled}" ?hidden="${x => !x.open}" ${ref("listbox")}><slot ${slotted({
+  filter: Listbox$1.slottedOptionFilter,
   flatten: true,
   property: "slottedOptions"
 })}></slot></div></template>`;
@@ -16500,7 +16958,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;
   }
 
@@ -16510,7 +16968,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
 };
@@ -16536,11 +16994,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;
@@ -16558,7 +17016,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;
@@ -16566,18 +17024,18 @@ 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);
 
-      if (leftNum === Number.NaN && rightNum === Number.NaN) {
+      if (Number.isNaN(leftNum) && Number.isNaN(rightNum)) {
         rightNum = 50;
         leftNum = 50;
       }
 
       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}%;`;
       }
@@ -16724,7 +17182,7 @@ class Slider extends FormAssociatedSlider {
      * @internal
      */
 
-    this.direction = Direction$1.ltr;
+    this.direction = Direction.ltr;
     /**
      * @internal
      */
@@ -16976,6 +17434,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
    */
@@ -17052,7 +17524,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;
@@ -17065,7 +17537,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;
@@ -17879,14 +18351,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
     }
   }
 });
@@ -17913,7 +18385,7 @@ class Toolbar$1 extends FoundationElement {
      * @internal
      */
 
-    this.direction = Direction$1.ltr;
+    this.direction = Direction.ltr;
     /**
      * The orientation of the toolbar.
      *
@@ -18253,7 +18725,7 @@ class Tooltip$1 extends FoundationElement {
      * @internal
      */
 
-    this.horizontalInset = "true";
+    this.horizontalInset = "false";
     /**
      * @internal
      */
@@ -18263,7 +18735,7 @@ class Tooltip$1 extends FoundationElement {
      * @internal
      */
 
-    this.horizontalScaling = "anchor";
+    this.horizontalScaling = "content";
     /**
      * @internal
      */
@@ -18291,7 +18763,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
      */
@@ -18313,10 +18785,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
@@ -18576,38 +19050,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;
     }
   }
@@ -18754,7 +19216,15 @@ class TreeItem extends FoundationElement {
   }
 
   handleSelected(e) {
-    this.$emit("selected-change", 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) {
@@ -19055,38 +19525,6 @@ __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
@@ -22999,7 +23437,7 @@ const fluentDivider = Divider.compose({
 const dividerStyles = dividerStyles$1;
 
 const flipperStyles$1 = (context, definition) => css`
-    ${display('inline-flex')} :host{height:calc((${heightNumber} + ${designUnit}) * 1px);justify-content:center;align-items:center;fill:currentcolor;color:${neutralFillStrongRest};background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};box-sizing:border-box;border:calc(${focusStrokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);outline:none;padding:0}:host(.disabled){opacity:${disabledOpacity};cursor:${disabledCursor}}.next,.previous{display:flex}:host(:not(.disabled):hover){cursor:pointer}:host(:not(.disabled):hover){color:${neutralFillStrongHover}}:host(:not(.disabled):active){color:${neutralFillStrongActive}}:host(:${focusVisible}){border-color:${focusStrokeOuter}}:host::-moz-focus-inner{border:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('inline-flex')} :host{height:calc((${heightNumber} + ${designUnit}) * 1px);justify-content:center;align-items:center;fill:currentcolor;color:${neutralFillStrongRest};background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};box-sizing:border-box;border:calc(${focusStrokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);outline:none;padding:0}:host(.disabled){opacity:${disabledOpacity};cursor:${disabledCursor};pointer-events:none}.next,.previous{display:flex}:host(:not(.disabled):hover){cursor:pointer}:host(:not(.disabled):hover){color:${neutralFillStrongHover}}:host(:not(.disabled):active){color:${neutralFillStrongActive}}:host(:${focusVisible}){border-color:${focusStrokeOuter}}:host::-moz-focus-inner{border:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText}}:host .next,:host .previous{color:${SystemColors.ButtonText};fill:currentcolor}:host(:not(.disabled):hover){background:${SystemColors.Highlight}}:host(:not(.disabled):hover) .next,:host(:not(.disabled):hover) .previous{color:${SystemColors.HighlightText};fill:currentcolor}:host(.disabled){opacity:1}:host(.disabled),:host(.disabled) .next,:host(.disabled) .previous{border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};fill:currentcolor}:host(:${focusVisible}){forced-color-adjust:none;border-color:${SystemColors.Highlight};box-shadow:0 0 0 2px ${SystemColors.ButtonFace},0 0 0 4px ${SystemColors.ButtonText}}`));
 
 /**
@@ -23098,6 +23536,7 @@ const horizontalScrollStyles = horizontalScrollStyles$1;
 const listboxStyles$1 = (context, definition) => css`
     ${display('inline-flex')} :host{border:calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;flex-direction:column;padding:calc(${designUnit} * 1px) 0;outline:none}::slotted(${context.tagFor(ListboxOption)}){margin:0 calc(${designUnit} * 1px)}:host(:focus-within:not([disabled])){border-color:${focusStrokeOuter};box-shadow:0 0 0 1px ${focusStrokeOuter} inset}`;
 
+class Listbox extends Listbox$1 {}
 /**
  * The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}
  * {@link @microsoft/fast-foundation#listboxTemplate}
@@ -23459,6 +23898,90 @@ const fluentRadioGroup = RadioGroup.compose({
 
 const radioGroupStyles = radioGroupStyles$1;
 
+/**
+ * @public
+ */
+
+const searchTemplate = (context, definition) => html`<template class=" ${x => x.readOnly ? 'readonly' : ''} "><label part="label" for="control" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden'}"><slot ${slotted({
+  property: 'defaultSlottedNodes',
+  filter: whitespaceFilter
+})}></slot></label><div class="root" part="root" ${ref('root')}>${startSlotTemplate(context, definition)}<div class="input-wrapper" part="input-wrapper"><input class="control" part="control" id="control" @input="${x => x.handleTextInput()}" @change="${x => x.handleChange()}" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" ?spellcheck="${x => x.spellcheck}" :value="${x => x.value}" type="search" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref('control')} /><slot name="clear-button"><button class="clear-button ${x => x.value ? '' : 'clear-button__hidden'}" part="clear-button" tabindex="-1" @click=${x => x.handleClearInput()}><slot name="clear-glyph"><svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z" /></svg></slot></button></slot></div>${endSlotTemplate(context, definition)}</div></template>`;
+
+const clearButtonHover = DesignToken.create("clear-button-hover").withDefault(target => {
+  const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+  const inputRecipe = neutralFillInputRecipe.getValueFor(target);
+  return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).hover;
+});
+const clearButtonActive = DesignToken.create("clear-button-active").withDefault(target => {
+  const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+  const inputRecipe = neutralFillInputRecipe.getValueFor(target);
+  return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active;
+});
+const searchFilledStyles = (context, definition) => css`
+    ${inputFilledStyles(context, definition, '.root')}
+  `.withBehaviors(forcedColorsStylesheetBehavior(css`
+        ${inputFilledForcedColorStyles(context, definition, '.root')}
+      `));
+const searchStyles$1 = (context, definition) => css`
+    ${display('inline-block')}
+    ${inputStyles(context, definition, '.root')}
+    ${inputStateStyles()}
+    .root{display:flex;flex-direction:row}.control{-webkit-appearance:none;color:inherit;background:transparent;border:0;height:calc(100% - 4px);margin-top:auto;margin-bottom:auto;padding:0 calc(${designUnit} * 2px + 1px);font-family:inherit;font-size:inherit;line-height:inherit}.clear-button{display:inline-flex;align-items:center;margin:1px;height:calc(100% - 2px);opacity:0;background:transparent;color:${neutralForegroundRest};fill:currentcolor;border:none;border-radius:calc(${controlCornerRadius} * 1px);min-width:calc(${heightNumber} * 1px);font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};outline:none;font-family:${bodyFont};padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px)}.clear-button:hover{background:${clearButtonHover}}.clear-button:active{background:${clearButtonActive}}:host(:hover:not([disabled],[readOnly])) .clear-button,:host(:active:not([disabled],[readOnly])) .clear-button,:host(:focus-within:not([disabled],[readOnly])) .clear-button{opacity:1}:host(:hover:not([disabled],[readOnly])) .clear-button__hidden,:host(:active:not([disabled],[readOnly])) .clear-button__hidden,:host(:focus-within:not([disabled],[readOnly])) .clear-button__hidden{opacity:0}.control::-webkit-search-cancel-button{-webkit-appearance:none}.input-wrapper{display:flex;position:relative;width:100%}.start,.end{display:flex;margin:1px;align-items:center}.start{display:flex;margin-inline-start:11px}::slotted([slot="end"]){height:100%}.clear-button__hidden{opacity:0}.end{margin-inline-end:11px}::slotted(${context.tagFor(Button$1)}){margin-inline-end:1px}`.withBehaviors(appearanceBehavior('filled', searchFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css`
+        ${inputForcedColorStyles(context, definition, '.root')}
+      `));
+
+/**
+ * The Fluent search class
+ * @internal
+ */
+
+class Search extends Search$1 {
+  constructor() {
+    super(...arguments);
+    /**
+     * The appearance of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+
+    this.appearance = 'outline';
+  }
+
+}
+
+__decorate([attr], Search.prototype, "appearance", void 0);
+/**
+ * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search},
+ * {@link @microsoft/fast-foundation#searchTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-search\>
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ */
+
+
+const fluentSearch = Search.compose({
+  baseName: 'search',
+  baseClass: Search$1,
+  template: searchTemplate,
+  styles: searchStyles$1,
+  start: `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg%22%3E"><path d="M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"/></svg>`,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+/**
+ * Styles for Search
+ * @public
+ */
+
+const searchStyles = searchStyles$1;
+
 /**
  * The Fluent select class
  * @internal
@@ -23678,7 +24201,7 @@ const fluentTab = Tab.compose({
 const tabStyles = tabStyles$1;
 
 const tabPanelStyles$1 = (context, definition) => css`
-  ${display('block')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampMinus1FontSize};font-weight:400;line-height:${typeRampMinus1LineHeight};padding:0 calc((6 + (${designUnit} * 2 * ${density})) * 1px)}`;
+  ${display('block')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};font-weight:400;line-height:${typeRampBaseLineHeight};padding:0 calc((6 + (${designUnit} * 2 * ${density})) * 1px)}`;
 
 /**
  * The Fluent Tab Panel Custom Element. Implements {@link @microsoft/fast-foundation#TabPanel},
@@ -24062,6 +24585,7 @@ const allComponents = {
   fluentProgressRing,
   fluentRadio,
   fluentRadioGroup,
+  fluentSearch,
   fluentSelect,
   fluentSkeleton,
   fluentSlider,
@@ -24117,4 +24641,4 @@ function provideFluentDesignSystem(element) {
 
 const FluentDesignSystem = provideFluentDesignSystem().register(allComponents);
 
-export { AccentButtonStyles, Accordion, AccordionItem, Anchor, AnchoredRegion, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Combobox, DataGrid, DataGridCell, DataGridRow, DesignSystemProvider, Dialog, DirectionalStyleSheetBehavior, Divider, Flipper, FluentDesignSystem, HorizontalScroll, HypertextStyles, LightweightButtonStyles, Listbox, Menu, MenuItem, NumberField, OptionStyles, OutlineButtonStyles, PaletteRGB, Progress, ProgressRing, Radio, RadioGroup, RadioStyles, Select, Skeleton, Slider, SliderLabel, StandardLuminance, StealthButtonStyles, SwatchRGB, Switch, Tab, TabPanel, Tabs, TextArea, TextField, Toolbar, Tooltip, TreeItem, TreeView, accentBaseColor, accentFillActive, accentFillActiveDelta, accentFillFocus, accentFillFocusDelta, accentFillHover, accentFillHoverDelta, accentFillRecipe, accentFillRest, accentFillRestDelta, accentForegroundActive, accentForegroundActiveDelta, accentForegroundCut, accentForegroundCutLarge, accentForegroundFocus, accentForegroundFocusDelta, accentForegroundHover, accentForegroundHoverDelta, accentForegroundRecipe, accentForegroundRest, accentForegroundRestDelta, accentPalette, accentStrokeControlActive, accentStrokeControlFocus, accentStrokeControlHover, accentStrokeControlRecipe, accentStrokeControlRest, accordionItemStyles, accordionStyles, allComponents, ambientShadow, anchorStyles, anchoredRegionStyles, badgeStyles, baseButtonStyles, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, bodyFont, breadcrumbItemStyles, breadcrumbStyles, buttonStyles, cardStyles, checkboxStyles, comboboxStyles, controlCornerRadius, cornerRadius, dataGridCellStyles, dataGridRowStyles, dataGridStyles, density, designUnit, dialogStyles, direction, directionalShadow, disabledOpacity, dividerStyles, elevatedCornerRadius, elevation, elevationShadowCardActive, elevationShadowCardActiveSize, elevationShadowCardFocus, elevationShadowCardFocusSize, elevationShadowCardHover, elevationShadowCardHoverSize, elevationShadowCardRest, elevationShadowCardRestSize, elevationShadowDialog, elevationShadowDialogSize, elevationShadowFlyout, elevationShadowFlyoutSize, elevationShadowRecipe, elevationShadowTooltip, elevationShadowTooltipSize, fillColor, flipperStyles, fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCalendar, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentMenu, fluentMenuItem, fluentNumberField, fluentOption, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTab, fluentTabPanel, fluentTabs, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeItem, fluentTreeView, focusOutlineWidth, focusStrokeInner, focusStrokeInnerRecipe, focusStrokeOuter, focusStrokeOuterRecipe, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentActiveLarge, foregroundOnAccentFocus, foregroundOnAccentFocusLarge, foregroundOnAccentHover, foregroundOnAccentHoverLarge, foregroundOnAccentLargeRecipe, foregroundOnAccentRecipe, foregroundOnAccentRest, foregroundOnAccentRestLarge, heightNumber, horizontalScrollStyles, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, isDark, layerCornerRadius, listboxStyles, menuItemStyles, menuStyles, neutralBaseColor, neutralContrastFillActive, neutralContrastFillActiveDelta, neutralContrastFillFocus, neutralContrastFillFocusDelta, neutralContrastFillHover, neutralContrastFillHoverDelta, neutralContrastFillRest, neutralContrastFillRestDelta, neutralDivider, neutralDividerRestDelta, neutralFillActive, neutralFillActiveDelta, neutralFillCard, neutralFillCardDelta, neutralFillFocus, neutralFillFocusDelta, neutralFillHover, neutralFillHoverDelta, neutralFillInputActive, neutralFillInputActiveDelta, neutralFillInputAltActive, neutralFillInputAltActiveDelta, neutralFillInputAltFocus, neutralFillInputAltFocusDelta, neutralFillInputAltHover, neutralFillInputAltHoverDelta, neutralFillInputAltRecipe, neutralFillInputAltRest, neutralFillInputAltRestDelta, neutralFillInputFocus, neutralFillInputFocusDelta, neutralFillInputHover, neutralFillInputHoverDelta, neutralFillInputRecipe, neutralFillInputRest, neutralFillInputRestDelta, neutralFillInverseActive, neutralFillInverseActiveDelta, neutralFillInverseFocus, neutralFillInverseFocusDelta, neutralFillInverseHover, neutralFillInverseHoverDelta, neutralFillInverseRecipe, neutralFillInverseRest, neutralFillInverseRestDelta, neutralFillLayerActive, neutralFillLayerActiveDelta, neutralFillLayerAltRecipe, neutralFillLayerAltRest, neutralFillLayerAltRestDelta, neutralFillLayerHover, neutralFillLayerHoverDelta, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillLayerRestDelta, neutralFillRecipe, neutralFillRest, neutralFillRestDelta, neutralFillSecondaryActive, neutralFillSecondaryActiveDelta, neutralFillSecondaryFocus, neutralFillSecondaryFocusDelta, neutralFillSecondaryHover, neutralFillSecondaryHoverDelta, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillSecondaryRestDelta, neutralFillStealthActive, neutralFillStealthActiveDelta, neutralFillStealthFocus, neutralFillStealthFocusDelta, neutralFillStealthHover, neutralFillStealthHoverDelta, neutralFillStealthRecipe, neutralFillStealthRest, neutralFillStealthRestDelta, neutralFillStrongActive, neutralFillStrongActiveDelta, neutralFillStrongFocus, neutralFillStrongFocusDelta, neutralFillStrongHover, neutralFillStrongHoverDelta, neutralFillStrongRecipe, neutralFillStrongRest, neutralFillStrongRestDelta, neutralFillToggleActive, neutralFillToggleActiveDelta, neutralFillToggleFocus, neutralFillToggleFocusDelta, neutralFillToggleHover, neutralFillToggleHoverDelta, neutralFillToggleRest, neutralFillToggleRestDelta, neutralFocus, neutralFocusInnerAccent, neutralForegroundActive, neutralForegroundFocus, neutralForegroundHint, neutralForegroundHintRecipe, neutralForegroundHover, neutralForegroundRecipe, neutralForegroundRest, neutralLayer1, neutralLayer1Recipe, neutralLayer2, neutralLayer2Recipe, neutralLayer3, neutralLayer3Recipe, neutralLayer4, neutralLayer4Recipe, neutralLayerCardContainer, neutralLayerCardContainerRecipe, neutralLayerFloating, neutralLayerFloatingRecipe, neutralLayerL1, neutralLayerL2, neutralLayerL3, neutralLayerL4, neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest, neutralPalette, neutralStrokeActive, neutralStrokeActiveDelta, neutralStrokeControlActive, neutralStrokeControlActiveDelta, neutralStrokeControlFocus, neutralStrokeControlFocusDelta, neutralStrokeControlHover, neutralStrokeControlHoverDelta, neutralStrokeControlRecipe, neutralStrokeControlRest, neutralStrokeControlRestDelta, neutralStrokeDividerRecipe, neutralStrokeDividerRest, neutralStrokeDividerRestDelta, neutralStrokeFocus, neutralStrokeFocusDelta, neutralStrokeHover, neutralStrokeHoverDelta, neutralStrokeInputActive, neutralStrokeInputFocus, neutralStrokeInputHover, neutralStrokeInputRecipe, neutralStrokeInputRest, neutralStrokeLayerActive, neutralStrokeLayerActiveDelta, neutralStrokeLayerHover, neutralStrokeLayerHoverDelta, neutralStrokeLayerRecipe, neutralStrokeLayerRest, neutralStrokeLayerRestDelta, neutralStrokeRecipe, neutralStrokeRest, neutralStrokeRestDelta, neutralStrokeStrongActive, neutralStrokeStrongActiveDelta, neutralStrokeStrongFocus, neutralStrokeStrongFocusDelta, neutralStrokeStrongHover, neutralStrokeStrongHoverDelta, neutralStrokeStrongRecipe, neutralStrokeStrongRest, numberFieldStyles, outlineWidth, progressRingStyles, progressStyles, provideFluentDesignSystem, radioGroupStyles, selectStyles, skeletonStyles, sliderLabelStyles, sliderStyles, strokeWidth, switchStyles, tabPanelStyles, tabStyles, tabsStyles, textAreaStyles, textFieldStyles, treeItemStyles, treeViewStyles, typeRampBaseFontSize, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6LineHeight };
+export { AccentButtonStyles, Accordion, AccordionItem, Anchor, AnchoredRegion, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Combobox, DataGrid, DataGridCell, DataGridRow, DesignSystemProvider, Dialog, DirectionalStyleSheetBehavior, Divider, Flipper, FluentDesignSystem, HorizontalScroll, HypertextStyles, LightweightButtonStyles, Listbox, Menu, MenuItem, NumberField, OptionStyles, OutlineButtonStyles, PaletteRGB, Progress, ProgressRing, Radio, RadioGroup, RadioStyles, Search, Select, Skeleton, Slider, SliderLabel, StandardLuminance, StealthButtonStyles, SwatchRGB, Switch, Tab, TabPanel, Tabs, TextArea, TextField, Toolbar, Tooltip, TreeItem, TreeView, accentBaseColor, accentFillActive, accentFillActiveDelta, accentFillFocus, accentFillFocusDelta, accentFillHover, accentFillHoverDelta, accentFillRecipe, accentFillRest, accentFillRestDelta, accentForegroundActive, accentForegroundActiveDelta, accentForegroundCut, accentForegroundCutLarge, accentForegroundFocus, accentForegroundFocusDelta, accentForegroundHover, accentForegroundHoverDelta, accentForegroundRecipe, accentForegroundRest, accentForegroundRestDelta, accentPalette, accentStrokeControlActive, accentStrokeControlFocus, accentStrokeControlHover, accentStrokeControlRecipe, accentStrokeControlRest, accordionItemStyles, accordionStyles, allComponents, ambientShadow, anchorStyles, anchoredRegionStyles, badgeStyles, baseButtonStyles, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, bodyFont, breadcrumbItemStyles, breadcrumbStyles, buttonStyles, cardStyles, checkboxStyles, comboboxStyles, controlCornerRadius, cornerRadius, dataGridCellStyles, dataGridRowStyles, dataGridStyles, density, designUnit, dialogStyles, direction, directionalShadow, disabledOpacity, dividerStyles, elevatedCornerRadius, elevation, elevationShadowCardActive, elevationShadowCardActiveSize, elevationShadowCardFocus, elevationShadowCardFocusSize, elevationShadowCardHover, elevationShadowCardHoverSize, elevationShadowCardRest, elevationShadowCardRestSize, elevationShadowDialog, elevationShadowDialogSize, elevationShadowFlyout, elevationShadowFlyoutSize, elevationShadowRecipe, elevationShadowTooltip, elevationShadowTooltipSize, fillColor, flipperStyles, fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCalendar, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentMenu, fluentMenuItem, fluentNumberField, fluentOption, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTab, fluentTabPanel, fluentTabs, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeItem, fluentTreeView, focusOutlineWidth, focusStrokeInner, focusStrokeInnerRecipe, focusStrokeOuter, focusStrokeOuterRecipe, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentActiveLarge, foregroundOnAccentFocus, foregroundOnAccentFocusLarge, foregroundOnAccentHover, foregroundOnAccentHoverLarge, foregroundOnAccentLargeRecipe, foregroundOnAccentRecipe, foregroundOnAccentRest, foregroundOnAccentRestLarge, heightNumber, horizontalScrollStyles, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, isDark, layerCornerRadius, listboxStyles, menuItemStyles, menuStyles, neutralBaseColor, neutralContrastFillActive, neutralContrastFillActiveDelta, neutralContrastFillFocus, neutralContrastFillFocusDelta, neutralContrastFillHover, neutralContrastFillHoverDelta, neutralContrastFillRest, neutralContrastFillRestDelta, neutralDivider, neutralDividerRestDelta, neutralFillActive, neutralFillActiveDelta, neutralFillCard, neutralFillCardDelta, neutralFillFocus, neutralFillFocusDelta, neutralFillHover, neutralFillHoverDelta, neutralFillInputActive, neutralFillInputActiveDelta, neutralFillInputAltActive, neutralFillInputAltActiveDelta, neutralFillInputAltFocus, neutralFillInputAltFocusDelta, neutralFillInputAltHover, neutralFillInputAltHoverDelta, neutralFillInputAltRecipe, neutralFillInputAltRest, neutralFillInputAltRestDelta, neutralFillInputFocus, neutralFillInputFocusDelta, neutralFillInputHover, neutralFillInputHoverDelta, neutralFillInputRecipe, neutralFillInputRest, neutralFillInputRestDelta, neutralFillInverseActive, neutralFillInverseActiveDelta, neutralFillInverseFocus, neutralFillInverseFocusDelta, neutralFillInverseHover, neutralFillInverseHoverDelta, neutralFillInverseRecipe, neutralFillInverseRest, neutralFillInverseRestDelta, neutralFillLayerActive, neutralFillLayerActiveDelta, neutralFillLayerAltRecipe, neutralFillLayerAltRest, neutralFillLayerAltRestDelta, neutralFillLayerHover, neutralFillLayerHoverDelta, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillLayerRestDelta, neutralFillRecipe, neutralFillRest, neutralFillRestDelta, neutralFillSecondaryActive, neutralFillSecondaryActiveDelta, neutralFillSecondaryFocus, neutralFillSecondaryFocusDelta, neutralFillSecondaryHover, neutralFillSecondaryHoverDelta, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillSecondaryRestDelta, neutralFillStealthActive, neutralFillStealthActiveDelta, neutralFillStealthFocus, neutralFillStealthFocusDelta, neutralFillStealthHover, neutralFillStealthHoverDelta, neutralFillStealthRecipe, neutralFillStealthRest, neutralFillStealthRestDelta, neutralFillStrongActive, neutralFillStrongActiveDelta, neutralFillStrongFocus, neutralFillStrongFocusDelta, neutralFillStrongHover, neutralFillStrongHoverDelta, neutralFillStrongRecipe, neutralFillStrongRest, neutralFillStrongRestDelta, neutralFillToggleActive, neutralFillToggleActiveDelta, neutralFillToggleFocus, neutralFillToggleFocusDelta, neutralFillToggleHover, neutralFillToggleHoverDelta, neutralFillToggleRest, neutralFillToggleRestDelta, neutralFocus, neutralFocusInnerAccent, neutralForegroundActive, neutralForegroundFocus, neutralForegroundHint, neutralForegroundHintRecipe, neutralForegroundHover, neutralForegroundRecipe, neutralForegroundRest, neutralLayer1, neutralLayer1Recipe, neutralLayer2, neutralLayer2Recipe, neutralLayer3, neutralLayer3Recipe, neutralLayer4, neutralLayer4Recipe, neutralLayerCardContainer, neutralLayerCardContainerRecipe, neutralLayerFloating, neutralLayerFloatingRecipe, neutralLayerL1, neutralLayerL2, neutralLayerL3, neutralLayerL4, neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest, neutralPalette, neutralStrokeActive, neutralStrokeActiveDelta, neutralStrokeControlActive, neutralStrokeControlActiveDelta, neutralStrokeControlFocus, neutralStrokeControlFocusDelta, neutralStrokeControlHover, neutralStrokeControlHoverDelta, neutralStrokeControlRecipe, neutralStrokeControlRest, neutralStrokeControlRestDelta, neutralStrokeDividerRecipe, neutralStrokeDividerRest, neutralStrokeDividerRestDelta, neutralStrokeFocus, neutralStrokeFocusDelta, neutralStrokeHover, neutralStrokeHoverDelta, neutralStrokeInputActive, neutralStrokeInputFocus, neutralStrokeInputHover, neutralStrokeInputRecipe, neutralStrokeInputRest, neutralStrokeLayerActive, neutralStrokeLayerActiveDelta, neutralStrokeLayerHover, neutralStrokeLayerHoverDelta, neutralStrokeLayerRecipe, neutralStrokeLayerRest, neutralStrokeLayerRestDelta, neutralStrokeRecipe, neutralStrokeRest, neutralStrokeRestDelta, neutralStrokeStrongActive, neutralStrokeStrongActiveDelta, neutralStrokeStrongFocus, neutralStrokeStrongFocusDelta, neutralStrokeStrongHover, neutralStrokeStrongHoverDelta, neutralStrokeStrongRecipe, neutralStrokeStrongRest, numberFieldStyles, outlineWidth, progressRingStyles, progressStyles, provideFluentDesignSystem, radioGroupStyles, searchStyles, searchTemplate, selectStyles, skeletonStyles, sliderLabelStyles, sliderStyles, strokeWidth, switchStyles, tabPanelStyles, tabStyles, tabsStyles, textAreaStyles, textFieldStyles, treeItemStyles, treeViewStyles, typeRampBaseFontSize, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6LineHeight };