@fluentui/web-components 2.5.0 → 2.5.3

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 (sub2 !== void 0) {
-      sub2.handleChange(source, args);
+      if (sub1 !== void 0) {
+        sub1.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];
@@ -5951,6 +5948,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 +6032,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 +6335,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 +6638,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 +6845,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 +7381,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 +7465,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 +7918,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 +8001,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
  */
@@ -8617,6 +8645,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
  */
 
@@ -9000,6 +9034,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 +9364,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 +9637,7 @@ const dataGridTemplate = (context, definition) => {
 /**
  * A Data Grid Custom HTML Element.
  *
+ * @slot - The default slot for custom row elements
  * @public
  */
 
@@ -10103,6 +10136,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 +10508,8 @@ const cardTemplate = (context, definition) => html`<slot></slot>`;
 /**
  * An Card Custom HTML Element.
  *
+ * @slot - The default slot for the card content
+ *
  * @public
  */
 
@@ -10505,6 +10542,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
  */
 
@@ -10580,6 +10624,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 +10695,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 +10764,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 +10802,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 +10845,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 +11214,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 +11425,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 +11470,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 +11495,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 +11574,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.
@@ -11566,8 +11653,8 @@ class Combobox$1 extends FormAssociatedCombobox {
     }
   }
 
-  positionChanged() {
-    this.positionAttribute = this.position;
+  positionChanged(prev, next) {
+    this.positionAttribute = next;
     this.setPositioning();
   }
   /**
@@ -11623,6 +11710,7 @@ class Combobox$1 extends FormAssociatedCombobox {
 
       this.selectedOptions = [captured];
       this.control.value = captured.text;
+      this.clearSelectionRange();
       this.updateValue(true);
     }
 
@@ -11788,8 +11876,7 @@ class Combobox$1 extends FormAssociatedCombobox {
           }
 
           this.open = false;
-          const controlValueLength = this.control.value.length;
-          this.control.setSelectionRange(controlValueLength, controlValueLength);
+          this.clearSelectionRange();
           break;
         }
 
@@ -12019,6 +12106,15 @@ class Combobox$1 extends FormAssociatedCombobox {
       this.$emit("change");
     }
   }
+  /**
+   * @internal
+   */
+
+
+  clearSelectionRange() {
+    const controlValueLength = this.control.value.length;
+    this.control.setSelectionRange(controlValueLength, controlValueLength);
+  }
 
 }
 
@@ -13586,6 +13682,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 +14015,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 +14041,6 @@ class Divider extends FoundationElement {
      * The role of the element.
      *
      * @public
-     * @defaultValue - {@link DividerRole.separator}
      * @remarks
      * HTML Attribute: role
      */
@@ -13967,12 +14067,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 +14083,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 +14127,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 +14155,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 +14579,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 +14713,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 +14743,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 +15050,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 +15400,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 +15537,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
@@ -15502,6 +15646,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
  */
 
@@ -15682,6 +15840,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 +15975,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 +16070,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
  */
 
@@ -16345,6 +16531,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 +16652,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
  */
 
@@ -16877,6 +17082,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
  */
 
@@ -17054,6 +17269,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 +17304,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 +17318,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 +17371,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 +17406,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 +17435,8 @@ class Select$1 extends FormAssociatedSelect {
     this.updateValue();
   }
 
-  positionChanged() {
-    this.positionAttribute = this.position;
+  positionChanged(prev, next) {
+    this.positionAttribute = next;
     this.setPositioning();
   }
   /**
@@ -17241,6 +17454,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 +17564,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 +17593,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 +17769,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 +17800,17 @@ class Select$1 extends FormAssociatedSelect {
       this.proxy.size = next;
     }
   }
+  /**
+   *
+   * @internal
+   */
+
+
+  updateDisplayValue() {
+    if (this.collapsible) {
+      Observable.notify(this, "displayValue");
+    }
+  }
 
 }
 
@@ -17561,8 +17830,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 +17865,8 @@ const skeletonTemplate = (context, definition) => html`<template class="${x => x
 /**
  * A Skeleton Custom HTML Element.
  *
+ * @slot - The default slot
+ *
  * @public
  */
 
@@ -17658,6 +17927,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 +17954,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 {
@@ -17845,19 +18117,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 +18235,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 +18631,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 +18720,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 +18737,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 +18761,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 +18826,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 +18860,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 +19001,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 +19015,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 +19161,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 +19260,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
@@ -19036,7 +19364,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 +19405,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 +19440,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 +19483,12 @@ class Toolbar$1 extends FoundationElement {
 
     return true;
   }
+
+  childItemsChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      this.reduceFocusableElements();
+    }
+  }
   /**
    * @internal
    */
@@ -19158,18 +19497,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 +19574,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 +19616,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 +19649,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 +19685,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 +20368,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 +20529,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 +20622,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 +20635,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);
             }
           }