@ni/nimble-components 11.0.2 → 11.1.0

package/dist/all-components-bundle.js

@@ -7502,833 +7502,1466 @@
         below: "below",
     };
 
+    class _Combobox extends Listbox {
+    }
     /**
-     * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
-     * When the parent of a node is a shadow-root, it will return the host
-     * element of the shadow root. Otherwise it will return the parent node or null if
-     * no parent node exists.
-     * @param element - The element for which to retrieve the composed parent
+     * A form-associated base class for the {@link (Combobox:class)} component.
      *
-     * @public
+     * @internal
      */
-    function composedParent(element) {
-        const parentNode = element.parentElement;
-        if (parentNode) {
-            return parentNode;
-        }
-        else {
-            const rootNode = element.getRootNode();
-            if (rootNode.host instanceof HTMLElement) {
-                // this is shadow-root
-                return rootNode.host;
-            }
+    class FormAssociatedCombobox extends FormAssociated(_Combobox) {
+        constructor() {
+            super(...arguments);
+            this.proxy = document.createElement("input");
         }
-        return null;
     }
 
     /**
-     * Determines if the reference element contains the test element in a "composed" DOM tree that
-     * ignores shadow DOM boundaries.
+     * Autocomplete values for combobox.
+     * @public
+     */
+    const ComboboxAutocomplete = {
+        inline: "inline",
+        list: "list",
+        both: "both",
+        none: "none",
+    };
+
+    /**
+     * A Combobox Custom HTML Element.
+     * Implements the {@link https://w3c.github.io/aria-practices/#combobox | ARIA combobox }.
      *
-     * Returns true of the test element is a descendent of the reference, or exist in
-     * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
-     * @param reference - The element to test for containment against.
-     * @param test - The element being tested for containment.
+     * @slot start - Content which can be provided before the input
+     * @slot end - Content which can be provided after the input
+     * @slot control - Used to replace the input element representing the combobox
+     * @slot indicator - The visual indicator representing the expanded state
+     * @slot - The default slot for the options
+     * @csspart control - The wrapper element containing the input area, including start and end
+     * @csspart selected-value - The input element representing the selected value
+     * @csspart indicator - The element wrapping the indicator slot
+     * @csspart listbox - The wrapper for the listbox slotted options
+     * @fires change - Fires a custom 'change' event when the value updates
      *
      * @public
      */
-    function composedContains(reference, test) {
-        let current = test;
-        while (current !== null) {
-            if (current === reference) {
-                return true;
-            }
-            current = composedParent(current);
+    class Combobox$1 extends FormAssociatedCombobox {
+        constructor() {
+            super(...arguments);
+            /**
+             * The internal value property.
+             *
+             * @internal
+             */
+            this._value = "";
+            /**
+             * The collection of currently filtered options.
+             *
+             * @public
+             */
+            this.filteredOptions = [];
+            /**
+             * The current filter value.
+             *
+             * @internal
+             */
+            this.filter = "";
+            /**
+             * The initial state of the position attribute.
+             *
+             * @internal
+             */
+            this.forcedPosition = false;
+            /**
+             * The unique id for the internal listbox element.
+             *
+             * @internal
+             */
+            this.listboxId = uniqueId("listbox-");
+            /**
+             * The max height for the listbox when opened.
+             *
+             * @internal
+             */
+            this.maxHeight = 0;
+            /**
+             * The open attribute.
+             *
+             * @public
+             * @remarks
+             * HTML Attribute: open
+             */
+            this.open = false;
         }
-        return false;
-    }
-
-    const defaultElement = document.createElement("div");
-    function isFastElement(element) {
-        return element instanceof FASTElement;
-    }
-    class QueuedStyleSheetTarget {
-        setProperty(name, value) {
-            DOM.queueUpdate(() => this.target.setProperty(name, value));
+        /**
+         * Reset the element to its first selectable option when its parent form is reset.
+         *
+         * @internal
+         */
+        formResetCallback() {
+            super.formResetCallback();
+            this.setDefaultSelectedOption();
+            this.updateValue();
         }
-        removeProperty(name) {
-            DOM.queueUpdate(() => this.target.removeProperty(name));
+        get isAutocompleteInline() {
+            return (this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth);
         }
-    }
-    /**
-     * Handles setting properties for a FASTElement using Constructable Stylesheets
-     */
-    class ConstructableStyleSheetTarget extends QueuedStyleSheetTarget {
-        constructor(source) {
-            super();
-            const sheet = new CSSStyleSheet();
-            this.target = sheet.cssRules[sheet.insertRule(":host{}")].style;
-            source.$fastController.addStyles(ElementStyles.create([sheet]));
+        get isAutocompleteList() {
+            return this.autocomplete === ComboboxAutocomplete.list || this.isAutocompleteBoth;
         }
-    }
-    class DocumentStyleSheetTarget extends QueuedStyleSheetTarget {
-        constructor() {
-            super();
-            const sheet = new CSSStyleSheet();
-            this.target = sheet.cssRules[sheet.insertRule(":root{}")].style;
-            document.adoptedStyleSheets = [
-                ...document.adoptedStyleSheets,
-                sheet,
-            ];
+        get isAutocompleteBoth() {
+            return this.autocomplete === ComboboxAutocomplete.both;
         }
-    }
-    class HeadStyleElementStyleSheetTarget extends QueuedStyleSheetTarget {
-        constructor() {
-            super();
-            this.style = document.createElement("style");
-            document.head.appendChild(this.style);
-            const { sheet } = this.style;
-            // Because the HTMLStyleElement has been appended,
-            // there shouldn't exist a case where `sheet` is null,
-            // but if-check it just in case.
-            if (sheet) {
-                // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
-                // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
-                const index = sheet.insertRule(":root{}", sheet.cssRules.length);
-                this.target = sheet.cssRules[index].style;
+        /**
+         * Sets focus and synchronize ARIA attributes when the open property changes.
+         *
+         * @param prev - the previous open value
+         * @param next - the current open value
+         *
+         * @internal
+         */
+        openChanged() {
+            if (this.open) {
+                this.ariaControls = this.listboxId;
+                this.ariaExpanded = "true";
+                this.setPositioning();
+                this.focusAndScrollOptionIntoView();
+                // focus is directed to the element when `open` is changed programmatically
+                DOM.queueUpdate(() => this.focus());
+                return;
             }
+            this.ariaControls = "";
+            this.ariaExpanded = "false";
         }
-    }
-    /**
-     * Handles setting properties for a FASTElement using an HTMLStyleElement
-     */
-    class StyleElementStyleSheetTarget {
-        constructor(target) {
-            this.store = new Map();
-            this.target = null;
-            const controller = target.$fastController;
-            this.style = document.createElement("style");
-            controller.addStyles(this.style);
-            Observable.getNotifier(controller).subscribe(this, "isConnected");
-            this.handleChange(controller, "isConnected");
+        /**
+         * The list of options.
+         *
+         * @public
+         * @remarks
+         * Overrides `Listbox.options`.
+         */
+        get options() {
+            Observable.track(this, "options");
+            return this.filteredOptions.length ? this.filteredOptions : this._options;
         }
-        targetChanged() {
-            if (this.target !== null) {
-                for (const [key, value] of this.store.entries()) {
-                    this.target.setProperty(key, value);
-                }
+        set options(value) {
+            this._options = value;
+            Observable.notify(this, "options");
+        }
+        /**
+         * Updates the placeholder on the proxy element.
+         * @internal
+         */
+        placeholderChanged() {
+            if (this.proxy instanceof HTMLInputElement) {
+                this.proxy.placeholder = this.placeholder;
             }
         }
-        setProperty(name, value) {
-            this.store.set(name, value);
-            DOM.queueUpdate(() => {
-                if (this.target !== null) {
-                    this.target.setProperty(name, value);
-                }
-            });
+        positionChanged(prev, next) {
+            this.positionAttribute = next;
+            this.setPositioning();
         }
-        removeProperty(name) {
-            this.store.delete(name);
-            DOM.queueUpdate(() => {
-                if (this.target !== null) {
-                    this.target.removeProperty(name);
-                }
-            });
+        /**
+         * The value property.
+         *
+         * @public
+         */
+        get value() {
+            Observable.track(this, "value");
+            return this._value;
         }
-        handleChange(source, key) {
-            // HTMLStyleElement.sheet is null if the element isn't connected to the DOM,
-            // so this method reacts to changes in DOM connection for the element hosting
-            // the HTMLStyleElement.
-            //
-            // All rules applied via the CSSOM also get cleared when the element disconnects,
-            // so we need to add a new rule each time and populate it with the stored properties
-            const { sheet } = this.style;
-            if (sheet) {
-                // Safari will throw if we try to use the return result of insertRule()
-                // to index the rule inline, so store as a const prior to indexing.
-                // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
-                // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
-                const index = sheet.insertRule(":host{}", sheet.cssRules.length);
-                this.target = sheet.cssRules[index].style;
+        set value(next) {
+            var _a, _b, _c;
+            const prev = `${this._value}`;
+            if (this.$fastController.isConnected && this.options) {
+                const selectedIndex = this.options.findIndex(el => el.text.toLowerCase() === next.toLowerCase());
+                const prevSelectedValue = (_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.text;
+                const nextSelectedValue = (_b = this.options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.text;
+                this.selectedIndex =
+                    prevSelectedValue !== nextSelectedValue
+                        ? selectedIndex
+                        : this.selectedIndex;
+                next = ((_c = this.firstSelectedOption) === null || _c === void 0 ? void 0 : _c.text) || next;
             }
-            else {
-                this.target = null;
+            if (prev !== next) {
+                this._value = next;
+                super.valueChanged(prev, next);
+                Observable.notify(this, "value");
             }
         }
-    }
-    __decorate$1([
-        observable
-    ], StyleElementStyleSheetTarget.prototype, "target", void 0);
-    /**
-     * Handles setting properties for a normal HTMLElement
-     */
-    class ElementStyleSheetTarget {
-        constructor(source) {
-            this.target = source.style;
-        }
-        setProperty(name, value) {
-            DOM.queueUpdate(() => this.target.setProperty(name, value));
-        }
-        removeProperty(name) {
-            DOM.queueUpdate(() => this.target.removeProperty(name));
-        }
-    }
-    /**
-     * Controls emission for default values. This control is capable
-     * of emitting to multiple {@link PropertyTarget | PropertyTargets},
-     * and only emits if it has at least one root.
-     *
-     * @internal
-     */
-    class RootStyleSheetTarget {
-        setProperty(name, value) {
-            RootStyleSheetTarget.properties[name] = value;
-            for (const target of RootStyleSheetTarget.roots.values()) {
-                PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).setProperty(name, value);
-            }
-        }
-        removeProperty(name) {
-            delete RootStyleSheetTarget.properties[name];
-            for (const target of RootStyleSheetTarget.roots.values()) {
-                PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).removeProperty(name);
+        /**
+         * Handle opening and closing the listbox when the combobox is clicked.
+         *
+         * @param e - the mouse event
+         * @internal
+         */
+        clickHandler(e) {
+            if (this.disabled) {
+                return;
             }
-        }
-        static registerRoot(root) {
-            const { roots } = RootStyleSheetTarget;
-            if (!roots.has(root)) {
-                roots.add(root);
-                const target = PropertyTargetManager.getOrCreate(this.normalizeRoot(root));
-                for (const key in RootStyleSheetTarget.properties) {
-                    target.setProperty(key, RootStyleSheetTarget.properties[key]);
+            if (this.open) {
+                const captured = e.target.closest(`option,[role=option]`);
+                if (!captured || captured.disabled) {
+                    return;
                 }
+                this.selectedOptions = [captured];
+                this.control.value = captured.text;
+                this.clearSelectionRange();
+                this.updateValue(true);
             }
+            this.open = !this.open;
+            if (this.open) {
+                this.control.focus();
+            }
+            return true;
         }
-        static unregisterRoot(root) {
-            const { roots } = RootStyleSheetTarget;
-            if (roots.has(root)) {
-                roots.delete(root);
-                const target = PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(root));
-                for (const key in RootStyleSheetTarget.properties) {
-                    target.removeProperty(key);
-                }
+        connectedCallback() {
+            super.connectedCallback();
+            this.forcedPosition = !!this.positionAttribute;
+            if (this.value) {
+                this.initialValue = this.value;
             }
         }
         /**
-         * Returns the document when provided the default element,
-         * otherwise is a no-op
-         * @param root - the root to normalize
+         * Synchronize the `aria-disabled` property when the `disabled` property changes.
+         *
+         * @param prev - The previous disabled value
+         * @param next - The next disabled value
+         *
+         * @internal
          */
-        static normalizeRoot(root) {
-            return root === defaultElement ? document : root;
-        }
-    }
-    RootStyleSheetTarget.roots = new Set();
-    RootStyleSheetTarget.properties = {};
-    // Caches PropertyTarget instances
-    const propertyTargetCache = new WeakMap();
-    // Use Constructable StyleSheets for FAST elements when supported, otherwise use
-    // HTMLStyleElement instances
-    const propertyTargetCtor = DOM.supportsAdoptedStyleSheets
-        ? ConstructableStyleSheetTarget
-        : StyleElementStyleSheetTarget;
-    /**
-     * Manages creation and caching of PropertyTarget instances.
-     *
-     * @internal
-     */
-    const PropertyTargetManager = Object.freeze({
-        getOrCreate(source) {
-            if (propertyTargetCache.has(source)) {
-                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-                return propertyTargetCache.get(source);
-            }
-            let target;
-            if (source === defaultElement) {
-                target = new RootStyleSheetTarget();
-            }
-            else if (source instanceof Document) {
-                target = DOM.supportsAdoptedStyleSheets
-                    ? new DocumentStyleSheetTarget()
-                    : new HeadStyleElementStyleSheetTarget();
-            }
-            else if (isFastElement(source)) {
-                target = new propertyTargetCtor(source);
-            }
-            else {
-                target = new ElementStyleSheetTarget(source);
-            }
-            propertyTargetCache.set(source, target);
-            return target;
-        },
-    });
-
-    /**
-     * Implementation of {@link (DesignToken:interface)}
-     */
-    class DesignTokenImpl extends CSSDirective {
-        constructor(configuration) {
-            super();
-            this.subscribers = new WeakMap();
-            this._appliedTo = new Set();
-            this.name = configuration.name;
-            if (configuration.cssCustomPropertyName !== null) {
-                this.cssCustomProperty = `--${configuration.cssCustomPropertyName}`;
-                this.cssVar = `var(${this.cssCustomProperty})`;
+        disabledChanged(prev, next) {
+            if (super.disabledChanged) {
+                super.disabledChanged(prev, next);
             }
-            this.id = DesignTokenImpl.uniqueId();
-            DesignTokenImpl.tokensById.set(this.id, this);
-        }
-        get appliedTo() {
-            return [...this._appliedTo];
-        }
-        static from(nameOrConfig) {
-            return new DesignTokenImpl({
-                name: typeof nameOrConfig === "string" ? nameOrConfig : nameOrConfig.name,
-                cssCustomPropertyName: typeof nameOrConfig === "string"
-                    ? nameOrConfig
-                    : nameOrConfig.cssCustomPropertyName === void 0
-                        ? nameOrConfig.name
-                        : nameOrConfig.cssCustomPropertyName,
-            });
-        }
-        static isCSSDesignToken(token) {
-            return typeof token.cssCustomProperty === "string";
-        }
-        static isDerivedDesignTokenValue(value) {
-            return typeof value === "function";
+            this.ariaDisabled = this.disabled ? "true" : "false";
         }
         /**
-         * Gets a token by ID. Returns undefined if the token was not found.
-         * @param id - The ID of the token
-         * @returns
+         * Filter available options by text value.
+         *
+         * @public
          */
-        static getTokenById(id) {
-            return DesignTokenImpl.tokensById.get(id);
-        }
-        getOrCreateSubscriberSet(target = this) {
-            return (this.subscribers.get(target) ||
-                (this.subscribers.set(target, new Set()) && this.subscribers.get(target)));
-        }
-        createCSS() {
-            return this.cssVar || "";
-        }
-        getValueFor(element) {
-            const value = DesignTokenNode.getOrCreate(element).get(this);
-            if (value !== undefined) {
-                return value;
+        filterOptions() {
+            if (!this.autocomplete || this.autocomplete === ComboboxAutocomplete.none) {
+                this.filter = "";
             }
-            throw new Error(`Value could not be retrieved for token named "${this.name}". Ensure the value is set for ${element} or an ancestor of ${element}.`);
-        }
-        setValueFor(element, value) {
-            this._appliedTo.add(element);
-            if (value instanceof DesignTokenImpl) {
-                value = this.alias(value);
+            const filter = this.filter.toLowerCase();
+            this.filteredOptions = this._options.filter(o => o.text.toLowerCase().startsWith(this.filter.toLowerCase()));
+            if (this.isAutocompleteList) {
+                if (!this.filteredOptions.length && !filter) {
+                    this.filteredOptions = this._options;
+                }
+                this._options.forEach(o => {
+                    o.hidden = !this.filteredOptions.includes(o);
+                });
             }
-            DesignTokenNode.getOrCreate(element).set(this, value);
-            return this;
         }
-        deleteValueFor(element) {
-            this._appliedTo.delete(element);
-            if (DesignTokenNode.existsFor(element)) {
-                DesignTokenNode.getOrCreate(element).delete(this);
+        /**
+         * Focus the control and scroll the first selected option into view.
+         *
+         * @internal
+         * @remarks
+         * Overrides: `Listbox.focusAndScrollOptionIntoView`
+         */
+        focusAndScrollOptionIntoView() {
+            if (this.contains(document.activeElement)) {
+                this.control.focus();
+                if (this.firstSelectedOption) {
+                    requestAnimationFrame(() => {
+                        var _a;
+                        (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: "nearest" });
+                    });
+                }
             }
-            return this;
-        }
-        withDefault(value) {
-            this.setValueFor(defaultElement, value);
-            return this;
         }
-        subscribe(subscriber, target) {
-            const subscriberSet = this.getOrCreateSubscriberSet(target);
-            if (target && !DesignTokenNode.existsFor(target)) {
-                DesignTokenNode.getOrCreate(target);
+        /**
+         * Handle focus state when the element or its children lose focus.
+         *
+         * @param e - The focus event
+         * @internal
+         */
+        focusoutHandler(e) {
+            this.updateValue();
+            if (!this.open) {
+                return true;
             }
-            if (!subscriberSet.has(subscriber)) {
-                subscriberSet.add(subscriber);
+            const focusTarget = e.relatedTarget;
+            if (this.isSameNode(focusTarget)) {
+                this.focus();
+                return;
             }
-        }
-        unsubscribe(subscriber, target) {
-            const list = this.subscribers.get(target || this);
-            if (list && list.has(subscriber)) {
-                list.delete(subscriber);
+            if (!this.options || !this.options.includes(focusTarget)) {
+                this.open = false;
             }
         }
         /**
-         * Notifies subscribers that the value for an element has changed.
-         * @param element - The element to emit a notification for
+         * Handle content changes on the control input.
+         *
+         * @param e - the input event
+         * @internal
          */
-        notify(element) {
-            const record = Object.freeze({ token: this, target: element });
-            if (this.subscribers.has(this)) {
-                this.subscribers.get(this).forEach(sub => sub.handleChange(record));
+        inputHandler(e) {
+            this.filter = this.control.value;
+            this.filterOptions();
+            if (e.inputType === "deleteContentBackward" || !this.filter.length) {
+                return true;
             }
-            if (this.subscribers.has(element)) {
-                this.subscribers.get(element).forEach(sub => sub.handleChange(record));
+            if (this.isAutocompleteList && !this.open) {
+                this.open = true;
             }
+            if (this.isAutocompleteInline && this.filteredOptions.length) {
+                this.selectedOptions = [this.filteredOptions[0]];
+                this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+                this.setInlineSelection();
+            }
+            return;
         }
         /**
-         * Alias the token to the provided token.
-         * @param token - the token to alias to
+         * Handle keydown actions for listbox navigation.
+         *
+         * @param e - the keyboard event
+         * @internal
          */
-        alias(token) {
-            return ((target) => token.getValueFor(target));
-        }
-    }
-    DesignTokenImpl.uniqueId = (() => {
-        let id = 0;
-        return () => {
-            id++;
-            return id.toString(16);
-        };
-    })();
-    /**
-     * Token storage by token ID
-     */
-    DesignTokenImpl.tokensById = new Map();
-    class CustomPropertyReflector {
-        startReflection(token, target) {
-            token.subscribe(this, target);
-            this.handleChange({ token, target });
-        }
-        stopReflection(token, target) {
-            token.unsubscribe(this, target);
-            this.remove(token, target);
-        }
-        handleChange(record) {
-            const { token, target } = record;
-            this.add(token, target);
-        }
-        add(token, target) {
-            PropertyTargetManager.getOrCreate(target).setProperty(token.cssCustomProperty, this.resolveCSSValue(DesignTokenNode.getOrCreate(target).get(token)));
-        }
-        remove(token, target) {
-            PropertyTargetManager.getOrCreate(target).removeProperty(token.cssCustomProperty);
-        }
-        resolveCSSValue(value) {
-            return value && typeof value.createCSS === "function" ? value.createCSS() : value;
-        }
-    }
-    /**
-     * A light wrapper around BindingObserver to handle value caching and
-     * token notification
-     */
-    class DesignTokenBindingObserver {
-        constructor(source, token, node) {
-            this.source = source;
-            this.token = token;
-            this.node = node;
-            this.dependencies = new Set();
-            this.observer = Observable.binding(source, this, false);
-            // This is a little bit hacky because it's using internal APIs of BindingObserverImpl.
-            // BindingObserverImpl queues updates to batch it's notifications which doesn't work for this
-            // scenario because the DesignToken.getValueFor API is not async. Without this, using DesignToken.getValueFor()
-            // after DesignToken.setValueFor() when setting a dependency of the value being retrieved can return a stale
-            // value. Assigning .handleChange to .call forces immediate invocation of this classes handleChange() method,
-            // allowing resolution of values synchronously.
-            // TODO: https://github.com/microsoft/fast/issues/5110
-            this.observer.handleChange = this.observer.call;
-            this.handleChange();
-        }
-        disconnect() {
-            this.observer.disconnect();
+        keydownHandler(e) {
+            const key = e.key;
+            if (e.ctrlKey || e.shiftKey) {
+                return true;
+            }
+            switch (key) {
+                case "Enter": {
+                    this.updateValue(true);
+                    if (this.isAutocompleteInline) {
+                        this.filter = this.value;
+                    }
+                    this.open = false;
+                    this.clearSelectionRange();
+                    break;
+                }
+                case "Escape": {
+                    if (!this.isAutocompleteInline) {
+                        this.selectedIndex = -1;
+                    }
+                    if (this.open) {
+                        this.open = false;
+                        break;
+                    }
+                    this.value = "";
+                    this.control.value = "";
+                    this.filter = "";
+                    this.filterOptions();
+                    break;
+                }
+                case "Tab": {
+                    this.updateValue();
+                    if (!this.open) {
+                        return true;
+                    }
+                    e.preventDefault();
+                    this.open = false;
+                    break;
+                }
+                case "ArrowUp":
+                case "ArrowDown": {
+                    this.filterOptions();
+                    if (!this.open) {
+                        this.open = true;
+                        break;
+                    }
+                    if (this.filteredOptions.length > 0) {
+                        super.keydownHandler(e);
+                    }
+                    if (this.isAutocompleteInline) {
+                        this.updateValue();
+                        this.setInlineSelection();
+                    }
+                    break;
+                }
+                default: {
+                    return true;
+                }
+            }
         }
         /**
+         * Handle keyup actions for value input and text field manipulations.
+         *
+         * @param e - the keyboard event
          * @internal
          */
-        handleChange() {
-            this.node.store.set(this.token, this.observer.observe(this.node.target, defaultExecutionContext));
-        }
-    }
-    /**
-     * Stores resolved token/value pairs and notifies on changes
-     */
-    class Store {
-        constructor() {
-            this.values = new Map();
-        }
-        set(token, value) {
-            if (this.values.get(token) !== value) {
-                this.values.set(token, value);
-                Observable.getNotifier(this).notify(token.id);
-            }
-        }
-        get(token) {
-            Observable.track(this, token.id);
-            return this.values.get(token);
-        }
-        delete(token) {
-            this.values.delete(token);
-        }
-        all() {
-            return this.values.entries();
-        }
-    }
-    const nodeCache = new WeakMap();
-    const childToParent = new WeakMap();
-    /**
-     * A node responsible for setting and getting token values,
-     * emitting values to CSS custom properties, and maintaining
-     * inheritance structures.
-     */
-    class DesignTokenNode {
-        constructor(target) {
-            this.target = target;
-            /**
-             * Stores all resolved token values for a node
-             */
-            this.store = new Store();
-            /**
-             * All children assigned to the node
-             */
-            this.children = [];
-            /**
-             * All values explicitly assigned to the node in their raw form
-             */
-            this.assignedValues = new Map();
-            /**
-             * Tokens currently being reflected to CSS custom properties
-             */
-            this.reflecting = new Set();
-            /**
-             * Binding observers for assigned and inherited derived values.
-             */
-            this.bindingObservers = new Map();
-            /**
-             * Emits notifications to token when token values
-             * change the DesignTokenNode
-             */
-            this.tokenValueChangeHandler = {
-                handleChange: (source, arg) => {
-                    const token = DesignTokenImpl.getTokenById(arg);
-                    if (token) {
-                        // Notify any token subscribers
-                        token.notify(this.target);
-                        if (DesignTokenImpl.isCSSDesignToken(token)) {
-                            const parent = this.parent;
-                            const reflecting = this.isReflecting(token);
-                            if (parent) {
-                                const parentValue = parent.get(token);
-                                const sourceValue = source.get(token);
-                                if (parentValue !== sourceValue && !reflecting) {
-                                    this.reflectToCSS(token);
-                                }
-                                else if (parentValue === sourceValue && reflecting) {
-                                    this.stopReflectToCSS(token);
-                                }
-                            }
-                            else if (!reflecting) {
-                                this.reflectToCSS(token);
-                            }
-                        }
-                    }
-                },
-            };
-            nodeCache.set(target, this);
-            // Map store change notifications to token change notifications
-            Observable.getNotifier(this.store).subscribe(this.tokenValueChangeHandler);
-            if (target instanceof FASTElement) {
-                target.$fastController.addBehaviors([this]);
-            }
-            else if (target.isConnected) {
-                this.bind();
+        keyupHandler(e) {
+            const key = e.key;
+            switch (key) {
+                case "ArrowLeft":
+                case "ArrowRight":
+                case "Backspace":
+                case "Delete":
+                case "Home":
+                case "End": {
+                    this.filter = this.control.value;
+                    this.selectedIndex = -1;
+                    this.filterOptions();
+                    break;
+                }
             }
         }
         /**
-         * Returns a DesignTokenNode for an element.
-         * Creates a new instance if one does not already exist for a node,
-         * otherwise returns the cached instance
+         * Ensure that the selectedIndex is within the current allowable filtered range.
          *
-         * @param target - The HTML element to retrieve a DesignTokenNode for
+         * @param prev - the previous selected index value
+         * @param next - the current selected index value
+         *
+         * @internal
          */
-        static getOrCreate(target) {
-            return nodeCache.get(target) || new DesignTokenNode(target);
+        selectedIndexChanged(prev, next) {
+            if (this.$fastController.isConnected) {
+                next = limit(-1, this.options.length - 1, next);
+                // we only want to call the super method when the selectedIndex is in range
+                if (next !== this.selectedIndex) {
+                    this.selectedIndex = next;
+                    return;
+                }
+                super.selectedIndexChanged(prev, next);
+            }
         }
         /**
-         * Determines if a DesignTokenNode has been created for a target
-         * @param target - The element to test
+         * Move focus to the previous selectable option.
+         *
+         * @internal
+         * @remarks
+         * Overrides `Listbox.selectPreviousOption`
          */
-        static existsFor(target) {
-            return nodeCache.has(target);
+        selectPreviousOption() {
+            if (!this.disabled && this.selectedIndex >= 0) {
+                this.selectedIndex = this.selectedIndex - 1;
+            }
         }
         /**
-         * Searches for and return the nearest parent DesignTokenNode.
-         * Null is returned if no node is found or the node provided is for a default element.
+         * Set the default selected options at initialization or reset.
+         *
+         * @internal
+         * @remarks
+         * Overrides `Listbox.setDefaultSelectedOption`
          */
-        static findParent(node) {
-            if (!(defaultElement === node.target)) {
-                let parent = composedParent(node.target);
-                while (parent !== null) {
-                    if (nodeCache.has(parent)) {
-                        return nodeCache.get(parent);
-                    }
-                    parent = composedParent(parent);
+        setDefaultSelectedOption() {
+            if (this.$fastController.isConnected && this.options) {
+                const selectedIndex = this.options.findIndex(el => el.getAttribute("selected") !== null || el.selected);
+                this.selectedIndex = selectedIndex;
+                if (!this.dirtyValue && this.firstSelectedOption) {
+                    this.value = this.firstSelectedOption.text;
                 }
-                return DesignTokenNode.getOrCreate(defaultElement);
+                this.setSelectedOptions();
             }
-            return null;
         }
         /**
-         * Finds the closest node with a value explicitly assigned for a token, otherwise null.
-         * @param token - The token to look for
-         * @param start - The node to start looking for value assignment
-         * @returns
+         * Focus and select the content of the control based on the first selected option.
+         *
+         * @param start - The index for the starting range
+         * @internal
          */
-        static findClosestAssignedNode(token, start) {
-            let current = start;
-            do {
-                if (current.has(token)) {
-                    return current;
-                }
-                current = current.parent
-                    ? current.parent
-                    : current.target !== defaultElement
-                        ? DesignTokenNode.getOrCreate(defaultElement)
-                        : null;
-            } while (current !== null);
-            return null;
+        setInlineSelection() {
+            if (this.firstSelectedOption) {
+                this.control.value = this.firstSelectedOption.text;
+                this.control.focus();
+                this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
+            }
         }
         /**
-         * The parent DesignTokenNode, or null.
+         * Calculate and apply listbox positioning based on available viewport space.
+         *
+         * @param force - direction to force the listbox to display
+         * @public
          */
-        get parent() {
-            return childToParent.get(this) || null;
+        setPositioning() {
+            const currentBox = this.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const availableBottom = viewportHeight - currentBox.bottom;
+            this.position = this.forcedPosition
+                ? this.positionAttribute
+                : currentBox.top > availableBottom
+                    ? SelectPosition.above
+                    : SelectPosition.below;
+            this.positionAttribute = this.forcedPosition
+                ? this.positionAttribute
+                : this.position;
+            this.maxHeight =
+                this.position === SelectPosition.above ? ~~currentBox.top : ~~availableBottom;
         }
         /**
-         * Checks if a token has been assigned an explicit value the node.
-         * @param token - the token to check.
-         */
-        has(token) {
-            return this.assignedValues.has(token);
-        }
-        /**
-         * Gets the value of a token for a node
-         * @param token - The token to retrieve the value for
-         * @returns
-         */
-        get(token) {
-            const value = this.store.get(token);
-            if (value !== undefined) {
-                return value;
-            }
-            const raw = this.getRaw(token);
-            if (raw !== undefined) {
-                this.hydrate(token, raw);
-                return this.get(token);
-            }
-        }
-        /**
-         * Retrieves the raw assigned value of a token from the nearest assigned node.
-         * @param token - The token to retrieve a raw value for
-         * @returns
-         */
-        getRaw(token) {
-            var _a;
-            if (this.assignedValues.has(token)) {
-                return this.assignedValues.get(token);
-            }
-            return (_a = DesignTokenNode.findClosestAssignedNode(token, this)) === null || _a === void 0 ? void 0 : _a.getRaw(token);
-        }
-        /**
-         * Sets a token to a value for a node
-         * @param token - The token to set
-         * @param value - The value to set the token to
-         */
-        set(token, value) {
-            if (DesignTokenImpl.isDerivedDesignTokenValue(this.assignedValues.get(token))) {
-                this.tearDownBindingObserver(token);
-            }
-            this.assignedValues.set(token, value);
-            if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
-                this.setupBindingObserver(token, value);
-            }
-            else {
-                this.store.set(token, value);
-            }
-        }
-        /**
-         * Deletes a token value for the node.
-         * @param token - The token to delete the value for
-         */
-        delete(token) {
-            this.assignedValues.delete(token);
-            this.tearDownBindingObserver(token);
-            const upstream = this.getRaw(token);
-            if (upstream) {
-                this.hydrate(token, upstream);
-            }
-            else {
-                this.store.delete(token);
-            }
-        }
-        /**
-         * Invoked when the DesignTokenNode.target is attached to the document
-         */
-        bind() {
-            const parent = DesignTokenNode.findParent(this);
-            if (parent) {
-                parent.appendChild(this);
-            }
-            for (const key of this.assignedValues.keys()) {
-                key.notify(this.target);
-            }
-        }
-        /**
-         * Invoked when the DesignTokenNode.target is detached from the document
-         */
-        unbind() {
-            if (this.parent) {
-                const parent = childToParent.get(this);
-                parent.removeChild(this);
-            }
-        }
-        /**
-         * Appends a child to a parent DesignTokenNode.
-         * @param child - The child to append to the node
-         */
-        appendChild(child) {
-            if (child.parent) {
-                childToParent.get(child).removeChild(child);
-            }
-            const reParent = this.children.filter(x => child.contains(x));
-            childToParent.set(child, this);
-            this.children.push(child);
-            reParent.forEach(x => child.appendChild(x));
-            Observable.getNotifier(this.store).subscribe(child);
-            // How can we not notify *every* subscriber?
-            for (const [token, value] of this.store.all()) {
-                child.hydrate(token, this.bindingObservers.has(token) ? this.getRaw(token) : value);
-            }
-        }
-        /**
-         * Removes a child from a node.
-         * @param child - The child to remove.
-         */
-        removeChild(child) {
-            const childIndex = this.children.indexOf(child);
-            if (childIndex !== -1) {
-                this.children.splice(childIndex, 1);
-            }
-            Observable.getNotifier(this.store).unsubscribe(child);
-            return child.parent === this ? childToParent.delete(child) : false;
-        }
-        /**
-         * Tests whether a provided node is contained by
-         * the calling node.
-         * @param test - The node to test
-         */
-        contains(test) {
-            return composedContains(this.target, test.target);
-        }
-        /**
-         * Instructs the node to reflect a design token for the provided token.
-         * @param token - The design token to reflect
-         */
-        reflectToCSS(token) {
-            if (!this.isReflecting(token)) {
-                this.reflecting.add(token);
-                DesignTokenNode.cssCustomPropertyReflector.startReflection(token, this.target);
-            }
-        }
-        /**
-         * Stops reflecting a DesignToken to CSS
-         * @param token - The design token to stop reflecting
+         * Ensure that the entire list of options is used when setting the selected property.
+         *
+         * @param prev - the previous list of selected options
+         * @param next - the current list of selected options
+         *
+         * @internal
+         * @remarks
+         * Overrides: `Listbox.selectedOptionsChanged`
          */
-        stopReflectToCSS(token) {
-            if (this.isReflecting(token)) {
-                this.reflecting.delete(token);
-                DesignTokenNode.cssCustomPropertyReflector.stopReflection(token, this.target);
+        selectedOptionsChanged(prev, next) {
+            if (this.$fastController.isConnected) {
+                this._options.forEach(o => {
+                    o.selected = next.includes(o);
+                });
             }
         }
         /**
-         * Determines if a token is being reflected to CSS for a node.
-         * @param token - The token to check for reflection
-         * @returns
+         * Synchronize the form-associated proxy and update the value property of the element.
+         *
+         * @param prev - the previous collection of slotted option elements
+         * @param next - the next collection of slotted option elements
+         *
+         * @internal
          */
-        isReflecting(token) {
-            return this.reflecting.has(token);
+        slottedOptionsChanged(prev, next) {
+            super.slottedOptionsChanged(prev, next);
+            this.updateValue();
         }
         /**
-         * Handle changes to upstream tokens
-         * @param source - The parent DesignTokenNode
-         * @param property - The token ID that changed
+         * Sets the value and to match the first selected option.
+         *
+         * @param shouldEmit - if true, the change event will be emitted
+         *
+         * @internal
          */
-        handleChange(source, property) {
-            const token = DesignTokenImpl.getTokenById(property);
-            if (!token) {
-                return;
+        updateValue(shouldEmit) {
+            var _a;
+            if (this.$fastController.isConnected) {
+                this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
             }
-            this.hydrate(token, this.getRaw(token));
-        }
-        /**
-         * Hydrates a token with a DesignTokenValue, making retrieval available.
-         * @param token - The token to hydrate
-         * @param value - The value to hydrate
-         */
-        hydrate(token, value) {
-            if (!this.has(token)) {
-                const observer = this.bindingObservers.get(token);
-                if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
-                    if (observer) {
-                        // If the binding source doesn't match, we need
-                        // to update the binding
-                        if (observer.source !== value) {
-                            this.tearDownBindingObserver(token);
-                            this.setupBindingObserver(token, value);
-                        }
-                    }
-                    else {
-                        this.setupBindingObserver(token, value);
-                    }
-                }
-                else {
-                    if (observer) {
-                        this.tearDownBindingObserver(token);
-                    }
-                    this.store.set(token, value);
-                }
+            if (shouldEmit) {
+                this.$emit("change");
             }
         }
         /**
-         * Sets up a binding observer for a derived token value that notifies token
-         * subscribers on change.
-         *
-         * @param token - The token to notify when the binding updates
-         * @param source - The binding source
-         */
-        setupBindingObserver(token, source) {
-            const binding = new DesignTokenBindingObserver(source, token, this);
-            this.bindingObservers.set(token, binding);
-            return binding;
-        }
-        /**
-         * Tear down a binding observer for a token.
+         * @internal
          */
-        tearDownBindingObserver(token) {
-            if (this.bindingObservers.has(token)) {
-                this.bindingObservers.get(token).disconnect();
-                this.bindingObservers.delete(token);
-                return true;
-            }
-            return false;
+        clearSelectionRange() {
+            const controlValueLength = this.control.value.length;
+            this.control.setSelectionRange(controlValueLength, controlValueLength);
         }
     }
+    __decorate$1([
+        attr({ attribute: "autocomplete", mode: "fromView" })
+    ], Combobox$1.prototype, "autocomplete", void 0);
+    __decorate$1([
+        observable
+    ], Combobox$1.prototype, "maxHeight", void 0);
+    __decorate$1([
+        attr({ attribute: "open", mode: "boolean" })
+    ], Combobox$1.prototype, "open", void 0);
+    __decorate$1([
+        attr
+    ], Combobox$1.prototype, "placeholder", void 0);
+    __decorate$1([
+        attr({ attribute: "position" })
+    ], Combobox$1.prototype, "positionAttribute", void 0);
+    __decorate$1([
+        observable
+    ], Combobox$1.prototype, "position", void 0);
     /**
-     * Responsible for reflecting tokens to CSS custom properties
+     * Includes ARIA states and properties relating to the ARIA combobox role.
+     *
+     * @public
      */
-    DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
+    class DelegatesARIACombobox {
+    }
     __decorate$1([
         observable
-    ], DesignTokenNode.prototype, "children", void 0);
-    function create(nameOrConfig) {
-        return DesignTokenImpl.from(nameOrConfig);
-    }
-    /* eslint-enable @typescript-eslint/no-unused-vars */
+    ], DelegatesARIACombobox.prototype, "ariaAutoComplete", void 0);
+    __decorate$1([
+        observable
+    ], DelegatesARIACombobox.prototype, "ariaControls", void 0);
+    applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
+    applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
+
     /**
-     * Factory object for creating {@link (DesignToken:interface)} instances.
+     * The template for the {@link @microsoft/fast-foundation#(Combobox:class)} component.
      * @public
      */
-    const DesignToken = Object.freeze({
-        create,
+    const comboboxTemplate = (context, definition) => html `
+    <template
+        aria-disabled="${x => x.ariaDisabled}"
+        autocomplete="${x => x.autocomplete}"
+        class="${x => (x.open ? "open" : "")} ${x => x.disabled ? "disabled" : ""} ${x => x.position}"
+        ?open="${x => x.open}"
+        tabindex="${x => (!x.disabled ? "0" : null)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+    >
+        <div class="control" part="control">
+            ${startSlotTemplate(context, definition)}
+            <slot name="control">
+                <input
+                    aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}"
+                    aria-autocomplete="${x => x.ariaAutoComplete}"
+                    aria-controls="${x => x.ariaControls}"
+                    aria-disabled="${x => x.ariaDisabled}"
+                    aria-expanded="${x => x.ariaExpanded}"
+                    aria-haspopup="listbox"
+                    class="selected-value"
+                    part="selected-value"
+                    placeholder="${x => x.placeholder}"
+                    role="combobox"
+                    type="text"
+                    ?disabled="${x => x.disabled}"
+                    :value="${x => x.value}"
+                    @input="${(x, c) => x.inputHandler(c.event)}"
+                    @keyup="${(x, c) => x.keyupHandler(c.event)}"
+                    ${ref("control")}
+                />
+                <div class="indicator" part="indicator" aria-hidden="true">
+                    <slot name="indicator">
+                        ${definition.indicator || ""}
+                    </slot>
+                </div>
+            </slot>
+            ${endSlotTemplate(context, definition)}
+        </div>
+        <div
+            class="listbox"
+            id="${x => x.listboxId}"
+            part="listbox"
+            role="listbox"
+            ?disabled="${x => x.disabled}"
+            ?hidden="${x => !x.open}"
+            ${ref("listbox")}
+        >
+            <slot
+                ${slotted({
+    filter: Listbox.slottedOptionFilter,
+    flatten: true,
+    property: "slottedOptions",
+})}
+            ></slot>
+        </div>
+    </template>
+`;
+
+    /**
+     * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
+     * When the parent of a node is a shadow-root, it will return the host
+     * element of the shadow root. Otherwise it will return the parent node or null if
+     * no parent node exists.
+     * @param element - The element for which to retrieve the composed parent
+     *
+     * @public
+     */
+    function composedParent(element) {
+        const parentNode = element.parentElement;
+        if (parentNode) {
+            return parentNode;
+        }
+        else {
+            const rootNode = element.getRootNode();
+            if (rootNode.host instanceof HTMLElement) {
+                // this is shadow-root
+                return rootNode.host;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Determines if the reference element contains the test element in a "composed" DOM tree that
+     * ignores shadow DOM boundaries.
+     *
+     * Returns true of the test element is a descendent of the reference, or exist in
+     * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
+     * @param reference - The element to test for containment against.
+     * @param test - The element being tested for containment.
+     *
+     * @public
+     */
+    function composedContains(reference, test) {
+        let current = test;
+        while (current !== null) {
+            if (current === reference) {
+                return true;
+            }
+            current = composedParent(current);
+        }
+        return false;
+    }
+
+    const defaultElement = document.createElement("div");
+    function isFastElement(element) {
+        return element instanceof FASTElement;
+    }
+    class QueuedStyleSheetTarget {
+        setProperty(name, value) {
+            DOM.queueUpdate(() => this.target.setProperty(name, value));
+        }
+        removeProperty(name) {
+            DOM.queueUpdate(() => this.target.removeProperty(name));
+        }
+    }
+    /**
+     * Handles setting properties for a FASTElement using Constructable Stylesheets
+     */
+    class ConstructableStyleSheetTarget extends QueuedStyleSheetTarget {
+        constructor(source) {
+            super();
+            const sheet = new CSSStyleSheet();
+            this.target = sheet.cssRules[sheet.insertRule(":host{}")].style;
+            source.$fastController.addStyles(ElementStyles.create([sheet]));
+        }
+    }
+    class DocumentStyleSheetTarget extends QueuedStyleSheetTarget {
+        constructor() {
+            super();
+            const sheet = new CSSStyleSheet();
+            this.target = sheet.cssRules[sheet.insertRule(":root{}")].style;
+            document.adoptedStyleSheets = [
+                ...document.adoptedStyleSheets,
+                sheet,
+            ];
+        }
+    }
+    class HeadStyleElementStyleSheetTarget extends QueuedStyleSheetTarget {
+        constructor() {
+            super();
+            this.style = document.createElement("style");
+            document.head.appendChild(this.style);
+            const { sheet } = this.style;
+            // Because the HTMLStyleElement has been appended,
+            // there shouldn't exist a case where `sheet` is null,
+            // but if-check it just in case.
+            if (sheet) {
+                // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
+                // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
+                const index = sheet.insertRule(":root{}", sheet.cssRules.length);
+                this.target = sheet.cssRules[index].style;
+            }
+        }
+    }
+    /**
+     * Handles setting properties for a FASTElement using an HTMLStyleElement
+     */
+    class StyleElementStyleSheetTarget {
+        constructor(target) {
+            this.store = new Map();
+            this.target = null;
+            const controller = target.$fastController;
+            this.style = document.createElement("style");
+            controller.addStyles(this.style);
+            Observable.getNotifier(controller).subscribe(this, "isConnected");
+            this.handleChange(controller, "isConnected");
+        }
+        targetChanged() {
+            if (this.target !== null) {
+                for (const [key, value] of this.store.entries()) {
+                    this.target.setProperty(key, value);
+                }
+            }
+        }
+        setProperty(name, value) {
+            this.store.set(name, value);
+            DOM.queueUpdate(() => {
+                if (this.target !== null) {
+                    this.target.setProperty(name, value);
+                }
+            });
+        }
+        removeProperty(name) {
+            this.store.delete(name);
+            DOM.queueUpdate(() => {
+                if (this.target !== null) {
+                    this.target.removeProperty(name);
+                }
+            });
+        }
+        handleChange(source, key) {
+            // HTMLStyleElement.sheet is null if the element isn't connected to the DOM,
+            // so this method reacts to changes in DOM connection for the element hosting
+            // the HTMLStyleElement.
+            //
+            // All rules applied via the CSSOM also get cleared when the element disconnects,
+            // so we need to add a new rule each time and populate it with the stored properties
+            const { sheet } = this.style;
+            if (sheet) {
+                // Safari will throw if we try to use the return result of insertRule()
+                // to index the rule inline, so store as a const prior to indexing.
+                // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
+                // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
+                const index = sheet.insertRule(":host{}", sheet.cssRules.length);
+                this.target = sheet.cssRules[index].style;
+            }
+            else {
+                this.target = null;
+            }
+        }
+    }
+    __decorate$1([
+        observable
+    ], StyleElementStyleSheetTarget.prototype, "target", void 0);
+    /**
+     * Handles setting properties for a normal HTMLElement
+     */
+    class ElementStyleSheetTarget {
+        constructor(source) {
+            this.target = source.style;
+        }
+        setProperty(name, value) {
+            DOM.queueUpdate(() => this.target.setProperty(name, value));
+        }
+        removeProperty(name) {
+            DOM.queueUpdate(() => this.target.removeProperty(name));
+        }
+    }
+    /**
+     * Controls emission for default values. This control is capable
+     * of emitting to multiple {@link PropertyTarget | PropertyTargets},
+     * and only emits if it has at least one root.
+     *
+     * @internal
+     */
+    class RootStyleSheetTarget {
+        setProperty(name, value) {
+            RootStyleSheetTarget.properties[name] = value;
+            for (const target of RootStyleSheetTarget.roots.values()) {
+                PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).setProperty(name, value);
+            }
+        }
+        removeProperty(name) {
+            delete RootStyleSheetTarget.properties[name];
+            for (const target of RootStyleSheetTarget.roots.values()) {
+                PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).removeProperty(name);
+            }
+        }
+        static registerRoot(root) {
+            const { roots } = RootStyleSheetTarget;
+            if (!roots.has(root)) {
+                roots.add(root);
+                const target = PropertyTargetManager.getOrCreate(this.normalizeRoot(root));
+                for (const key in RootStyleSheetTarget.properties) {
+                    target.setProperty(key, RootStyleSheetTarget.properties[key]);
+                }
+            }
+        }
+        static unregisterRoot(root) {
+            const { roots } = RootStyleSheetTarget;
+            if (roots.has(root)) {
+                roots.delete(root);
+                const target = PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(root));
+                for (const key in RootStyleSheetTarget.properties) {
+                    target.removeProperty(key);
+                }
+            }
+        }
+        /**
+         * Returns the document when provided the default element,
+         * otherwise is a no-op
+         * @param root - the root to normalize
+         */
+        static normalizeRoot(root) {
+            return root === defaultElement ? document : root;
+        }
+    }
+    RootStyleSheetTarget.roots = new Set();
+    RootStyleSheetTarget.properties = {};
+    // Caches PropertyTarget instances
+    const propertyTargetCache = new WeakMap();
+    // Use Constructable StyleSheets for FAST elements when supported, otherwise use
+    // HTMLStyleElement instances
+    const propertyTargetCtor = DOM.supportsAdoptedStyleSheets
+        ? ConstructableStyleSheetTarget
+        : StyleElementStyleSheetTarget;
+    /**
+     * Manages creation and caching of PropertyTarget instances.
+     *
+     * @internal
+     */
+    const PropertyTargetManager = Object.freeze({
+        getOrCreate(source) {
+            if (propertyTargetCache.has(source)) {
+                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+                return propertyTargetCache.get(source);
+            }
+            let target;
+            if (source === defaultElement) {
+                target = new RootStyleSheetTarget();
+            }
+            else if (source instanceof Document) {
+                target = DOM.supportsAdoptedStyleSheets
+                    ? new DocumentStyleSheetTarget()
+                    : new HeadStyleElementStyleSheetTarget();
+            }
+            else if (isFastElement(source)) {
+                target = new propertyTargetCtor(source);
+            }
+            else {
+                target = new ElementStyleSheetTarget(source);
+            }
+            propertyTargetCache.set(source, target);
+            return target;
+        },
+    });
+
+    /**
+     * Implementation of {@link (DesignToken:interface)}
+     */
+    class DesignTokenImpl extends CSSDirective {
+        constructor(configuration) {
+            super();
+            this.subscribers = new WeakMap();
+            this._appliedTo = new Set();
+            this.name = configuration.name;
+            if (configuration.cssCustomPropertyName !== null) {
+                this.cssCustomProperty = `--${configuration.cssCustomPropertyName}`;
+                this.cssVar = `var(${this.cssCustomProperty})`;
+            }
+            this.id = DesignTokenImpl.uniqueId();
+            DesignTokenImpl.tokensById.set(this.id, this);
+        }
+        get appliedTo() {
+            return [...this._appliedTo];
+        }
+        static from(nameOrConfig) {
+            return new DesignTokenImpl({
+                name: typeof nameOrConfig === "string" ? nameOrConfig : nameOrConfig.name,
+                cssCustomPropertyName: typeof nameOrConfig === "string"
+                    ? nameOrConfig
+                    : nameOrConfig.cssCustomPropertyName === void 0
+                        ? nameOrConfig.name
+                        : nameOrConfig.cssCustomPropertyName,
+            });
+        }
+        static isCSSDesignToken(token) {
+            return typeof token.cssCustomProperty === "string";
+        }
+        static isDerivedDesignTokenValue(value) {
+            return typeof value === "function";
+        }
+        /**
+         * Gets a token by ID. Returns undefined if the token was not found.
+         * @param id - The ID of the token
+         * @returns
+         */
+        static getTokenById(id) {
+            return DesignTokenImpl.tokensById.get(id);
+        }
+        getOrCreateSubscriberSet(target = this) {
+            return (this.subscribers.get(target) ||
+                (this.subscribers.set(target, new Set()) && this.subscribers.get(target)));
+        }
+        createCSS() {
+            return this.cssVar || "";
+        }
+        getValueFor(element) {
+            const value = DesignTokenNode.getOrCreate(element).get(this);
+            if (value !== undefined) {
+                return value;
+            }
+            throw new Error(`Value could not be retrieved for token named "${this.name}". Ensure the value is set for ${element} or an ancestor of ${element}.`);
+        }
+        setValueFor(element, value) {
+            this._appliedTo.add(element);
+            if (value instanceof DesignTokenImpl) {
+                value = this.alias(value);
+            }
+            DesignTokenNode.getOrCreate(element).set(this, value);
+            return this;
+        }
+        deleteValueFor(element) {
+            this._appliedTo.delete(element);
+            if (DesignTokenNode.existsFor(element)) {
+                DesignTokenNode.getOrCreate(element).delete(this);
+            }
+            return this;
+        }
+        withDefault(value) {
+            this.setValueFor(defaultElement, value);
+            return this;
+        }
+        subscribe(subscriber, target) {
+            const subscriberSet = this.getOrCreateSubscriberSet(target);
+            if (target && !DesignTokenNode.existsFor(target)) {
+                DesignTokenNode.getOrCreate(target);
+            }
+            if (!subscriberSet.has(subscriber)) {
+                subscriberSet.add(subscriber);
+            }
+        }
+        unsubscribe(subscriber, target) {
+            const list = this.subscribers.get(target || this);
+            if (list && list.has(subscriber)) {
+                list.delete(subscriber);
+            }
+        }
+        /**
+         * Notifies subscribers that the value for an element has changed.
+         * @param element - The element to emit a notification for
+         */
+        notify(element) {
+            const record = Object.freeze({ token: this, target: element });
+            if (this.subscribers.has(this)) {
+                this.subscribers.get(this).forEach(sub => sub.handleChange(record));
+            }
+            if (this.subscribers.has(element)) {
+                this.subscribers.get(element).forEach(sub => sub.handleChange(record));
+            }
+        }
+        /**
+         * Alias the token to the provided token.
+         * @param token - the token to alias to
+         */
+        alias(token) {
+            return ((target) => token.getValueFor(target));
+        }
+    }
+    DesignTokenImpl.uniqueId = (() => {
+        let id = 0;
+        return () => {
+            id++;
+            return id.toString(16);
+        };
+    })();
+    /**
+     * Token storage by token ID
+     */
+    DesignTokenImpl.tokensById = new Map();
+    class CustomPropertyReflector {
+        startReflection(token, target) {
+            token.subscribe(this, target);
+            this.handleChange({ token, target });
+        }
+        stopReflection(token, target) {
+            token.unsubscribe(this, target);
+            this.remove(token, target);
+        }
+        handleChange(record) {
+            const { token, target } = record;
+            this.add(token, target);
+        }
+        add(token, target) {
+            PropertyTargetManager.getOrCreate(target).setProperty(token.cssCustomProperty, this.resolveCSSValue(DesignTokenNode.getOrCreate(target).get(token)));
+        }
+        remove(token, target) {
+            PropertyTargetManager.getOrCreate(target).removeProperty(token.cssCustomProperty);
+        }
+        resolveCSSValue(value) {
+            return value && typeof value.createCSS === "function" ? value.createCSS() : value;
+        }
+    }
+    /**
+     * A light wrapper around BindingObserver to handle value caching and
+     * token notification
+     */
+    class DesignTokenBindingObserver {
+        constructor(source, token, node) {
+            this.source = source;
+            this.token = token;
+            this.node = node;
+            this.dependencies = new Set();
+            this.observer = Observable.binding(source, this, false);
+            // This is a little bit hacky because it's using internal APIs of BindingObserverImpl.
+            // BindingObserverImpl queues updates to batch it's notifications which doesn't work for this
+            // scenario because the DesignToken.getValueFor API is not async. Without this, using DesignToken.getValueFor()
+            // after DesignToken.setValueFor() when setting a dependency of the value being retrieved can return a stale
+            // value. Assigning .handleChange to .call forces immediate invocation of this classes handleChange() method,
+            // allowing resolution of values synchronously.
+            // TODO: https://github.com/microsoft/fast/issues/5110
+            this.observer.handleChange = this.observer.call;
+            this.handleChange();
+        }
+        disconnect() {
+            this.observer.disconnect();
+        }
+        /**
+         * @internal
+         */
+        handleChange() {
+            this.node.store.set(this.token, this.observer.observe(this.node.target, defaultExecutionContext));
+        }
+    }
+    /**
+     * Stores resolved token/value pairs and notifies on changes
+     */
+    class Store {
+        constructor() {
+            this.values = new Map();
+        }
+        set(token, value) {
+            if (this.values.get(token) !== value) {
+                this.values.set(token, value);
+                Observable.getNotifier(this).notify(token.id);
+            }
+        }
+        get(token) {
+            Observable.track(this, token.id);
+            return this.values.get(token);
+        }
+        delete(token) {
+            this.values.delete(token);
+        }
+        all() {
+            return this.values.entries();
+        }
+    }
+    const nodeCache = new WeakMap();
+    const childToParent = new WeakMap();
+    /**
+     * A node responsible for setting and getting token values,
+     * emitting values to CSS custom properties, and maintaining
+     * inheritance structures.
+     */
+    class DesignTokenNode {
+        constructor(target) {
+            this.target = target;
+            /**
+             * Stores all resolved token values for a node
+             */
+            this.store = new Store();
+            /**
+             * All children assigned to the node
+             */
+            this.children = [];
+            /**
+             * All values explicitly assigned to the node in their raw form
+             */
+            this.assignedValues = new Map();
+            /**
+             * Tokens currently being reflected to CSS custom properties
+             */
+            this.reflecting = new Set();
+            /**
+             * Binding observers for assigned and inherited derived values.
+             */
+            this.bindingObservers = new Map();
+            /**
+             * Emits notifications to token when token values
+             * change the DesignTokenNode
+             */
+            this.tokenValueChangeHandler = {
+                handleChange: (source, arg) => {
+                    const token = DesignTokenImpl.getTokenById(arg);
+                    if (token) {
+                        // Notify any token subscribers
+                        token.notify(this.target);
+                        if (DesignTokenImpl.isCSSDesignToken(token)) {
+                            const parent = this.parent;
+                            const reflecting = this.isReflecting(token);
+                            if (parent) {
+                                const parentValue = parent.get(token);
+                                const sourceValue = source.get(token);
+                                if (parentValue !== sourceValue && !reflecting) {
+                                    this.reflectToCSS(token);
+                                }
+                                else if (parentValue === sourceValue && reflecting) {
+                                    this.stopReflectToCSS(token);
+                                }
+                            }
+                            else if (!reflecting) {
+                                this.reflectToCSS(token);
+                            }
+                        }
+                    }
+                },
+            };
+            nodeCache.set(target, this);
+            // Map store change notifications to token change notifications
+            Observable.getNotifier(this.store).subscribe(this.tokenValueChangeHandler);
+            if (target instanceof FASTElement) {
+                target.$fastController.addBehaviors([this]);
+            }
+            else if (target.isConnected) {
+                this.bind();
+            }
+        }
+        /**
+         * Returns a DesignTokenNode for an element.
+         * Creates a new instance if one does not already exist for a node,
+         * otherwise returns the cached instance
+         *
+         * @param target - The HTML element to retrieve a DesignTokenNode for
+         */
+        static getOrCreate(target) {
+            return nodeCache.get(target) || new DesignTokenNode(target);
+        }
+        /**
+         * Determines if a DesignTokenNode has been created for a target
+         * @param target - The element to test
+         */
+        static existsFor(target) {
+            return nodeCache.has(target);
+        }
+        /**
+         * Searches for and return the nearest parent DesignTokenNode.
+         * Null is returned if no node is found or the node provided is for a default element.
+         */
+        static findParent(node) {
+            if (!(defaultElement === node.target)) {
+                let parent = composedParent(node.target);
+                while (parent !== null) {
+                    if (nodeCache.has(parent)) {
+                        return nodeCache.get(parent);
+                    }
+                    parent = composedParent(parent);
+                }
+                return DesignTokenNode.getOrCreate(defaultElement);
+            }
+            return null;
+        }
+        /**
+         * Finds the closest node with a value explicitly assigned for a token, otherwise null.
+         * @param token - The token to look for
+         * @param start - The node to start looking for value assignment
+         * @returns
+         */
+        static findClosestAssignedNode(token, start) {
+            let current = start;
+            do {
+                if (current.has(token)) {
+                    return current;
+                }
+                current = current.parent
+                    ? current.parent
+                    : current.target !== defaultElement
+                        ? DesignTokenNode.getOrCreate(defaultElement)
+                        : null;
+            } while (current !== null);
+            return null;
+        }
+        /**
+         * The parent DesignTokenNode, or null.
+         */
+        get parent() {
+            return childToParent.get(this) || null;
+        }
+        /**
+         * Checks if a token has been assigned an explicit value the node.
+         * @param token - the token to check.
+         */
+        has(token) {
+            return this.assignedValues.has(token);
+        }
+        /**
+         * Gets the value of a token for a node
+         * @param token - The token to retrieve the value for
+         * @returns
+         */
+        get(token) {
+            const value = this.store.get(token);
+            if (value !== undefined) {
+                return value;
+            }
+            const raw = this.getRaw(token);
+            if (raw !== undefined) {
+                this.hydrate(token, raw);
+                return this.get(token);
+            }
+        }
+        /**
+         * Retrieves the raw assigned value of a token from the nearest assigned node.
+         * @param token - The token to retrieve a raw value for
+         * @returns
+         */
+        getRaw(token) {
+            var _a;
+            if (this.assignedValues.has(token)) {
+                return this.assignedValues.get(token);
+            }
+            return (_a = DesignTokenNode.findClosestAssignedNode(token, this)) === null || _a === void 0 ? void 0 : _a.getRaw(token);
+        }
+        /**
+         * Sets a token to a value for a node
+         * @param token - The token to set
+         * @param value - The value to set the token to
+         */
+        set(token, value) {
+            if (DesignTokenImpl.isDerivedDesignTokenValue(this.assignedValues.get(token))) {
+                this.tearDownBindingObserver(token);
+            }
+            this.assignedValues.set(token, value);
+            if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
+                this.setupBindingObserver(token, value);
+            }
+            else {
+                this.store.set(token, value);
+            }
+        }
+        /**
+         * Deletes a token value for the node.
+         * @param token - The token to delete the value for
+         */
+        delete(token) {
+            this.assignedValues.delete(token);
+            this.tearDownBindingObserver(token);
+            const upstream = this.getRaw(token);
+            if (upstream) {
+                this.hydrate(token, upstream);
+            }
+            else {
+                this.store.delete(token);
+            }
+        }
+        /**
+         * Invoked when the DesignTokenNode.target is attached to the document
+         */
+        bind() {
+            const parent = DesignTokenNode.findParent(this);
+            if (parent) {
+                parent.appendChild(this);
+            }
+            for (const key of this.assignedValues.keys()) {
+                key.notify(this.target);
+            }
+        }
+        /**
+         * Invoked when the DesignTokenNode.target is detached from the document
+         */
+        unbind() {
+            if (this.parent) {
+                const parent = childToParent.get(this);
+                parent.removeChild(this);
+            }
+        }
+        /**
+         * Appends a child to a parent DesignTokenNode.
+         * @param child - The child to append to the node
+         */
+        appendChild(child) {
+            if (child.parent) {
+                childToParent.get(child).removeChild(child);
+            }
+            const reParent = this.children.filter(x => child.contains(x));
+            childToParent.set(child, this);
+            this.children.push(child);
+            reParent.forEach(x => child.appendChild(x));
+            Observable.getNotifier(this.store).subscribe(child);
+            // How can we not notify *every* subscriber?
+            for (const [token, value] of this.store.all()) {
+                child.hydrate(token, this.bindingObservers.has(token) ? this.getRaw(token) : value);
+            }
+        }
+        /**
+         * Removes a child from a node.
+         * @param child - The child to remove.
+         */
+        removeChild(child) {
+            const childIndex = this.children.indexOf(child);
+            if (childIndex !== -1) {
+                this.children.splice(childIndex, 1);
+            }
+            Observable.getNotifier(this.store).unsubscribe(child);
+            return child.parent === this ? childToParent.delete(child) : false;
+        }
+        /**
+         * Tests whether a provided node is contained by
+         * the calling node.
+         * @param test - The node to test
+         */
+        contains(test) {
+            return composedContains(this.target, test.target);
+        }
+        /**
+         * Instructs the node to reflect a design token for the provided token.
+         * @param token - The design token to reflect
+         */
+        reflectToCSS(token) {
+            if (!this.isReflecting(token)) {
+                this.reflecting.add(token);
+                DesignTokenNode.cssCustomPropertyReflector.startReflection(token, this.target);
+            }
+        }
+        /**
+         * Stops reflecting a DesignToken to CSS
+         * @param token - The design token to stop reflecting
+         */
+        stopReflectToCSS(token) {
+            if (this.isReflecting(token)) {
+                this.reflecting.delete(token);
+                DesignTokenNode.cssCustomPropertyReflector.stopReflection(token, this.target);
+            }
+        }
+        /**
+         * Determines if a token is being reflected to CSS for a node.
+         * @param token - The token to check for reflection
+         * @returns
+         */
+        isReflecting(token) {
+            return this.reflecting.has(token);
+        }
+        /**
+         * Handle changes to upstream tokens
+         * @param source - The parent DesignTokenNode
+         * @param property - The token ID that changed
+         */
+        handleChange(source, property) {
+            const token = DesignTokenImpl.getTokenById(property);
+            if (!token) {
+                return;
+            }
+            this.hydrate(token, this.getRaw(token));
+        }
+        /**
+         * Hydrates a token with a DesignTokenValue, making retrieval available.
+         * @param token - The token to hydrate
+         * @param value - The value to hydrate
+         */
+        hydrate(token, value) {
+            if (!this.has(token)) {
+                const observer = this.bindingObservers.get(token);
+                if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
+                    if (observer) {
+                        // If the binding source doesn't match, we need
+                        // to update the binding
+                        if (observer.source !== value) {
+                            this.tearDownBindingObserver(token);
+                            this.setupBindingObserver(token, value);
+                        }
+                    }
+                    else {
+                        this.setupBindingObserver(token, value);
+                    }
+                }
+                else {
+                    if (observer) {
+                        this.tearDownBindingObserver(token);
+                    }
+                    this.store.set(token, value);
+                }
+            }
+        }
+        /**
+         * Sets up a binding observer for a derived token value that notifies token
+         * subscribers on change.
+         *
+         * @param token - The token to notify when the binding updates
+         * @param source - The binding source
+         */
+        setupBindingObserver(token, source) {
+            const binding = new DesignTokenBindingObserver(source, token, this);
+            this.bindingObservers.set(token, binding);
+            return binding;
+        }
+        /**
+         * Tear down a binding observer for a token.
+         */
+        tearDownBindingObserver(token) {
+            if (this.bindingObservers.has(token)) {
+                this.bindingObservers.get(token).disconnect();
+                this.bindingObservers.delete(token);
+                return true;
+            }
+            return false;
+        }
+    }
+    /**
+     * Responsible for reflecting tokens to CSS custom properties
+     */
+    DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
+    __decorate$1([
+        observable
+    ], DesignTokenNode.prototype, "children", void 0);
+    function create(nameOrConfig) {
+        return DesignTokenImpl.from(nameOrConfig);
+    }
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    /**
+     * Factory object for creating {@link (DesignToken:interface)} instances.
+     * @public
+     */
+    const DesignToken = Object.freeze({
+        create,
         /**
          * Informs DesignToken that an HTMLElement for which tokens have
          * been set has been connected to the document.
@@ -13059,7 +13692,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$p = css `
+    const styles$s = css `
     :host {
         contain: layout;
         display: block;
@@ -13083,7 +13716,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$p
+        styles: styles$s
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -13420,7 +14053,7 @@
 
     const template$5 = html `<slot></slot>`;
 
-    const styles$o = css `
+    const styles$r = css `
     :host {
         display: contents;
     }
@@ -13476,7 +14109,7 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$o,
+        styles: styles$r,
         template: template$5
     });
     DesignSystem.getOrCreate()
@@ -13725,7 +14358,7 @@
      */
     const themeBehavior = (lightStyle, darkStyleOrAlias, colorStyleOrAlias) => new ThemeStyleSheetBehavior(lightStyle, darkStyleOrAlias, colorStyleOrAlias);
 
-    const styles$n = css `
+    const styles$q = css `
     ${display('inline-block')}
 
     :host {
@@ -13788,7 +14421,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$n
+        styles: styles$q
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -14363,578 +14996,1102 @@
     };
 
     /**
-     * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
+     * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
+     */
+    /**
+     * 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 = `:${focusVisible$1}`;
+
+    const styles$p = css `
+    ${display('inline-flex')}
+
+    :host {
+        height: ${controlHeight};
+        box-sizing: border-box;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        padding-left: calc(4px - ${borderWidth});
+    }
+
+    .listitem {
+        display: flex;
+        align-items: center;
+    }
+
+    .control {
+        color: var(--ni-private-breadcrumb-link-font-color);
+        cursor: default;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: ${borderWidth} solid transparent;
+        padding-right: calc(4px - ${borderWidth});
+    }
+
+    .control:link {
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    .control:hover {
+        text-decoration: underline;
+    }
+
+    .control:active {
+        color: var(--ni-private-breadcrumb-link-active-font-color);
+        text-decoration: underline;
+    }
+
+    .control:link${focusVisible} {
+        border: ${borderWidth} solid ${borderHoverColor};
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: 1px;
+    }
+
+    .start,
+    .end {
+        display: flex;
+        align-items: center;
+    }
+
+    .start {
+        margin-inline-end: 4px;
+    }
+
+    slot[name='separator'] {
+        display: flex;
+        align-items: center;
+    }
+
+    slot[name='separator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    slot[name='separator'] path {
+        fill: ${placeholderFontColor};
+    }
+`;
+
+    /**
+     * A nimble-styled breadcrumb item
      */
+    class BreadcrumbItem extends BreadcrumbItem$1 {
+    }
+    const nimbleBreadcrumbItem = BreadcrumbItem.compose({
+        baseName: 'breadcrumb-item',
+        baseClass: BreadcrumbItem$1,
+        template: breadcrumbItemTemplate,
+        styles: styles$p,
+        separator: forwardSlash16X16.data
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleBreadcrumbItem());
+
     /**
-     * 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.
+     * Behavior that will conditionally apply a stylesheet based on the element's
+     * appearance property
+     *
+     * @param value - The value of the appearance property
+     * @param styles - The styles to be applied when condition matches
      *
      * @public
      */
-    const focusVisible = `:${focusVisible$1}`;
+    function appearanceBehavior(value, styles) {
+        return new PropertyStyleSheetBehavior('appearance', value, styles);
+    }
 
-    const styles$m = css `
+    /**
+     * Types of button appearance.
+     * @public
+     */
+    const ButtonAppearance = {
+        outline: 'outline',
+        ghost: 'ghost',
+        block: 'block'
+    };
+
+    const styles$o = css `
     ${display('inline-flex')}
 
     :host {
+        background-color: transparent;
         height: ${controlHeight};
+        color: ${buttonLabelFontColor};
+        font: ${buttonLabelFont};
+        cursor: pointer;
+        outline: none;
+        border: none;
         box-sizing: border-box;
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        padding-left: calc(4px - ${borderWidth});
+        ${
+/*
+    Not sure why but this is needed to get buttons with icons and buttons
+    without icons to align on the same line when the button is inline-flex
+    See: https://github.com/microsoft/fast/issues/5414
+*/ ''}
+        vertical-align: middle;
+    }
+
+    :host([disabled]) {
+        color: ${buttonLabelDisabledFontColor};
+        cursor: default;
+    }
+
+    .control {
+        background-color: transparent;
+        height: 100%;
+        width: 100%;
+        border: ${borderWidth} solid transparent;
+        box-sizing: border-box;
+        color: inherit;
+        border-radius: inherit;
+        fill: inherit;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        cursor: inherit;
+        font: inherit;
+        outline: none;
+        margin: 0;
+        padding: 0 ${standardPadding};
+        transition: box-shadow ${smallDelay};
+    }
+
+    :host([content-hidden]) .control {
+        width: ${controlHeight};
+        padding: 0px;
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+
+    .control:hover {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        outline: none;
+    }
+
+    .control${focusVisible} {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -4px;
+    }
+
+    .control:active {
+        box-shadow: none;
+        outline: none;
+    }
+
+    .control[disabled] {
+        box-shadow: none;
+        outline: none;
+    }
+
+    .content {
+        display: contents;
     }
 
-    .listitem {
-        display: flex;
-        align-items: center;
-    }
+    :host([content-hidden]) .content {
+        ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+        display: inline-block;
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        margin: -1px;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
+    }
+
+    [part='start'] {
+        display: contents;
+        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+    }
+
+    :host([disabled]) slot[name='start']::slotted(*) {
+        opacity: 0.3;
+    }
+
+    [part='end'] {
+        display: contents;
+        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+    }
+
+    :host([disabled]) slot[name='end']::slotted(*) {
+        opacity: 0.3;
+    }
+
+    :host([content-hidden]) [part='end'] {
+        display: none;
+    }
+`
+        // prettier-ignore
+        .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+                .control {
+                    background-color: transparent;
+                    border-color: rgba(${actionRgbPartialColor}, 0.3);
+                }
+
+                .control:hover {
+                    background-color: transparent;
+                    border-color: ${borderHoverColor};
+                }
+
+                .control${focusVisible} {
+                    background-color: transparent;
+                    border-color: ${borderHoverColor};
+                }
+
+                .control:active {
+                    background-color: ${fillSelectedColor};
+                    border-color: ${fillSelectedColor};
+                }
+
+                .control[disabled] {
+                    background-color: transparent;
+                    border-color: rgba(${borderRgbPartialColor}, 0.2);
+                }
+            `), appearanceBehavior(ButtonAppearance.ghost, css `
+                .control {
+                    background-color: transparent;
+                    border-color: transparent;
+                }
+
+                .control:hover {
+                    background-color: transparent;
+                    border-color: ${borderHoverColor};
+                }
+
+                .control${focusVisible} {
+                    background-color: transparent;
+                    border-color: ${borderHoverColor};
+                }
+
+                .control:active {
+                    background-color: ${fillSelectedColor};
+                    border-color: ${fillSelectedColor};
+                }
+
+                .control[disabled] {
+                    background-color: transparent;
+                    border-color: transparent;
+                }
+            `), appearanceBehavior(ButtonAppearance.block, css `
+                .control {
+                    background-color: rgba(${borderRgbPartialColor}, 0.1);
+                    border-color: transparent;
+                }
+
+                .control:hover {
+                    background-color: transparent;
+                    border-color: ${borderHoverColor};
+                }
+
+                .control${focusVisible} {
+                    background-color: rgba(${borderRgbPartialColor}, 0.1);
+                    border-color: ${borderHoverColor};
+                }
+
+                .control${focusVisible}:hover {
+                    background-color: transparent;
+                }
+
+                .control:active {
+                    background-color: ${fillSelectedColor};
+                    border-color: ${fillSelectedColor};
+                }
+
+                .control[disabled] {
+                    background-color: rgba(${borderRgbPartialColor}, 0.1);
+                    border-color: transparent;
+                }
+            `));
+
+    // prettier-ignore
+    const styles$n = styles$o
+        .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+                :host(.primary) .control {
+                    box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
+                }
+
+                :host(.primary) .control:hover {
+                    box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+                }
 
-    .control {
-        color: var(--ni-private-breadcrumb-link-font-color);
-        cursor: default;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: ${borderWidth} solid transparent;
-        padding-right: calc(4px - ${borderWidth});
-    }
+                :host(.primary) .control${focusVisible} {
+                    box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+                }
 
-    .control:link {
-        cursor: pointer;
-        text-decoration: none;
-    }
+                :host(.primary) .control:active {
+                    box-shadow: none;
+                }
 
-    .control:hover {
-        text-decoration: underline;
-    }
+                :host(.primary) .control[disabled] {
+                    box-shadow: none;
+                }
+            `), appearanceBehavior(ButtonAppearance.block, css `
+                :host(.primary) .control {
+                    background-clip: padding-box;
+                    border-color: rgba(${actionRgbPartialColor}, 0.3);
+                    border-width: calc(2 * ${borderWidth});
+                    padding: 0 calc(${standardPadding} - ${borderWidth});
+                }
 
-    .control:active {
-        color: var(--ni-private-breadcrumb-link-active-font-color);
-        text-decoration: underline;
-    }
+                :host(.primary[content-hidden]) .control {
+                    padding: 0px;
+                }
 
-    .control:link${focusVisible} {
-        border: ${borderWidth} solid ${borderHoverColor};
-        outline: 2px solid ${borderHoverColor};
-        outline-offset: 1px;
-    }
+                :host(.primary) .control:hover {
+                    border-color: ${borderHoverColor};
+                    box-shadow: none;
+                }
 
-    .start,
-    .end {
-        display: flex;
-        align-items: center;
-    }
+                :host(.primary) .control${focusVisible} {
+                    background-clip: border-box;
+                    border-color: ${borderHoverColor};
+                    border-width: ${borderWidth};
+                    box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+                    padding: 0 ${standardPadding};
+                }
 
-    .start {
-        margin-inline-end: 4px;
-    }
+                :host(.primary[content-hidden]) .control${focusVisible} {
+                    padding: 0px;
+                }
 
-    slot[name='separator'] {
-        display: flex;
-        align-items: center;
-    }
+                :host(.primary) .control:active {
+                    background-clip: border-box;
+                    border-color: ${fillSelectedColor};
+                    border-width: ${borderWidth};
+                    box-shadow: none;
+                    padding: 0 ${standardPadding};
+                }
 
-    slot[name='separator'] svg {
-        width: ${iconSize};
-        height: ${iconSize};
-    }
+                :host(.primary[content-hidden]) .control:active {
+                    padding: 0px;
+                }
 
-    slot[name='separator'] path {
-        fill: ${placeholderFontColor};
-    }
-`;
+                :host(.primary) .control[disabled] {
+                    background-clip: border-box;
+                    border-color: transparent;
+                    border-width: ${borderWidth};
+                    box-shadow: none;
+                    padding: 0 ${standardPadding};
+                }
 
-    /**
-     * A nimble-styled breadcrumb item
-     */
-    class BreadcrumbItem extends BreadcrumbItem$1 {
-    }
-    const nimbleBreadcrumbItem = BreadcrumbItem.compose({
-        baseName: 'breadcrumb-item',
-        baseClass: BreadcrumbItem$1,
-        template: breadcrumbItemTemplate,
-        styles: styles$m,
-        separator: forwardSlash16X16.data
-    });
-    DesignSystem.getOrCreate()
-        .withPrefix('nimble')
-        .register(nimbleBreadcrumbItem());
+                :host(.primary[content-hidden]) .control[disabled] {
+                    padding: 0px;
+                }
+            `));
 
     /**
-     * Behavior that will conditionally apply a stylesheet based on the element's
-     * appearance property
-     *
-     * @param value - The value of the appearance property
-     * @param styles - The styles to be applied when condition matches
-     *
-     * @public
+     * A nimble-styled HTML button
      */
-    function appearanceBehavior(value, styles) {
-        return new PropertyStyleSheetBehavior('appearance', value, styles);
+    class Button extends Button$1 {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: appearance
+             */
+            this.appearance = ButtonAppearance.outline;
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: content-hidden
+             */
+            this.contentHidden = false;
+        }
     }
-
+    __decorate([
+        attr
+    ], Button.prototype, "appearance", void 0);
+    __decorate([
+        attr({ attribute: 'content-hidden', mode: 'boolean' })
+    ], Button.prototype, "contentHidden", void 0);
     /**
-     * Types of button appearance.
+     * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
+     * Implements {@link @microsoft/fast-foundation#buttonTemplate}
+     *
      * @public
+     * @remarks
+     * Generates HTML Element: \<nimble-button\>
+     *
      */
-    const ButtonAppearance = {
-        outline: 'outline',
-        ghost: 'ghost',
-        block: 'block'
-    };
+    const nimbleButton = Button.compose({
+        baseName: 'button',
+        baseClass: Button$1,
+        template: buttonTemplate,
+        styles: styles$n,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('inline-flex')}
 
     :host {
-        background-color: transparent;
-        height: ${controlHeight};
-        color: ${buttonLabelFontColor};
         font: ${buttonLabelFont};
+        align-items: center;
         cursor: pointer;
         outline: none;
-        border: none;
-        box-sizing: border-box;
-        ${
-/*
-    Not sure why but this is needed to get buttons with icons and buttons
-    without icons to align on the same line when the button is inline-flex
-    See: https://github.com/microsoft/fast/issues/5414
-*/ ''}
-        vertical-align: middle;
+        user-select: none;
     }
 
     :host([disabled]) {
-        color: ${buttonLabelDisabledFontColor};
         cursor: default;
     }
 
     .control {
-        background-color: transparent;
-        height: 100%;
-        width: 100%;
-        border: ${borderWidth} solid transparent;
+        width: calc(${controlHeight} / 2);
+        height: calc(${controlHeight} / 2);
         box-sizing: border-box;
-        color: inherit;
-        border-radius: inherit;
-        fill: inherit;
+        flex-shrink: 0;
+        border: ${borderWidth} solid ${borderColor};
+        padding: 2px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        gap: 4px;
-        cursor: inherit;
-        font: inherit;
-        outline: none;
-        margin: 0;
-        padding: 0 ${standardPadding};
         transition: box-shadow ${smallDelay};
+        ${
+/*
+ * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).
+ * Set it to 0 to ensure the outline is just as high as the control.
+ */ ''}
+        line-height: 0;
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+
+    :host([disabled]) .control {
+        background-color: rgba(${borderRgbPartialColor}, 0.1);
+        border-color: rgba(${borderRgbPartialColor}, 0.2);
+    }
+
+    :host(:not([disabled]):not(:active):hover) .control {
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+    }
+
+    :host(${focusVisible}) .control {
+        border-color: ${borderHoverColor};
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: 2px;
+    }
+
+    .label {
+        font: inherit;
+        color: ${bodyFontColor};
+        padding-left: 1ch;
+        cursor: inherit;
+    }
+
+    :host([disabled]) .label {
+        color: ${bodyDisabledFontColor};
+    }
+
+    slot[name='checked-indicator'],
+    slot[name='indeterminate-indicator'] {
+        display: none;
+    }
+
+    slot[name='checked-indicator'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+        overflow: visible;
     }
 
-    :host([content-hidden]) .control {
-        width: ${controlHeight};
-        padding: 0px;
+    :host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {
+        display: contents;
     }
 
-    @media (prefers-reduced-motion) {
-        .control {
-            transition-duration: 0s;
-        }
+    slot[name='checked-indicator'] path {
+        fill: ${borderColor};
     }
 
-    .control:hover {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-        outline: none;
+    :host([disabled]) slot[name='checked-indicator'] path {
+        fill: rgba(${borderRgbPartialColor}, 0.3);
     }
 
-    .control${focusVisible} {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-        outline: ${borderWidth} solid ${borderHoverColor};
-        outline-offset: -4px;
+    slot[name='indeterminate-indicator'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+        overflow: visible;
     }
 
-    .control:active {
-        box-shadow: none;
-        outline: none;
+    :host(.indeterminate) slot[name='indeterminate-indicator'] {
+        display: contents;
     }
 
-    .control[disabled] {
-        box-shadow: none;
-        outline: none;
+    slot[name='indeterminate-indicator'] path {
+        fill: ${borderColor};
     }
 
-    .content {
-        display: contents;
+    :host([disabled]) slot[name='indeterminate-indicator'] path {
+        fill: rgba(${borderRgbPartialColor}, 0.3);
     }
+`;
 
-    :host([content-hidden]) .content {
-        ${
-/**
- * Hide content visually while keeping it screen reader-accessible.
- * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
- * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
- */
-''}
-        display: inline-block;
-        height: 1px;
-        width: 1px;
-        position: absolute;
-        margin: -1px;
-        clip: rect(1px, 1px, 1px, 1px);
-        clip-path: inset(50%);
-        overflow: hidden;
-        padding: 0;
+    /**
+     * A nimble-styled checkbox control.
+     */
+    class Checkbox extends Checkbox$1 {
     }
+    const nimbleCheckbox = Checkbox.compose({
+        baseName: 'checkbox',
+        baseClass: Checkbox$1,
+        template: checkboxTemplate,
+        styles: styles$m,
+        checkedIndicator: check16X16.data,
+        indeterminateIndicator: minus16X16.data
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    [part='start'] {
-        display: contents;
-        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+    const errorTextTemplate = html `
+    <div class="error-text" title="${x => x.errorText}" aria-live="polite">
+        ${x => x.errorText}
+    </div>
+`;
+
+    const template$4 = html `
+    <template>
+        <div class="icon" :innerHTML=${x => x.icon.data}></div>
+    </template
+`;
+
+    const styles$l = css `
+    ${display('inline-flex')}
+
+    :host {
+        align-items: center;
+        user-select: none;
+        width: ${iconSize};
+        height: ${iconSize};
     }
 
-    :host([disabled]) slot[name='start']::slotted(*) {
-        opacity: 0.3;
+    .icon {
+        width: 100%;
+        height: 100%;
     }
 
-    [part='end'] {
-        display: contents;
-        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+    :host(.fail) {
+        ${iconColor.cssCustomProperty}: ${failColor};
     }
 
-    :host([disabled]) slot[name='end']::slotted(*) {
-        opacity: 0.3;
+    :host(.warning) {
+        ${iconColor.cssCustomProperty}: ${warningColor};
     }
 
-    :host([content-hidden]) [part='end'] {
-        display: none;
+    :host(.pass) {
+        ${iconColor.cssCustomProperty}: ${passColor};
     }
-`
-        // prettier-ignore
-        .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
-                .control {
-                    background-color: transparent;
-                    border-color: rgba(${actionRgbPartialColor}, 0.3);
-                }
 
-                .control:hover {
-                    background-color: transparent;
-                    border-color: ${borderHoverColor};
-                }
+    .icon svg {
+        fill: ${iconColor};
+        width: 100%;
+        height: 100%;
+    }
+`;
 
-                .control${focusVisible} {
-                    background-color: transparent;
-                    border-color: ${borderHoverColor};
-                }
+    /**
+     * The base class for icon components
+     */
+    class Icon extends FoundationElement {
+        constructor(icon) {
+            super();
+            this.icon = icon;
+        }
+    }
+    const registerIcon = (baseName, iconClass) => {
+        const composedIcon = iconClass.compose({
+            baseName,
+            template: template$4,
+            styles: styles$l,
+            baseClass: iconClass
+        });
+        DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
+    };
 
-                .control:active {
-                    background-color: ${fillSelectedColor};
-                    border-color: ${fillSelectedColor};
-                }
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'exclamationMark' icon
+     */
+    class IconExclamationMark extends Icon {
+        constructor() {
+            super(exclamationMark16X16);
+        }
+    }
+    registerIcon('icon-exclamation-mark', IconExclamationMark);
 
-                .control[disabled] {
-                    background-color: transparent;
-                    border-color: rgba(${borderRgbPartialColor}, 0.2);
-                }
-            `), appearanceBehavior(ButtonAppearance.ghost, css `
-                .control {
-                    background-color: transparent;
-                    border-color: transparent;
-                }
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'arrowExpanderDown' icon
+     */
+    class IconArrowExpanderDown extends Icon {
+        constructor() {
+            super(arrowExpanderDown16X16);
+        }
+    }
+    registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
 
-                .control:hover {
-                    background-color: transparent;
-                    border-color: ${borderHoverColor};
-                }
+    const styles$k = css `
+    ${display('inline-flex')}
 
-                .control${focusVisible} {
-                    background-color: transparent;
-                    border-color: ${borderHoverColor};
-                }
+    :host {
+        box-sizing: border-box;
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+        height: ${controlHeight};
+        position: relative;
+        justify-content: center;
+        user-select: none;
+        min-width: 250px;
+        outline: none;
+        vertical-align: top;
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
+        --ni-private-focus-indicator-width: 1px;
+        --ni-private-indicator-lines-gap: 1px;
+    }
 
-                .control:active {
-                    background-color: ${fillSelectedColor};
-                    border-color: ${fillSelectedColor};
-                }
+    :host::before {
+        content: '';
+        position: absolute;
+        bottom: calc(
+            var(--ni-private-hover-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
+        );
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
 
-                .control[disabled] {
-                    background-color: transparent;
-                    border-color: transparent;
-                }
-            `), appearanceBehavior(ButtonAppearance.block, css `
-                .control {
-                    background-color: rgba(${borderRgbPartialColor}, 0.1);
-                    border-color: transparent;
-                }
+    @media (prefers-reduced-motion) {
+        :host::before {
+            transition-duration: 0s;
+        }
+    }
 
-                .control:hover {
-                    background-color: transparent;
-                    border-color: ${borderHoverColor};
-                }
+    :host(${focusVisible})::before {
+        width: calc(100% - 8px);
+    }
+
+    :host::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    :host(.invalid)::after {
+        border-bottom-color: ${failColor};
+    }
 
-                .control${focusVisible} {
-                    background-color: rgba(${borderRgbPartialColor}, 0.1);
-                    border-color: ${borderHoverColor};
-                }
+    @media (prefers-reduced-motion) {
+        :host::after {
+            transition-duration: 0s;
+        }
+    }
 
-                .control${focusVisible}:hover {
-                    background-color: transparent;
-                }
+    :host(:hover)::after,
+    :host(${focusVisible})::after {
+        width: 100%;
+    }
 
-                .control:active {
-                    background-color: ${fillSelectedColor};
-                    border-color: ${fillSelectedColor};
-                }
+    :host([disabled]:hover)::after {
+        width: 0px;
+    }
 
-                .control[disabled] {
-                    background-color: rgba(${borderRgbPartialColor}, 0.1);
-                    border-color: transparent;
-                }
-            `));
+    .control {
+        align-items: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        min-height: 100%;
+        width: 100%;
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+        background-color: transparent;
+        padding-left: 8px;
+        padding-bottom: 1px;
+    }
 
-    // prettier-ignore
-    const styles$k = styles$l
-        .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
-                :host(.primary) .control {
-                    box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
-                }
+    :host(.open:not(:hover)) .control {
+        border-bottom-color: ${borderHoverColor};
+    }
 
-                :host(.primary) .control:hover {
-                    box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-                }
+    :host([disabled]) .control {
+        cursor: default;
+        color: ${bodyDisabledFontColor};
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
+    }
 
-                :host(.primary) .control${focusVisible} {
-                    box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-                }
+    .listbox {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex-direction: column;
+        left: 0;
+        overflow-y: auto;
+        position: absolute;
+        width: 100%;
+        --ni-private-listbox-padding: ${smallPadding};
+        max-height: calc(
+            var(--ni-private-select-max-height) - 2 *
+                var(--ni-private-listbox-padding)
+        );
+        z-index: 1;
+        padding: var(--ni-private-listbox-padding);
+        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
+        border: 1px solid ${popupBorderColor};
+        background-color: ${applicationBackgroundColor};
+        background-clip: padding-box;
+    }
 
-                :host(.primary) .control:active {
-                    box-shadow: none;
-                }
+    .listbox[hidden] {
+        display: none;
+    }
 
-                :host(.primary) .control[disabled] {
-                    box-shadow: none;
-                }
-            `), appearanceBehavior(ButtonAppearance.block, css `
-                :host(.primary) .control {
-                    background-clip: padding-box;
-                    border-color: rgba(${actionRgbPartialColor}, 0.3);
-                    border-width: calc(2 * ${borderWidth});
-                    padding: 0 calc(${standardPadding} - ${borderWidth});
-                }
+    :host([open][position='above']) .listbox {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 
-                :host(.primary[content-hidden]) .control {
-                    padding: 0px;
-                }
+    :host([open][position='below']) .listbox {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
 
-                :host(.primary) .control:hover {
-                    border-color: ${borderHoverColor};
-                    box-shadow: none;
-                }
+    :host([open][position='above']) .listbox {
+        bottom: ${controlHeight};
+    }
 
-                :host(.primary) .control${focusVisible} {
-                    background-clip: border-box;
-                    border-color: ${borderHoverColor};
-                    border-width: ${borderWidth};
-                    box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-                    padding: 0 ${standardPadding};
-                }
+    :host([open][position='below']) .listbox {
+        top: calc(${controlHeight} + ${smallPadding});
+    }
 
-                :host(.primary[content-hidden]) .control${focusVisible} {
-                    padding: 0px;
-                }
+    .selected-value {
+        flex: auto;
+        font-family: inherit;
+        text-align: start;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
 
-                :host(.primary) .control:active {
-                    background-clip: border-box;
-                    border-color: ${fillSelectedColor};
-                    border-width: ${borderWidth};
-                    box-shadow: none;
-                    padding: 0 ${standardPadding};
-                }
+    .indicator {
+        flex: none;
+        margin-inline-start: 1em;
+        padding-right: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 
-                :host(.primary[content-hidden]) .control:active {
-                    padding: 0px;
-                }
+    .indicator slot[name='indicator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        fill: ${bodyFontColor};
+    }
 
-                :host(.primary) .control[disabled] {
-                    background-clip: border-box;
-                    border-color: transparent;
-                    border-width: ${borderWidth};
-                    box-shadow: none;
-                    padding: 0 ${standardPadding};
-                }
+    :host([disabled]) .indicator slot[name='indicator'] svg {
+        fill: ${bodyDisabledFontColor};
+    }
 
-                :host(.primary[content-hidden]) .control[disabled] {
-                    padding: 0px;
-                }
-            `));
+    slot[name='listbox'] {
+        display: none;
+        width: 100%;
+    }
 
-    /**
-     * A nimble-styled HTML button
-     */
-    class Button extends Button$1 {
-        constructor() {
-            super(...arguments);
-            /**
-             * @public
-             * @remarks
-             * HTML Attribute: appearance
-             */
-            this.appearance = ButtonAppearance.outline;
-            /**
-             * @public
-             * @remarks
-             * HTML Attribute: content-hidden
-             */
-            this.contentHidden = false;
-        }
+    :host([open]) slot[name='listbox'] {
+        display: flex;
+        position: absolute;
     }
-    __decorate([
-        attr
-    ], Button.prototype, "appearance", void 0);
-    __decorate([
-        attr({ attribute: 'content-hidden', mode: 'boolean' })
-    ], Button.prototype, "contentHidden", void 0);
-    /**
-     * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
-     * Implements {@link @microsoft/fast-foundation#buttonTemplate}
-     *
-     * @public
-     * @remarks
-     * Generates HTML Element: \<nimble-button\>
-     *
-     */
-    const nimbleButton = Button.compose({
-        baseName: 'button',
-        baseClass: Button$1,
-        template: buttonTemplate,
-        styles: styles$k,
-        shadowOptions: {
-            delegatesFocus: true
-        }
-    });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
-    const styles$j = css `
-    ${display('inline-flex')}
+    .end {
+        margin-inline-start: auto;
+    }
 
-    :host {
-        font: ${buttonLabelFont};
-        align-items: center;
-        cursor: pointer;
-        outline: none;
-        user-select: none;
+    ::slotted([role='option']),
+    ::slotted(option) {
+        flex: none;
     }
+`;
 
-    :host([disabled]) {
-        cursor: default;
+    const styles$j = css `
+    .error-icon {
+        display: none;
     }
 
-    .control {
-        width: calc(${controlHeight} / 2);
-        height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
-        flex-shrink: 0;
-        border: ${borderWidth} solid ${borderColor};
-        padding: 2px;
+    :host(.invalid) .error-icon {
         display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition: box-shadow ${smallDelay};
-        ${
-/*
- * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).
- * Set it to 0 to ensure the outline is just as high as the control.
- */ ''}
-        line-height: 0;
+        width: ${iconSize};
+        height: ${iconSize};
+        flex: none;
     }
 
-    @media (prefers-reduced-motion) {
-        .control {
-            transition-duration: 0s;
-        }
+    .error-text {
+        display: none;
     }
 
-    :host([disabled]) .control {
-        background-color: rgba(${borderRgbPartialColor}, 0.1);
-        border-color: rgba(${borderRgbPartialColor}, 0.2);
+    :host(.invalid) .error-text {
+        display: block;
+        font: ${errorTextFont};
+        color: ${failColor};
+        width: 100%;
+        position: absolute;
+        top: ${controlHeight};
+        left: 0px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
-    :host(:not([disabled]):not(:active):hover) .control {
-        border-color: ${borderHoverColor};
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+    :host(.invalid[readonly]:not([disabled])) .error-text {
+        top: calc(${controlHeight} - ${borderWidth});
     }
 
-    :host(${focusVisible}) .control {
-        border-color: ${borderHoverColor};
-        outline: 2px solid ${borderHoverColor};
-        outline-offset: 2px;
+    :host(.invalid) .error-text:empty {
+        display: none;
     }
+`;
 
-    .label {
-        font: inherit;
-        color: ${bodyFontColor};
-        padding-left: 1ch;
-        cursor: inherit;
+    const styles$i = css `
+    ${styles$k}
+    ${styles$j}
+
+    :host {
+        --ni-private-hover-bottom-border-width: 2px;
+        --ni-private-bottom-border-width: 1px;
     }
 
-    :host([disabled]) .label {
+    :host([disabled]) *,
+    :host([disabled]) {
+        user-select: none;
         color: ${bodyDisabledFontColor};
     }
 
-    slot[name='checked-indicator'],
-    slot[name='indeterminate-indicator'] {
-        display: none;
+    .control {
+        bottom-border-width: var(--ni-private-bottom-border-width);
     }
 
-    slot[name='checked-indicator'] svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        overflow: visible;
+    :host(.invalid) .control {
+        border-bottom: var(--ni-private-bottom-border-width) solid ${failColor};
     }
 
-    :host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {
-        display: contents;
+    :host([disabled]) .control {
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    slot[name='checked-indicator'] path {
-        fill: ${borderColor};
+    :host(.invalid[disabled]) .control {
+        border-color: ${failColor};
     }
 
-    :host([disabled]) slot[name='checked-indicator'] path {
-        fill: rgba(${borderRgbPartialColor}, 0.3);
+    .selected-value {
+        -webkit-appearance: none;
+        background: transparent;
+        border: none;
+        color: inherit;
+        margin: auto 0;
+        width: 100%;
+        font-size: inherit;
+        padding-left: 0px;
     }
 
-    slot[name='indeterminate-indicator'] svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        overflow: visible;
+    .selected-value:hover,
+    .selected-value:disabled,
+    .selected-value:active,
+    .selected-value${focusVisible} {
+        outline: none;
     }
 
-    :host(.indeterminate) slot[name='indeterminate-indicator'] {
-        display: contents;
+    [part='indicator'] {
+        display: none;
     }
 
-    slot[name='indeterminate-indicator'] path {
-        fill: ${borderColor};
+    .end-slot-container {
+        display: flex;
+        align-items: baseline;
+        padding-right: ${smallPadding};
     }
 
-    :host([disabled]) slot[name='indeterminate-indicator'] path {
-        fill: rgba(${borderRgbPartialColor}, 0.3);
+    .separator {
+        display: inline;
+        width: 2px;
+        border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);
+        height: calc(${controlHeight} - 12px);
+        align-self: center;
+        padding-left: 4px;
+    }
+
+    .dropdown-button {
+        ${controlHeight.cssCustomProperty}: 24px;
+        margin-left: ${smallPadding};
+    }
+
+    :host([disabled]) .dropdown-icon {
+        fill: ${bodyDisabledFontColor};
+    }
+
+    :host(:empty) .listbox {
+        display: none;
     }
 `;
 
     /**
-     * A nimble-styled checkbox control.
+     * A nimble-styed HTML combobox
      */
-    class Checkbox extends Checkbox$1 {
+    class Combobox extends Combobox$1 {
+        constructor() {
+            super(...arguments);
+            this.focusOutHandler = () => {
+                this.open = false;
+            };
+        }
+        // Workaround for https://github.com/microsoft/fast/issues/5123
+        setPositioning() {
+            if (!this.$fastController.isConnected) {
+                // Don't call setPositioning() until we're connected,
+                // since this.forcedPosition isn't initialized yet.
+                return;
+            }
+            super.setPositioning();
+        }
+        // Workaround for https://github.com/microsoft/fast/issues/5773
+        slottedOptionsChanged(prev, next) {
+            const value = this.value;
+            super.slottedOptionsChanged(prev, next);
+            if (value) {
+                this.value = value;
+            }
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // Call setPositioning() after this.forcedPosition is initialized.
+            this.setPositioning();
+            this.updateInputAriaLabel();
+            this.addEventListener('focusout', this.focusOutHandler);
+        }
+        disconnectedCallback() {
+            this.removeEventListener('focusout', this.focusOutHandler);
+        }
+        toggleButtonClickHandler(e) {
+            e.stopImmediatePropagation();
+        }
+        toggleButtonChangeHandler(e) {
+            this.open = this.dropdownButton.checked;
+            e.stopImmediatePropagation();
+        }
+        toggleButtonKeyDownHandler(e) {
+            switch (e.key) {
+                case keyArrowUp:
+                case keyArrowDown:
+                case keySpace:
+                case keyEnter:
+                    this.open = true;
+                    this.stopPropagation(e);
+                    return false;
+                default:
+                    return true;
+            }
+        }
+        filterOptions() {
+            super.filterOptions();
+            const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
+            this.filteredOptions = enabledOptions;
+        }
+        openChanged() {
+            super.openChanged();
+            if (this.dropdownButton) {
+                this.dropdownButton.checked = this.open;
+            }
+        }
+        // Workaround for https://github.com/microsoft/fast/issues/6041.
+        ariaLabelChanged(_oldValue, _newValue) {
+            this.updateInputAriaLabel();
+        }
+        updateInputAriaLabel() {
+            const inputElement = this.shadowRoot?.querySelector('.selected-value');
+            if (this.ariaLabel) {
+                inputElement?.setAttribute('aria-label', this.ariaLabel);
+            }
+            else {
+                inputElement?.removeAttribute('aria-label');
+            }
+        }
     }
-    const nimbleCheckbox = Checkbox.compose({
-        baseName: 'checkbox',
-        baseClass: Checkbox$1,
-        template: checkboxTemplate,
-        styles: styles$j,
-        checkedIndicator: check16X16.data,
-        indeterminateIndicator: minus16X16.data
+    __decorate([
+        observable
+    ], Combobox.prototype, "dropdownButton", void 0);
+    __decorate([
+        attr({ attribute: 'error-text' })
+    ], Combobox.prototype, "errorText", void 0);
+    const nimbleCombobox = Combobox.compose({
+        baseName: 'combobox',
+        baseClass: Combobox$1,
+        template: comboboxTemplate,
+        styles: styles$i,
+        shadowOptions: {
+            delegatesFocus: true
+        },
+        end: html `
+        <div class="end-slot-container">
+            <nimble-icon-exclamation-mark
+                class="error-icon fail"
+            ></nimble-icon-exclamation-mark>
+            <div class="separator"></div>
+            <nimble-toggle-button
+                ${ref('dropdownButton')}
+                appearance="ghost"
+                ?checked="${x => x.open}"
+                ?disabled="${x => x.disabled}"
+                content-hidden="true"
+                @click="${(x, c) => x.toggleButtonClickHandler(c.event)}"
+                @change="${(x, c) => x.toggleButtonChangeHandler(c.event)}"
+                @keydown="${(x, c) => x.toggleButtonKeyDownHandler(c.event)}"
+                class="dropdown-button"
+                part="button"
+                aria-haspopup="true"
+                aria-expanded="${x => x.open}"
+            >
+                <nimble-icon-arrow-expander-down
+                    slot="start"
+                    class="dropdown-icon"
+                >
+                </nimble-icon-arrow-expander-down>
+            </nimble-toggle-button>
+        </div>
+        ${errorTextTemplate}
+    `
     });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
 
     var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -16025,7 +17182,7 @@
         slideOutOptions
     };
 
-    const styles$i = css `
+    const styles$h = css `
     ${display('block')}
 
     :host {
@@ -16289,116 +17446,57 @@
             if (!this.hidden) {
                 this.animateOpenClose(false);
             }
-            else {
-                this.state = DrawerState.closed;
-            }
-        }
-        animateOpenClose(drawerOpening) {
-            const options = {
-                ...(drawerOpening
-                    ? animationConfig.slideInOptions
-                    : animationConfig.slideOutOptions),
-                duration: this.animationDurationMilliseconds
-            };
-            const drawerKeyframes = this.location === DrawerLocation.right
-                ? animationConfig.slideRightKeyframes
-                : animationConfig.slideLeftKeyframes;
-            const dialogAnimation = new dist.AnimateTo(this.dialog, undefined, options);
-            dialogAnimation.addKeyframes(drawerKeyframes);
-            const animations = [dialogAnimation];
-            const overlay = this.shadowRoot?.querySelector('.overlay');
-            if (overlay) {
-                const overlayAnimation = new dist.AnimateTo(overlay, undefined, options);
-                overlayAnimation.addKeyframes(animationConfig.fadeOverlayKeyframes);
-                animations.push(overlayAnimation);
-            }
-            const animationGroup = new dist.AnimateGroup(animations);
-            animationGroup.onFinish = () => {
-                this.state = drawerOpening
-                    ? DrawerState.opened
-                    : DrawerState.closed;
-            };
-            this.animationGroup = animationGroup;
-            animationGroup.play();
-        }
-        cancelCurrentAnimation() {
-            this.animationGroup?.cancel();
-        }
-    }
-    __decorate([
-        attr
-    ], Drawer.prototype, "location", void 0);
-    __decorate([
-        attr
-    ], Drawer.prototype, "state", void 0);
-    __decorate([
-        attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
-    ], Drawer.prototype, "preventDismiss", void 0);
-    const nimbleDrawer = Drawer.compose({
-        baseName: 'drawer',
-        template: dialogTemplate,
-        styles: styles$i
-    });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
-
-    const template$4 = html `
-    <template>
-        <div class="icon" :innerHTML=${x => x.icon.data}></div>
-    </template
-`;
-
-    const styles$h = css `
-    ${display('inline-flex')}
-
-    :host {
-        align-items: center;
-        user-select: none;
-        width: ${iconSize};
-        height: ${iconSize};
-    }
-
-    .icon {
-        width: 100%;
-        height: 100%;
-    }
-
-    :host(.fail) {
-        ${iconColor.cssCustomProperty}: ${failColor};
-    }
-
-    :host(.warning) {
-        ${iconColor.cssCustomProperty}: ${warningColor};
-    }
-
-    :host(.pass) {
-        ${iconColor.cssCustomProperty}: ${passColor};
-    }
-
-    .icon svg {
-        fill: ${iconColor};
-        width: 100%;
-        height: 100%;
-    }
-`;
-
-    /**
-     * The base class for icon components
-     */
-    class Icon extends FoundationElement {
-        constructor(icon) {
-            super();
-            this.icon = icon;
+            else {
+                this.state = DrawerState.closed;
+            }
+        }
+        animateOpenClose(drawerOpening) {
+            const options = {
+                ...(drawerOpening
+                    ? animationConfig.slideInOptions
+                    : animationConfig.slideOutOptions),
+                duration: this.animationDurationMilliseconds
+            };
+            const drawerKeyframes = this.location === DrawerLocation.right
+                ? animationConfig.slideRightKeyframes
+                : animationConfig.slideLeftKeyframes;
+            const dialogAnimation = new dist.AnimateTo(this.dialog, undefined, options);
+            dialogAnimation.addKeyframes(drawerKeyframes);
+            const animations = [dialogAnimation];
+            const overlay = this.shadowRoot?.querySelector('.overlay');
+            if (overlay) {
+                const overlayAnimation = new dist.AnimateTo(overlay, undefined, options);
+                overlayAnimation.addKeyframes(animationConfig.fadeOverlayKeyframes);
+                animations.push(overlayAnimation);
+            }
+            const animationGroup = new dist.AnimateGroup(animations);
+            animationGroup.onFinish = () => {
+                this.state = drawerOpening
+                    ? DrawerState.opened
+                    : DrawerState.closed;
+            };
+            this.animationGroup = animationGroup;
+            animationGroup.play();
+        }
+        cancelCurrentAnimation() {
+            this.animationGroup?.cancel();
         }
     }
-    const registerIcon = (baseName, iconClass) => {
-        const composedIcon = iconClass.compose({
-            baseName,
-            template: template$4,
-            styles: styles$h,
-            baseClass: iconClass
-        });
-        DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
-    };
+    __decorate([
+        attr
+    ], Drawer.prototype, "location", void 0);
+    __decorate([
+        attr
+    ], Drawer.prototype, "state", void 0);
+    __decorate([
+        attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
+    ], Drawer.prototype, "preventDismiss", void 0);
+    const nimbleDrawer = Drawer.compose({
+        baseName: 'drawer',
+        template: dialogTemplate,
+        styles: styles$h
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -16422,17 +17520,6 @@
     }
     registerIcon('icon-arrow-down-right-and-arrow-up-left', IconArrowDownRightAndArrowUpLeft);
 
-    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-    /**
-     * The icon component for the 'arrowExpanderDown' icon
-     */
-    class IconArrowExpanderDown extends Icon {
-        constructor() {
-            super(arrowExpanderDown16X16);
-        }
-    }
-    registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
-
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'arrowExpanderLeft' icon
@@ -17060,17 +18147,6 @@
     }
     registerIcon('icon-electronic-chip-zoomed', IconElectronicChipZoomed);
 
-    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-    /**
-     * The icon component for the 'exclamationMark' icon
-     */
-    class IconExclamationMark extends Icon {
-        constructor() {
-            super(exclamationMark16X16);
-        }
-    }
-    registerIcon('icon-exclamation-mark', IconExclamationMark);
-
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'eye' icon
@@ -18123,7 +19199,7 @@
 `;
 
     const styles$d = css `
-    ${styles$l}
+    ${styles$o}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -18241,7 +19317,7 @@
         <${context.tagFor(ToggleButton)}
             part="button"
             appearance="${x => x.appearance}"
-            content-hidden="${x => x.contentHidden}"
+            ?content-hidden="${x => x.contentHidden}"
             ?checked="${x => x.open}"
             ?disabled="${x => x.disabled}"
             aria-haspopup="true"
@@ -18606,6 +19682,7 @@
     .root::after {
         content: '';
         position: absolute;
+        left: 0px;
         bottom: calc(-1 * ${borderWidth});
         width: 0px;
         height: 0px;
@@ -18721,144 +19798,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
     const styles$a = css `
-    ${display('inline-flex')}
-
-    :host {
-        box-sizing: border-box;
-        color: ${bodyFontColor};
-        font: ${bodyFont};
-        height: ${controlHeight};
-        position: relative;
-        user-select: none;
-        min-width: 250px;
-        outline: none;
-        vertical-align: top;
-    }
-
-    .listbox {
-        box-sizing: border-box;
-        display: inline-flex;
-        flex-direction: column;
-        left: 0;
-        overflow-y: auto;
-        position: absolute;
-        width: 100%;
-        --ni-private-listbox-padding: 4px;
-        max-height: calc(
-            var(--ni-private-select-max-height) - 2 *
-                var(--ni-private-listbox-padding)
-        );
-        z-index: 1;
-        padding: var(--ni-private-listbox-padding);
-        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
-        border: 1px solid ${popupBorderColor};
-        background-color: ${applicationBackgroundColor};
-        background-clip: padding-box;
-    }
-
-    .listbox[hidden] {
-        display: none;
-    }
-
-    .control {
-        align-items: center;
-        box-sizing: border-box;
-        cursor: pointer;
-        display: flex;
-        min-height: 100%;
-        width: 100%;
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
-        background-color: transparent;
-        padding-left: 8px;
-        padding-bottom: 1px;
-    }
-
-    :host([disabled]) .control {
-        cursor: default;
-    }
-
-    :host(.open:not(:hover)) .control {
-        border-bottom: ${borderWidth} solid ${borderHoverColor};
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
-    }
-
-    :host(:hover) .control {
-        border-bottom: 2px solid ${borderHoverColor};
-        padding-bottom: 0px;
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
-    }
-
-    :host([disabled]) .control,
-    :host([disabled]) .control:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
-        padding-bottom: 1px;
-        color: ${bodyDisabledFontColor};
-    }
-
-    :host([open][position='above']) .listbox {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    :host([open][position='below']) .listbox {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-
-    :host([open][position='above']) .listbox {
-        bottom: ${controlHeight};
-    }
-
-    :host([open][position='below']) .listbox {
-        top: calc(${controlHeight} + ${smallPadding});
-    }
-
-    .selected-value {
-        flex: 1 1 auto;
-        font-family: inherit;
-        text-align: start;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    .indicator {
-        flex: 0 0 auto;
-        margin-inline-start: 1em;
-        padding-right: 8px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .indicator slot[name='indicator'] svg {
-        width: ${iconSize};
-        height: ${iconSize};
-        fill: ${bodyFontColor};
-    }
-
-    :host([disabled]) .indicator slot[name='indicator'] svg {
-        fill: ${bodyDisabledFontColor};
-    }
-
-    slot[name='listbox'] {
-        display: none;
-        width: 100%;
-    }
-
-    :host([open]) slot[name='listbox'] {
-        display: flex;
-        position: absolute;
-    }
-
-    .end {
-        margin-inline-start: auto;
-    }
-
-    ::slotted([role='option']),
-    ::slotted(option) {
-        flex: 0 0 auto;
-    }
+    ${styles$k}
 `;
 
     /**
@@ -19497,6 +20437,7 @@
 
     const styles$3 = css `
     ${display('inline-block')}
+    ${styles$j}
 
     :host {
         font: ${bodyFont};
@@ -19538,10 +20479,6 @@
         gap: calc(${standardPadding} / 2);
     }
 
-    :host(.invalid) .root {
-        border-bottom-color: ${failColor};
-    }
-
     :host([readonly]) .root {
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
@@ -19550,6 +20487,10 @@
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
+    :host(.invalid) .root {
+        border-bottom-color: ${failColor};
+    }
+
     .root:focus-within {
         border-bottom-color: ${borderHoverColor};
     }
@@ -19644,6 +20585,7 @@
     [part='end']::after {
         content: '';
         position: absolute;
+        left: 0px;
         bottom: calc(-1 * ${borderWidth});
         width: 0px;
         height: 0px;
@@ -19671,52 +20613,6 @@
         width: 0px;
     }
 
-    .error-content {
-        display: none;
-    }
-
-    :host(.invalid) .error-content {
-        display: contents;
-    }
-
-    :host(.invalid) .error-content svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        flex: none;
-    }
-
-    :host(.invalid) .error-content path {
-        fill: ${failColor};
-    }
-
-    :host([disabled]) .error-content path {
-        fill: ${bodyDisabledFontColor};
-    }
-
-    .errortext {
-        display: none;
-    }
-
-    :host(.invalid) .errortext {
-        display: block;
-        font: ${errorTextFont};
-        color: ${failColor};
-        width: 100%;
-        position: absolute;
-        top: ${controlHeight};
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    :host(.invalid) .error-text:empty {
-        display: none;
-    }
-
-    :host([disabled]) .errortext {
-        color: ${bodyDisabledFontColor};
-    }
-
     [part='actions'] {
         display: contents;
     }
@@ -19771,10 +20667,6 @@
             .control {
                 height: var(--ni-private-height-within-border);
             }
-
-            :host(.invalid) .errortext {
-                top: calc(${controlHeight} - ${borderWidth});
-            }
         `), appearanceBehavior(TextFieldAppearance.frameless, css `
             .control {
                 padding-left: ${borderWidth};
@@ -19833,18 +20725,13 @@
             delegatesFocus: true
         },
         end: html `
-        <span class="error-content">${exclamationMark16X16.data}</span>
+        <nimble-icon-exclamation-mark
+            class="error-icon fail"
+        ></nimble-icon-exclamation-mark>
         <span part="actions">
             <slot name="actions"></slot>
         </span>
-        <div
-            id="errortext"
-            class="errortext error-content"
-            title="${x => x.errorText}"
-            aria-live="polite"
-        >
-            ${x => x.errorText}
-        </div>
+        ${errorTextTemplate}
     `
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());