@fluentui/web-components 2.5.1 → 2.5.4

package/dist/web-components.js

@@ -321,36 +321,6 @@ const DOM = Object.freeze({
 
 });
 
-function spilloverSubscribe(subscriber) {
-  const spillover = this.spillover;
-  const index = spillover.indexOf(subscriber);
-
-  if (index === -1) {
-    spillover.push(subscriber);
-  }
-}
-
-function spilloverUnsubscribe(subscriber) {
-  const spillover = this.spillover;
-  const index = spillover.indexOf(subscriber);
-
-  if (index !== -1) {
-    spillover.splice(index, 1);
-  }
-}
-
-function spilloverNotifySubscribers(args) {
-  const spillover = this.spillover;
-  const source = this.source;
-
-  for (let i = 0, ii = spillover.length; i < ii; ++i) {
-    spillover[i].handleChange(source, args);
-  }
-}
-
-function spilloverHas(subscriber) {
-  return this.spillover.indexOf(subscriber) !== -1;
-}
 /**
  * An implementation of {@link Notifier} that efficiently keeps track of
  * subscribers interested in a specific change notification on an
@@ -362,8 +332,6 @@ function spilloverHas(subscriber) {
  * If the set ever exceeds two subscribers, it upgrades to an array automatically.
  * @public
  */
-
-
 class SubscriberSet {
   /**
    * Creates an instance of SubscriberSet for the specified source.
@@ -384,7 +352,7 @@ class SubscriberSet {
 
 
   has(subscriber) {
-    return this.sub1 === subscriber || this.sub2 === subscriber;
+    return this.spillover === void 0 ? this.sub1 === subscriber || this.sub2 === subscriber : this.spillover.indexOf(subscriber) !== -1;
   }
   /**
    * Subscribes to notification of changes in an object's state.
@@ -393,27 +361,33 @@ class SubscriberSet {
 
 
   subscribe(subscriber) {
-    if (this.has(subscriber)) {
-      return;
-    }
+    const spillover = this.spillover;
 
-    if (this.sub1 === void 0) {
-      this.sub1 = subscriber;
-      return;
-    }
+    if (spillover === void 0) {
+      if (this.has(subscriber)) {
+        return;
+      }
 
-    if (this.sub2 === void 0) {
-      this.sub2 = subscriber;
-      return;
-    }
+      if (this.sub1 === void 0) {
+        this.sub1 = subscriber;
+        return;
+      }
 
-    this.spillover = [this.sub1, this.sub2, subscriber];
-    this.subscribe = spilloverSubscribe;
-    this.unsubscribe = spilloverUnsubscribe;
-    this.notify = spilloverNotifySubscribers;
-    this.has = spilloverHas;
-    this.sub1 = void 0;
-    this.sub2 = void 0;
+      if (this.sub2 === void 0) {
+        this.sub2 = subscriber;
+        return;
+      }
+
+      this.spillover = [this.sub1, this.sub2, subscriber];
+      this.sub1 = void 0;
+      this.sub2 = void 0;
+    } else {
+      const index = spillover.indexOf(subscriber);
+
+      if (index === -1) {
+        spillover.push(subscriber);
+      }
+    }
   }
   /**
    * Unsubscribes from notification of changes in an object's state.
@@ -422,10 +396,20 @@ class SubscriberSet {
 
 
   unsubscribe(subscriber) {
-    if (this.sub1 === subscriber) {
-      this.sub1 = void 0;
-    } else if (this.sub2 === subscriber) {
-      this.sub2 = void 0;
+    const spillover = this.spillover;
+
+    if (spillover === void 0) {
+      if (this.sub1 === subscriber) {
+        this.sub1 = void 0;
+      } else if (this.sub2 === subscriber) {
+        this.sub2 = void 0;
+      }
+    } else {
+      const index = spillover.indexOf(subscriber);
+
+      if (index !== -1) {
+        spillover.splice(index, 1);
+      }
     }
   }
   /**
@@ -435,16 +419,24 @@ class SubscriberSet {
 
 
   notify(args) {
-    const sub1 = this.sub1;
-    const sub2 = this.sub2;
+    const spillover = this.spillover;
     const source = this.source;
 
-    if (sub1 !== void 0) {
-      sub1.handleChange(source, args);
-    }
+    if (spillover === void 0) {
+      const sub1 = this.sub1;
+      const sub2 = this.sub2;
+
+      if (sub1 !== void 0) {
+        sub1.handleChange(source, args);
+      }
 
-    if (sub2 !== void 0) {
-      sub2.handleChange(source, args);
+      if (sub2 !== void 0) {
+        sub2.handleChange(source, args);
+      }
+    } else {
+      for (let i = 0, ii = spillover.length; i < ii; ++i) {
+        spillover[i].handleChange(source, args);
+      }
     }
   }
 
@@ -677,6 +669,8 @@ const Observable = FAST.getById(2
           /* eslint-disable-next-line */
 
           prevValue = prev.propertySource[prev.propertyName];
+          /* eslint-disable-next-line @typescript-eslint/no-this-alias */
+
           watcher = this;
 
           if (propertySource === prevValue) {
@@ -1362,6 +1356,7 @@ class CompilationContext {
   }
 
   release() {
+    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
     sharedContext = this;
   }
 
@@ -1929,9 +1924,6 @@ function html(strings, ...values) {
 class ElementStyles {
   constructor() {
     this.targets = new WeakSet();
-    /** @internal */
-
-    this.behaviors = null;
   }
   /** @internal */
 
@@ -3505,6 +3497,11 @@ class ArrayObserver extends SubscriberSet {
     });
   }
 
+  subscribe(subscriber) {
+    this.flush();
+    super.subscribe(subscriber);
+  }
+
   addSplice(splice) {
     if (this.splices === void 0) {
       this.splices = [splice];
@@ -3864,37 +3861,54 @@ class RepeatBehavior {
   updateViews(splices) {
     const childContext = this.childContext;
     const views = this.views;
-    const totalRemoved = [];
     const bindView = this.bindView;
-    let removeDelta = 0;
-
-    for (let i = 0, ii = splices.length; i < ii; ++i) {
-      const splice = splices[i];
-      const removed = splice.removed;
-      totalRemoved.push(...views.splice(splice.index + removeDelta, removed.length));
-      removeDelta -= splice.addedCount;
-    }
-
     const items = this.items;
     const template = this.template;
+    const recycle = this.options.recycle;
+    const leftoverViews = [];
+    let leftoverIndex = 0;
+    let availableViews = 0;
 
     for (let i = 0, ii = splices.length; i < ii; ++i) {
       const splice = splices[i];
+      const removed = splice.removed;
+      let removeIndex = 0;
       let addIndex = splice.index;
       const end = addIndex + splice.addedCount;
+      const removedViews = views.splice(splice.index, removed.length);
+      availableViews = leftoverViews.length + removedViews.length;
 
       for (; addIndex < end; ++addIndex) {
         const neighbor = views[addIndex];
         const location = neighbor ? neighbor.firstChild : this.location;
-        const view = this.options.recycle && totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
+        let view;
+
+        if (recycle && availableViews > 0) {
+          if (removeIndex <= availableViews && removedViews.length > 0) {
+            view = removedViews[removeIndex];
+            removeIndex++;
+          } else {
+            view = leftoverViews[leftoverIndex];
+            leftoverIndex++;
+          }
+
+          availableViews--;
+        } else {
+          view = template.create();
+        }
+
         views.splice(addIndex, 0, view);
         bindView(view, items, addIndex, childContext);
         view.insertBefore(location);
       }
+
+      if (removedViews[removeIndex]) {
+        leftoverViews.push(...removedViews.slice(removeIndex));
+      }
     }
 
-    for (let i = 0, ii = totalRemoved.length; i < ii; ++i) {
-      totalRemoved[i].dispose();
+    for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
+      leftoverViews[i].dispose();
     }
 
     if (this.options.positioning) {
@@ -3916,7 +3930,7 @@ class RepeatBehavior {
     let views = this.views;
     let viewsLength = views.length;
 
-    if (itemsLength === 0 || templateChanged) {
+    if (itemsLength === 0 || templateChanged || !this.options.recycle) {
       // all views need to be removed
       HTMLView.disposeContiguousBatch(views);
       viewsLength = 0;
@@ -4014,7 +4028,7 @@ class RepeatDirective extends HTMLDirective {
 
 function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
   const templateBinding = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
-  return new RepeatDirective(itemsBinding, templateBinding, options);
+  return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }
 
 /**
@@ -5951,6 +5965,22 @@ function applyMixins(derivedCtor, ...baseCtors) {
 
 /**
  * An individual item in an {@link @microsoft/fast-foundation#(Accordion:class) }.
+ *
+ * @slot start - Content which can be provided between the heading and the icon
+ * @slot end - Content which can be provided between the start slot and icon
+ * @slot heading - Content which serves as the accordion item heading and text of the expand button
+ * @slot - The default slot for accordion item content
+ * @slot expanded-icon - The expanded icon
+ * @slot collapsed-icon - The collapsed icon
+ * @fires change - Fires a custom 'change' event when the button is invoked
+ * @csspart heading - Wraps the button
+ * @csspart button - The button which serves to invoke the item
+ * @csspart heading-content - Wraps the slot for the heading content within the button
+ * @csspart icon - The icon container
+ * @csspart expanded-icon - The expanded icon slot
+ * @csspart collapsed-icon - The collapsed icon
+ * @csspart region - The wrapper for the accordion item content
+ *
  * @public
  */
 
@@ -6019,12 +6049,13 @@ html`<template><slot ${slotted({
   filter: elements()
 })}></slot><slot name="item" part="item" ${slotted("accordionItems")}></slot></template>`;
 
-var Orientation;
-
-(function (Orientation) {
-  Orientation["horizontal"] = "horizontal";
-  Orientation["vertical"] = "vertical";
-})(Orientation || (Orientation = {}));
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
 
 /**
  * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
@@ -6321,29 +6352,29 @@ var SystemColors;
  * @public
  */
 
-var AccordionExpandMode;
-
-(function (AccordionExpandMode) {
+const AccordionExpandMode = {
   /**
    * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
    */
-  AccordionExpandMode["single"] = "single";
+  single: "single",
+
   /**
    * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
    */
-
-  AccordionExpandMode["multi"] = "multi";
-})(AccordionExpandMode || (AccordionExpandMode = {}));
+  multi: "multi"
+};
 /**
  * An Accordion Custom HTML Element
  * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
+ *
+ * @fires change - Fires a custom 'change' event when the active item changes
+ * @csspart item - The slot for the accordion items
  * @public
  *
  * @remarks
  * Designed to be used with {@link @microsoft/fast-foundation#accordionTemplate} and {@link @microsoft/fast-foundation#(AccordionItem:class)}.
  */
 
-
 class Accordion extends FoundationElement {
   constructor() {
     super(...arguments);
@@ -6624,6 +6655,12 @@ __decorate$1([attr({
  * An Anchor Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
  *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
  * @public
  */
 
@@ -6825,6 +6862,10 @@ class IntersectionService {
 /**
  * An anchored region Custom HTML Element.
  *
+ * @slot - The default slot for the content
+ * @fires loaded - Fires a custom 'loaded' event when the region is loaded and visible
+ * @fires positionchange - Fires a custom 'positionchange' event when the position has changed
+ *
  * @public
  */
 
@@ -7357,7 +7398,7 @@ class AnchoredRegion extends FoundationElement {
       switch (this.horizontalScaling) {
         case "anchor":
         case "fill":
-          nextRegionWidth = nextPositionerDimension.width;
+          nextRegionWidth = this.horizontalViewportLock ? this.viewportRect.width : nextPositionerDimension.width;
           this.regionWidth = `${nextRegionWidth}px`;
           break;
 
@@ -7441,7 +7482,7 @@ class AnchoredRegion extends FoundationElement {
       switch (this.verticalScaling) {
         case "anchor":
         case "fill":
-          nextRegionHeight = nextPositionerDimension.height;
+          nextRegionHeight = this.verticalViewportLock ? this.viewportRect.height : nextPositionerDimension.height;
           this.regionHeight = `${nextRegionHeight}px`;
           break;
 
@@ -7894,6 +7935,8 @@ const badgeTemplate = (context, definition) => html`<template class="${x => x.ci
 
 /**
  * A Badge Custom HTML Element.
+ * @slot - The default slot for the badge
+ * @csspart control - The element representing the badge, which wraps the default slot
  *
  * @public
  */
@@ -7975,6 +8018,8 @@ const breadcrumbTemplate = (context, definition) => html`<template role="navigat
 
 /**
  * A Breadcrumb Custom HTML Element.
+ * @slot - The default slot for the breadcrumb items
+ * @csspart list - The element wrapping the slotted items
  *
  * @public
  */
@@ -8422,15 +8467,12 @@ function FormAssociated(BaseCtor) {
       this.removeChild(this.proxy);
       (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
     }
-    /**
-     * Sets the validity of the custom element. By default this uses the proxy element to determine
-     * validity, but this can be extended or replaced in implementation.
-     */
+    /** {@inheritDoc (FormAssociated:interface).validate} */
 
 
-    validate() {
+    validate(anchor) {
       if (this.proxy instanceof HTMLElement) {
-        this.setValidity(this.proxy.validity, this.proxy.validationMessage);
+        this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
       }
     }
     /**
@@ -8617,6 +8659,12 @@ class FormAssociatedButton extends FormAssociated(_Button) {
  * A Button Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
  *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart control - The button element
+ * @csspart content - The element wrapping button content
+ *
  * @public
  */
 
@@ -8728,6 +8776,12 @@ class Button$1 extends FormAssociatedButton {
     next === "reset" && this.addEventListener("click", this.handleFormReset);
     previous === "reset" && this.removeEventListener("click", this.handleFormReset);
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
   /**
    * @internal
    */
@@ -9000,6 +9054,10 @@ class DateFormatter {
 
 /**
  * Calendar component
+ *
+ * @slot - The default slot for calendar content
+ * @fires dateselected - Fires a custom 'dateselected' event when Enter is invoked via keyboard on a date
+ *
  * @public
  */
 
@@ -9326,50 +9384,44 @@ __decorate$1([attr({
 })], Calendar$1.prototype, "selectedDates", void 0);
 
 /**
- * Enumerates auto generated header options
+ * Enumerates the data grid auto generated header options
  * default option generates a non-sticky header row
  *
  * @public
  */
-var GenerateHeaderOptions;
-
-(function (GenerateHeaderOptions) {
-  GenerateHeaderOptions["none"] = "none";
-  GenerateHeaderOptions["default"] = "default";
-  GenerateHeaderOptions["sticky"] = "sticky";
-})(GenerateHeaderOptions || (GenerateHeaderOptions = {}));
+const GenerateHeaderOptions = {
+  none: "none",
+  default: "default",
+  sticky: "sticky"
+};
 /**
- * Enumerates possible cell types.
+ * Enumerates possible data grid cell types.
  *
  * @public
  */
 
-
-var DataGridCellTypes;
-
-(function (DataGridCellTypes) {
-  DataGridCellTypes["default"] = "default";
-  DataGridCellTypes["columnHeader"] = "columnheader";
-  DataGridCellTypes["rowHeader"] = "rowheader";
-})(DataGridCellTypes || (DataGridCellTypes = {}));
+const DataGridCellTypes = {
+  default: "default",
+  columnHeader: "columnheader",
+  rowHeader: "rowheader"
+};
 /**
- * Enumerates possible row types
+ * Enumerates possible data grid row types
  *
  * @public
  */
 
-
-var DataGridRowTypes;
-
-(function (DataGridRowTypes) {
-  DataGridRowTypes["default"] = "default";
-  DataGridRowTypes["header"] = "header";
-  DataGridRowTypes["stickyHeader"] = "sticky-header";
-})(DataGridRowTypes || (DataGridRowTypes = {}));
+const DataGridRowTypes = {
+  default: "default",
+  header: "header",
+  stickyHeader: "sticky-header"
+};
 
 /**
  * A Data Grid Row Custom HTML Element.
  *
+ * @fires row-focused - Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+ * @slot - The default slot for custom cell elements
  * @public
  */
 
@@ -9605,6 +9657,7 @@ const dataGridTemplate = (context, definition) => {
 /**
  * A Data Grid Custom HTML Element.
  *
+ * @slot - The default slot for custom row elements
  * @public
  */
 
@@ -10103,6 +10156,8 @@ const defaultHeaderCellContentsTemplate = html`<template>${x => x.columnDefiniti
 /**
  * A Data Grid Cell Custom HTML Element.
  *
+ * @fires cell-focused - Fires a custom 'cell-focused' event when focus is on the cell or its contents
+ * @slot - The default slot for cell contents.  The "cell contents template" renders here.
  * @public
  */
 
@@ -10473,6 +10528,8 @@ const cardTemplate = (context, definition) => html`<slot></slot>`;
 /**
  * An Card Custom HTML Element.
  *
+ * @slot - The default slot for the card content
+ *
  * @public
  */
 
@@ -10505,6 +10562,13 @@ class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
  * A Checkbox Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
  *
+ * @slot checked-indicator - The checked indicator
+ * @slot indeterminate-indicator - The indeterminate indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual checkbox control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
  * @public
  */
 
@@ -10529,8 +10593,16 @@ class Checkbox extends FormAssociatedCheckbox {
      */
 
     this.keypressHandler = e => {
+      if (this.readOnly) {
+        return;
+      }
+
       switch (e.key) {
         case keySpace:
+          if (this.indeterminate) {
+            this.indeterminate = false;
+          }
+
           this.checked = !this.checked;
           break;
       }
@@ -10542,6 +10614,10 @@ class Checkbox extends FormAssociatedCheckbox {
 
     this.clickHandler = e => {
       if (!this.disabled && !this.readOnly) {
+        if (this.indeterminate) {
+          this.indeterminate = false;
+        }
+
         this.checked = !this.checked;
       }
     };
@@ -10580,6 +10656,11 @@ function isListboxOption(el) {
  * An Option Custom HTML Element.
  * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
  *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
  * @public
  */
 
@@ -10646,7 +10727,25 @@ class ListboxOption extends FoundationElement {
       return;
     }
 
-    this.ariaChecked = undefined;
+    this.ariaChecked = null;
+  }
+  /**
+   * Updates the proxy's text content when the default slot changes.
+   * @param prev - the previous content value
+   * @param next - the current content value
+   *
+   * @internal
+   */
+
+
+  contentChanged(prev, next) {
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.textContent = this.textContent;
+    }
+
+    this.$emit("contentchange", null, {
+      bubbles: true
+    });
   }
 
   defaultSelectedChanged() {
@@ -10697,31 +10796,34 @@ class ListboxOption extends FoundationElement {
   }
 
   get label() {
-    var _a, _b;
+    var _a;
 
-    return (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.textContent) !== null && _b !== void 0 ? _b : "";
+    return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
   }
 
   get text() {
-    return this.textContent;
+    var _a, _b;
+
+    return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
   }
 
   set value(next) {
-    this._value = next;
+    const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+    this._value = newValue;
     this.dirtyValue = true;
 
-    if (this.proxy instanceof HTMLElement) {
-      this.proxy.value = next;
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.value = newValue;
     }
 
     Observable.notify(this, "value");
   }
 
   get value() {
-    var _a, _b;
+    var _a;
 
     Observable.track(this, "value");
-    return (_b = (_a = this._value) !== null && _a !== void 0 ? _a : this.textContent) !== null && _b !== void 0 ? _b : "";
+    return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
   }
 
   get form() {
@@ -10732,6 +10834,8 @@ class ListboxOption extends FoundationElement {
 
 __decorate$1([observable], ListboxOption.prototype, "checked", void 0);
 
+__decorate$1([observable], ListboxOption.prototype, "content", void 0);
+
 __decorate$1([observable], ListboxOption.prototype, "defaultSelected", void 0);
 
 __decorate$1([attr({
@@ -10773,6 +10877,8 @@ applyMixins(ListboxOption, StartEnd, DelegatesARIAListboxOption);
  * A Listbox Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#listbox | ARIA listbox }.
  *
+ * @slot - The default slot for the listbox options
+ *
  * @public
  */
 
@@ -11140,6 +11246,19 @@ class Listbox$1 extends FoundationElement {
     this.shouldSkipFocus = !this.contains(document.activeElement);
     return true;
   }
+  /**
+   * Switches between single-selection and multi-selection mode.
+   *
+   * @param prev - the previous value of the `multiple` attribute
+   * @param next - the next value of the `multiple` attribute
+   *
+   * @internal
+   */
+
+
+  multipleChanged(prev, next) {
+    this.ariaMultiSelectable = next ? "true" : null;
+  }
   /**
    * Updates the list of selected options when the `selectedIndex` changes.
    *
@@ -11338,7 +11457,7 @@ class Listbox$1 extends FoundationElement {
  * @public
  */
 
-Listbox$1.slottedOptionFilter = n => isListboxOption(n) && !n.disabled && !n.hidden;
+Listbox$1.slottedOptionFilter = n => isListboxOption(n) && !n.hidden;
 /**
  * Typeahead timeout in milliseconds.
  *
@@ -11383,12 +11502,10 @@ applyMixins(Listbox$1, DelegatesARIAListbox);
  * Positioning directions for the listbox when a select is open.
  * @public
  */
-var SelectPosition;
-
-(function (SelectPosition) {
-  SelectPosition["above"] = "above";
-  SelectPosition["below"] = "below";
-})(SelectPosition || (SelectPosition = {}));
+const SelectPosition = {
+  above: "above",
+  below: "below"
+};
 
 class _Combobox extends Listbox$1 {}
 /**
@@ -11410,19 +11527,28 @@ class FormAssociatedCombobox extends FormAssociated(_Combobox) {
  * Autocomplete values for combobox.
  * @public
  */
-var ComboboxAutocomplete;
-
-(function (ComboboxAutocomplete) {
-  ComboboxAutocomplete["inline"] = "inline";
-  ComboboxAutocomplete["list"] = "list";
-  ComboboxAutocomplete["both"] = "both";
-  ComboboxAutocomplete["none"] = "none";
-})(ComboboxAutocomplete || (ComboboxAutocomplete = {}));
+const ComboboxAutocomplete = {
+  inline: "inline",
+  list: "list",
+  both: "both",
+  none: "none"
+};
 
 /**
  * A Combobox Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria-practices/#combobox | ARIA combobox }.
  *
+ * @slot start - Content which can be provided before the input
+ * @slot end - Content which can be provided after the input
+ * @slot control - Used to replace the input element representing the combobox
+ * @slot indicator - The visual indicator representing the expanded state
+ * @slot - The default slot for the options
+ * @csspart control - The wrapper element containing the input area, including start and end
+ * @csspart selected-value - The input element representing the selected value
+ * @csspart indicator - The element wrapping the indicator slot
+ * @csspart listbox - The wrapper for the listbox slotted options
+ * @fires change - Fires a custom 'change' event when the value updates
+ *
  * @public
  */
 
@@ -11480,13 +11606,6 @@ class Combobox$1 extends FormAssociatedCombobox {
      */
 
     this.open = false;
-    /**
-     * The current state of the calculated position of the listbox.
-     *
-     * @public
-     */
-
-    this.position = SelectPosition.below;
   }
   /**
    * Reset the element to its first selectable option when its parent form is reset.
@@ -11500,6 +11619,12 @@ class Combobox$1 extends FormAssociatedCombobox {
     this.setDefaultSelectedOption();
     this.updateValue();
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
 
   get isAutocompleteInline() {
     return this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth;
@@ -11566,8 +11691,8 @@ class Combobox$1 extends FormAssociatedCombobox {
     }
   }
 
-  positionChanged() {
-    this.positionAttribute = this.position;
+  positionChanged(prev, next) {
+    this.positionAttribute = next;
     this.setPositioning();
   }
   /**
@@ -11623,6 +11748,7 @@ class Combobox$1 extends FormAssociatedCombobox {
 
       this.selectedOptions = [captured];
       this.control.value = captured.text;
+      this.clearSelectionRange();
       this.updateValue(true);
     }
 
@@ -11718,7 +11844,7 @@ class Combobox$1 extends FormAssociatedCombobox {
 
 
   focusoutHandler(e) {
-    this.updateValue();
+    this.syncValue();
 
     if (!this.open) {
       return true;
@@ -11747,7 +11873,11 @@ class Combobox$1 extends FormAssociatedCombobox {
     this.filter = this.control.value;
     this.filterOptions();
 
-    if (e.inputType === "deleteContentBackward" || !this.filter.length) {
+    if (!this.isAutocompleteInline) {
+      this.selectedIndex = this.options.map(option => option.text).indexOf(this.control.value);
+    }
+
+    if (e.inputType.includes("deleteContent") || !this.filter.length) {
       return true;
     }
 
@@ -11755,10 +11885,14 @@ class Combobox$1 extends FormAssociatedCombobox {
       this.open = true;
     }
 
-    if (this.isAutocompleteInline && this.filteredOptions.length) {
-      this.selectedOptions = [this.filteredOptions[0]];
-      this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
-      this.setInlineSelection();
+    if (this.isAutocompleteInline) {
+      if (this.filteredOptions.length) {
+        this.selectedOptions = [this.filteredOptions[0]];
+        this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+        this.setInlineSelection();
+      } else {
+        this.selectedIndex = -1;
+      }
     }
 
     return;
@@ -11781,15 +11915,14 @@ class Combobox$1 extends FormAssociatedCombobox {
     switch (key) {
       case "Enter":
         {
-          this.updateValue(true);
+          this.syncValue();
 
           if (this.isAutocompleteInline) {
             this.filter = this.value;
           }
 
           this.open = false;
-          const controlValueLength = this.control.value.length;
-          this.control.setSelectionRange(controlValueLength, controlValueLength);
+          this.clearSelectionRange();
           break;
         }
 
@@ -11813,7 +11946,7 @@ class Combobox$1 extends FormAssociatedCombobox {
 
       case "Tab":
         {
-          this.updateValue();
+          this.setInputToSelection();
 
           if (!this.open) {
             return true;
@@ -11839,7 +11972,6 @@ class Combobox$1 extends FormAssociatedCombobox {
           }
 
           if (this.isAutocompleteInline) {
-            this.updateValue();
             this.setInlineSelection();
           }
 
@@ -11936,20 +12068,44 @@ class Combobox$1 extends FormAssociatedCombobox {
     }
   }
   /**
-   * Focus and select the content of the control based on the first selected option.
+   * Focus and set the content of the control based on the first selected option.
    *
-   * @param start - The index for the starting range
    * @internal
    */
 
 
-  setInlineSelection() {
+  setInputToSelection() {
     if (this.firstSelectedOption) {
       this.control.value = this.firstSelectedOption.text;
       this.control.focus();
+    }
+  }
+  /**
+   * Focus, set and select the content of the control based on the first selected option.
+   *
+   * @internal
+   */
+
+
+  setInlineSelection() {
+    if (this.firstSelectedOption) {
+      this.setInputToSelection();
       this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
     }
   }
+  /**
+   * Determines if a value update should involve emitting a change event, then updates the value.
+   *
+   * @internal
+   */
+
+
+  syncValue() {
+    var _a;
+
+    const newValue = this.selectedIndex > -1 ? (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text : this.control.value;
+    this.updateValue(this.value !== newValue);
+  }
   /**
    * Calculate and apply listbox positioning based on available viewport space.
    *
@@ -12013,12 +12169,22 @@ class Combobox$1 extends FormAssociatedCombobox {
 
     if (this.$fastController.isConnected) {
       this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
+      this.control.value = this.value;
     }
 
     if (shouldEmit) {
       this.$emit("change");
     }
   }
+  /**
+   * @internal
+   */
+
+
+  clearSelectionRange() {
+    const controlValueLength = this.control.value.length;
+    this.control.setSelectionRange(controlValueLength, controlValueLength);
+  }
 
 }
 
@@ -13586,6 +13752,13 @@ var isFocusable = function isFocusable(node, options) {
  * A Switch Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#dialog | ARIA dialog }.
  *
+ * @slot - The default slot for the dialog content
+ * @csspart positioning-region - A wrapping element used to center the dialog and position the modal overlay
+ * @csspart overlay - The modal dialog overlay
+ * @csspart control - The dialog element
+ * @fires cancel - Fires a custom 'cancel' event when the modal overlay is clicked
+ * @fires close - Fires a custom 'close' event when the dialog is hidden
+ *
  * @public
  */
 
@@ -13912,19 +14085,17 @@ const dividerTemplate = (context, definition) => html`<template role="${x => x.r
  * Divider roles
  * @public
  */
-var DividerRole;
-
-(function (DividerRole) {
+const DividerRole = {
   /**
    * The divider semantically separates content
    */
-  DividerRole["separator"] = "separator";
+  separator: "separator",
+
   /**
    * The divider has no semantic value and is for visual presentation only.
    */
-
-  DividerRole["presentation"] = "presentation";
-})(DividerRole || (DividerRole = {}));
+  presentation: "presentation"
+};
 
 /**
  * A Divider Custom HTML Element.
@@ -13940,7 +14111,6 @@ class Divider extends FoundationElement {
      * The role of the element.
      *
      * @public
-     * @defaultValue - {@link DividerRole.separator}
      * @remarks
      * HTML Attribute: role
      */
@@ -13967,12 +14137,10 @@ __decorate$1([attr], Divider.prototype, "orientation", void 0);
  * The direction options for flipper.
  * @public
  */
-var FlipperDirection;
-
-(function (FlipperDirection) {
-  FlipperDirection["next"] = "next";
-  FlipperDirection["previous"] = "previous";
-})(FlipperDirection || (FlipperDirection = {}));
+const FlipperDirection = {
+  next: "next",
+  previous: "previous"
+};
 
 /**
  * The template for the {@link @microsoft/fast-foundation#Flipper} component.
@@ -13985,6 +14153,12 @@ const flipperTemplate = (context, definition) => html`<template role="button" ar
  * A Flipper Custom HTML Element.
  * Flippers are a form of button that implies directional content navigation, such as in a carousel.
  *
+ * @slot next - The next flipper content
+ * @slot previous - The previous flipper content
+ * @csspart next - Wraps the next flipper content
+ * @csspart previous - Wraps the previous flipper content
+ * @fires click - Fires a custom 'click' event when Enter or Space is invoked via keyboard and the flipper is exposed to assistive technologies.
+ *
  * @public
  */
 
@@ -14023,7 +14197,7 @@ class Flipper extends FoundationElement {
     if (!this.hiddenFromAT) {
       const key = e.key;
 
-      if (key === "Enter") {
+      if (key === "Enter" || key === "Space") {
         this.$emit("click", e);
       }
 
@@ -14051,7 +14225,7 @@ __decorate$1([attr], Flipper.prototype, "direction", void 0);
  * @public
  */
 
-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>`;
+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 ${slotted("content")}></slot></span>${endSlotTemplate(context, definition)}</template>`;
 
 /**
  * A Listbox Custom HTML Element.
@@ -14475,7 +14649,7 @@ class ListboxElement extends Listbox$1 {
   multipleChanged(prev, next) {
     var _a;
 
-    this.ariaMultiSelectable = next ? "true" : undefined;
+    this.ariaMultiSelectable = next ? "true" : null;
     (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
       o.checked = next ? false : undefined;
     });
@@ -14609,29 +14783,26 @@ const listboxTemplate = (context, definition) => html`<template aria-activedesce
  * Menu items roles.
  * @public
  */
-var MenuItemRole;
-
-(function (MenuItemRole) {
+const MenuItemRole = {
   /**
    * The menu item has a "menuitem" role
    */
-  MenuItemRole["menuitem"] = "menuitem";
+  menuitem: "menuitem",
+
   /**
    * The menu item has a "menuitemcheckbox" role
    */
+  menuitemcheckbox: "menuitemcheckbox",
 
-  MenuItemRole["menuitemcheckbox"] = "menuitemcheckbox";
   /**
    * The menu item has a "menuitemradio" role
    */
-
-  MenuItemRole["menuitemradio"] = "menuitemradio";
-})(MenuItemRole || (MenuItemRole = {}));
+  menuitemradio: "menuitemradio"
+};
 /**
  * @internal
  */
 
-
 const roleForMenuItem = {
   [MenuItemRole.menuitem]: "menuitem",
   [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
@@ -14642,6 +14813,23 @@ const roleForMenuItem = {
  * A Switch Custom HTML Element.
  * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
  *
+ * @slot checked-indicator - The checked indicator
+ * @slot radio-indicator - The radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot - The default slot for menu item content
+ * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart input-container - The element representing the visual checked or radio indicator
+ * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart content - The element wrapping the menu item content
+ * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
+ * @csspart expand-collapse - The expand/collapse element
+ * @csspart submenu-region - The container for the submenu, used for positioning
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
  * @public
  */
 
@@ -14932,6 +15120,8 @@ const menuTemplate = (context, definition) => html`<template slot="${x => x.slot
  * A Menu Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
+ * @slot - The default slot for the menu items
+ *
  * @public
  */
 
@@ -15280,39 +15470,45 @@ class FormAssociatedTextField extends FormAssociated(_TextField) {
  * Text field sub-types
  * @public
  */
-var TextFieldType;
-
-(function (TextFieldType) {
+const TextFieldType = {
   /**
    * An email TextField
    */
-  TextFieldType["email"] = "email";
+  email: "email",
+
   /**
    * A password TextField
    */
+  password: "password",
 
-  TextFieldType["password"] = "password";
   /**
    * A telephone TextField
    */
+  tel: "tel",
 
-  TextFieldType["tel"] = "tel";
   /**
    * A text TextField
    */
+  text: "text",
 
-  TextFieldType["text"] = "text";
   /**
    * A URL TextField
    */
-
-  TextFieldType["url"] = "url";
-})(TextFieldType || (TextFieldType = {}));
+  url: "url"
+};
 
 /**
  * A Text Field Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
  *
+ * @slot start - Content which can be provided before the number field input
+ * @slot end - Content which can be provided after the number field input
+ * @slot - The default slot for the label
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control, including start and end slots
+ * @csspart control - The text field element
+ * @fires change - Fires a custom 'change' event when the value has changed
+ *
  * @public
  */
 
@@ -15411,6 +15607,24 @@ class TextField$1 extends FormAssociatedTextField {
       });
     }
   }
+  /**
+   * Selects all the text in the text field
+   *
+   * @public
+   */
+
+
+  select() {
+    this.control.select();
+    /**
+     * The select event does not permeate the shadow DOM boundary.
+     * This fn effectively proxies the select event,
+     * emitting a `select` event whenever the internal
+     * control emits a `select` event
+     */
+
+    this.$emit("select");
+  }
   /**
    * Handles the internal control's `input` event
    * @internal
@@ -15434,6 +15648,12 @@ class TextField$1 extends FormAssociatedTextField {
   handleChange() {
     this.$emit("change");
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
 
 }
 
@@ -15502,6 +15722,20 @@ class FormAssociatedNumberField extends FormAssociated(_NumberField) {
  * A Number Field Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number | <input type="number" /> element }.
  *
+ * @slot start - Content which can be provided before the number field input
+ * @slot end - Content which can be provided after the number field input
+ * @slot - The default slot for the label
+ * @slot step-up-glyph - The glyph for the step up control
+ * @slot step-down-glyph - The glyph for the step down control
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control, including start and end slots
+ * @csspart control - The element representing the input
+ * @csspart controls - The step up and step down controls
+ * @csspart step-up - The step up control
+ * @csspart step-down - The step down control
+ * @fires input - Fires a custom 'input' event when the value has changed
+ * @fires change - Fires a custom 'change' event when the value has changed
+ *
  * @public
  */
 
@@ -15618,6 +15852,12 @@ class NumberField$1 extends FormAssociatedNumberField {
 
     this.isUserInput = false;
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
   /**
    * Sets the internal value to a valid number between the min and max properties
    * @param value - user input
@@ -15682,6 +15922,24 @@ class NumberField$1 extends FormAssociatedNumberField {
       });
     }
   }
+  /**
+   * Selects all the text in the number field
+   *
+   * @public
+   */
+
+
+  select() {
+    this.control.select();
+    /**
+     * The select event does not permeate the shadow DOM boundary.
+     * This fn effectively proxies the select event,
+     * emitting a `select` event whenever the internal
+     * control emits a `select` event
+     */
+
+    this.$emit("select");
+  }
   /**
    * Handles the internal control's `input` event
    * @internal
@@ -15799,6 +16057,11 @@ const progressRingTemplate = (context, definition) => html`<template role="progr
  * An Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
  * @public
  */
 
@@ -15889,6 +16152,11 @@ const radioGroupTemplate = (context, definition) => html`<template role="radiogr
  * An Radio Group Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
  *
+ * @slot label - The slot for the label
+ * @slot - The default slot for radio buttons
+ * @csspart positioning-region - The positioning region for laying out the radios
+ * @fires change - Fires a custom 'change' event when the value changes
+ *
  * @public
  */
 
@@ -16188,7 +16456,7 @@ class RadioGroup extends FoundationElement {
   valueChanged() {
     if (this.slottedRadioButtons) {
       this.slottedRadioButtons.forEach(radio => {
-        if (radio.getAttribute("value") === this.value) {
+        if (radio.value === this.value) {
           radio.checked = true;
           this.selectedRadio = radio;
         }
@@ -16345,6 +16613,12 @@ class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
  * A Radio Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
  *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
  * @public
  */
 
@@ -16460,6 +16734,19 @@ __decorate$1([observable], Radio.prototype, "defaultSlottedNodes", void 0);
 
 /**
  * A HorizontalScroll Custom HTML Element
+ *
+ * @slot start - Content which can be provided before the scroll area
+ * @slot end - Content which can be provided after the scroll area
+ * @csspart scroll-area - Wraps the entire scrollable region
+ * @csspart scroll-view - The visible scroll area
+ * @csspart content-container - The container for the content
+ * @csspart scroll-prev - The previous flipper container
+ * @csspart scroll-action-previous - The element wrapping the previous flipper
+ * @csspart scroll-next - The next flipper container
+ * @csspart scroll-action-next - The element wrapping the next flipper
+ * @fires scrollstart - Fires a custom 'scrollstart' event when scrolling
+ * @fires scrollend - Fires a custom 'scrollend' event when scrolling stops
+ *
  * @public
  */
 
@@ -16613,20 +16900,32 @@ class HorizontalScroll$1 extends FoundationElement {
 
   setStops() {
     this.updateScrollStops();
-    this.width = this.offsetWidth;
+    const {
+      scrollContainer: container
+    } = this;
+    const {
+      scrollLeft
+    } = container;
+    const {
+      width: containerWidth,
+      left: containerLeft
+    } = container.getBoundingClientRect();
+    this.width = containerWidth;
     let lastStop = 0;
-    let stops = this.scrollItems.map(({
-      offsetLeft: left,
-      offsetWidth: width
-    }, index) => {
-      const right = left + width;
+    let stops = this.scrollItems.map((item, index) => {
+      const {
+        left,
+        width
+      } = item.getBoundingClientRect();
+      const leftPosition = Math.round(left + scrollLeft - containerLeft);
+      const right = Math.round(leftPosition + width);
 
       if (this.isRtl) {
         return -right;
       }
 
       lastStop = right;
-      return index === 0 ? 0 : left;
+      return index === 0 ? 0 : leftPosition;
     }).concat(lastStop);
     /* Fixes a FireFox bug where it doesn't scroll to the start */
 
@@ -16668,6 +16967,50 @@ class HorizontalScroll$1 extends FoundationElement {
       (_b = this.nextFlipperContainer) === null || _b === void 0 ? void 0 : _b.classList.toggle("disabled", Math.abs(position) + this.width >= lastStop);
     }
   }
+  /**
+   * Function that can scroll an item into view.
+   * @param item - An item index, a scroll item or a child of one of the scroll items
+   * @param padding - Padding of the viewport where the active item shouldn't be
+   * @param rightPadding - Optional right padding. Uses the padding if not defined
+   *
+   * @public
+   */
+
+
+  scrollInView(item, padding = 0, rightPadding) {
+    var _a;
+
+    if (typeof item !== "number" && item) {
+      item = this.scrollItems.findIndex(scrollItem => scrollItem === item || scrollItem.contains(item));
+    }
+
+    if (item !== undefined) {
+      rightPadding = rightPadding !== null && rightPadding !== void 0 ? rightPadding : padding;
+      const {
+        scrollContainer: container,
+        scrollStops,
+        scrollItems: items
+      } = this;
+      const {
+        scrollLeft
+      } = this.scrollContainer;
+      const {
+        width: containerWidth
+      } = container.getBoundingClientRect();
+      const itemStart = scrollStops[item];
+      const {
+        width
+      } = items[item].getBoundingClientRect();
+      const itemEnd = itemStart + width;
+      const isBefore = scrollLeft + padding > itemStart;
+
+      if (isBefore || scrollLeft + containerWidth - rightPadding < itemEnd) {
+        const stops = [...scrollStops].sort((a, b) => isBefore ? b - a : a - b);
+        const scrollTo = (_a = stops.find(position => isBefore ? position + padding < itemStart : position + containerWidth - (rightPadding !== null && rightPadding !== void 0 ? rightPadding : 0) > itemEnd)) !== null && _a !== void 0 ? _a : 0;
+        this.scrollToPosition(scrollTo);
+      }
+    }
+  }
   /**
    * Lets the user arrow left and right through the horizontal scroll
    * @param e - Keyboard event
@@ -16789,7 +17132,7 @@ class HorizontalScroll$1 extends FoundationElement {
     }
 
     this.resizeTimeout = setTimeout(() => {
-      this.width = this.offsetWidth;
+      this.width = this.scrollContainer.offsetWidth;
       this.setFlippers();
     }, this.frameTime);
   }
@@ -16877,6 +17220,16 @@ class FormAssociatedSearch extends FormAssociated(_Search) {
  * 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 }.
  *
+ * @slot start - Content which can be provided before the search input
+ * @slot end - Content which can be provided after the search clear button
+ * @slot - The default slot for the label
+ * @slot close-button - The clear button
+ * @slot close-glyph - The clear glyph
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control, including start and end slots
+ * @csspart control - The element representing the input
+ * @csspart clear-button - The button to clear the input
+ *
  * @public
  */
 
@@ -16955,6 +17308,12 @@ class Search$1 extends FormAssociatedSearch {
       });
     }
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
   /**
    * Handles the internal control's `input` event
    * @internal
@@ -17054,6 +17413,19 @@ class FormAssociatedSelect extends FormAssociated(_Select) {
  * A Select Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#select | ARIA select }.
  *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot button-container - The element representing the select button
+ * @slot selected-value - The selected value
+ * @slot indicator - The visual indicator for the expand/collapse state of the button
+ * @slot - The default slot for slotted options
+ * @csspart control - The element representing the select invoking element
+ * @csspart selected-value - The element wrapping the selected value
+ * @csspart indicator - The element wrapping the visual indicator
+ * @csspart listbox - The listbox element
+ * @fires input - Fires a custom 'input' event when the value updates
+ * @fires change - Fires a custom 'change' event when the value updates
+ *
  * @public
  */
 
@@ -17076,13 +17448,6 @@ class Select$1 extends FormAssociatedSelect {
      */
 
     this.forcedPosition = false;
-    /**
-     * Holds the current state for the calculated position of the listbox.
-     *
-     * @public
-     */
-
-    this.position = SelectPosition.below;
     /**
      * The unique id for the internal listbox element.
      *
@@ -17097,13 +17462,6 @@ class Select$1 extends FormAssociatedSelect {
      */
 
     this.maxHeight = 0;
-    /**
-     * The value displayed on the button.
-     *
-     * @public
-     */
-
-    this.displayValue = "";
   }
   /**
    * Sets focus and synchronizes ARIA attributes when the open property changes.
@@ -17157,31 +17515,29 @@ class Select$1 extends FormAssociatedSelect {
   }
 
   set value(next) {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
 
     const prev = `${this._value}`;
 
-    if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
-      const selectedIndex = this.options.findIndex(el => el.value === next);
-      const prevSelectedOption = this.options[this.selectedIndex];
-      const nextSelectedOption = this.options[selectedIndex];
-      const prevSelectedValue = prevSelectedOption ? prevSelectedOption.value : null;
-      const nextSelectedValue = nextSelectedOption ? nextSelectedOption.value : null;
+    if ((_a = this._options) === null || _a === void 0 ? void 0 : _a.length) {
+      const selectedIndex = this._options.findIndex(el => el.value === next);
+
+      const prevSelectedValue = (_c = (_b = this._options[this.selectedIndex]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null;
+      const nextSelectedValue = (_e = (_d = this._options[selectedIndex]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : null;
 
       if (selectedIndex === -1 || prevSelectedValue !== nextSelectedValue) {
         next = "";
         this.selectedIndex = selectedIndex;
       }
 
-      if (this.firstSelectedOption) {
-        next = this.firstSelectedOption.value;
-      }
+      next = (_g = (_f = this.firstSelectedOption) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : next;
     }
 
     if (prev !== next) {
       this._value = next;
       super.valueChanged(prev, next);
       Observable.notify(this, "value");
+      this.updateDisplayValue();
     }
   }
   /**
@@ -17194,9 +17550,10 @@ class Select$1 extends FormAssociatedSelect {
 
 
   updateValue(shouldEmit) {
+    var _a, _b;
+
     if (this.$fastController.isConnected) {
-      this.value = this.firstSelectedOption ? this.firstSelectedOption.value : "";
-      this.displayValue = this.firstSelectedOption ? this.firstSelectedOption.textContent || this.firstSelectedOption.value : this.value;
+      this.value = (_b = (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
     }
 
     if (shouldEmit) {
@@ -17222,8 +17579,8 @@ class Select$1 extends FormAssociatedSelect {
     this.updateValue();
   }
 
-  positionChanged() {
-    this.positionAttribute = this.position;
+  positionChanged(prev, next) {
+    this.positionAttribute = next;
     this.setPositioning();
   }
   /**
@@ -17241,6 +17598,19 @@ class Select$1 extends FormAssociatedSelect {
     this.positionAttribute = this.forcedPosition ? this.positionAttribute : this.position;
     this.maxHeight = this.position === SelectPosition.above ? ~~currentBox.top : ~~availableBottom;
   }
+  /**
+   * The value displayed on the button.
+   *
+   * @public
+   */
+
+
+  get displayValue() {
+    var _a, _b;
+
+    Observable.track(this, "displayValue");
+    return (_b = (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : "";
+  }
   /**
    * Synchronize the `aria-disabled` property when the `disabled` property changes.
    *
@@ -17338,6 +17708,24 @@ class Select$1 extends FormAssociatedSelect {
       }
     }
   }
+  /**
+   * Updates the value when an option's value changes.
+   *
+   * @param source - the source object
+   * @param propertyName - the property to evaluate
+   *
+   * @internal
+   * @override
+   */
+
+
+  handleChange(source, propertyName) {
+    super.handleChange(source, propertyName);
+
+    if (propertyName === "value") {
+      this.updateValue();
+    }
+  }
   /**
    * Synchronize the form-associated proxy and updates the value property of the element.
    *
@@ -17349,7 +17737,15 @@ class Select$1 extends FormAssociatedSelect {
 
 
   slottedOptionsChanged(prev, next) {
+    this.options.forEach(o => {
+      const notifier = Observable.getNotifier(o);
+      notifier.unsubscribe(this, "value");
+    });
     super.slottedOptionsChanged(prev, next);
+    this.options.forEach(o => {
+      const notifier = Observable.getNotifier(o);
+      notifier.subscribe(this, "value");
+    });
     this.setProxyOptions();
     this.updateValue();
   }
@@ -17517,12 +17913,18 @@ class Select$1 extends FormAssociatedSelect {
       this.indexWhenOpened = this.selectedIndex;
     }
 
-    return !(key in ArrowKeys);
+    return !(key === keyArrowDown || key === keyArrowUp);
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.forcedPosition = !!this.positionAttribute;
+    this.addEventListener("contentchange", this.updateDisplayValue);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("contentchange", this.updateDisplayValue);
+    super.disconnectedCallback();
   }
   /**
    * Updates the proxy's size property when the size attribute changes.
@@ -17542,6 +17944,17 @@ class Select$1 extends FormAssociatedSelect {
       this.proxy.size = next;
     }
   }
+  /**
+   *
+   * @internal
+   */
+
+
+  updateDisplayValue() {
+    if (this.collapsible) {
+      Observable.notify(this, "displayValue");
+    }
+  }
 
 }
 
@@ -17561,8 +17974,6 @@ __decorate$1([attr({
 __decorate$1([observable], Select$1.prototype, "position", void 0);
 
 __decorate$1([observable], Select$1.prototype, "maxHeight", void 0);
-
-__decorate$1([observable], Select$1.prototype, "displayValue", void 0);
 /**
  * Includes ARIA states and properties relating to the ARIA select role.
  *
@@ -17598,6 +18009,8 @@ const skeletonTemplate = (context, definition) => html`<template class="${x => x
 /**
  * A Skeleton Custom HTML Element.
  *
+ * @slot - The default slot
+ *
  * @public
  */
 
@@ -17658,6 +18071,9 @@ const defaultConfig = {
 /**
  * A label element intended to be used with the {@link @microsoft/fast-foundation#(Slider:class)} component.
  *
+ * @slot - The default slot for the label content
+ * @csspart root - The element wrapping the label mark and text
+ *
  * @public
  */
 
@@ -17682,7 +18098,7 @@ class SliderLabel extends FoundationElement {
     this.getSliderConfiguration = () => {
       if (!this.isSliderConfig(this.parentNode)) {
         this.sliderDirection = defaultConfig.direction || Direction.ltr;
-        this.sliderOrientation = defaultConfig.orientation || Orientation.horizontal;
+        this.sliderOrientation = defaultConfig.orientation ;
         this.sliderMaxPosition = defaultConfig.max;
         this.sliderMinPosition = defaultConfig.min;
       } else {
@@ -17778,7 +18194,7 @@ class SliderLabel extends FoundationElement {
         break;
 
       case "max":
-        this.sliderMinPosition = source.max;
+        this.sliderMaxPosition = source.max;
         break;
 
       case "min":
@@ -17845,19 +18261,26 @@ class FormAssociatedSlider extends FormAssociated(_Slider) {
  * @public
  */
 
-var SliderMode;
-
-(function (SliderMode) {
-  SliderMode["singleValue"] = "single-value";
-})(SliderMode || (SliderMode = {}));
+const SliderMode = {
+  singleValue: "single-value"
+};
 /**
  * A Slider Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#slider | ARIA slider }.
  *
+ * @slot track - The track of the slider
+ * @slot track-start - The track-start visual indicator
+ * @slot thumb - The slider thumb
+ * @slot - The default slot for labels
+ * @csspart positioning-region - The region used to position the elements of the slider
+ * @csspart track-container - The region containing the track elements
+ * @csspart track-start - The element wrapping the track start slot
+ * @csspart thumb-container - The thumb container element which is programatically positioned
+ * @fires change - Fires a custom 'change' event when the slider value changes
+ *
  * @public
  */
 
-
 class Slider extends FormAssociatedSlider {
   constructor() {
     super(...arguments);
@@ -17956,6 +18379,10 @@ class Slider extends FormAssociatedSlider {
     this.mode = SliderMode.singleValue;
 
     this.keypressHandler = e => {
+      if (this.readOnly) {
+        return;
+      }
+
       if (e.key === keyHome) {
         e.preventDefault();
         this.value = `${this.min}`;
@@ -18348,6 +18775,16 @@ class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
  * A Switch Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
  *
+ * @slot - The deafult slot for the label
+ * @slot checked-message - The message when in a checked state
+ * @slot unchecked-message - The message when in an unchecked state
+ * @csspart label - The label
+ * @csspart switch - The element representing the switch, which wraps the indicator
+ * @csspart status-message - The wrapper for the status messages
+ * @csspart checked-message - The checked message
+ * @csspart unchecked-message - The unchecked message
+ * @fires change - Emits a custom change event when the checked state changes
+ *
  * @public
  */
 
@@ -18427,6 +18864,9 @@ const tabPanelTemplate = (context, definition) => html`<template slot="tabpanel"
 
 /**
  * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+ *
+ * @slot - The default slot for the tabpanel content
+ *
  * @public
  */
 
@@ -18441,6 +18881,9 @@ const tabTemplate = (context, definition) => html`<template slot="tab" role="tab
 
 /**
  * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+ *
+ * @slot - The default slot for the tab content
+ *
  * @public
  */
 
@@ -18462,20 +18905,27 @@ const tabsTemplate = (context, definition) => html`<template class="${x => x.ori
  * @public
  */
 
-var TabsOrientation;
-
-(function (TabsOrientation) {
-  TabsOrientation["vertical"] = "vertical";
-  TabsOrientation["horizontal"] = "horizontal";
-})(TabsOrientation || (TabsOrientation = {}));
+const TabsOrientation = {
+  vertical: "vertical",
+  horizontal: "horizontal"
+};
 /**
  * A Tabs Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#tablist | ARIA tablist }.
  *
+ * @slot start - Content which can be provided before the tablist element
+ * @slot end - Content which can be provided after the tablist element
+ * @slot tab - The slot for tabs
+ * @slot tabpanel - The slot for tabpanels
+ * @csspart tablist - The element wrapping for the tabs
+ * @csspart tab - The tab slot
+ * @csspart activeIndicator - The visual indicator
+ * @csspart tabpanel - The tabpanel slot
+ * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
+ *
  * @public
  */
 
-
 class Tabs extends FoundationElement {
   constructor() {
     super(...arguments);
@@ -18520,8 +18970,6 @@ class Tabs extends FoundationElement {
       const gridHorizontalProperty = "gridColumn";
       const gridVerticalProperty = "gridRow";
       const gridProperty = this.isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
-      this.tabIds = this.getTabIds();
-      this.tabpanelIds = this.getTabPanelIds();
       this.activeTabIndex = this.getActiveIndex();
       this.showActiveIndicator = false;
       this.tabs.forEach((tab, index) => {
@@ -18556,8 +19004,6 @@ class Tabs extends FoundationElement {
     };
 
     this.setTabPanels = () => {
-      this.tabIds = this.getTabIds();
-      this.tabpanelIds = this.getTabPanelIds();
       this.tabpanels.forEach((tabpanel, index) => {
         const tabId = this.tabIds[index];
         const tabpanelId = this.tabpanelIds[index];
@@ -18699,6 +19145,8 @@ class Tabs extends FoundationElement {
 
   tabsChanged() {
     if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
+      this.tabIds = this.getTabIds();
+      this.tabpanelIds = this.getTabPanelIds();
       this.setTabs();
       this.setTabPanels();
       this.handleActiveIndicatorPosition();
@@ -18711,6 +19159,8 @@ class Tabs extends FoundationElement {
 
   tabpanelsChanged() {
     if (this.$fastController.isConnected && this.tabpanels.length <= this.tabs.length) {
+      this.tabIds = this.getTabIds();
+      this.tabpanelIds = this.getTabPanelIds();
       this.setTabs();
       this.setTabPanels();
       this.handleActiveIndicatorPosition();
@@ -18855,34 +19305,38 @@ class FormAssociatedTextArea extends FormAssociated(_TextArea) {
  * Resize mode for a TextArea
  * @public
  */
-var TextAreaResize;
-
-(function (TextAreaResize) {
+const TextAreaResize = {
   /**
    * No resize.
    */
-  TextAreaResize["none"] = "none";
+  none: "none",
+
   /**
    * Resize vertically and horizontally.
    */
+  both: "both",
 
-  TextAreaResize["both"] = "both";
   /**
    * Resize horizontally.
    */
+  horizontal: "horizontal",
 
-  TextAreaResize["horizontal"] = "horizontal";
   /**
    * Resize vertically.
    */
-
-  TextAreaResize["vertical"] = "vertical";
-})(TextAreaResize || (TextAreaResize = {}));
+  vertical: "vertical"
+};
 
 /**
  * A Text Area Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
  *
+ * @slot - The default slot for the label
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control
+ * @csspart control - The textarea element
+ * @fires change - Emits a custom 'change' event when the textarea emits a change event
+ *
  * @public
  */
 
@@ -18950,6 +19404,24 @@ class TextArea$1 extends FormAssociatedTextArea {
       this.proxy.spellcheck = this.spellcheck;
     }
   }
+  /**
+   * Selects all the text in the text area
+   *
+   * @public
+   */
+
+
+  select() {
+    this.control.select();
+    /**
+     * The select event does not permeate the shadow DOM boundary.
+     * This fn effectively proxies the select event,
+     * emitting a `select` event whenever the internal
+     * control emits a `select` event
+     */
+
+    this.$emit("select");
+  }
   /**
    * Change event handler for inner control.
    * @remarks
@@ -18964,6 +19436,12 @@ class TextArea$1 extends FormAssociatedTextArea {
   handleChange() {
     this.$emit("change");
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
 
 }
 
@@ -19036,7 +19514,12 @@ const textFieldTemplate = (context, definition) => html`<template class=" ${x =>
  * @public
  */
 
-const toolbarTemplate = (context, definition) => html`<template aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-orientation="${x => x.orientation}" orientation="${x => x.orientation}" role="toolbar" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot name="label"></slot><div class="positioning-region" part="positioning-region">${startSlotTemplate(context, definition)}<slot ${slotted({
+const toolbarTemplate = (context, definition) => html`<template aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-orientation="${x => x.orientation}" orientation="${x => x.orientation}" role="toolbar" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" ${children({
+  property: "childItems",
+  attributeFilter: ["disabled", "hidden"],
+  filter: elements(),
+  subtree: true
+})}><slot name="label"></slot><div class="positioning-region" part="positioning-region">${startSlotTemplate(context, definition)}<slot ${slotted({
   filter: elements(),
   property: "slottedItems"
 })}></slot>${endSlotTemplate(context, definition)}</div></template>`;
@@ -19072,6 +19555,12 @@ const ToolbarArrowKeyMap = Object.freeze({
  * A Toolbar Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria-practices/#Toolbar|ARIA Toolbar}.
  *
+ * @slot start - Content which can be provided before the slotted items
+ * @slot end - Content which can be provided after the slotted items
+ * @slot - The default slot for slotted items
+ * @slot label - The toolbar label
+ * @csspart positioning-region - The element containing the items, start and end slots
+ *
  * @public
  */
 
@@ -19101,12 +19590,6 @@ class Toolbar$1 extends FoundationElement {
      */
 
     this.orientation = Orientation.horizontal;
-
-    this.startEndSlotChange = () => {
-      if (this.$fastController.isConnected) {
-        this.reduceFocusableElements();
-      }
-    };
   }
   /**
    * The index of the currently focused element, clamped between 0 and the last element.
@@ -19150,6 +19633,12 @@ class Toolbar$1 extends FoundationElement {
 
     return true;
   }
+
+  childItemsChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      this.reduceFocusableElements();
+    }
+  }
   /**
    * @internal
    */
@@ -19158,18 +19647,6 @@ class Toolbar$1 extends FoundationElement {
   connectedCallback() {
     super.connectedCallback();
     this.direction = getDirection(this);
-    this.start.addEventListener("slotchange", this.startEndSlotChange);
-    this.end.addEventListener("slotchange", this.startEndSlotChange);
-  }
-  /**
-   * @internal
-   */
-
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.start.removeEventListener("slotchange", this.startEndSlotChange);
-    this.end.removeEventListener("slotchange", this.startEndSlotChange);
   }
   /**
    * When the toolbar receives focus, set the currently active element as focused.
@@ -19247,7 +19724,14 @@ class Toolbar$1 extends FoundationElement {
 
 
   reduceFocusableElements() {
-    this.focusableElements = this.allSlottedItems.reduce(Toolbar$1.reduceFocusableItems, []);
+    var _a;
+
+    const previousFocusedElement = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a[this.activeIndex];
+    this.focusableElements = this.allSlottedItems.reduce(Toolbar$1.reduceFocusableItems, []); // If the previously active item is still focusable, adjust the active index to the
+    // index of that item.
+
+    const adjustedActiveIndex = this.focusableElements.indexOf(previousFocusedElement);
+    this.activeIndex = Math.max(0, adjustedActiveIndex);
     this.setFocusableElements();
   }
   /**
@@ -19282,7 +19766,7 @@ class Toolbar$1 extends FoundationElement {
     const isFocusableFastElement = (_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus;
     const hasFocusableShadow = Array.from((_d = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("*")) !== null && _d !== void 0 ? _d : []).some(x => isFocusable(x));
 
-    if (isFocusable(element) || isRoleRadio || isFocusableFastElement || hasFocusableShadow) {
+    if (!element.hasAttribute("disabled") && !element.hasAttribute("hidden") && (isFocusable(element) || isRoleRadio || isFocusableFastElement || hasFocusableShadow)) {
       elements.push(element);
       return elements;
     }
@@ -19315,6 +19799,8 @@ __decorate$1([attr], Toolbar$1.prototype, "orientation", void 0);
 __decorate$1([observable], Toolbar$1.prototype, "slottedItems", void 0);
 
 __decorate$1([observable], Toolbar$1.prototype, "slottedLabel", void 0);
+
+__decorate$1([observable], Toolbar$1.prototype, "childItems", void 0);
 /**
  * Includes ARIA states and properties relating to the ARIA toolbar role
  *
@@ -19349,83 +19835,85 @@ const tooltipTemplate = (context, definition) => {
  *
  * @public
  */
-var TooltipPosition;
-
-(function (TooltipPosition) {
+const TooltipPosition = {
   /**
    * The tooltip is positioned above the element
    */
-  TooltipPosition["top"] = "top";
+  top: "top",
+
   /**
    * The tooltip is positioned to the right of the element
    */
+  right: "right",
 
-  TooltipPosition["right"] = "right";
   /**
    * The tooltip is positioned below the element
    */
+  bottom: "bottom",
 
-  TooltipPosition["bottom"] = "bottom";
   /**
    * The tooltip is positioned to the left of the element
    */
+  left: "left",
 
-  TooltipPosition["left"] = "left";
   /**
    * The tooltip is positioned before the element
    */
+  start: "start",
 
-  TooltipPosition["start"] = "start";
   /**
    * The tooltip is positioned after the element
    */
+  end: "end",
 
-  TooltipPosition["end"] = "end";
   /**
    * The tooltip is positioned above the element and to the left
    */
+  topLeft: "top-left",
 
-  TooltipPosition["topLeft"] = "top-left";
   /**
    * The tooltip is positioned above the element and to the right
    */
+  topRight: "top-right",
 
-  TooltipPosition["topRight"] = "top-right";
   /**
    * The tooltip is positioned below the element and to the left
    */
+  bottomLeft: "bottom-left",
 
-  TooltipPosition["bottomLeft"] = "bottom-left";
   /**
    * The tooltip is positioned below the element and to the right
    */
+  bottomRight: "bottom-right",
 
-  TooltipPosition["bottomRight"] = "bottom-right";
   /**
    * The tooltip is positioned above the element and to the left
    */
+  topStart: "top-start",
 
-  TooltipPosition["topStart"] = "top-start";
   /**
    * The tooltip is positioned above the element and to the right
    */
+  topEnd: "top-end",
 
-  TooltipPosition["topEnd"] = "top-end";
   /**
    * The tooltip is positioned below the element and to the left
    */
+  bottomStart: "bottom-start",
 
-  TooltipPosition["bottomStart"] = "bottom-start";
   /**
    * The tooltip is positioned below the element and to the right
    */
-
-  TooltipPosition["bottomEnd"] = "bottom-end";
-})(TooltipPosition || (TooltipPosition = {}));
+  bottomEnd: "bottom-end"
+};
 
 /**
  * An Tooltip Custom HTML Element.
  *
+ * @slot - The default slot for the tooltip content
+ * @csspart tooltip - The tooltip element
+ * @fires dismiss - Fires a custom 'dismiss' event when the tooltip is visible and escape key is pressed
+ *
  * @public
  */
 
@@ -20030,6 +20518,18 @@ function isTreeItemElement(el) {
 /**
  * A Tree item Custom HTML Element.
  *
+ * @slot start - Content which can be provided before the tree item content
+ * @slot end - Content which can be provided after the tree item content
+ * @slot - The default slot for tree item text content
+ * @slot item - The slot for tree items (fast tree items manage this assignment themselves)
+ * @slot expand-collapse-button - The expand/collapse button
+ * @csspart positioning-region - The element used to position the tree item content with exception of any child nodes
+ * @csspart content-region - The element containing the expand/collapse, start, and end slots
+ * @csspart items - The element wrapping any child items
+ * @csspart expand-collapse-button - The expand/collapse button
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires selected-change - Fires a custom 'selected-change' event when the selected state changes
+ *
  * @public
  */
 
@@ -20179,6 +20679,8 @@ const treeViewTemplate = (context, definition) => html`<template role="tree" ${r
  * A Tree view Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria-practices/#TreeView | ARIA TreeView }.
  *
+ * @slot - The default slot for tree items
+ *
  * @public
  */
 
@@ -20270,8 +20772,10 @@ class TreeView extends FoundationElement {
           if (e.target && this.isFocusableElement(e.target)) {
             const item = e.target;
 
-            if (item instanceof TreeItem && item.childItemLength() > 0) {
+            if (item instanceof TreeItem && item.childItemLength() > 0 && item.expanded) {
               item.expanded = false;
+            } else if (item instanceof TreeItem && item.parentElement instanceof TreeItem) {
+              TreeItem.focusItem(item.parentElement);
             }
           }
 
@@ -20281,8 +20785,10 @@ class TreeView extends FoundationElement {
           if (e.target && this.isFocusableElement(e.target)) {
             const item = e.target;
 
-            if (item instanceof TreeItem && item.childItemLength() > 0) {
+            if (item instanceof TreeItem && item.childItemLength() > 0 && !item.expanded) {
               item.expanded = true;
+            } else if (item instanceof TreeItem && item.childItemLength() > 0) {
+              this.focusNextNode(1, e.target);
             }
           }