@ni/nimble-components 8.6.0 → 8.6.3

package/dist/all-components-bundle.js

@@ -427,7 +427,8 @@
                 subscribers.subscribe(subscriber);
             }
             else {
-                this.sourceSubscribers = (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
+                this.sourceSubscribers =
+                    (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
                 this.sourceSubscribers.subscribe(subscriber);
             }
         }
@@ -571,6 +572,7 @@
                         watcher = void 0;
                         /* eslint-disable-next-line */
                         prevValue = prev.propertySource[prev.propertyName];
+                        /* eslint-disable-next-line @typescript-eslint/no-this-alias */
                         watcher = this;
                         if (propertySource === prevValue) {
                             this.needsRefresh = true;
@@ -710,6 +712,21 @@
     function observable(target, nameOrAccessor) {
         Observable.defineProperty(target, nameOrAccessor);
     }
+    /**
+     * Decorator: Marks a property getter as having volatile observable dependencies.
+     * @param target - The target that the property is defined on.
+     * @param name - The property name.
+     * @param name - The existing descriptor.
+     * @public
+     */
+    function volatile(target, name, descriptor) {
+        return Object.assign({}, descriptor, {
+            get: function () {
+                Observable.trackVolatile();
+                return descriptor.get.apply(this);
+            },
+        });
+    }
     const contextEvent = FAST.getById(3 /* contextEvent */, () => {
         let current = null;
         return {
@@ -1131,6 +1148,7 @@
             this.targetIndex = -1;
         }
         release() {
+            /* eslint-disable-next-line @typescript-eslint/no-this-alias */
             sharedContext = this;
         }
         static borrow(directives) {
@@ -1609,8 +1627,6 @@
     class ElementStyles {
         constructor() {
             this.targets = new WeakSet();
-            /** @internal */
-            this.behaviors = null;
         }
         /** @internal */
         addStylesTo(target) {
@@ -4305,11 +4321,13 @@
         });
     }
 
-    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.
@@ -4533,6 +4551,17 @@
     function limit(min, max, value) {
         return Math.min(Math.max(value, min), max);
     }
+    /**
+     * Determines if a number value is within a specified range.
+     *
+     * @param value - the value to check
+     * @param min - the range start
+     * @param max - the range end
+     */
+    function inRange(value, min, max = 0) {
+        [min, max] = [min, max].sort((a, b) => a - b);
+        return min <= value && value < max;
+    }
 
     let uniqueIdCounter = 0;
     /**
@@ -4600,67 +4629,73 @@
     class ARIAGlobalStatesAndProperties {
     }
     __decorate$1([
-        attr({ attribute: "aria-atomic", mode: "fromView" })
+        attr({ attribute: "aria-atomic" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
     __decorate$1([
-        attr({ attribute: "aria-busy", mode: "fromView" })
+        attr({ attribute: "aria-busy" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
     __decorate$1([
-        attr({ attribute: "aria-controls", mode: "fromView" })
+        attr({ attribute: "aria-controls" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
     __decorate$1([
-        attr({ attribute: "aria-current", mode: "fromView" })
+        attr({ attribute: "aria-current" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
     __decorate$1([
-        attr({ attribute: "aria-describedby", mode: "fromView" })
+        attr({ attribute: "aria-describedby" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
     __decorate$1([
-        attr({ attribute: "aria-details", mode: "fromView" })
+        attr({ attribute: "aria-details" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
     __decorate$1([
-        attr({ attribute: "aria-disabled", mode: "fromView" })
+        attr({ attribute: "aria-disabled" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
     __decorate$1([
-        attr({ attribute: "aria-errormessage", mode: "fromView" })
+        attr({ attribute: "aria-errormessage" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
     __decorate$1([
-        attr({ attribute: "aria-flowto", mode: "fromView" })
+        attr({ attribute: "aria-flowto" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
     __decorate$1([
-        attr({ attribute: "aria-haspopup", mode: "fromView" })
+        attr({ attribute: "aria-haspopup" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
     __decorate$1([
-        attr({ attribute: "aria-hidden", mode: "fromView" })
+        attr({ attribute: "aria-hidden" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
     __decorate$1([
-        attr({ attribute: "aria-invalid", mode: "fromView" })
+        attr({ attribute: "aria-invalid" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
     __decorate$1([
-        attr({ attribute: "aria-keyshortcuts", mode: "fromView" })
+        attr({ attribute: "aria-keyshortcuts" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
     __decorate$1([
-        attr({ attribute: "aria-label", mode: "fromView" })
+        attr({ attribute: "aria-label" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
     __decorate$1([
-        attr({ attribute: "aria-labelledby", mode: "fromView" })
+        attr({ attribute: "aria-labelledby" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
     __decorate$1([
-        attr({ attribute: "aria-live", mode: "fromView" })
+        attr({ attribute: "aria-live" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
     __decorate$1([
-        attr({ attribute: "aria-owns", mode: "fromView" })
+        attr({ attribute: "aria-owns" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
     __decorate$1([
-        attr({ attribute: "aria-relevant", mode: "fromView" })
+        attr({ attribute: "aria-relevant" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
     __decorate$1([
-        attr({ attribute: "aria-roledescription", mode: "fromView" })
+        attr({ attribute: "aria-roledescription" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
 
     /**
      * 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
      */
     class Anchor extends FoundationElement {
@@ -4675,7 +4710,8 @@
                 var _a;
                 // Check to see if delegatesFocus is supported
                 if (window.ShadowRoot &&
-                    !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                    !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                    ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
                     this.focus = () => {
                         this.control.focus();
                     };
@@ -4725,7 +4761,7 @@
     class DelegatesARIALink {
     }
     __decorate$1([
-        attr({ attribute: "aria-expanded", mode: "fromView" })
+        attr({ attribute: "aria-expanded" })
     ], DelegatesARIALink.prototype, "ariaExpanded", void 0);
     applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
     applyMixins(Anchor, StartEnd, DelegatesARIALink);
@@ -4846,6 +4882,10 @@
     /**
      * 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
      */
     class AnchoredRegion$1 extends FoundationElement {
@@ -5342,7 +5382,9 @@
                 switch (this.horizontalScaling) {
                     case "anchor":
                     case "fill":
-                        nextRegionWidth = nextPositionerDimension.width;
+                        nextRegionWidth = this.horizontalViewportLock
+                            ? this.viewportRect.width
+                            : nextPositionerDimension.width;
                         this.regionWidth = `${nextRegionWidth}px`;
                         break;
                     case "content":
@@ -5423,7 +5465,9 @@
                 switch (this.verticalScaling) {
                     case "anchor":
                     case "fill":
-                        nextRegionHeight = nextPositionerDimension.height;
+                        nextRegionHeight = this.verticalViewportLock
+                            ? this.viewportRect.height
+                            : nextPositionerDimension.height;
                         this.regionHeight = `${nextRegionHeight}px`;
                         break;
                     case "content":
@@ -5851,6 +5895,8 @@
 
     /**
      * A Breadcrumb Custom HTML Element.
+     * @slot - The default slot for the breadcrumb items
+     * @csspart list - The element wrapping the slotted items
      *
      * @public
      */
@@ -5862,22 +5908,19 @@
                     return;
                 }
                 const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
-                this.setItemSeparator(lastNode);
-                this.setLastItemAriaCurrent(lastNode);
+                this.slottedBreadcrumbItems.forEach((item) => {
+                    const itemIsLastNode = item === lastNode;
+                    this.setItemSeparator(item, itemIsLastNode);
+                    this.setAriaCurrent(item, itemIsLastNode);
+                });
             }
         }
-        setItemSeparator(lastNode) {
-            this.slottedBreadcrumbItems.forEach((item) => {
-                if (item instanceof BreadcrumbItem$1) {
-                    item.separator = true;
-                }
-            });
-            if (lastNode instanceof BreadcrumbItem$1) {
-                lastNode.separator = false;
+        setItemSeparator(item, isLastNode) {
+            if (item instanceof BreadcrumbItem$1) {
+                item.separator = !isLastNode;
             }
         }
         /**
-         * @internal
          * Finds href on childnodes in the light DOM or shadow DOM.
          * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
          */
@@ -5893,17 +5936,23 @@
                 return null;
         }
         /**
-         *  If child node with an anchor tag and with href is found then apply aria-current to child node otherwise apply aria-current to the host element, with an href
+         *  Sets ARIA Current for the current node
+         * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
+         * otherwise apply aria-current to the host element, with an href
          */
-        setLastItemAriaCurrent(lastNode) {
-            const childNodeWithHref = this.findChildWithHref(lastNode);
+        setAriaCurrent(item, isLastNode) {
+            const childNodeWithHref = this.findChildWithHref(item);
             if (childNodeWithHref === null &&
-                lastNode.hasAttribute("href") &&
-                lastNode instanceof BreadcrumbItem$1) {
-                lastNode.ariaCurrent = "page";
+                item.hasAttribute("href") &&
+                item instanceof BreadcrumbItem$1) {
+                isLastNode
+                    ? item.setAttribute("aria-current", "page")
+                    : item.removeAttribute("aria-current");
             }
             else if (childNodeWithHref !== null) {
-                childNodeWithHref.setAttribute("aria-current", "page");
+                isLastNode
+                    ? childNodeWithHref.setAttribute("aria-current", "page")
+                    : childNodeWithHref.removeAttribute("aria-current");
             }
         }
     }
@@ -6444,6 +6493,12 @@
      * 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
      */
     class Button$1 extends FormAssociatedButton {
@@ -6495,7 +6550,8 @@
                 var _a;
                 // Check to see if delegatesFocus is supported
                 if (window.ShadowRoot &&
-                    !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                    !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                    ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
                     this.focus = () => {
                         this.control.focus();
                     };
@@ -6600,10 +6656,10 @@
     class DelegatesARIAButton {
     }
     __decorate$1([
-        attr({ attribute: "aria-expanded", mode: "fromView" })
+        attr({ attribute: "aria-expanded" })
     ], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
     __decorate$1([
-        attr({ attribute: "aria-pressed", mode: "fromView" })
+        attr({ attribute: "aria-pressed" })
     ], DelegatesARIAButton.prototype, "ariaPressed", void 0);
     applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
     applyMixins(Button$1, StartEnd, DelegatesARIAButton);
@@ -6661,6 +6717,13 @@
      * 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
      */
     class Checkbox$1 extends FormAssociatedCheckbox {
@@ -6728,6 +6791,11 @@
      * 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
      */
     class ListboxOption extends FoundationElement {
@@ -6781,7 +6849,20 @@
                 this.ariaChecked = next ? "true" : "false";
                 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() {
             if (!this.dirtySelected) {
@@ -6821,24 +6902,26 @@
             }
         }
         get label() {
-            var _a, _b;
-            return (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.textContent) !== null && _b !== void 0 ? _b : "";
+            var _a;
+            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() {
             return this.proxy ? this.proxy.form : null;
@@ -6847,6 +6930,9 @@
     __decorate$1([
         observable
     ], ListboxOption.prototype, "checked", void 0);
+    __decorate$1([
+        observable
+    ], ListboxOption.prototype, "content", void 0);
     __decorate$1([
         observable
     ], ListboxOption.prototype, "defaultSelected", void 0);
@@ -6888,6 +6974,8 @@
      * 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
      */
     class Listbox extends FoundationElement {
@@ -7197,7 +7285,7 @@
          * @internal
          */
         multipleChanged(prev, next) {
-            this.ariaMultiSelectable = next ? "true" : undefined;
+            this.ariaMultiSelectable = next ? "true" : null;
         }
         /**
          * Updates the list of selected options when the `selectedIndex` changes.
@@ -7360,7 +7448,7 @@
      * @param n - element to filter
      * @public
      */
-    Listbox.slottedOptionFilter = (n) => isListboxOption(n) && !n.disabled && !n.hidden;
+    Listbox.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
     /**
      * Typeahead timeout in milliseconds.
      *
@@ -7370,9 +7458,6 @@
     __decorate$1([
         attr({ mode: "boolean" })
     ], Listbox.prototype, "disabled", void 0);
-    __decorate$1([
-        attr({ mode: "boolean" })
-    ], Listbox.prototype, "multiple", void 0);
     __decorate$1([
         observable
     ], Listbox.prototype, "selectedIndex", void 0);
@@ -7411,11 +7496,10 @@
      * 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",
+    };
 
     /**
      * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
@@ -7463,96 +7547,6 @@
         return false;
     }
 
-    /**
-     * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
-     * styles are applied while the property matches and that styles are not applied if the property does
-     * not match.
-     *
-     * @public
-     */
-    class PropertyStyleSheetBehavior {
-        /**
-         * Constructs a {@link PropertyStyleSheetBehavior} instance.
-         * @param propertyName - The property name to operate from.
-         * @param value - The property value to operate from.
-         * @param styles - The styles to coordinate with the property.
-         */
-        constructor(propertyName, value, styles) {
-            this.propertyName = propertyName;
-            this.value = value;
-            this.styles = styles;
-        }
-        /**
-         * Binds the behavior to the element.
-         * @param elementInstance - The element for which the property is applied.
-         */
-        bind(elementInstance) {
-            Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
-            this.handleChange(elementInstance, this.propertyName);
-        }
-        /**
-         * Unbinds the behavior from the element.
-         * @param source - The element for which the behavior is unbinding.
-         * @internal
-         */
-        unbind(source) {
-            Observable.getNotifier(source).unsubscribe(this, this.propertyName);
-            source.$fastController.removeStyles(this.styles);
-        }
-        /**
-         * Change event for the provided element.
-         * @param source - the element for which to attach or detach styles.
-         * @param key - the key to lookup to know if the element already has the styles
-         * @internal
-         */
-        handleChange(source, key) {
-            if (source[key] === this.value) {
-                source.$fastController.addStyles(this.styles);
-            }
-            else {
-                source.$fastController.removeStyles(this.styles);
-            }
-        }
-    }
-
-    /**
-     * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
-     * @public
-     */
-    const hidden = `:host([hidden]){display:none}`;
-    /**
-     * Applies a CSS display property.
-     * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
-     * @param display - The CSS display property value
-     * @public
-     */
-    function display(displayValue) {
-        return `${hidden}:host{display:${displayValue}}`;
-    }
-
-    /**
-     * The string representing the focus selector to be used. Value
-     * will be "focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
-     * is supported and "focus" when it is not.
-     *
-     * @public
-     */
-    const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
-
-    /**
-     * a method to filter out any whitespace _only_ nodes, to be used inside a template
-     * @param value - The Node that is being inspected
-     * @param index - The index of the node within the array
-     * @param array - The Node array that is being filtered
-     *
-     * @public
-     */
-    function whitespaceFilter(value, index, array) {
-        return value.nodeType !== Node.TEXT_NODE
-            ? true
-            : typeof value.nodeValue === "string" && !!value.nodeValue.trim().length;
-    }
-
     const defaultElement = document.createElement("div");
     function isFastElement(element) {
         return element instanceof FASTElement;
@@ -8848,6 +8842,13 @@
      * 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
      */
     class Dialog extends FoundationElement {
@@ -8993,6 +8994,8 @@
          */
         dismiss() {
             this.$emit("dismiss");
+            // implement `<dialog>` interface
+            this.$emit("cancel");
         }
         /**
          * The method to show the dialog.
@@ -9009,6 +9012,8 @@
          */
         hide() {
             this.hidden = true;
+            // implement `<dialog>` interface
+            this.$emit("close");
         }
         /**
          * @internal
@@ -9125,95 +9130,556 @@
     >
         ${startSlotTemplate(context, definition)}
         <span class="content" part="content">
-            <slot></slot>
+            <slot ${slotted("content")}></slot>
         </span>
         ${endSlotTemplate(context, definition)}
     </template>
 `;
 
     /**
-     * Menu items roles.
-     * @public
-     */
-    var MenuItemRole;
-    (function (MenuItemRole) {
-        /**
-         * The menu item has a "menuitem" role
-         */
-        MenuItemRole["menuitem"] = "menuitem";
-        /**
-         * The menu item has a "menuitemcheckbox" role
-         */
-        MenuItemRole["menuitemcheckbox"] = "menuitemcheckbox";
-        /**
-         * The menu item has a "menuitemradio" role
-         */
-        MenuItemRole["menuitemradio"] = "menuitemradio";
-    })(MenuItemRole || (MenuItemRole = {}));
-    /**
-     * @internal
-     */
-    const roleForMenuItem = {
-        [MenuItemRole.menuitem]: "menuitem",
-        [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
-        [MenuItemRole.menuitemradio]: "menuitemradio",
-    };
-
-    /**
-     * 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 }.
+     * A Listbox Custom HTML Element.
+     * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
      *
      * @public
      */
-    class MenuItem$1 extends FoundationElement {
+    class ListboxElement extends Listbox {
         constructor() {
             super(...arguments);
             /**
-             * The role of the element.
+             * The index of the most recently checked option.
              *
-             * @public
-             * @remarks
-             * HTML Attribute: role
-             */
-            this.role = MenuItemRole.menuitem;
-            /**
              * @internal
+             * @remarks
+             * Multiple-selection mode only.
              */
-            this.hasSubmenu = false;
+            this.activeIndex = -1;
             /**
-             * Track current direction to pass to the anchored region
+             * The start index when checking a range of options.
              *
              * @internal
              */
-            this.currentDirection = Direction.ltr;
-            this.focusSubmenuOnLoad = false;
-            /**
-             * @internal
-             */
-            this.handleMenuItemKeyDown = (e) => {
-                if (e.defaultPrevented) {
-                    return false;
+            this.rangeStartIndex = -1;
+        }
+        /**
+         * Returns the last checked option.
+         *
+         * @internal
+         */
+        get activeOption() {
+            return this.options[this.activeIndex];
+        }
+        /**
+         * Returns the list of checked options.
+         *
+         * @internal
+         */
+        get checkedOptions() {
+            var _a;
+            return (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter(o => o.checked);
+        }
+        /**
+         * Returns the index of the first selected option.
+         *
+         * @internal
+         */
+        get firstSelectedOptionIndex() {
+            return this.options.indexOf(this.firstSelectedOption);
+        }
+        /**
+         * Updates the `ariaActiveDescendant` property when the active index changes.
+         *
+         * @param prev - the previous active index
+         * @param next - the next active index
+         *
+         * @internal
+         */
+        activeIndexChanged(prev, next) {
+            var _a, _b;
+            this.ariaActiveDescendant = (_b = (_a = this.options[next]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "";
+            this.focusAndScrollOptionIntoView();
+        }
+        /**
+         * Toggles the checked state for the currently active option.
+         *
+         * @remarks
+         * Multiple-selection mode only.
+         *
+         * @internal
+         */
+        checkActiveIndex() {
+            if (!this.multiple) {
+                return;
+            }
+            const activeItem = this.activeOption;
+            if (activeItem) {
+                activeItem.checked = true;
+            }
+        }
+        /**
+         * Sets the active index to the first option and marks it as checked.
+         *
+         * @remarks
+         * Multi-selection mode only.
+         *
+         * @param preserveChecked - mark all options unchecked before changing the active index
+         *
+         * @internal
+         */
+        checkFirstOption(preserveChecked = false) {
+            if (preserveChecked) {
+                if (this.rangeStartIndex === -1) {
+                    this.rangeStartIndex = this.activeIndex + 1;
                 }
-                switch (e.key) {
-                    case keyEnter:
-                    case keySpace:
-                        this.invoke();
-                        return false;
-                    case keyArrowRight:
-                        //open/focus on submenu
-                        this.expandAndFocus();
-                        return false;
-                    case keyArrowLeft:
-                        //close submenu
-                        if (this.expanded) {
-                            this.expanded = false;
-                            this.focus();
-                            return false;
-                        }
+                this.options.forEach((o, i) => {
+                    o.checked = inRange(i, this.rangeStartIndex);
+                });
+            }
+            else {
+                this.uncheckAllOptions();
+            }
+            this.activeIndex = 0;
+            this.checkActiveIndex();
+        }
+        /**
+         * Decrements the active index and sets the matching option as checked.
+         *
+         * @remarks
+         * Multi-selection mode only.
+         *
+         * @param preserveChecked - mark all options unchecked before changing the active index
+         *
+         * @internal
+         */
+        checkLastOption(preserveChecked = false) {
+            if (preserveChecked) {
+                if (this.rangeStartIndex === -1) {
+                    this.rangeStartIndex = this.activeIndex;
                 }
-                return true;
-            };
-            /**
+                this.options.forEach((o, i) => {
+                    o.checked = inRange(i, this.rangeStartIndex, this.options.length);
+                });
+            }
+            else {
+                this.uncheckAllOptions();
+            }
+            this.activeIndex = this.options.length - 1;
+            this.checkActiveIndex();
+        }
+        /**
+         * @override
+         * @internal
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener("focusout", this.focusoutHandler);
+        }
+        /**
+         * @override
+         * @internal
+         */
+        disconnectedCallback() {
+            this.removeEventListener("focusout", this.focusoutHandler);
+            super.disconnectedCallback();
+        }
+        /**
+         * Increments the active index and marks the matching option as checked.
+         *
+         * @remarks
+         * Multiple-selection mode only.
+         *
+         * @param preserveChecked - mark all options unchecked before changing the active index
+         *
+         * @internal
+         */
+        checkNextOption(preserveChecked = false) {
+            if (preserveChecked) {
+                if (this.rangeStartIndex === -1) {
+                    this.rangeStartIndex = this.activeIndex;
+                }
+                this.options.forEach((o, i) => {
+                    o.checked = inRange(i, this.rangeStartIndex, this.activeIndex + 1);
+                });
+            }
+            else {
+                this.uncheckAllOptions();
+            }
+            this.activeIndex += this.activeIndex < this.options.length - 1 ? 1 : 0;
+            this.checkActiveIndex();
+        }
+        /**
+         * Decrements the active index and marks the matching option as checked.
+         *
+         * @remarks
+         * Multiple-selection mode only.
+         *
+         * @param preserveChecked - mark all options unchecked before changing the active index
+         *
+         * @internal
+         */
+        checkPreviousOption(preserveChecked = false) {
+            if (preserveChecked) {
+                if (this.rangeStartIndex === -1) {
+                    this.rangeStartIndex = this.activeIndex;
+                }
+                if (this.checkedOptions.length === 1) {
+                    this.rangeStartIndex += 1;
+                }
+                this.options.forEach((o, i) => {
+                    o.checked = inRange(i, this.activeIndex, this.rangeStartIndex);
+                });
+            }
+            else {
+                this.uncheckAllOptions();
+            }
+            this.activeIndex -= this.activeIndex > 0 ? 1 : 0;
+            this.checkActiveIndex();
+        }
+        /**
+         * Handles click events for listbox options.
+         *
+         * @param e - the event object
+         *
+         * @override
+         * @internal
+         */
+        clickHandler(e) {
+            var _a;
+            if (!this.multiple) {
+                return super.clickHandler(e);
+            }
+            const captured = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(`[role=option]`);
+            if (!captured || captured.disabled) {
+                return;
+            }
+            this.uncheckAllOptions();
+            this.activeIndex = this.options.indexOf(captured);
+            this.checkActiveIndex();
+            this.toggleSelectedForAllCheckedOptions();
+            return true;
+        }
+        /**
+         * @override
+         * @internal
+         */
+        focusAndScrollOptionIntoView() {
+            super.focusAndScrollOptionIntoView(this.activeOption);
+        }
+        /**
+         * In multiple-selection mode:
+         * If any options are selected, the first selected option is checked when
+         * the listbox receives focus. If no options are selected, the first
+         * selectable option is checked.
+         *
+         * @override
+         * @internal
+         */
+        focusinHandler(e) {
+            if (!this.multiple) {
+                return super.focusinHandler(e);
+            }
+            if (!this.shouldSkipFocus && e.target === e.currentTarget) {
+                this.uncheckAllOptions();
+                if (this.activeIndex === -1) {
+                    this.activeIndex =
+                        this.firstSelectedOptionIndex !== -1
+                            ? this.firstSelectedOptionIndex
+                            : 0;
+                }
+                this.checkActiveIndex();
+                this.setSelectedOptions();
+                this.focusAndScrollOptionIntoView();
+            }
+            this.shouldSkipFocus = false;
+        }
+        /**
+         * Unchecks all options when the listbox loses focus.
+         *
+         * @internal
+         */
+        focusoutHandler(e) {
+            if (this.multiple) {
+                this.uncheckAllOptions();
+            }
+        }
+        /**
+         * Handles keydown actions for listbox navigation and typeahead
+         *
+         * @override
+         * @internal
+         */
+        keydownHandler(e) {
+            if (!this.multiple) {
+                return super.keydownHandler(e);
+            }
+            if (this.disabled) {
+                return true;
+            }
+            const { key, shiftKey } = e;
+            this.shouldSkipFocus = false;
+            switch (key) {
+                // Select the first available option
+                case keyHome: {
+                    this.checkFirstOption(shiftKey);
+                    return;
+                }
+                // Select the next selectable option
+                case keyArrowDown: {
+                    this.checkNextOption(shiftKey);
+                    return;
+                }
+                // Select the previous selectable option
+                case keyArrowUp: {
+                    this.checkPreviousOption(shiftKey);
+                    return;
+                }
+                // Select the last available option
+                case keyEnd: {
+                    this.checkLastOption(shiftKey);
+                    return;
+                }
+                case keyTab: {
+                    this.focusAndScrollOptionIntoView();
+                    return true;
+                }
+                case keyEscape: {
+                    this.uncheckAllOptions();
+                    this.checkActiveIndex();
+                    return true;
+                }
+                case keySpace: {
+                    e.preventDefault();
+                    if (this.typeAheadExpired) {
+                        this.toggleSelectedForAllCheckedOptions();
+                        return;
+                    }
+                }
+                // Send key to Typeahead handler
+                default: {
+                    if (key.length === 1) {
+                        this.handleTypeAhead(`${key}`);
+                    }
+                    return true;
+                }
+            }
+        }
+        /**
+         * Prevents `focusin` events from firing before `click` events when the
+         * element is unfocused.
+         *
+         * @override
+         * @internal
+         */
+        mousedownHandler(e) {
+            if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) {
+                return super.mousedownHandler(e);
+            }
+        }
+        /**
+         * Switches between single-selection and multi-selection mode.
+         *
+         * @internal
+         */
+        multipleChanged(prev, next) {
+            var _a;
+            this.ariaMultiSelectable = next ? "true" : null;
+            (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
+                o.checked = next ? false : undefined;
+            });
+            this.setSelectedOptions();
+        }
+        /**
+         * Sets an option as selected and gives it focus.
+         *
+         * @override
+         * @public
+         */
+        setSelectedOptions() {
+            if (!this.multiple) {
+                super.setSelectedOptions();
+                return;
+            }
+            if (this.$fastController.isConnected && this.options) {
+                this.selectedOptions = this.options.filter(o => o.selected);
+                this.focusAndScrollOptionIntoView();
+            }
+        }
+        /**
+         * Ensures the size is a positive integer when the property is updated.
+         *
+         * @param prev - the previous size value
+         * @param next - the current size value
+         *
+         * @internal
+         */
+        sizeChanged(prev, next) {
+            var _a;
+            const size = Math.max(0, parseInt((_a = next === null || next === void 0 ? void 0 : next.toFixed()) !== null && _a !== void 0 ? _a : "", 10));
+            if (size !== next) {
+                DOM.queueUpdate(() => {
+                    this.size = size;
+                });
+            }
+        }
+        /**
+         * Toggles the selected state of the provided options. If any provided items
+         * are in an unselected state, all items are set to selected. If every
+         * provided item is selected, they are all unselected.
+         *
+         * @internal
+         */
+        toggleSelectedForAllCheckedOptions() {
+            const enabledCheckedOptions = this.checkedOptions.filter(o => !o.disabled);
+            const force = !enabledCheckedOptions.every(o => o.selected);
+            enabledCheckedOptions.forEach(o => (o.selected = force));
+            this.selectedIndex = this.options.indexOf(enabledCheckedOptions[enabledCheckedOptions.length - 1]);
+            this.setSelectedOptions();
+        }
+        /**
+         * @override
+         * @internal
+         */
+        typeaheadBufferChanged(prev, next) {
+            if (!this.multiple) {
+                super.typeaheadBufferChanged(prev, next);
+                return;
+            }
+            if (this.$fastController.isConnected) {
+                const typeaheadMatches = this.getTypeaheadMatches();
+                const activeIndex = this.options.indexOf(typeaheadMatches[0]);
+                if (activeIndex > -1) {
+                    this.activeIndex = activeIndex;
+                    this.uncheckAllOptions();
+                    this.checkActiveIndex();
+                }
+                this.typeAheadExpired = false;
+            }
+        }
+        /**
+         * Unchecks all options.
+         *
+         * @remarks
+         * Multiple-selection mode only.
+         *
+         * @param preserveChecked - reset the rangeStartIndex
+         *
+         * @internal
+         */
+        uncheckAllOptions(preserveChecked = false) {
+            this.options.forEach(o => (o.checked = this.multiple ? false : undefined));
+            if (!preserveChecked) {
+                this.rangeStartIndex = -1;
+            }
+        }
+    }
+    __decorate$1([
+        observable
+    ], ListboxElement.prototype, "activeIndex", void 0);
+    __decorate$1([
+        attr({ mode: "boolean" })
+    ], ListboxElement.prototype, "multiple", void 0);
+    __decorate$1([
+        attr({ converter: nullableNumberConverter })
+    ], ListboxElement.prototype, "size", void 0);
+
+    /**
+     * Menu items roles.
+     * @public
+     */
+    const MenuItemRole = {
+        /**
+         * The menu item has a "menuitem" role
+         */
+        menuitem: "menuitem",
+        /**
+         * The menu item has a "menuitemcheckbox" role
+         */
+        menuitemcheckbox: "menuitemcheckbox",
+        /**
+         * The menu item has a "menuitemradio" role
+         */
+        menuitemradio: "menuitemradio",
+    };
+    /**
+     * @internal
+     */
+    const roleForMenuItem = {
+        [MenuItemRole.menuitem]: "menuitem",
+        [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
+        [MenuItemRole.menuitemradio]: "menuitemradio",
+    };
+
+    /**
+     * 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
+     */
+    class MenuItem$1 extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * The role of the element.
+             *
+             * @public
+             * @remarks
+             * HTML Attribute: role
+             */
+            this.role = MenuItemRole.menuitem;
+            /**
+             * @internal
+             */
+            this.hasSubmenu = false;
+            /**
+             * Track current direction to pass to the anchored region
+             *
+             * @internal
+             */
+            this.currentDirection = Direction.ltr;
+            this.focusSubmenuOnLoad = false;
+            /**
+             * @internal
+             */
+            this.handleMenuItemKeyDown = (e) => {
+                if (e.defaultPrevented) {
+                    return false;
+                }
+                switch (e.key) {
+                    case keyEnter:
+                    case keySpace:
+                        this.invoke();
+                        return false;
+                    case keyArrowRight:
+                        //open/focus on submenu
+                        this.expandAndFocus();
+                        return false;
+                    case keyArrowLeft:
+                        //close submenu
+                        if (this.expanded) {
+                            this.expanded = false;
+                            this.focus();
+                            return false;
+                        }
+                }
+                return true;
+            };
+            /**
              * @internal
              */
             this.handleMenuItemClick = (e) => {
@@ -9353,7 +9819,7 @@
          * get an array of valid DOM children
          */
         domChildren() {
-            return Array.from(this.children);
+            return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
         }
     }
     __decorate$1([
@@ -9479,6 +9945,8 @@
      * 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
      */
     class Menu$1 extends FoundationElement {
@@ -9728,7 +10196,7 @@
          * get an array of valid DOM children
          */
         domChildren() {
-            return Array.from(this.children);
+            return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
         }
         setFocus(focusIndex, adjustment) {
             if (this.menuItems === undefined) {
@@ -9842,74 +10310,6 @@
     </template>
 `;
 
-    /**
-     * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
-     * @public
-     */
-    const textFieldTemplate = (context, definition) => html `
-    <template
-        class="
-            ${x => (x.readOnly ? "readonly" : "")}
-        "
-    >
-        <label
-            part="label"
-            for="control"
-            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
-    ? "label"
-    : "label label__hidden"}"
-        >
-            <slot
-                ${slotted({ property: "defaultSlottedNodes", filter: whitespaceFilter })}
-            ></slot>
-        </label>
-        <div class="root" part="root">
-            ${startSlotTemplate(context, definition)}
-            <input
-                class="control"
-                part="control"
-                id="control"
-                @input="${x => x.handleTextInput()}"
-                @change="${x => x.handleChange()}"
-                ?autofocus="${x => x.autofocus}"
-                ?disabled="${x => x.disabled}"
-                list="${x => x.list}"
-                maxlength="${x => x.maxlength}"
-                minlength="${x => x.minlength}"
-                pattern="${x => x.pattern}"
-                placeholder="${x => x.placeholder}"
-                ?readonly="${x => x.readOnly}"
-                ?required="${x => x.required}"
-                size="${x => x.size}"
-                ?spellcheck="${x => x.spellcheck}"
-                :value="${x => x.value}"
-                type="${x => x.type}"
-                aria-atomic="${x => x.ariaAtomic}"
-                aria-busy="${x => x.ariaBusy}"
-                aria-controls="${x => x.ariaControls}"
-                aria-current="${x => x.ariaCurrent}"
-                aria-describedby="${x => x.ariaDescribedby}"
-                aria-details="${x => x.ariaDetails}"
-                aria-disabled="${x => x.ariaDisabled}"
-                aria-errormessage="${x => x.ariaErrormessage}"
-                aria-flowto="${x => x.ariaFlowto}"
-                aria-haspopup="${x => x.ariaHaspopup}"
-                aria-hidden="${x => x.ariaHidden}"
-                aria-invalid="${x => x.ariaInvalid}"
-                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-                aria-label="${x => x.ariaLabel}"
-                aria-labelledby="${x => x.ariaLabelledby}"
-                aria-live="${x => x.ariaLive}"
-                aria-owns="${x => x.ariaOwns}"
-                aria-relevant="${x => x.ariaRelevant}"
-                aria-roledescription="${x => x.ariaRoledescription}"
-                ${ref("control")}
-            />
-            ${endSlotTemplate(context, definition)}
-        </div>
-    </template>
-`;
-
     class _TextField extends FoundationElement {
     }
     /**
@@ -9928,34 +10328,41 @@
      * Text field sub-types
      * @public
      */
-    var TextFieldType;
-    (function (TextFieldType) {
+    const TextFieldType = {
         /**
          * An email TextField
          */
-        TextFieldType["email"] = "email";
+        email: "email",
         /**
          * A password TextField
          */
-        TextFieldType["password"] = "password";
+        password: "password",
         /**
          * A telephone TextField
          */
-        TextFieldType["tel"] = "tel";
+        tel: "tel",
         /**
          * A text TextField
          */
-        TextFieldType["text"] = "text";
+        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
      */
     class TextField$1 extends FormAssociatedTextField {
@@ -10039,6 +10446,21 @@
                 });
             }
         }
+        /**
+         * 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
@@ -10120,6 +10542,20 @@
      * 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
      */
     class NumberField$1 extends FormAssociatedNumberField {
@@ -10281,6 +10717,21 @@
                 });
             }
         }
+        /**
+         * 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
@@ -10365,7 +10816,21 @@
     ], NumberField$1.prototype, "defaultSlottedNodes", void 0);
     applyMixins(NumberField$1, StartEnd, DelegatesARIATextbox);
 
-    class _Select extends Listbox {
+    /**
+     * a method to filter out any whitespace _only_ nodes, to be used inside a template
+     * @param value - The Node that is being inspected
+     * @param index - The index of the node within the array
+     * @param array - The Node array that is being filtered
+     *
+     * @public
+     */
+    function whitespaceFilter(value, index, array) {
+        return value.nodeType !== Node.TEXT_NODE
+            ? true
+            : typeof value.nodeValue === "string" && !!value.nodeValue.trim().length;
+    }
+
+    class _Select extends ListboxElement {
     }
     /**
      * A form-associated base class for the {@link @microsoft/fast-foundation#(Select:class)} component.
@@ -10383,6 +10848,19 @@
      * 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
      */
     class Select$1 extends FormAssociatedSelect {
@@ -10391,7 +10869,9 @@
             /**
              * The open attribute.
              *
-             * @internal
+             * @public
+             * @remarks
+             * HTML Attribute: open
              */
             this.open = false;
             /**
@@ -10400,12 +10880,6 @@
              * @internal
              */
             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.
              *
@@ -10418,14 +10892,19 @@
              * @internal
              */
             this.maxHeight = 0;
-            /**
-             * The value displayed on the button.
-             *
-             * @public
-             */
-            this.displayValue = "";
         }
-        openChanged() {
+        /**
+         * Sets focus and synchronizes ARIA attributes when the open property changes.
+         *
+         * @param prev - the previous open value
+         * @param next - the current open value
+         *
+         * @internal
+         */
+        openChanged(prev, next) {
+            if (!this.collapsible) {
+                return;
+            }
             if (this.open) {
                 this.ariaControls = this.listboxId;
                 this.ariaExpanded = "true";
@@ -10439,6 +10918,14 @@
             this.ariaControls = "";
             this.ariaExpanded = "false";
         }
+        /**
+         * The component is collapsible when in single-selection mode with no size attribute.
+         *
+         * @internal
+         */
+        get collapsible() {
+            return !(this.multiple || typeof this.size === "number");
+        }
         /**
          * The value property.
          *
@@ -10449,38 +10936,36 @@
             return this._value;
         }
         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();
             }
         }
+        /**
+         * Sets the value and display value to match the first selected option.
+         *
+         * @param shouldEmit - if true, the input and change events will be emitted
+         *
+         * @internal
+         */
         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) {
                 this.$emit("input");
@@ -10502,14 +10987,13 @@
             super.selectedIndexChanged(prev, next);
             this.updateValue();
         }
-        positionChanged() {
-            this.positionAttribute = this.position;
+        positionChanged(prev, next) {
+            this.positionAttribute = next;
             this.setPositioning();
         }
         /**
          * Calculate and apply listbox positioning based on available viewport space.
          *
-         * @param force - direction to force the listbox to display
          * @public
          */
         setPositioning() {
@@ -10527,10 +11011,15 @@
             this.maxHeight =
                 this.position === SelectPosition.above ? ~~currentBox.top : ~~availableBottom;
         }
-        maxHeightChanged() {
-            if (this.listbox) {
-                this.listbox.style.setProperty("--max-height", `${this.maxHeight}px`);
-            }
+        /**
+         * 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.
@@ -10578,20 +11067,21 @@
                 }
             }
             super.clickHandler(e);
-            this.open = !this.open;
+            this.open = this.collapsible && !this.open;
             if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
                 this.updateValue(true);
             }
             return true;
         }
         /**
-         * Handle focus state when the element or its children lose focus.
+         * Handles focus state when the element or its children lose focus.
          *
          * @param e - The focus event
          * @internal
          */
         focusoutHandler(e) {
             var _a;
+            super.focusoutHandler(e);
             if (!this.open) {
                 return true;
             }
@@ -10608,7 +11098,22 @@
             }
         }
         /**
-         * Synchronize the form-associated proxy and update the value property of the element.
+         * 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.
          *
          * @param prev - the previous collection of slotted option elements
          * @param next - the next collection of slotted option elements
@@ -10616,10 +11121,72 @@
          * @internal
          */
         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();
         }
+        /**
+         * Prevents focus when size is set and a scrollbar is clicked.
+         *
+         * @param e - the mouse event object
+         *
+         * @override
+         * @internal
+         */
+        mousedownHandler(e) {
+            var _a;
+            if (e.offsetX >= 0 && e.offsetX <= ((_a = this.listbox) === null || _a === void 0 ? void 0 : _a.scrollWidth)) {
+                return super.mousedownHandler(e);
+            }
+            return this.collapsible;
+        }
+        /**
+         * Sets the multiple property on the proxy element.
+         *
+         * @param prev - the previous multiple value
+         * @param next - the current multiple value
+         */
+        multipleChanged(prev, next) {
+            super.multipleChanged(prev, next);
+            if (this.proxy) {
+                this.proxy.multiple = next;
+            }
+        }
+        /**
+         * Updates the selectedness of each option when the list of selected options changes.
+         *
+         * @param prev - the previous list of selected options
+         * @param next - the current list of selected options
+         *
+         * @override
+         * @internal
+         */
+        selectedOptionsChanged(prev, next) {
+            var _a;
+            super.selectedOptionsChanged(prev, next);
+            (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach((o, i) => {
+                var _a;
+                const proxyOption = (_a = this.proxy) === null || _a === void 0 ? void 0 : _a.options.item(i);
+                if (proxyOption) {
+                    proxyOption.selected = o.selected;
+                }
+            });
+        }
+        /**
+         * Sets the selected index to match the first option with the selected attribute, or
+         * the first selectable option.
+         *
+         * @override
+         * @internal
+         */
         setDefaultSelectedOption() {
             var _a;
             const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox.slottedOptionFilter);
@@ -10631,7 +11198,7 @@
             this.selectedIndex = 0;
         }
         /**
-         * Reset and fill the proxy to match the component's options.
+         * Resets and fills the proxy to match the component's options.
          *
          * @internal
          */
@@ -10642,7 +11209,7 @@
                     const proxyOption = option.proxy ||
                         (option instanceof HTMLOptionElement ? option.cloneNode() : null);
                     if (proxyOption) {
-                        this.proxy.appendChild(proxyOption);
+                        this.proxy.options.add(proxyOption);
                     }
                 });
             }
@@ -10657,47 +11224,87 @@
             super.keydownHandler(e);
             const key = e.key || e.key.charCodeAt(0);
             switch (key) {
-                case " ": {
-                    if (this.typeaheadExpired) {
-                        e.preventDefault();
+                case keySpace: {
+                    e.preventDefault();
+                    if (this.collapsible && this.typeAheadExpired) {
                         this.open = !this.open;
                     }
                     break;
                 }
-                case "Enter": {
+                case keyHome:
+                case keyEnd: {
+                    e.preventDefault();
+                    break;
+                }
+                case keyEnter: {
                     e.preventDefault();
                     this.open = !this.open;
                     break;
                 }
-                case "Escape": {
-                    if (this.open) {
+                case keyEscape: {
+                    if (this.collapsible && this.open) {
                         e.preventDefault();
                         this.open = false;
                     }
                     break;
                 }
-                case "Tab": {
-                    if (!this.open) {
-                        return true;
+                case keyTab: {
+                    if (this.collapsible && this.open) {
+                        e.preventDefault();
+                        this.open = false;
                     }
-                    e.preventDefault();
-                    this.open = false;
+                    return true;
                 }
             }
             if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
                 this.updateValue(true);
                 this.indexWhenOpened = this.selectedIndex;
             }
-            return true;
+            return !(key in ArrowKeys);
         }
         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.
+         *
+         * @param prev - the previous size
+         * @param next - the current size
+         *
+         * @override
+         * @internal
+         */
+        sizeChanged(prev, next) {
+            super.sizeChanged(prev, next);
+            if (this.proxy) {
+                this.proxy.size = next;
+            }
+        }
+        /**
+         *
+         * @internal
+         */
+        updateDisplayValue() {
+            if (this.collapsible) {
+                Observable.notify(this, "displayValue");
+            }
         }
     }
     __decorate$1([
         attr({ attribute: "open", mode: "boolean" })
     ], Select$1.prototype, "open", void 0);
+    __decorate$1([
+        volatile
+    ], Select$1.prototype, "collapsible", null);
+    __decorate$1([
+        observable
+    ], Select$1.prototype, "control", void 0);
     __decorate$1([
         attr({ attribute: "position" })
     ], Select$1.prototype, "positionAttribute", void 0);
@@ -10706,10 +11313,7 @@
     ], Select$1.prototype, "position", void 0);
     __decorate$1([
         observable
-    ], Select$1.prototype, "maxHeight", void 0);
-    __decorate$1([
-        observable
-    ], Select$1.prototype, "displayValue", void 0);
+    ], Select$1.prototype, "maxHeight", void 0);
     /**
      * Includes ARIA states and properties relating to the ARIA select role.
      *
@@ -10729,40 +11333,57 @@
      */
     const selectTemplate = (context, definition) => html `
     <template
-        class="${x => (x.open ? "open" : "")} ${x => x.disabled ? "disabled" : ""} ${x => x.position}"
+        class="${x => [
+    x.collapsible && "collapsible",
+    x.collapsible && x.open && "open",
+    x.disabled && "disabled",
+    x.collapsible && x.position,
+]
+    .filter(Boolean)
+    .join(" ")}"
         aria-activedescendant="${x => x.ariaActiveDescendant}"
         aria-controls="${x => x.ariaControls}"
         aria-disabled="${x => x.ariaDisabled}"
         aria-expanded="${x => x.ariaExpanded}"
-        aria-haspopup="listbox"
+        aria-haspopup="${x => (x.collapsible ? "listbox" : null)}"
+        aria-multiselectable="${x => x.ariaMultiSelectable}"
         ?open="${x => x.open}"
         role="combobox"
         tabindex="${x => (!x.disabled ? "0" : null)}"
         @click="${(x, c) => x.clickHandler(c.event)}"
+        @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
     >
-        <div class="control" part="control" ?disabled="${x => x.disabled}">
-            ${startSlotTemplate(context, definition)}
-            <slot name="button-container">
-                <div class="selected-value" part="selected-value">
-                    <slot name="selected-value">${x => x.displayValue}</slot>
-                </div>
-                <div aria-hidden="true" class="indicator" part="indicator">
-                    <slot name="indicator">
-                        ${definition.indicator || ""}
+        ${when(x => x.collapsible, html `
+                <div
+                    class="control"
+                    part="control"
+                    ?disabled="${x => x.disabled}"
+                    ${ref("control")}
+                >
+                    ${startSlotTemplate(context, definition)}
+                    <slot name="button-container">
+                        <div class="selected-value" part="selected-value">
+                            <slot name="selected-value">${x => x.displayValue}</slot>
+                        </div>
+                        <div aria-hidden="true" class="indicator" part="indicator">
+                            <slot name="indicator">
+                                ${definition.indicator || ""}
+                            </slot>
+                        </div>
                     </slot>
+                    ${endSlotTemplate(context, definition)}
                 </div>
-            </slot>
-            ${endSlotTemplate(context, definition)}
-        </div>
+            `)}
         <div
             class="listbox"
             id="${x => x.listboxId}"
             part="listbox"
             role="listbox"
             ?disabled="${x => x.disabled}"
-            ?hidden="${x => !x.open}"
+            ?hidden="${x => (x.collapsible ? !x.open : false)}"
             ${ref("listbox")}
         >
             <slot
@@ -10794,6 +11415,16 @@
      * 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
      */
     class Switch$1 extends FormAssociatedSwitch {
@@ -10865,6 +11496,9 @@
 
     /**
      * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+     *
+     * @slot - The default slot for the tabpanel content
+     *
      * @public
      */
     class TabPanel$1 extends FoundationElement {
@@ -10882,6 +11516,9 @@
 
     /**
      * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+     *
+     * @slot - The default slot for the tab content
+     *
      * @public
      */
     class Tab$1 extends FoundationElement {
@@ -10919,15 +11556,24 @@
      * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
      * @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$1 extends FoundationElement {
@@ -10969,8 +11615,6 @@
                 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) => {
@@ -10981,9 +11625,9 @@
                         }
                         const tabId = this.tabIds[index];
                         const tabpanelId = this.tabpanelIds[index];
-                        tab.setAttribute("id", typeof tabId !== "string" ? `tab-${index + 1}` : tabId);
+                        tab.setAttribute("id", tabId);
                         tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
-                        tab.setAttribute("aria-controls", typeof tabpanelId !== "string" ? `panel-${index + 1}` : tabpanelId);
+                        tab.setAttribute("aria-controls", tabpanelId);
                         tab.addEventListener("click", this.handleTabClick);
                         tab.addEventListener("keydown", this.handleTabKeyDown);
                         tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
@@ -11002,13 +11646,11 @@
                 });
             };
             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];
-                    tabpanel.setAttribute("id", typeof tabpanelId !== "string" ? `panel-${index + 1}` : tabpanelId);
-                    tabpanel.setAttribute("aria-labelledby", typeof tabId !== "string" ? `tab-${index + 1}` : tabId);
+                    tabpanel.setAttribute("id", tabpanelId);
+                    tabpanel.setAttribute("aria-labelledby", tabId);
                     this.activeTabIndex !== index
                         ? tabpanel.setAttribute("hidden", "")
                         : tabpanel.removeAttribute("hidden");
@@ -11136,6 +11778,8 @@
         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();
@@ -11147,6 +11791,8 @@
         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();
@@ -11165,12 +11811,14 @@
         }
         getTabIds() {
             return this.tabs.map((tab) => {
-                return tab.getAttribute("id");
+                var _a;
+                return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${uniqueId()}`;
             });
         }
         getTabPanelIds() {
             return this.tabpanels.map((tabPanel) => {
-                return tabPanel.getAttribute("id");
+                var _a;
+                return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId()}`;
             });
         }
         setComponent() {
@@ -11283,30 +11931,35 @@
      * Resize mode for a TextArea
      * @public
      */
-    var TextAreaResize;
-    (function (TextAreaResize) {
+    const TextAreaResize = {
         /**
          * No resize.
          */
-        TextAreaResize["none"] = "none";
+        none: "none",
         /**
          * Resize vertically and horizontally.
          */
-        TextAreaResize["both"] = "both";
+        both: "both",
         /**
          * Resize horizontally.
          */
-        TextAreaResize["horizontal"] = "horizontal";
+        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
      */
     class TextArea$1 extends FormAssociatedTextArea {
@@ -11364,6 +12017,21 @@
                 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
@@ -11481,6 +12149,74 @@
     </template>
 `;
 
+    /**
+     * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
+     * @public
+     */
+    const textFieldTemplate = (context, definition) => html `
+    <template
+        class="
+            ${x => (x.readOnly ? "readonly" : "")}
+        "
+    >
+        <label
+            part="label"
+            for="control"
+            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
+    ? "label"
+    : "label label__hidden"}"
+        >
+            <slot
+                ${slotted({ property: "defaultSlottedNodes", filter: whitespaceFilter })}
+            ></slot>
+        </label>
+        <div class="root" part="root">
+            ${startSlotTemplate(context, definition)}
+            <input
+                class="control"
+                part="control"
+                id="control"
+                @input="${x => x.handleTextInput()}"
+                @change="${x => x.handleChange()}"
+                ?autofocus="${x => x.autofocus}"
+                ?disabled="${x => x.disabled}"
+                list="${x => x.list}"
+                maxlength="${x => x.maxlength}"
+                minlength="${x => x.minlength}"
+                pattern="${x => x.pattern}"
+                placeholder="${x => x.placeholder}"
+                ?readonly="${x => x.readOnly}"
+                ?required="${x => x.required}"
+                size="${x => x.size}"
+                ?spellcheck="${x => x.spellcheck}"
+                :value="${x => x.value}"
+                type="${x => x.type}"
+                aria-atomic="${x => x.ariaAtomic}"
+                aria-busy="${x => x.ariaBusy}"
+                aria-controls="${x => x.ariaControls}"
+                aria-current="${x => x.ariaCurrent}"
+                aria-describedby="${x => x.ariaDescribedby}"
+                aria-details="${x => x.ariaDetails}"
+                aria-disabled="${x => x.ariaDisabled}"
+                aria-errormessage="${x => x.ariaErrormessage}"
+                aria-flowto="${x => x.ariaFlowto}"
+                aria-haspopup="${x => x.ariaHaspopup}"
+                aria-hidden="${x => x.ariaHidden}"
+                aria-invalid="${x => x.ariaInvalid}"
+                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+                aria-label="${x => x.ariaLabel}"
+                aria-labelledby="${x => x.ariaLabelledby}"
+                aria-live="${x => x.ariaLive}"
+                aria-owns="${x => x.ariaOwns}"
+                aria-relevant="${x => x.ariaRelevant}"
+                aria-roledescription="${x => x.ariaRoledescription}"
+                ${ref("control")}
+            />
+            ${endSlotTemplate(context, definition)}
+        </div>
+    </template>
+`;
+
     /**
      * The template for the {@link @microsoft/fast-foundation#(Toolbar:class)} component.
      *
@@ -11541,6 +12277,12 @@
      * 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
      */
     class Toolbar$1 extends FoundationElement {
@@ -11566,6 +12308,11 @@
              * HTML Attribute: `orientation`
              */
             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.
@@ -11606,6 +12353,16 @@
         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.
@@ -11810,6 +12567,18 @@
     /**
      * 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
      */
     class TreeItem$1 extends FoundationElement {
@@ -11953,6 +12722,8 @@
      * 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
      */
     class TreeView$1 extends FoundationElement {
@@ -12026,17 +12797,28 @@
                     case keyArrowLeft:
                         if (e.target && this.isFocusableElement(e.target)) {
                             const item = e.target;
-                            if (item instanceof TreeItem$1 && item.childItemLength() > 0) {
+                            if (item instanceof TreeItem$1 &&
+                                item.childItemLength() > 0 &&
+                                item.expanded) {
                                 item.expanded = false;
                             }
+                            else if (item instanceof TreeItem$1 &&
+                                item.parentElement instanceof TreeItem$1) {
+                                TreeItem$1.focusItem(item.parentElement);
+                            }
                         }
                         return false;
                     case keyArrowRight:
                         if (e.target && this.isFocusableElement(e.target)) {
                             const item = e.target;
-                            if (item instanceof TreeItem$1 && item.childItemLength() > 0) {
+                            if (item instanceof TreeItem$1 &&
+                                item.childItemLength() > 0 &&
+                                !item.expanded) {
                                 item.expanded = true;
                             }
+                            else if (item instanceof TreeItem$1 && item.childItemLength() > 0) {
+                                this.focusNextNode(1, e.target);
+                            }
                         }
                         return;
                     case keyArrowDown:
@@ -12200,6 +12982,82 @@
         observable
     ], TreeView$1.prototype, "slottedTreeItems", void 0);
 
+    /**
+     * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
+     * styles are applied while the property matches and that styles are not applied if the property does
+     * not match.
+     *
+     * @public
+     */
+    class PropertyStyleSheetBehavior {
+        /**
+         * Constructs a {@link PropertyStyleSheetBehavior} instance.
+         * @param propertyName - The property name to operate from.
+         * @param value - The property value to operate from.
+         * @param styles - The styles to coordinate with the property.
+         */
+        constructor(propertyName, value, styles) {
+            this.propertyName = propertyName;
+            this.value = value;
+            this.styles = styles;
+        }
+        /**
+         * Binds the behavior to the element.
+         * @param elementInstance - The element for which the property is applied.
+         */
+        bind(elementInstance) {
+            Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
+            this.handleChange(elementInstance, this.propertyName);
+        }
+        /**
+         * Unbinds the behavior from the element.
+         * @param source - The element for which the behavior is unbinding.
+         * @internal
+         */
+        unbind(source) {
+            Observable.getNotifier(source).unsubscribe(this, this.propertyName);
+            source.$fastController.removeStyles(this.styles);
+        }
+        /**
+         * Change event for the provided element.
+         * @param source - the element for which to attach or detach styles.
+         * @param key - the key to lookup to know if the element already has the styles
+         * @internal
+         */
+        handleChange(source, key) {
+            if (source[key] === this.value) {
+                source.$fastController.addStyles(this.styles);
+            }
+            else {
+                source.$fastController.removeStyles(this.styles);
+            }
+        }
+    }
+
+    /**
+     * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
+     * @public
+     */
+    const hidden = `:host([hidden]){display:none}`;
+    /**
+     * Applies a CSS display property.
+     * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
+     * @param display - The CSS display property value
+     * @public
+     */
+    function display(displayValue) {
+        return `${hidden}:host{display:${displayValue}}`;
+    }
+
+    /**
+     * The string representing the focus selector to be used. Value
+     * will be "focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+     * is supported and "focus" when it is not.
+     *
+     * @public
+     */
+    const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
+
     const styles$o = css `
     :host {
         contain: layout;
@@ -12232,7 +13090,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Tue, 01 Mar 2022 15:26:47 GMT
+     * Generated on Tue, 10 May 2022 14:21:51 GMT
      */
     const Warning100DarkUi = "#ff8126";
     const Pass100LightUi = "#009921";
@@ -12315,8 +13173,9 @@
     const BodyEmphasizedLineHeight = "18px";
     const ButtonLabel1LineHeight = "16px";
     const TooltipCaptionLineHeight = "14px";
-    const SmallDelay = "0.1s"; // Short animation delay used for control state change animation
+    const SmallDelay = "0.075s"; // Short animation delay used for control state change animation
     const MediumDelay = "0.15s"; // Medium animation delay for control state change animation
+    const LargeDelay = "0.25s"; // Long animation delay used for control state change animation
 
     const hexCharacters = 'a-f\\d';
     const match3or4Hex = `#?[${hexCharacters}]{3}[${hexCharacters}]?`;
@@ -12685,8 +13544,8 @@
     const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
     // Animation Tokens
     const smallDelay = DesignToken.create(styleNameFromTokenName(tokenNames.smallDelay)).withDefault(SmallDelay);
-    const mediumDelay = DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
-    const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(250);
+    DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
+    const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(LargeDelay);
     // Private helpers functions
     function hexToRgbPartial(hexValue) {
         const { red, green, blue } = hexRgb(hexValue);
@@ -14244,7 +15103,7 @@
                                 ? coercedReturn
                                 : matchedValue;
                         });
-                        return "matrix(" + normalizedValues.join(",") + ")";
+                        return "matrix(".concat(normalizedValues.join(","), ")");
                     }
                     break;
                 case "opacity":
@@ -14280,12 +15139,12 @@
             switch (functionType) {
                 case "x":
                 case "y":
-                    functionType = "translate" + functionType.toUpperCase();
+                    functionType = "translate".concat(functionType.toUpperCase());
                     value =
                         typeof value === "number" ? (value = this.pixelify(value)) : value;
                     break;
                 case "rotate":
-                    value = value.toString() + "deg";
+                    value = "".concat(value.toString(), "deg");
                     break;
                 case "scale":
                     if (value === 0) {
@@ -14296,13 +15155,13 @@
             if (typeof value !== "string") {
                 value = value.toString();
             }
-            return functionType + "(" + value + ")";
+            return "".concat(functionType, "(").concat(value, ")");
         };
         /**
          * Converts a number to a pixel string
          */
         Animate.prototype.pixelify = function (num) {
-            return num + "px";
+            return "".concat(num, "px");
         };
         /**
          * Returns keyframe values based on option configuration
@@ -14429,10 +15288,12 @@
         var extendStatics = function (d, b) {
             extendStatics = Object.setPrototypeOf ||
                 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
             return extendStatics(d, b);
         };
         return function (d, b) {
+            if (typeof b !== "function" && b !== null)
+                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
             extendStatics(d, b);
             function __() { this.constructor = d; }
             d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -14462,10 +15323,12 @@
         var extendStatics = function (d, b) {
             extendStatics = Object.setPrototypeOf ||
                 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
             return extendStatics(d, b);
         };
         return function (d, b) {
+            if (typeof b !== "function" && b !== null)
+                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
             extendStatics(d, b);
             function __() { this.constructor = d; }
             d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -14517,19 +15380,19 @@
              * Pauses all animations in the group
              */
             this.pause = function () {
-                invokeFunctionForEach_1$1.invokeFunctionForEach(_this.animations, "pause");
+                (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(_this.animations, "pause");
             };
             /**
              * Finishes all animations in the group
              */
             this.finish = function () {
-                invokeFunctionForEach_1$1.invokeFunctionForEach(_this.animations, "finish");
+                (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(_this.animations, "finish");
             };
             /**
              * Cancels all animations in the group
              */
             this.cancel = function () {
-                invokeFunctionForEach_1$1.invokeFunctionForEach(_this.animations, "cancel");
+                (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(_this.animations, "cancel");
             };
             this.animations = animations;
         }
@@ -14562,13 +15425,13 @@
          * Play the group of animations
          */
         AnimateGroup.prototype.play = function () {
-            invokeFunctionForEach_1$1.invokeFunctionForEach(this.animations, "play");
+            (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(this.animations, "play");
         };
         /**
          * Reverses all animations in the group
          */
         AnimateGroup.prototype.reverse = function () {
-            invokeFunctionForEach_1$1.invokeFunctionForEach(this.animations, "reverse");
+            (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(this.animations, "reverse");
         };
         /**
          * Returns the longest running animation in the group
@@ -14623,19 +15486,19 @@
              * Pauses all animations in the sequence
              */
             this.pause = function () {
-                invokeFunctionForEach_1.invokeFunctionForEach(_this.animations, "pause");
+                (0, invokeFunctionForEach_1.invokeFunctionForEach)(_this.animations, "pause");
             };
             /**
              * Finishes all animations in the sequence
              */
             this.finish = function () {
-                invokeFunctionForEach_1.invokeFunctionForEach(_this.animations, "finish");
+                (0, invokeFunctionForEach_1.invokeFunctionForEach)(_this.animations, "finish");
             };
             /**
              * Cancels all animations in the sequence
              */
             this.cancel = function () {
-                invokeFunctionForEach_1.invokeFunctionForEach(_this.animations, "cancel");
+                (0, invokeFunctionForEach_1.invokeFunctionForEach)(_this.animations, "cancel");
             };
             this.animations = animations;
         }
@@ -14800,7 +15663,7 @@
         }
         var p0 = points[0];
         var p1 = points[1];
-        return "cubic-bezier(" + p0[0] + ", " + p0[1] + ", " + p1[0] + ", " + p1[1] + ")";
+        return "cubic-bezier(".concat(p0[0], ", ").concat(p0[1], ", ").concat(p1[0], ", ").concat(p1[1], ")");
     }
     curves.formatCubicBezier = formatCubicBezier;
     /**
@@ -14867,7 +15730,7 @@
                 }
                 _this.requestedFrame = requestAnimationFrame(_this.update);
             };
-            this.lastScrollY = scrollY_1.default();
+            this.lastScrollY = (0, scrollY_1.default)();
             // We need to use .bind instead of lambda (fat-arrow) syntax here because
             // protected methods declared as lambda functions cannot be invoked by
             // extending classes via the `super` object
@@ -14888,7 +15751,7 @@
             this.subscriptions.push({
                 element: element,
                 callback: callback,
-                inView: isElementInView_1$3.default(element),
+                inView: (0, isElementInView_1$3.default)(element),
             });
         };
         /**
@@ -14906,7 +15769,7 @@
          * Make any arbitrary updates to UI
          */
         ScrollTrigger.prototype.update = function () {
-            var yOffset = scrollY_1.default();
+            var yOffset = (0, scrollY_1.default)();
             this.scrollDistance = yOffset - this.lastScrollY;
             this.lastScrollY = yOffset;
         };
@@ -14926,10 +15789,12 @@
         var extendStatics = function (d, b) {
             extendStatics = Object.setPrototypeOf ||
                 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
             return extendStatics(d, b);
         };
         return function (d, b) {
+            if (typeof b !== "function" && b !== null)
+                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
             extendStatics(d, b);
             function __() { this.constructor = d; }
             d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -14955,7 +15820,7 @@
             var _this = this;
             _super.prototype.update.call(this);
             this.subscriptions.forEach(function (subscription) {
-                var inView = isElementInView_1$2.default(subscription.element);
+                var inView = (0, isElementInView_1$2.default)(subscription.element);
                 if (inView) {
                     subscription.callback(_this.scrollDistance);
                 }
@@ -14974,10 +15839,12 @@
         var extendStatics = function (d, b) {
             extendStatics = Object.setPrototypeOf ||
                 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
             return extendStatics(d, b);
         };
         return function (d, b) {
+            if (typeof b !== "function" && b !== null)
+                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
             extendStatics(d, b);
             function __() { this.constructor = d; }
             d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -15005,7 +15872,7 @@
             this.subscriptions.forEach(
             /* eslint-disable-next-line */
             function (subscription, index) {
-                var inView = isElementInView_1$1.default(subscription.element);
+                var inView = (0, isElementInView_1$1.default)(subscription.element);
                 // If the element is in view but previously wasn't
                 if (inView && !subscription.inView) {
                     subscription.callback(_this.scrollDistance);
@@ -15025,10 +15892,12 @@
         var extendStatics = function (d, b) {
             extendStatics = Object.setPrototypeOf ||
                 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
             return extendStatics(d, b);
         };
         return function (d, b) {
+            if (typeof b !== "function" && b !== null)
+                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
             extendStatics(d, b);
             function __() { this.constructor = d; }
             d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -15056,7 +15925,7 @@
             this.subscriptions.forEach(
             /* eslint-disable-next-line */
             function (subscription, index) {
-                var inView = isElementInView_1.default(subscription.element);
+                var inView = (0, isElementInView_1.default)(subscription.element);
                 // If the element is out of view but previously was in view
                 if (!inView && subscription.inView) {
                     subscription.callback(_this.scrollDistance);
@@ -15342,12 +16211,13 @@
          * @internal
          */
         dismiss() {
+            // Note: intentionally not calling super() in this function in order to implement custom preventDismiss behavior
             const shouldDismiss = this.$emit('cancel', {}, 
             // Aligned with the configuration of HTMLDialogElement cancel event:
             // https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event
             { bubbles: false, cancelable: true, composed: false });
             if (shouldDismiss && !this.preventDismiss) {
-                super.dismiss();
+                this.$emit('dismiss');
                 this.hide();
             }
         }
@@ -15401,9 +16271,15 @@
         }
         updateAnimationDuration() {
             const disableAnimations = prefersReducedMotionMediaQuery.matches;
-            this.animationDurationMilliseconds = disableAnimations
-                ? animationDurationWhenDisabledMilliseconds
-                : largeDelay.getValueFor(this);
+            if (disableAnimations) {
+                this.animationDurationMilliseconds = animationDurationWhenDisabledMilliseconds;
+            }
+            else {
+                // string ends in 's' unit specifier
+                const secondsString = largeDelay.getValueFor(this);
+                const secondsNumber = parseFloat(secondsString);
+                this.animationDurationMilliseconds = 1000 * secondsNumber;
+            }
         }
         animateOpening() {
             this.animateOpenClose(true);
@@ -17834,17 +18710,17 @@
     ${display('inline-flex')}
 
     :host {
+        position: relative;
         box-sizing: border-box;
         font: ${bodyFont};
         height: ${controlHeight};
-        padding: calc(${standardPadding} / 2) ${standardPadding}
-            calc(${standardPadding} / 2 - ${borderWidth});
         color: ${bodyFontColor};
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        ${ /* Separate focus indicator from active indicator */''}
-        border-bottom: transparent ${borderWidth} solid;
+        --ni-private-active-indicator-width: 2px;
+        --ni-private-focus-indicator-width: 1px;
+        --ni-private-indicator-lines-gap: 1px;
     }
 
     :host(:hover) {
@@ -17855,16 +18731,12 @@
         outline: none;
     }
 
-    :host(${focusVisible}) {
-        outline: none;
-        box-shadow: 0 calc(${borderWidth} * -1) ${borderHoverColor} inset;
-        transition: box-shadow ${mediumDelay} ease-in-out;
+    :host(:focus:hover) {
+        background-color: ${fillHoverSelectedColor};
     }
 
-    @media (prefers-reduced-motion) {
-        :host(${focusVisible}) {
-            transition-duration: 0.01s;
-        }
+    :host(${focusVisible}) {
+        outline: none;
     }
 
     :host(:active) {
@@ -17876,6 +18748,57 @@
         color: ${bodyDisabledFontColor};
         background: none;
     }
+
+    slot {
+        display: block;
+        padding: calc(${standardPadding} / 2) ${standardPadding}
+            calc(${standardPadding} / 2 - ${borderWidth});
+    }
+
+    :host::before {
+        content: '';
+        position: absolute;
+        bottom: calc(
+            var(--ni-private-active-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
+        );
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::before {
+            transition-duration: 0.01s;
+        }
+    }
+
+    :host(${focusVisible})::before {
+        width: 100%;
+    }
+
+    :host::after {
+        content: '';
+        position: absolute;
+        bottom: 0px;
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-active-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::after {
+            transition-duration: 0.01s;
+        }
+    }
+
+    :host([aria-selected='true'])::after {
+        width: 100%;
+    }
 `;
 
     /**
@@ -17932,22 +18855,6 @@
         align-self: end;
     }
 
-    .activeIndicator {
-        grid-row: 2;
-        height: calc(${borderWidth} * 2);
-        background-color: ${borderHoverColor};
-    }
-
-    .activeIndicatorTransition {
-        transition: transform ${smallDelay} ease-in-out;
-    }
-
-    @media (prefers-reduced-motion) {
-        .activeIndicatorTransition {
-            transition: transform 0.01s;
-        }
-    }
-
     .tabpanel {
         grid-row: 2;
         grid-column-start: 1;
@@ -17959,6 +18866,11 @@
      * A nimble-styled tabs control
      */
     class Tabs extends Tabs$1 {
+        constructor() {
+            super();
+            // We disable the built-in active indicator so that we can implement our own
+            this.activeindicator = false;
+        }
     }
     const nimbleTabs = Tabs.compose({
         baseName: 'tabs',