@fluentui/web-components 2.1.0 → 2.2.0

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;
   }
@@ -5559,7 +5562,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 */
@@ -10536,49 +10541,32 @@ var ListboxRole;
  * @public
  */
 
-class Listbox extends FoundationElement {
+class Listbox$1 extends FoundationElement {
   constructor() {
     super(...arguments);
     /**
-     * The index of the selected option
-     *
-     * @public
-     */
-
-    this.selectedIndex = -1;
-    /**
-     * @internal
-     */
-
-    this.typeaheadBuffer = "";
-    /**
-     * @internal
-     */
-
-    this.typeaheadTimeout = -1;
-    /**
-     * Flag for the typeahead timeout expiration.
+     * The internal unfiltered list of selectable options.
      *
      * @internal
      */
 
-    this.typeAheadExpired = true;
+    this._options = [];
     /**
      * The role of the element.
      *
      * @public
      * @remarks
-     * HTML Attribute: role
+     * HTML Attribute: `role`
      */
 
     this.role = ListboxRole.listbox;
     /**
-     * The internal unfiltered list of selectable options.
+     * The index of the selected option.
      *
-     * @internal
+     * @public
      */
 
-    this._options = [];
+    this.selectedIndex = -1;
     /**
      * A collection of the selected options.
      *
@@ -10595,66 +10583,52 @@ class Listbox extends FoundationElement {
 
     this.shouldSkipFocus = false;
     /**
-     * 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 current typeahead buffer string.
      *
-     * @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 = "";
+    /**
+     * Flag for the typeahead timeout expiration.
+     *
+     * @internal
+     */
 
-      this.typeaheadBuffer = `${this.typeAheadExpired ? "" : this.typeaheadBuffer}${key}`;
-    };
-  }
+    this.typeaheadExpired = true;
+    /**
+     * The timeout ID for the typeahead handler.
+     *
+     * @internal
+     */
 
-  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 +10646,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 +10694,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
    */
 
@@ -10716,6 +10710,116 @@ class Listbox extends FoundationElement {
 
     this.shouldSkipFocus = false;
   }
+  /**
+   * 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.
+   *
+   * @param key - the key to be evaluated
+   */
+
+
+  handleTypeAhead(key) {
+    if (this.typeaheadTimeout) {
+      window.clearTimeout(this.typeaheadTimeout);
+    }
+
+    this.typeaheadTimeout = window.setTimeout(() => this.typeaheadExpired = true, Listbox$1.TYPE_AHEAD_TIMEOUT_MS);
+
+    if (key.length > 1) {
+      return;
+    }
+
+    this.typeaheadBuffer = `${this.typeaheadExpired ? "" : this.typeaheadBuffer}${key}`;
+  }
+  /**
+   * Handles `keydown` actions for listbox navigation and typeahead.
+   *
+   * @internal
+   */
+
+
+  keydownHandler(e) {
+    if (this.disabled) {
+      return true;
+    }
+
+    this.shouldSkipFocus = false;
+    const key = e.key;
+
+    switch (key) {
+      // Select the first available option
+      case keyHome:
+        {
+          if (!e.shiftKey) {
+            e.preventDefault();
+            this.selectFirstOption();
+          }
+
+          break;
+        }
+      // Select the next selectable option
+
+      case keyArrowDown:
+        {
+          if (!e.shiftKey) {
+            e.preventDefault();
+            this.selectNextOption();
+          }
+
+          break;
+        }
+      // Select the previous selectable option
+
+      case keyArrowUp:
+        {
+          if (!e.shiftKey) {
+            e.preventDefault();
+            this.selectPreviousOption();
+          }
+
+          break;
+        }
+      // Select the last available option
+
+      case keyEnd:
+        {
+          e.preventDefault();
+          this.selectLastOption();
+          break;
+        }
+
+      case keyTab:
+        {
+          this.focusAndScrollOptionIntoView();
+          return true;
+        }
+
+      case keyEnter:
+      case keyEscape:
+        {
+          return true;
+        }
+
+      case keySpace:
+        {
+          if (this.typeaheadExpired) {
+            return true;
+          }
+        }
+      // Send key to Typeahead handler
+
+      default:
+        {
+          if (key.length === 1) {
+            this.handleTypeAhead(`${key}`);
+          }
+
+          return true;
+        }
+    }
+  }
   /**
    * Prevents `focusin` events from firing before `click` events when the
    * element is unfocused.
@@ -10729,40 +10833,37 @@ class Listbox extends FoundationElement {
     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
    */
 
 
-  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;
-    }
+  selectedIndexChanged(prev, next) {
+    this.setSelectedOptions();
   }
   /**
-   * Sets an option as selected and gives it focus.
+   * Updates the selectedness of each option when the list of selected options changes.
    *
-   * @param index - option index to select
-   * @public
+   * @param prev - the previous list of selected options
+   * @param next - the current list of selected options
+   *
+   * @internal
    */
 
 
-  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();
+  selectedOptionsChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      this.options.forEach(o => {
+        o.selected = next.includes(o);
+      });
     }
   }
   /**
-   * Moves focus to the first selectable option
+   * Moves focus to the first selectable option.
    *
    * @public
    */
@@ -10774,7 +10875,7 @@ class Listbox extends FoundationElement {
     }
   }
   /**
-   * Moves focus to the last selectable option
+   * Moves focus to the last selectable option.
    *
    * @internal
    */
@@ -10786,7 +10887,7 @@ class Listbox extends FoundationElement {
     }
   }
   /**
-   * Moves focus to the next selectable option
+   * Moves focus to the next selectable option.
    *
    * @internal
    */
@@ -10797,16 +10898,8 @@ class Listbox extends FoundationElement {
       this.selectedIndex += 1;
     }
   }
-
-  get length() {
-    if (this.options) {
-      return this.options.length;
-    }
-
-    return 0;
-  }
   /**
-   * Moves focus to the previous selectable option
+   * Moves focus to the previous selectable option.
    *
    * @internal
    */
@@ -10818,138 +10911,126 @@ class Listbox extends FoundationElement {
     }
   }
   /**
-   * Handles click events for listbox options
+   * Updates the selected index to match the first selected option.
    *
    * @internal
    */
 
 
-  clickHandler(e) {
-    const captured = e.target.closest(`option,[role=option]`);
+  setDefaultSelectedOption() {
+    if (this.options && this.$fastController.isConnected) {
+      const selectedIndex = this.options.findIndex(el => el.getAttribute("selected") !== null);
 
-    if (captured && !captured.disabled) {
-      this.selectedIndex = this.options.indexOf(captured);
-      return true;
+      if (selectedIndex !== -1) {
+        this.selectedIndex = selectedIndex;
+        return;
+      }
+
+      this.selectedIndex = 0;
     }
   }
   /**
-   * Handles keydown actions for listbox navigation and typeahead
+   * Sets the selected option and gives it focus.
    *
-   * @internal
+   * @public
    */
 
 
-  keydownHandler(e) {
-    if (this.disabled) {
-      return true;
-    }
-
-    this.shouldSkipFocus = false;
-    const key = e.key;
-
-    switch (key) {
-      // Select the first available option
-      case "Home":
-        {
-          if (!e.shiftKey) {
-            e.preventDefault();
-            this.selectFirstOption();
-          }
+  setSelectedOptions() {
+    var _a, _b, _c;
 
-          break;
-        }
-      // Select the next selectable option
+    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
+   */
 
-      case "ArrowDown":
-        {
-          if (!e.shiftKey) {
-            e.preventDefault();
-            this.selectNextOption();
-          }
 
-          break;
+  slottedOptionsChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      this.options = next.reduce((options, item) => {
+        if (isListboxOption(item)) {
+          options.push(item);
         }
-      // Select the previous selectable option
 
-      case "ArrowUp":
-        {
-          if (!e.shiftKey) {
-            e.preventDefault();
-            this.selectPreviousOption();
-          }
-
-          break;
-        }
-      // Select the last available option
+        return options;
+      }, []);
+      this.options.forEach(o => {
+        o.id = o.id || uniqueId("option-");
+      });
+      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
+   */
 
-      case "End":
-        {
-          e.preventDefault();
-          this.selectLastOption();
-          break;
-        }
 
-      case "Tab":
-        {
-          this.focusAndScrollOptionIntoView();
-          return true;
-        }
+  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));
 
-      case "Enter":
-      case "Escape":
-        {
-          return true;
-        }
+      if (filteredOptions.length) {
+        const selectedIndex = this.options.indexOf(filteredOptions[0]);
 
-      case " ":
-        {
-          if (this.typeAheadExpired) {
-            return true;
-          }
+        if (selectedIndex > -1) {
+          this.selectedIndex = selectedIndex;
         }
-      // Send key to Typeahead handler
-
-      default:
-        {
-          if (key.length === 1) {
-            this.handleTypeAhead(`${key}`);
-          }
+      }
 
-          return true;
-        }
+      this.typeaheadExpired = false;
     }
   }
 
 }
 /**
- * Typeahead timeout in milliseconds.
+ * A static filter to include only selectable options.
  *
- * @internal
+ * @param n - element to filter
+ * @public
  */
 
-Listbox.TYPE_AHEAD_TIMEOUT_MS = 1000;
+Listbox$1.slottedOptionFilter = n => isListboxOption(n) && !n.disabled && !n.hidden;
 /**
- * A static filter to include only enabled elements
+ * Typeahead timeout in milliseconds.
  *
- * @param n - element to filter
- * @public
+ * @internal
  */
 
-Listbox.slottedOptionFilter = n => isListboxOption(n) && !n.disabled && !n.hidden;
-
-__decorate$1([observable], Listbox.prototype, "selectedIndex", void 0);
 
-__decorate$1([observable], Listbox.prototype, "typeaheadBuffer", void 0);
-
-__decorate$1([attr], Listbox.prototype, "role", void 0);
+Listbox$1.TYPE_AHEAD_TIMEOUT_MS = 1000;
 
 __decorate$1([attr({
   mode: "boolean"
-})], Listbox.prototype, "disabled", void 0);
+})], Listbox$1.prototype, "disabled", void 0);
+
+__decorate$1([attr], Listbox$1.prototype, "role", void 0);
+
+__decorate$1([observable], Listbox$1.prototype, "selectedIndex", void 0);
 
-__decorate$1([observable], Listbox.prototype, "slottedOptions", void 0);
+__decorate$1([observable], Listbox$1.prototype, "selectedOptions", void 0);
 
-__decorate$1([observable], Listbox.prototype, "selectedOptions", void 0);
+__decorate$1([observable], Listbox$1.prototype, "slottedOptions", void 0);
+
+__decorate$1([observable], Listbox$1.prototype, "typeaheadBuffer", void 0);
 /**
  * Includes ARIA states and properties relating to the ARIA listbox role
  *
@@ -10977,9 +11058,9 @@ __decorate$1([observable], DelegatesARIAListbox.prototype, "ariaDisabled", void
 __decorate$1([observable], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
 
 applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
-applyMixins(Listbox, DelegatesARIAListbox);
+applyMixins(Listbox$1, DelegatesARIAListbox);
 
-class _Combobox extends Listbox {}
+class _Combobox extends Listbox$1 {}
 /**
  * A form-associated base class for the {@link (Combobox:class)} component.
  *
@@ -11207,12 +11288,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;
@@ -11268,6 +11350,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.
    *
@@ -11615,7 +11719,7 @@ applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
  */
 
 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,
+  filter: Listbox$1.slottedOptionFilter,
   flatten: true,
   property: "slottedOptions"
 })}></slot></div></template>`;
@@ -13854,13 +13958,59 @@ __decorate$1([attr], Flipper.prototype, "direction", void 0);
 
 const listboxOptionTemplate = (context, definition) => html`<template aria-selected="${x => x.selected}" class="${x => x.selected ? "selected" : ""} ${x => x.disabled ? "disabled" : ""}" role="option">${startSlotTemplate(context, definition)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(context, definition)}</template>`;
 
+/**
+ * A Listbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
+ *
+ * @public
+ */
+
+class ListboxElement extends Listbox$1 {
+  /**
+   * Prevents `focusin` events from firing before `click` events when the
+   * element is unfocused.
+   *
+   * @override
+   * @internal
+   */
+  mousedownHandler(e) {
+    if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) {
+      return super.mousedownHandler(e);
+    }
+  }
+  /**
+   * Ensures the size is a positive integer when the property is updated.
+   *
+   * @param prev - the previous size value
+   * @param next - the current size value
+   *
+   * @internal
+   */
+
+
+  sizeChanged(prev, next) {
+    const size = Math.max(0, parseInt(next.toFixed(), 10));
+
+    if (size !== next) {
+      DOM.queueUpdate(() => {
+        this.size = size;
+      });
+    }
+  }
+
+}
+
+__decorate$1([attr({
+  converter: nullableNumberConverter
+})], ListboxElement.prototype, "size", void 0);
+
 /**
  * The template for the {@link @microsoft/fast-foundation#(Listbox:class)} component.
  * @public
  */
 
 const listboxTemplate = (context, definition) => html`<template aria-activedescendant="${x => x.ariaActiveDescendant}" class="listbox" role="${x => x.role}" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><slot ${slotted({
-  filter: Listbox.slottedOptionFilter,
+  filter: ListboxElement.slottedOptionFilter,
   flatten: true,
   property: "slottedOptions"
 })}></slot></template>`;
@@ -14044,7 +14194,6 @@ class MenuItem extends FoundationElement {
       switch (this.role) {
         case MenuItemRole.menuitemcheckbox:
           this.checked = !this.checked;
-          this.$emit("change");
           break;
 
         case MenuItemRole.menuitem:
@@ -14781,62 +14930,108 @@ 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);
   }
   /**
-   *
-   * @param previousValue - previous stored value
-   * @param nextValue - value being updated
+   * 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
    */
 
 
-  valueChanged(previousValue, nextValue) {
-    var _a, _b;
-
-    let value = parseFloat(nextValue);
+  valueChanged(previous, next) {
+    this.value = this.getValidValue(next);
 
-    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);
+    if (next !== this.value) {
+      return;
     }
 
-    this.value = value.toString();
-
-    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
+   * @param updateControl - should the text field update to the valid value
+   *
+   * @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 +15044,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 +15056,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 +15083,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;
   }
   /**
@@ -15758,7 +15953,7 @@ class HorizontalScroll$1 extends FoundationElement {
 
   scrollItemsChanged(previous, next) {
     if (next && !this.updatingItems) {
-      this.setStops();
+      DOM.queueUpdate(() => this.setStops());
     }
   }
   /**
@@ -16043,7 +16238,184 @@ const horizontalScrollTemplate = (context, definition) => {
   })}></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 _Select extends Listbox {}
+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;
+    }
+  }
+
+  spellcheckChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.spellcheck = this.spellcheck;
+    }
+  }
+  /**
+   * @internal
+   */
+
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.validate();
+
+    if (this.autofocus) {
+      DOM.queueUpdate(() => {
+        this.focus();
+      });
+    }
+  }
+  /**
+   * Handles the internal control's `input` event
+   * @internal
+   */
+
+
+  handleTextInput() {
+    this.value = this.control.value;
+  }
+  /**
+   * Handles the control's clear value event
+   * @public
+   */
+
+
+  handleClearInput() {
+    this.value = "";
+    this.control.focus();
+  }
+  /**
+   * 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
+   */
+
+
+  handleChange() {
+    this.$emit("change");
+  }
+
+}
+
+__decorate$1([attr({
+  attribute: "readonly",
+  mode: "boolean"
+})], Search$1.prototype, "readOnly", void 0);
+
+__decorate$1([attr({
+  mode: "boolean"
+})], Search$1.prototype, "autofocus", void 0);
+
+__decorate$1([attr], Search$1.prototype, "placeholder", void 0);
+
+__decorate$1([attr], Search$1.prototype, "list", void 0);
+
+__decorate$1([attr({
+  converter: nullableNumberConverter
+})], Search$1.prototype, "maxlength", void 0);
+
+__decorate$1([attr({
+  converter: nullableNumberConverter
+})], Search$1.prototype, "minlength", void 0);
+
+__decorate$1([attr], Search$1.prototype, "pattern", void 0);
+
+__decorate$1([attr({
+  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
+ */
+
+
+class DelegatesARIASearch {}
+applyMixins(DelegatesARIASearch, ARIAGlobalStatesAndProperties);
+applyMixins(Search$1, StartEnd, DelegatesARIASearch);
+
+class _Select extends Listbox$1 {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Select:class)} component.
  *
@@ -16352,7 +16724,7 @@ class Select$1 extends FormAssociatedSelect {
     switch (key) {
       case " ":
         {
-          if (this.typeAheadExpired) {
+          if (this.typeaheadExpired) {
             e.preventDefault();
             this.open = !this.open;
           }
@@ -16442,7 +16814,7 @@ applyMixins(Select$1, StartEnd, DelegatesARIASelect);
  */
 
 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,
+  filter: Listbox$1.slottedOptionFilter,
   flatten: true,
   property: "slottedOptions"
 })}></slot></div></template>`;
@@ -16571,7 +16943,7 @@ class SliderLabel extends FoundationElement {
       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;
       }
@@ -18754,7 +19126,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) {
@@ -21544,7 +21924,7 @@ const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutr
   return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).active;
 });
 const accordionItemStyles$1 = (context, definition) => css`
-    ${display('flex')} :host{box-sizing:border-box;font-family:${bodyFont};flex-direction:column;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};background:${neutralFillLayerRest};color:${neutralForegroundRest};border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-radius:calc(${layerCornerRadius} * 1px)}.region{display:none;padding:calc(${designUnit} * 2 * 1px);background:${neutralFillLayerAltRest}}.heading{display:grid;position:relative;grid-template-columns:auto 1fr auto auto;align-items:center;z-index:2}.button{appearance:none;border:none;background:none;grid-column:2;grid-row:1;outline:none;margin:calc(${designUnit} * 3 * 1px) 0;padding:0 calc(${designUnit} * 2 * 1px);text-align:left;color:inherit;cursor:pointer;font-family:inherit}.button::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;cursor:pointer}.button:${focusVisible}::before{outline:none;border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};border-radius:calc(${layerCornerRadius} * 1px);box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(.expanded) .button:${focusVisible}::before{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.expanded) .region{display:block;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-bottom-left-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px);border-bottom-right-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px)}.icon{display:flex;align-items:center;justify-content:center;grid-column:4;z-index:2;pointer-events:none;background:${neutralFillStealthRestOnNeutralFillLayerRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;width:calc(${heightNumber} * 1px);height:calc(${heightNumber} * 1px);margin:calc(${designUnit} * 2 * 1px)}.heading:hover .icon{background:${neutralFillStealthHoverOnNeutralFillLayerRest}}.heading:active .icon{background:${neutralFillStealthActiveOnNeutralFillLayerRest}}slot[name='collapsed-icon']{display:flex}:host(.expanded) slot[name='collapsed-icon']{display:none}slot[name='expanded-icon']{display:none}:host(.expanded) slot[name='expanded-icon']{display:flex}.start{display:flex;align-items:center;padding-inline-start:calc(${designUnit} * 2 * 1px);justify-content:center;grid-column:1;z-index:2}.end{display:flex;align-items:center;justify-content:center;grid-column:3;z-index:2}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('flex')} :host{box-sizing:border-box;font-family:${bodyFont};flex-direction:column;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};background:${neutralFillLayerRest};color:${neutralForegroundRest};border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-radius:calc(${layerCornerRadius} * 1px)}.region{display:none;padding:calc(${designUnit} * 2 * 1px);background:${neutralFillLayerAltRest}}.heading{display:grid;position:relative;grid-template-columns:auto 1fr auto auto;align-items:center}.button{appearance:none;border:none;background:none;grid-column:2;grid-row:1;outline:none;margin:calc(${designUnit} * 3 * 1px) 0;padding:0 calc(${designUnit} * 2 * 1px);text-align:left;color:inherit;cursor:pointer;font-family:inherit}.button::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.button:${focusVisible}::before{outline:none;border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};border-radius:calc(${layerCornerRadius} * 1px);box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(.expanded) .button:${focusVisible}::before{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.expanded) .region{display:block;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-bottom-left-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px);border-bottom-right-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px)}.icon{display:flex;align-items:center;justify-content:center;grid-column:4;pointer-events:none;background:${neutralFillStealthRestOnNeutralFillLayerRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;width:calc(${heightNumber} * 1px);height:calc(${heightNumber} * 1px);margin:calc(${designUnit} * 2 * 1px)}.heading:hover .icon{background:${neutralFillStealthHoverOnNeutralFillLayerRest}}.heading:active .icon{background:${neutralFillStealthActiveOnNeutralFillLayerRest}}slot[name='collapsed-icon']{display:flex}:host(.expanded) slot[name='collapsed-icon']{display:none}slot[name='expanded-icon']{display:none}:host(.expanded) slot[name='expanded-icon']{display:flex}.start{display:flex;align-items:center;padding-inline-start:calc(${designUnit} * 2 * 1px);justify-content:center;grid-column:1}.end{display:flex;align-items:center;justify-content:center;grid-column:3}.icon,.start,.end{position:relative}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .button:${focusVisible}::before{border-color:${SystemColors.Highlight};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight}}.icon{fill:${SystemColors.ButtonText}}`));
 
 /**
@@ -22999,7 +23379,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 +23478,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 +23840,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
@@ -23648,7 +24113,7 @@ const fluentSwitch = Switch.compose({
 const switchStyles = switchStyles$1;
 
 const tabsStyles$1 = (context, definition) => css`
-      ${display('grid')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+      ${display('grid')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .activeIndicator,:host(.vertical) .activeIndicator{background:${SystemColors.Highlight}}`));
 
 const tabStyles$1 = (context, definition) => css`
@@ -24062,6 +24527,7 @@ const allComponents = {
   fluentProgressRing,
   fluentRadio,
   fluentRadioGroup,
+  fluentSearch,
   fluentSelect,
   fluentSkeleton,
   fluentSlider,
@@ -24117,4 +24583,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 };