@fluentui/web-components 2.2.1 → 2.2.2

package/dist/web-components.js

@@ -3634,7 +3634,8 @@ function when(binding, templateOrTemplateBinding) {
 }
 
 const defaultRepeatOptions = Object.freeze({
-  positioning: false
+  positioning: false,
+  recycle: true
 });
 
 function bindWithoutPositioning(view, items, index, context) {
@@ -3778,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);
@@ -4176,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.
@@ -5904,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;
 
@@ -6112,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
@@ -6151,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
@@ -6562,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;
 };
 
 /**
@@ -6850,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
 
@@ -7079,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";
@@ -8480,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;
@@ -8578,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);
+      });
+    }
   }
 
 }
@@ -10341,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)}
  *
@@ -10428,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) {
@@ -10440,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;
     }
@@ -10454,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;
     }
   }
 
@@ -10504,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({
@@ -10521,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.
@@ -10551,15 +10625,6 @@ class Listbox$1 extends FoundationElement {
      */
 
     this._options = [];
-    /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `role`
-     */
-
-    this.role = ListboxRole.listbox;
     /**
      * The index of the selected option.
      *
@@ -10957,17 +11022,24 @@ class Listbox$1 extends FoundationElement {
 
 
   slottedOptionsChanged(prev, next) {
-    if (this.$fastController.isConnected) {
-      this.options = next.reduce((options, item) => {
-        if (isListboxOption(item)) {
-          options.push(item);
-        }
+    this.options = next.reduce((options, item) => {
+      if (isListboxOption(item)) {
+        options.push(item);
+      }
 
-        return options;
-      }, []);
-      this.options.forEach(o => {
-        o.id = o.id || uniqueId("option-");
-      });
+      return options;
+    }, []);
+    const setSize = `${this.options.length}`;
+    this.options.forEach((option, index) => {
+      if (!option.id) {
+        option.id = uniqueId("option-");
+      }
+
+      option.ariaPosInSet = `${index + 1}`;
+      option.ariaSetSize = setSize;
+    });
+
+    if (this.$fastController.isConnected) {
       this.setSelectedOptions();
       this.setDefaultSelectedOption();
     }
@@ -11022,8 +11094,6 @@ __decorate$1([attr({
   mode: "boolean"
 })], 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$1.prototype, "selectedOptions", void 0);
@@ -11038,18 +11108,7 @@ __decorate$1([observable], Listbox$1.prototype, "typeaheadBuffer", void 0);
  */
 
 
-class DelegatesARIAListbox {
-  constructor() {
-    /**
-     * See {@link https://www.w3.org/WAI/PF/aria/roles#listbox} for more information
-     * @public
-     * @remarks
-     * HTML Attribute: aria-activedescendant
-     */
-    this.ariaActiveDescendant = "";
-  }
-
-}
+class DelegatesARIAListbox {}
 
 __decorate$1([observable], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
 
@@ -11060,6 +11119,74 @@ __decorate$1([observable], DelegatesARIAListbox.prototype, "ariaExpanded", void
 applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
 applyMixins(Listbox$1, DelegatesARIAListbox);
 
+/**
+ * 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="listbox" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><slot ${slotted({
+  filter: ListboxElement.slottedOptionFilter,
+  flatten: true,
+  property: "slottedOptions"
+})}></slot></template>`;
+
+/**
+ * Positioning directions for the listbox when a select is open.
+ * @public
+ */
+var SelectPosition;
+
+(function (SelectPosition) {
+  SelectPosition["above"] = "above";
+  SelectPosition["below"] = "below";
+})(SelectPosition || (SelectPosition = {}));
+
 class _Combobox extends Listbox$1 {}
 /**
  * A form-associated base class for the {@link (Combobox:class)} component.
@@ -11157,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.
@@ -11199,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.
@@ -11307,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.
@@ -11705,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);
 
-applyMixins(DelegatesARIACombobox, ARIAGlobalStatesAndProperties);
+__decorate$1([observable], DelegatesARIACombobox.prototype, "ariaControls", void 0);
+
+applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
 applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
 
 /**
@@ -11718,7 +11843,7 @@ applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
  * @public
  */
 
-const comboboxTemplate = (context, definition) => html`<template autocomplete="${x => x.autocomplete}" class="${x => x.disabled ? "disabled" : ""} ${x => x.position}" tabindex="${x => !x.disabled ? "0" : null}" aria-disabled="${x => x.ariaDisabled}" aria-autocomplete="${x => x.autocomplete}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}"><div class="control" part="control">${startSlotTemplate(context, definition)}<slot name="control"><input class="selected-value" part="selected-value" placeholder="${x => x.placeholder}" role="${x => x.role}" type="text" aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}" aria-controls="${x => x.listboxId}" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" ?disabled="${x => x.disabled}" :value="${x => x.value}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}" ${ref("control")} /><div class="indicator" part="indicator" aria-hidden="true"><slot name="indicator">${definition.indicator || ""}</slot></div></slot>${endSlotTemplate(context, definition)}</div><div aria-disabled="${x => x.disabled}" class="listbox" id="${x => x.listboxId}" part="listbox" role="listbox" ?disabled="${x => x.disabled}" ?hidden="${x => !x.open}" ${ref("listbox")}><slot ${slotted({
+const comboboxTemplate = (context, definition) => html`<template aria-disabled="${x => x.ariaDisabled}" autocomplete="${x => x.autocomplete}" class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}" 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"
@@ -13822,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
@@ -13862,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
@@ -13956,64 +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>`;
-
-/**
- * A Listbox Custom HTML Element.
- * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
- *
- * @public
- */
-
-class ListboxElement extends Listbox$1 {
-  /**
-   * Prevents `focusin` events from firing before `click` events when the
-   * element is unfocused.
-   *
-   * @override
-   * @internal
-   */
-  mousedownHandler(e) {
-    if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) {
-      return super.mousedownHandler(e);
-    }
-  }
-  /**
-   * Ensures the size is a positive integer when the property is updated.
-   *
-   * @param prev - the previous size value
-   * @param next - the current size value
-   *
-   * @internal
-   */
-
-
-  sizeChanged(prev, next) {
-    const size = Math.max(0, parseInt(next.toFixed(), 10));
-
-    if (size !== next) {
-      DOM.queueUpdate(() => {
-        this.size = size;
-      });
-    }
-  }
-
-}
-
-__decorate$1([attr({
-  converter: nullableNumberConverter
-})], ListboxElement.prototype, "size", void 0);
-
-/**
- * The template for the {@link @microsoft/fast-foundation#(Listbox:class)} component.
- * @public
- */
-
-const listboxTemplate = (context, definition) => html`<template aria-activedescendant="${x => x.ariaActiveDescendant}" class="listbox" role="${x => x.role}" tabindex="${x => !x.disabled ? "0" : null}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><slot ${slotted({
-  filter: ListboxElement.slottedOptionFilter,
-  flatten: true,
-  property: "slottedOptions"
-})}></slot></template>`;
+const listboxOptionTemplate = (context, definition) => html`<template aria-checked="${x => x.ariaChecked}" aria-disabled="${x => x.ariaDisabled}" aria-posinset="${x => x.ariaPosInSet}" aria-selected="${x => x.ariaSelected}" aria-setsize="${x => x.ariaSetSize}" class="${x => [x.checked && "checked", x.selected && "selected", x.disabled && "disabled"].filter(Boolean).join(" ")}" role="option">${startSlotTemplate(context, definition)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(context, definition)}</template>`;
 
 /**
  * Menu items roles.
@@ -14078,7 +14157,7 @@ class MenuItem extends FoundationElement {
      * @internal
      */
 
-    this.currentDirection = Direction$1.ltr;
+    this.currentDirection = Direction.ltr;
     this.focusSubmenuOnLoad = false;
     /**
      * @internal
@@ -14981,6 +15060,20 @@ class NumberField$1 extends FormAssociatedNumberField {
 
     this.value = this.getValidValue(this.value);
   }
+  /**
+   * The value property, typed as a number.
+   *
+   * @public
+   */
+
+
+  get valueAsNumber() {
+    return parseFloat(super.value);
+  }
+
+  set valueAsNumber(next) {
+    this.value = next.toString();
+  }
   /**
    * Validates that the value is a number between the min and max
    * @param previous - previous stored value
@@ -15013,7 +15106,6 @@ class NumberField$1 extends FormAssociatedNumberField {
   /**
    * Sets the internal value to a valid number between the min and max properties
    * @param value - user input
-   * @param updateControl - should the text field update to the valid value
    *
    * @internal
    */
@@ -15517,7 +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);
@@ -15529,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);
@@ -16455,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.
      *
@@ -16488,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.
@@ -16771,6 +16858,10 @@ class Select$1 extends FormAssociatedSelect {
   connectedCallback() {
     super.connectedCallback();
     this.forcedPosition = !!this.positionAttribute;
+
+    if (!this.listbox.id) {
+      this.listbox.id = uniqueId("listbox-");
+    }
   }
 
 }
@@ -16798,14 +16889,9 @@ __decorate$1([observable], Select$1.prototype, "displayValue", void 0);
 
 class DelegatesARIASelect {}
 
-__decorate$1([observable], DelegatesARIASelect.prototype, "ariaExpanded", void 0);
+__decorate$1([observable], DelegatesARIASelect.prototype, "ariaControls", void 0);
 
-__decorate$1([attr({
-  attribute: "aria-pressed",
-  mode: "fromView"
-})], DelegatesARIASelect.prototype, "ariaPressed", void 0);
-
-applyMixins(DelegatesARIASelect, ARIAGlobalStatesAndProperties);
+applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
 applyMixins(Select$1, StartEnd, DelegatesARIASelect);
 
 /**
@@ -16813,7 +16899,7 @@ applyMixins(Select$1, StartEnd, DelegatesARIASelect);
  * @public
  */
 
-const selectTemplate = (context, definition) => html`<template class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}" role="${x => x.role}" tabindex="${x => !x.disabled ? "0" : null}" aria-disabled="${x => x.ariaDisabled}" aria-expanded="${x => x.ariaExpanded}" @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><div aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}" aria-controls="listbox" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" class="control" part="control" role="button" ?disabled="${x => x.disabled}">${startSlotTemplate(context, definition)}<slot name="button-container"><div class="selected-value" part="selected-value"><slot name="selected-value">${x => x.displayValue}</slot></div><div class="indicator" part="indicator"><slot name="indicator">${definition.indicator || ""}</slot></div></slot>${endSlotTemplate(context, definition)}</div><div aria-disabled="${x => x.disabled}" class="listbox" id="listbox" part="listbox" role="listbox" ?disabled="${x => x.disabled}" ?hidden="${x => !x.open}" ${ref("listbox")}><slot ${slotted({
+const selectTemplate = (context, definition) => html`<template class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}" aria-activedescendant="${x => x.ariaActiveDescendant}" aria-controls="${x => x.ariaControls}" aria-disabled="${x => x.ariaDisabled}" aria-expanded="${x => x.ariaExpanded}" aria-haspopup="listbox" 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"
@@ -16872,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;
   }
 
@@ -16882,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
 };
@@ -16908,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;
@@ -16930,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;
@@ -16938,7 +17024,7 @@ class SliderLabel extends FoundationElement {
     };
 
     this.positionAsStyle = () => {
-      const direction = this.sliderDirection ? this.sliderDirection : Direction$1.ltr;
+      const direction = this.sliderDirection ? this.sliderDirection : Direction.ltr;
       const pct = convertPixelToPercent(Number(this.position), Number(this.sliderMinPosition), Number(this.sliderMaxPosition));
       let rightNum = Math.round((1 - pct) * 100);
       let leftNum = Math.round(pct * 100);
@@ -16949,7 +17035,7 @@ class SliderLabel extends FoundationElement {
       }
 
       if (this.sliderOrientation === Orientation.horizontal) {
-        return direction === Direction$1.rtl ? `right: ${leftNum}%; left: ${rightNum}%;` : `left: ${leftNum}%; right: ${rightNum}%;`;
+        return direction === Direction.rtl ? `right: ${leftNum}%; left: ${rightNum}%;` : `left: ${leftNum}%; right: ${rightNum}%;`;
       } else {
         return `top: ${leftNum}%; bottom: ${rightNum}%;`;
       }
@@ -17096,7 +17182,7 @@ class Slider extends FormAssociatedSlider {
      * @internal
      */
 
-    this.direction = Direction$1.ltr;
+    this.direction = Direction.ltr;
     /**
      * @internal
      */
@@ -17348,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
    */
@@ -17424,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;
@@ -17437,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;
@@ -18251,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
     }
   }
 });
@@ -18285,7 +18385,7 @@ class Toolbar$1 extends FoundationElement {
      * @internal
      */
 
-    this.direction = Direction$1.ltr;
+    this.direction = Direction.ltr;
     /**
      * The orientation of the toolbar.
      *
@@ -18625,7 +18725,7 @@ class Tooltip$1 extends FoundationElement {
      * @internal
      */
 
-    this.horizontalInset = "true";
+    this.horizontalInset = "false";
     /**
      * @internal
      */
@@ -18635,7 +18735,7 @@ class Tooltip$1 extends FoundationElement {
      * @internal
      */
 
-    this.horizontalScaling = "anchor";
+    this.horizontalScaling = "content";
     /**
      * @internal
      */
@@ -18663,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
      */
@@ -18685,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
@@ -18948,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;
     }
   }
@@ -19435,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