@ni/nimble-components 15.5.8 → 16.1.0

package/dist/all-components-bundle.js

@@ -1,6 +1,28 @@
 (function () {
     'use strict';
 
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __decorate$1(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+
     /**
      * A reference to globalThis, with support
      * for browsers that don't yet support the spec.
@@ -3680,7 +3702,7 @@
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
 
-    function __decorate$1(decorators, target, key, desc) {
+    function __decorate(decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5004,10 +5026,10 @@
                 : this, elementDefinition, overrideDefinition);
         }
     }
-    __decorate$1([
+    __decorate([
         observable
     ], FoundationElement.prototype, "template", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], FoundationElement.prototype, "styles", void 0);
     function resolveOption(option, context, definition) {
@@ -5403,61 +5425,61 @@
      */
     class ARIAGlobalStatesAndProperties {
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-atomic" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-busy" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-controls" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-current" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-describedby" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-details" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-disabled" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-errormessage" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-flowto" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-haspopup" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-hidden" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-invalid" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-keyshortcuts" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-label" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-labelledby" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-live" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-owns" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-relevant" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-roledescription" })
     ], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
 
@@ -5473,7 +5495,7 @@
      *
      * @public
      */
-    class Anchor extends FoundationElement {
+    class Anchor$1 extends FoundationElement {
         constructor() {
             super(...arguments);
             /**
@@ -5501,33 +5523,33 @@
             this.handleUnsupportedDelegatesFocus();
         }
     }
-    __decorate$1([
+    __decorate([
         attr
-    ], Anchor.prototype, "download", void 0);
-    __decorate$1([
+    ], Anchor$1.prototype, "download", void 0);
+    __decorate([
         attr
-    ], Anchor.prototype, "href", void 0);
-    __decorate$1([
+    ], Anchor$1.prototype, "href", void 0);
+    __decorate([
         attr
-    ], Anchor.prototype, "hreflang", void 0);
-    __decorate$1([
+    ], Anchor$1.prototype, "hreflang", void 0);
+    __decorate([
         attr
-    ], Anchor.prototype, "ping", void 0);
-    __decorate$1([
+    ], Anchor$1.prototype, "ping", void 0);
+    __decorate([
         attr
-    ], Anchor.prototype, "referrerpolicy", void 0);
-    __decorate$1([
+    ], Anchor$1.prototype, "referrerpolicy", void 0);
+    __decorate([
         attr
-    ], Anchor.prototype, "rel", void 0);
-    __decorate$1([
+    ], Anchor$1.prototype, "rel", void 0);
+    __decorate([
         attr
-    ], Anchor.prototype, "target", void 0);
-    __decorate$1([
+    ], Anchor$1.prototype, "target", void 0);
+    __decorate([
         attr
-    ], Anchor.prototype, "type", void 0);
-    __decorate$1([
+    ], Anchor$1.prototype, "type", void 0);
+    __decorate([
         observable
-    ], Anchor.prototype, "defaultSlottedContent", void 0);
+    ], Anchor$1.prototype, "defaultSlottedContent", void 0);
     /**
      * Includes ARIA states and properties relating to the ARIA link role
      *
@@ -5535,11 +5557,11 @@
      */
     class DelegatesARIALink {
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-expanded" })
     ], DelegatesARIALink.prototype, "ariaExpanded", void 0);
     applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
-    applyMixins(Anchor, StartEnd, DelegatesARIALink);
+    applyMixins(Anchor$1, StartEnd, DelegatesARIALink);
 
     /**
      * The template for the {@link @microsoft/fast-foundation#(AnchoredRegion:class)} component.
@@ -6555,61 +6577,61 @@
         }
     }
     AnchoredRegion$1.intersectionService = new IntersectionService();
-    __decorate$1([
+    __decorate([
         attr
     ], AnchoredRegion$1.prototype, "anchor", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], AnchoredRegion$1.prototype, "viewport", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "horizontal-positioning-mode" })
     ], AnchoredRegion$1.prototype, "horizontalPositioningMode", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "horizontal-default-position" })
     ], AnchoredRegion$1.prototype, "horizontalDefaultPosition", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "horizontal-viewport-lock", mode: "boolean" })
     ], AnchoredRegion$1.prototype, "horizontalViewportLock", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "horizontal-inset", mode: "boolean" })
     ], AnchoredRegion$1.prototype, "horizontalInset", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "horizontal-threshold" })
     ], AnchoredRegion$1.prototype, "horizontalThreshold", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "horizontal-scaling" })
     ], AnchoredRegion$1.prototype, "horizontalScaling", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "vertical-positioning-mode" })
     ], AnchoredRegion$1.prototype, "verticalPositioningMode", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "vertical-default-position" })
     ], AnchoredRegion$1.prototype, "verticalDefaultPosition", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "vertical-viewport-lock", mode: "boolean" })
     ], AnchoredRegion$1.prototype, "verticalViewportLock", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "vertical-inset", mode: "boolean" })
     ], AnchoredRegion$1.prototype, "verticalInset", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "vertical-threshold" })
     ], AnchoredRegion$1.prototype, "verticalThreshold", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "vertical-scaling" })
     ], AnchoredRegion$1.prototype, "verticalScaling", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "fixed-placement", mode: "boolean" })
     ], AnchoredRegion$1.prototype, "fixedPlacement", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "auto-update-mode" })
     ], AnchoredRegion$1.prototype, "autoUpdateMode", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], AnchoredRegion$1.prototype, "anchorElement", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], AnchoredRegion$1.prototype, "viewportElement", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], AnchoredRegion$1.prototype, "initialLayoutComplete", void 0);
 
@@ -6640,7 +6662,7 @@
      *
      * @public
      */
-    class BreadcrumbItem$1 extends Anchor {
+    class BreadcrumbItem$1 extends Anchor$1 {
         constructor() {
             super(...arguments);
             /**
@@ -6649,7 +6671,7 @@
             this.separator = true;
         }
     }
-    __decorate$1([
+    __decorate([
         observable
     ], BreadcrumbItem$1.prototype, "separator", void 0);
     applyMixins(BreadcrumbItem$1, StartEnd, DelegatesARIALink);
@@ -6731,7 +6753,7 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         observable
     ], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
 
@@ -7397,31 +7419,31 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], Button$1.prototype, "autofocus", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "form" })
     ], Button$1.prototype, "formId", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Button$1.prototype, "formaction", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Button$1.prototype, "formenctype", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Button$1.prototype, "formmethod", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], Button$1.prototype, "formnovalidate", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Button$1.prototype, "formtarget", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Button$1.prototype, "type", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Button$1.prototype, "defaultSlottedContent", void 0);
     /**
@@ -7431,10 +7453,10 @@
      */
     class DelegatesARIAButton {
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-expanded" })
     ], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-pressed" })
     ], DelegatesARIAButton.prototype, "ariaPressed", void 0);
     applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
@@ -7551,13 +7573,13 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "readonly", mode: "boolean" })
     ], Checkbox$1.prototype, "readOnly", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Checkbox$1.prototype, "defaultSlottedNodes", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Checkbox$1.prototype, "indeterminate", void 0);
 
@@ -7712,25 +7734,25 @@
             return this.proxy ? this.proxy.form : null;
         }
     }
-    __decorate$1([
+    __decorate([
         observable
     ], ListboxOption.prototype, "checked", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], ListboxOption.prototype, "content", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], ListboxOption.prototype, "defaultSelected", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], ListboxOption.prototype, "disabled", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "selected", mode: "boolean" })
     ], ListboxOption.prototype, "selectedAttribute", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], ListboxOption.prototype, "selected", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "value", mode: "fromView" })
     ], ListboxOption.prototype, "initialValue", void 0);
     /**
@@ -7740,16 +7762,16 @@
      */
     class DelegatesARIAListboxOption {
     }
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
     applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
@@ -8240,19 +8262,19 @@
      * @internal
      */
     Listbox.TYPE_AHEAD_TIMEOUT_MS = 1000;
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], Listbox.prototype, "disabled", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Listbox.prototype, "selectedIndex", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Listbox.prototype, "selectedOptions", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Listbox.prototype, "slottedOptions", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Listbox.prototype, "typeaheadBuffer", void 0);
     /**
@@ -8262,16 +8284,16 @@
      */
     class DelegatesARIAListbox {
     }
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIAListbox.prototype, "ariaDisabled", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
     applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
@@ -8854,22 +8876,22 @@
             this.control.setSelectionRange(controlValueLength, controlValueLength);
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "autocomplete", mode: "fromView" })
     ], Combobox$1.prototype, "autocomplete", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Combobox$1.prototype, "maxHeight", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "open", mode: "boolean" })
     ], Combobox$1.prototype, "open", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Combobox$1.prototype, "placeholder", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "position" })
     ], Combobox$1.prototype, "positionAttribute", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Combobox$1.prototype, "position", void 0);
     /**
@@ -8879,10 +8901,10 @@
      */
     class DelegatesARIACombobox {
     }
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIACombobox.prototype, "ariaAutoComplete", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIACombobox.prototype, "ariaControls", void 0);
     applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
@@ -9106,7 +9128,7 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         observable
     ], StyleElementStyleSheetTarget.prototype, "target", void 0);
     /**
@@ -9766,7 +9788,7 @@
      * Responsible for reflecting tokens to CSS custom properties
      */
     DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
-    __decorate$1([
+    __decorate([
         observable
     ], DesignTokenNode.prototype, "children", void 0);
     function create(nameOrConfig) {
@@ -10707,13 +10729,13 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         observable
     ], ListboxElement.prototype, "activeIndex", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], ListboxElement.prototype, "multiple", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], ListboxElement.prototype, "size", void 0);
 
@@ -10958,31 +10980,31 @@
             return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], MenuItem$1.prototype, "disabled", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], MenuItem$1.prototype, "expanded", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], MenuItem$1.prototype, "startColumnCount", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], MenuItem$1.prototype, "role", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], MenuItem$1.prototype, "checked", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], MenuItem$1.prototype, "submenuRegion", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], MenuItem$1.prototype, "hasSubmenu", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], MenuItem$1.prototype, "currentDirection", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], MenuItem$1.prototype, "submenu", void 0);
     applyMixins(MenuItem$1, StartEnd);
@@ -11359,7 +11381,7 @@
         }
     }
     Menu$1.focusableElementRoles = roleForMenuItem;
-    __decorate$1([
+    __decorate([
         observable
     ], Menu$1.prototype, "items", void 0);
 
@@ -11621,37 +11643,37 @@
             super.validate(this.control);
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "readonly", mode: "boolean" })
     ], TextField$1.prototype, "readOnly", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], TextField$1.prototype, "autofocus", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], TextField$1.prototype, "placeholder", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], TextField$1.prototype, "type", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], TextField$1.prototype, "list", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], TextField$1.prototype, "maxlength", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], TextField$1.prototype, "minlength", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], TextField$1.prototype, "pattern", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], TextField$1.prototype, "size", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], TextField$1.prototype, "spellcheck", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], TextField$1.prototype, "defaultSlottedNodes", void 0);
     /**
@@ -11922,40 +11944,40 @@
             this.control.value = this.value;
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "readonly", mode: "boolean" })
     ], NumberField$1.prototype, "readOnly", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], NumberField$1.prototype, "autofocus", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "hide-step", mode: "boolean" })
     ], NumberField$1.prototype, "hideStep", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], NumberField$1.prototype, "placeholder", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], NumberField$1.prototype, "list", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], NumberField$1.prototype, "maxlength", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], NumberField$1.prototype, "minlength", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], NumberField$1.prototype, "size", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], NumberField$1.prototype, "step", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], NumberField$1.prototype, "max", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], NumberField$1.prototype, "min", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], NumberField$1.prototype, "defaultSlottedNodes", void 0);
     applyMixins(NumberField$1, StartEnd, DelegatesARIATextbox);
@@ -12352,25 +12374,25 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "readonly", mode: "boolean" })
     ], RadioGroup$1.prototype, "readOnly", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "disabled", mode: "boolean" })
     ], RadioGroup$1.prototype, "disabled", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], RadioGroup$1.prototype, "name", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], RadioGroup$1.prototype, "value", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], RadioGroup$1.prototype, "orientation", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], RadioGroup$1.prototype, "childItems", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
 
@@ -12514,13 +12536,13 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "readonly", mode: "boolean" })
     ], Radio$1.prototype, "readOnly", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Radio$1.prototype, "name", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Radio$1.prototype, "defaultSlottedNodes", void 0);
 
@@ -13004,22 +13026,22 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "open", mode: "boolean" })
     ], Select$1.prototype, "open", void 0);
-    __decorate$1([
+    __decorate([
         volatile
     ], Select$1.prototype, "collapsible", null);
-    __decorate$1([
+    __decorate([
         observable
     ], Select$1.prototype, "control", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "position" })
     ], Select$1.prototype, "positionAttribute", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Select$1.prototype, "position", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Select$1.prototype, "maxHeight", void 0);
     /**
@@ -13029,7 +13051,7 @@
      */
     class DelegatesARIASelect {
     }
-    __decorate$1([
+    __decorate([
         observable
     ], DelegatesARIASelect.prototype, "ariaControls", void 0);
     applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
@@ -13188,10 +13210,10 @@
             this.checked ? this.classList.add("checked") : this.classList.remove("checked");
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "readonly", mode: "boolean" })
     ], Switch$1.prototype, "readOnly", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Switch$1.prototype, "defaultSlottedNodes", void 0);
 
@@ -13234,7 +13256,7 @@
      */
     class Tab$1 extends FoundationElement {
     }
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], Tab$1.prototype, "disabled", void 0);
 
@@ -13601,25 +13623,25 @@
             this.activeTabIndex = this.getActiveIndex();
         }
     }
-    __decorate$1([
+    __decorate([
         attr
     ], Tabs$1.prototype, "orientation", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Tabs$1.prototype, "activeid", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tabs$1.prototype, "tabs", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tabs$1.prototype, "tabpanels", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], Tabs$1.prototype, "activeindicator", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tabs$1.prototype, "activeIndicatorRef", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tabs$1.prototype, "showActiveIndicator", void 0);
     applyMixins(Tabs$1, StartEnd);
@@ -13760,43 +13782,43 @@
             super.validate(this.control);
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], TextArea$1.prototype, "readOnly", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], TextArea$1.prototype, "resize", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], TextArea$1.prototype, "autofocus", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "form" })
     ], TextArea$1.prototype, "formId", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], TextArea$1.prototype, "list", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], TextArea$1.prototype, "maxlength", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter })
     ], TextArea$1.prototype, "minlength", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], TextArea$1.prototype, "name", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], TextArea$1.prototype, "placeholder", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter, mode: "fromView" })
     ], TextArea$1.prototype, "cols", void 0);
-    __decorate$1([
+    __decorate([
         attr({ converter: nullableNumberConverter, mode: "fromView" })
     ], TextArea$1.prototype, "rows", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], TextArea$1.prototype, "spellcheck", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
     applyMixins(TextArea$1, DelegatesARIATextbox);
@@ -14195,19 +14217,19 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         observable
     ], Toolbar$1.prototype, "direction", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Toolbar$1.prototype, "orientation", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Toolbar$1.prototype, "slottedItems", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Toolbar$1.prototype, "slottedLabel", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Toolbar$1.prototype, "childItems", void 0);
     /**
@@ -14217,10 +14239,10 @@
      */
     class DelegatesARIAToolbar {
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-labelledby" })
     ], DelegatesARIAToolbar.prototype, "ariaLabelledby", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "aria-label" })
     ], DelegatesARIAToolbar.prototype, "ariaLabel", void 0);
     applyMixins(DelegatesARIAToolbar, ARIAGlobalStatesAndProperties);
@@ -14738,61 +14760,61 @@
             }
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], Tooltip$1.prototype, "visible", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Tooltip$1.prototype, "anchor", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Tooltip$1.prototype, "delay", void 0);
-    __decorate$1([
+    __decorate([
         attr
     ], Tooltip$1.prototype, "position", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "auto-update-mode" })
     ], Tooltip$1.prototype, "autoUpdateMode", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "horizontal-viewport-lock" })
     ], Tooltip$1.prototype, "horizontalViewportLock", void 0);
-    __decorate$1([
+    __decorate([
         attr({ attribute: "vertical-viewport-lock" })
     ], Tooltip$1.prototype, "verticalViewportLock", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "anchorElement", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "viewportElement", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "verticalPositioningMode", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "horizontalPositioningMode", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "horizontalInset", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "verticalInset", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "horizontalScaling", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "verticalScaling", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "verticalDefaultPosition", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "horizontalDefaultPosition", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "tooltipVisible", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], Tooltip$1.prototype, "currentDirection", void 0);
 
@@ -14966,28 +14988,28 @@
             return treeChildren ? treeChildren.length : 0;
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], TreeItem$1.prototype, "expanded", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], TreeItem$1.prototype, "selected", void 0);
-    __decorate$1([
+    __decorate([
         attr({ mode: "boolean" })
     ], TreeItem$1.prototype, "disabled", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], TreeItem$1.prototype, "focusable", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], TreeItem$1.prototype, "childItems", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], TreeItem$1.prototype, "items", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], TreeItem$1.prototype, "nested", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], TreeItem$1.prototype, "renderCollapsedChildren", void 0);
     applyMixins(TreeItem$1, StartEnd);
@@ -15264,13 +15286,13 @@
             return getDisplayedNodes(this, "[role='treeitem']") || [];
         }
     }
-    __decorate$1([
+    __decorate([
         attr({ attribute: "render-collapsed-nodes" })
     ], TreeView$1.prototype, "renderCollapsedNodes", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], TreeView$1.prototype, "currentSelected", void 0);
-    __decorate$1([
+    __decorate([
         observable
     ], TreeView$1.prototype, "slottedTreeItems", void 0);
 
@@ -15298,82 +15320,94 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$z = css `
-    :host {
-        contain: layout;
-        display: block;
-        z-index: 1000;
-    }
-`;
-
-    // When the anchor element changes position on the page, it is the client's responsibility to update the position
-    // of the anchored region by calling update() on the anchored region.
-    //
-    // When the anchor element is recreated on the page, it is the client's responsibility to reset the reference the
-    // anchored region has to the anchor element. This can be done by either recreating the anchor element with a new
-    // ID that is also set as the \`anchor\` attribute on the anchored region or by explicitly setting the value of
-    // anchorElement on the anchored region to the new anchor element.
     /**
-     * A nimble-styled anchored region control.
+     * Exported base class of link-like types
      */
-    class AnchoredRegion extends AnchoredRegion$1 {
-    }
-    const nimbleAnchoredRegion = AnchoredRegion.compose({
-        baseName: 'anchored-region',
-        baseClass: AnchoredRegion$1,
-        template: anchoredRegionTemplate,
-        styles: styles$z
-    });
-    DesignSystem.getOrCreate()
-        .withPrefix('nimble')
-        .register(nimbleAnchoredRegion());
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    class AnchorBase extends Anchor$1 {
     }
 
     /**
-     * Do not edit directly
-     * Generated on Thu, 20 Oct 2022 19:57:29 GMT
+     * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
      */
-    const Information100DarkUi = "#a46eff";
-    const Information100LightUi = "#804ad9";
-    const Warning100DarkUi = "#ff8126";
-    const Pass100LightUi = "#009921";
-    const Pass100DarkUi = "#00c12b";
-    const Fail100LightUi = "#c4000c";
-    const Fail100DarkUi = "#ff4646";
-    const Black75 = "#818386";
-    const Black15 = "#f1f1f2";
-    const Black7 = "#f5f5f5";
-    const White = "#ffffff";
-    const Black88 = "#252526";
-    const Black85 = "#363738";
-    const Black80 = "#505153";
-    const Black = "#000000";
-    const Black91 = "#161617";
-    const ForestGreen = "#074023";
-    const DigitalGreenLight = "#009b65";
-    const BannerFail100DarkUi = "#d63434";
-    const Warning100LightUi = "#ff4b00";
+    /**
+     * 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 hexCharacters = 'a-f\\d';
+    const match3or4Hex = `#?[${hexCharacters}]{3}[${hexCharacters}]?`;
+    const match6or8Hex = `#?[${hexCharacters}]{6}([${hexCharacters}]{2})?`;
+    const nonHexChars = new RegExp(`[^#${hexCharacters}]`, 'gi');
+    const validHexSize = new RegExp(`^${match3or4Hex}$|^${match6or8Hex}$`, 'i');
+
+    function hexRgb(hex, options = {}) {
+    	if (typeof hex !== 'string' || nonHexChars.test(hex) || !validHexSize.test(hex)) {
+    		throw new TypeError('Expected a valid hex string');
+    	}
+
+    	hex = hex.replace(/^#/, '');
+    	let alphaFromHex = 1;
+
+    	if (hex.length === 8) {
+    		alphaFromHex = Number.parseInt(hex.slice(6, 8), 16) / 255;
+    		hex = hex.slice(0, 6);
+    	}
+
+    	if (hex.length === 4) {
+    		alphaFromHex = Number.parseInt(hex.slice(3, 4).repeat(2), 16) / 255;
+    		hex = hex.slice(0, 3);
+    	}
+
+    	if (hex.length === 3) {
+    		hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    	}
+
+    	const number = Number.parseInt(hex, 16);
+    	const red = number >> 16;
+    	const green = (number >> 8) & 255;
+    	const blue = number & 255;
+    	const alpha = typeof options.alpha === 'number' ? options.alpha : alphaFromHex;
+
+    	if (options.format === 'array') {
+    		return [red, green, blue, alpha];
+    	}
+
+    	if (options.format === 'css') {
+    		const alphaString = alpha === 1 ? '' : ` / ${Number((alpha * 100).toFixed(2))}%`;
+    		return `rgb(${red} ${green} ${blue}${alphaString})`;
+    	}
+
+    	return {red, green, blue, alpha};
+    }
+
+    /**
+     * Do not edit directly
+     * Generated on Thu, 20 Oct 2022 19:57:29 GMT
+     */
+    const Information100DarkUi = "#a46eff";
+    const Information100LightUi = "#804ad9";
+    const Warning100DarkUi = "#ff8126";
+    const Pass100LightUi = "#009921";
+    const Pass100DarkUi = "#00c12b";
+    const Fail100LightUi = "#c4000c";
+    const Fail100DarkUi = "#ff4646";
+    const Black75 = "#818386";
+    const Black15 = "#f1f1f2";
+    const Black7 = "#f5f5f5";
+    const White = "#ffffff";
+    const Black88 = "#252526";
+    const Black85 = "#363738";
+    const Black80 = "#505153";
+    const Black = "#000000";
+    const Black91 = "#161617";
+    const ForestGreen = "#074023";
+    const DigitalGreenLight = "#009b65";
+    const BannerFail100DarkUi = "#d63434";
+    const Warning100LightUi = "#ff4b00";
     const DigitalGreenDark = "#006b46";
     const PowerGreen = "#32eb96";
     const Title2Family = "Source Sans Pro";
@@ -15443,52 +15477,6 @@
     const MediumDelay = "0.15s"; // Medium animation delay for control state change animation
     const LargeDelay = "0.25s"; // Long animation delay used for control state change animation
 
-    const hexCharacters = 'a-f\\d';
-    const match3or4Hex = `#?[${hexCharacters}]{3}[${hexCharacters}]?`;
-    const match6or8Hex = `#?[${hexCharacters}]{6}([${hexCharacters}]{2})?`;
-    const nonHexChars = new RegExp(`[^#${hexCharacters}]`, 'gi');
-    const validHexSize = new RegExp(`^${match3or4Hex}$|^${match6or8Hex}$`, 'i');
-
-    function hexRgb(hex, options = {}) {
-    	if (typeof hex !== 'string' || nonHexChars.test(hex) || !validHexSize.test(hex)) {
-    		throw new TypeError('Expected a valid hex string');
-    	}
-
-    	hex = hex.replace(/^#/, '');
-    	let alphaFromHex = 1;
-
-    	if (hex.length === 8) {
-    		alphaFromHex = Number.parseInt(hex.slice(6, 8), 16) / 255;
-    		hex = hex.slice(0, 6);
-    	}
-
-    	if (hex.length === 4) {
-    		alphaFromHex = Number.parseInt(hex.slice(3, 4).repeat(2), 16) / 255;
-    		hex = hex.slice(0, 3);
-    	}
-
-    	if (hex.length === 3) {
-    		hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    	}
-
-    	const number = Number.parseInt(hex, 16);
-    	const red = number >> 16;
-    	const green = (number >> 8) & 255;
-    	const blue = number & 255;
-    	const alpha = typeof options.alpha === 'number' ? options.alpha : alphaFromHex;
-
-    	if (options.format === 'array') {
-    		return [red, green, blue, alpha];
-    	}
-
-    	if (options.format === 'css') {
-    		const alphaString = alpha === 1 ? '' : ` / ${Number((alpha * 100).toFixed(2))}%`;
-    		return `rgb(${red} ${green} ${blue}${alphaString})`;
-    	}
-
-    	return {red, green, blue, alpha};
-    }
-
     /**
      * Convert a hexadecimal color string to an RGBA CSS color string
      * Example: 'ff0102' or '#ff0102' to 'rgba(255, 1, 2, 1)'
@@ -15611,14 +15599,38 @@
         subtitleFontWeight: 'subtitle-font-weight',
         subtitleFontLineHeight: 'subtitle-font-line-height',
         subtitleFallbackFontFamily: 'subtitle-fallback-font-family',
-        linkStandardFont: 'link-standard-font',
-        linkStandardFontColor: 'link-standard-font-color',
-        linkStandardDisabledFontColor: 'link-standard-disabled-font-color',
-        linkStandardFontFamily: 'link-standard-font-family',
-        linkStandardFontSize: 'link-standard-font-size',
-        linkStandardFontWeight: 'link-standard-font-weight',
-        linkStandardFontLineHeight: 'link-standard-font-line-height',
-        linkStandardFallbackFontFamily: 'link-standard-fallback-font-family',
+        linkFont: 'link-font',
+        linkFontColor: 'link-font-color',
+        linkDisabledFontColor: 'link-disabled-font-color',
+        linkFontFamily: 'link-font-family',
+        linkFontSize: 'link-font-size',
+        linkFontWeight: 'link-font-weight',
+        linkFontLineHeight: 'link-font-line-height',
+        linkFallbackFontFamily: 'link-fallback-font-family',
+        linkActiveFont: 'link-active-font',
+        linkActiveFontColor: 'link-active-font-color',
+        linkActiveDisabledFontColor: 'link-active-disabled-font-color',
+        linkActiveFontFamily: 'link-active-font-family',
+        linkActiveFontSize: 'link-active-font-size',
+        linkActiveFontWeight: 'link-active-font-weight',
+        linkActiveFontLineHeight: 'link-active-font-line-height',
+        linkActiveFallbackFontFamily: 'link-active-fallback-font-family',
+        linkProminentFont: 'link-prominent-font',
+        linkProminentFontColor: 'link-prominent-font-color',
+        linkProminentDisabledFontColor: 'link-prominent-disabled-font-color',
+        linkProminentFontFamily: 'link-prominent-font-family',
+        linkProminentFontSize: 'link-prominent-font-size',
+        linkProminentFontWeight: 'link-prominent-font-weight',
+        linkProminentFontLineHeight: 'link-prominent-font-line-height',
+        linkProminentFallbackFontFamily: 'link-prominent-fallback-font-family',
+        linkActiveProminentFont: 'link-active-prominent-font',
+        linkActiveProminentFontColor: 'link-active-prominent-font-color',
+        linkActiveProminentDisabledFontColor: 'link-active-prominent-disabled-font-color',
+        linkActiveProminentFontFamily: 'link-active-prominent-font-family',
+        linkActiveProminentFontSize: 'link-active-prominent-font-size',
+        linkActiveProminentFontWeight: 'link-active-prominent-font-weight',
+        linkActiveProminentFontLineHeight: 'link-active-prominent-font-line-height',
+        linkActiveProminentFallbackFontFamily: 'link-active-prominent-fallback-font-family',
         placeholderFont: 'placeholder-font',
         placeholderFontColor: 'placeholder-font-color',
         placeholderDisabledFontColor: 'placeholder-disabled-font-color',
@@ -15688,9 +15700,9 @@
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-    const template$a = html `<slot></slot>`;
+    const template$d = html `<slot></slot>`;
 
-    const styles$y = css `
+    const styles$C = css `
     :host {
         display: contents;
     }
@@ -15734,20 +15746,20 @@
             }
         }
     }
-    __decorate([
+    __decorate$1([
         attr({
             attribute: 'direction'
         })
     ], ThemeProvider.prototype, "direction", void 0);
-    __decorate([
+    __decorate$1([
         attr({
             attribute: 'theme'
         })
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$y,
-        template: template$a
+        styles: styles$C,
+        template: template$d
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -15793,7 +15805,10 @@
     createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight, 'sans-serif');
     createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight, 'sans-serif');
     const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight, subtitleFallbackFontFamily] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight, 'sans-serif');
-    createFontTokens(tokenNames.linkStandardFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
+    const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight, linkFallbackFontFamily] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
+    const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight, linkActiveFallbackFontFamily] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
+    const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight, linkProminentFallbackFontFamily] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
+    const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
     const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight, placeholderFallbackFontFamily] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight, 'sans-serif');
     const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, 'sans-serif');
     const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight, bodyFallbackFontFamily] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight, 'sans-serif');
@@ -15898,147 +15913,704 @@
         }
     }
 
-    /**
-     * Subscription for {@link ThemeStyleSheetBehavior}
-     */
-    class ThemeStyleSheetBehaviorSubscription {
-        constructor(value, styles, source) {
-            this.value = value;
-            this.styles = styles;
-            this.source = source;
-        }
-        handleChange() {
-            const theme$1 = theme.getValueFor(this.source);
-            if (Array.isArray(this.value)
-                ? this.value.includes(theme$1)
-                : this.value === theme$1) {
-                this.source.$fastController.addStyles(this.styles);
-            }
-            else {
-                this.source.$fastController.removeStyles(this.styles);
-            }
-        }
-    }
-    /**
-     * Behavior to conditionally apply theme-based stylesheets.
-     */
-    class ThemeStyleSheetBehavior {
-        constructor(theme, styles) {
-            this.theme = theme;
-            this.styles = styles;
-            this.cache = new WeakMap();
-        }
-        /**
-         * @internal
-         */
-        bind(source) {
-            const subscriber = this.cache.get(source)
-                || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
-            // Currently subscriber from cache may have gone through unbind
-            // but still be in cache so always resubscribe
-            // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
-            theme.subscribe(subscriber, source);
-            subscriber.handleChange();
-            this.cache.set(source, subscriber);
-        }
-        /**
-         * @internal
-         */
-        unbind(source) {
-            const subscriber = this.cache.get(source);
-            if (subscriber) {
-                theme.unsubscribe(subscriber);
-            }
-            // Currently does not evict subscriber from cache
-            // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
-        }
-    }
-    /**
-     * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
-     * the behavior will use the nearest ThemeProvider's 'theme' design system value.
-     *
-     * @public
-     * @example
-     * ```ts
-     * css`
-     *     // ...
-     * `.withBehaviors(
-     *     themeBehavior(Theme.light, css` ... `),
-     *     // Apply style for both dark and color theme
-     *     themeBehavior([Theme.dark, Theme.color], css` ... `)
-     * )
-     * ```
-     */
-    const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
-
-    const styles$x = css `
-    ${display('inline-block')}
+    const styles$B = css `
+    ${display('inline')}
 
     :host {
         box-sizing: border-box;
-        font: ${bodyFont};
-        --ni-private-breadcrumb-link-font-color: ${bodyFontColor};
+        font: ${linkFont};
     }
 
-    .list {
-        display: flex;
-        flex-wrap: wrap;
+    [part='start'] {
+        display: none;
     }
 
-    :host([appearance='prominent']) {
-        --ni-private-breadcrumb-link-active-font-color: ${bodyFontColor};
+    .control {
+        color: ${linkFontColor};
+        text-decoration: underline;
     }
 
-    ::slotted(*:first-child) {
-        padding-left: 0px;
+    .control${focusVisible} {
+        display: inline;
+        outline: none;
+        box-shadow: inset 0px -1px ${linkFontColor};
     }
 
-    ::slotted(*:not([href]):last-child) {
-        font: ${bodyEmphasizedFont};
+    .control:active {
+        color: ${linkActiveFontColor};
+        text-decoration: underline;
     }
-`.withBehaviors(themeBehavior(Theme.light, css `
-            :host {
-                --ni-private-breadcrumb-link-active-font-color: ${DigitalGreenDark};
-            }
 
-            :host([appearance='prominent']) {
-                --ni-private-breadcrumb-link-font-color: ${DigitalGreenDark};
-            }
-        `), themeBehavior(Theme.dark, css `
-            :host {
-                --ni-private-breadcrumb-link-active-font-color: ${PowerGreen};
-            }
+    .control${focusVisible}:active {
+        box-shadow: inset 0px -1px ${linkActiveFontColor};
+    }
 
-            :host([appearance='prominent']) {
-                --ni-private-breadcrumb-link-font-color: ${PowerGreen};
-            }
-        `), themeBehavior(Theme.color, css `
-            :host {
-                --ni-private-breadcrumb-link-active-font-color: ${hexToRgbaCssColor(White, 0.6)};
-            }
+    .control:not(:any-link) {
+        color: ${linkDisabledFontColor};
+        text-decoration: none;
+    }
 
-            :host([appearance='prominent']) {
-                --ni-private-breadcrumb-link-font-color: ${PowerGreen};
-            }
-        `));
+    .control:not(:any-link):active {
+        color: ${linkActiveDisabledFontColor};
+    }
 
-    /**
-     * A nimble-styled breadcrumb
-     */
-    class Breadcrumb extends Breadcrumb$1 {
+    :host([underline-hidden]) .control {
+        text-decoration: none;
     }
-    __decorate([
-        attr
-    ], Breadcrumb.prototype, "appearance", void 0);
-    const nimbleBreadcrumb = Breadcrumb.compose({
-        baseName: 'breadcrumb',
-        baseClass: Breadcrumb$1,
-        template: breadcrumbTemplate,
-        styles: styles$x
-    });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-    /* 🤖 this file was generated by svg-to-ts*/
+    :host([underline-hidden]) .control:hover {
+        text-decoration: underline;
+    }
+
+    :host([underline-hidden]) .control${focusVisible} {
+        text-decoration: underline;
+    }
+
+    :host([underline-hidden]) .control:not(:any-link) {
+        text-decoration: none;
+    }
+
+    :host([appearance='prominent']) .control {
+        color: ${linkProminentFontColor};
+    }
+
+    :host([appearance='prominent']) .control:active {
+        color: ${linkActiveProminentFontColor};
+    }
+
+    :host([appearance='prominent']) .control${focusVisible} {
+        box-shadow: inset 0px -1px ${linkProminentFontColor};
+    }
+
+    :host([appearance='prominent']) .control${focusVisible}:active {
+        box-shadow: inset 0px -1px ${linkActiveProminentFontColor};
+    }
+
+    :host([appearance='prominent']) .control:not(:any-link) {
+        color: ${linkProminentDisabledFontColor};
+    }
+
+    [part='end'] {
+        display: none;
+    }
+`;
+
+    // prettier-ignore
+    const template$c = (context, definition) => html `
+    <a
+        class="control"
+        part="control"
+        download="${x => x.download}"
+        href=${x => x.href}
+        hreflang="${x => x.hreflang}"
+        ping="${x => x.ping}"
+        referrerpolicy="${x => x.referrerpolicy}"
+        rel="${x => x.rel}"
+        target="${x => x.target}"
+        type="${x => x.type}"
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref('control')}
+    >
+        ${startSlotTemplate(context, definition)}
+        ${ /* End slot template inlined to avoid extra whitespace.
+     See https://github.com/microsoft/fast/issues/6557 */''}
+        ${ /* Whitespace intentionally avoided between tags for inline styles */''}
+        <span class="content" part="content"><slot ${slotted('defaultSlottedContent')}></slot></span
+        ><span
+            part="end"
+            ${ref('endContainer')}
+            class=${_x => (definition.end ? 'end' : null)}
+        >
+            <slot name="end" ${ref('end')} @slotchange="${x => x.handleEndContentChange()}">
+                ${definition.end || ''}
+            </slot>
+        </span></a>
+`;
+
+    /**
+     * A nimble-styled anchor
+     */
+    class Anchor extends AnchorBase {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: underline-hidden
+             */
+            this.underlineHidden = false;
+        }
+    }
+    __decorate$1([
+        attr({ attribute: 'underline-hidden', mode: 'boolean' })
+    ], Anchor.prototype, "underlineHidden", void 0);
+    __decorate$1([
+        attr
+    ], Anchor.prototype, "appearance", void 0);
+    const nimbleAnchor = Anchor.compose({
+        baseName: 'anchor',
+        baseClass: Anchor$1,
+        template: template$c,
+        styles: styles$B,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchor());
+
+    /**
+     * Types of button appearance.
+     * @public
+     */
+    const ButtonAppearance = {
+        outline: 'outline',
+        ghost: 'ghost',
+        block: 'block'
+    };
+
+    /**
+     * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
+     * styles are applied while the property matches and that styles are not applied if the property does
+     * not match.
+     *
+     * @public
+     */
+    class MultivaluePropertyStyleSheetBehavior {
+        /**
+         * Constructs a {@link MultivaluePropertyStyleSheetBehavior} instance.
+         * @param propertyName - The property name to operate from.
+         * @param value - The property value or values to operate from.
+         * @param styles - The styles to coordinate with the property.
+         */
+        constructor(propertyName, value, styles) {
+            this.propertyName = propertyName;
+            this.value = value;
+            this.styles = styles;
+        }
+        /**
+         * Binds the behavior to the element.
+         * @param elementInstance - The element for which the property is applied.
+         */
+        bind(elementInstance) {
+            Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
+            this.handleChange(elementInstance, this.propertyName);
+        }
+        /**
+         * Unbinds the behavior from the element.
+         * @param source - The element for which the behavior is unbinding.
+         */
+        unbind(source) {
+            Observable.getNotifier(source).unsubscribe(this, this.propertyName);
+            source.$fastController.removeStyles(this.styles);
+        }
+        /**
+         * Change event for the provided element.
+         * @param source - the element for which to attach or detach styles.
+         * @param key - the key to lookup to know if the element already has the styles
+         * @internal
+         */
+        handleChange(source, key) {
+            // @ts-expect-error Accessing arbitrary property of an element
+            const currentValue = source[key];
+            if (Array.isArray(this.value)
+                ? this.value.includes(currentValue)
+                : this.value === currentValue) {
+                source.$fastController.addStyles(this.styles);
+            }
+            else {
+                source.$fastController.removeStyles(this.styles);
+            }
+        }
+    }
+
+    /**
+     * Behavior that will conditionally apply a stylesheet based on the element's
+     * appearance property
+     *
+     * @param value - The value or values of the appearance property
+     * @param styles - The styles to be applied when condition matches
+     *
+     * @public
+     */
+    function appearanceBehavior(value, styles) {
+        return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
+    }
+
+    const styles$A = css `
+    ${display('inline-flex')}
+
+    :host {
+        background-color: transparent;
+        height: ${controlHeight};
+        color: ${buttonLabelFontColor};
+        font: ${buttonLabelFont};
+        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;
+    }
+
+    :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;
+    }
+
+    :host([disabled]) .control {
+        box-shadow: none;
+        outline: none;
+    }
+
+    .content {
+        display: contents;
+    }
+
+    :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;
+    }
+`.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};
+            }
+
+            :host([disabled]) .control {
+                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};
+            }
+
+            :host([disabled]) .control {
+                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};
+            }
+
+            :host([disabled]) .control {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+                border-color: transparent;
+            }
+        `));
+    const buttonAppearanceVariantStyles = css ``.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+            :host([appearance-variant='primary']) .control {
+                box-shadow: 0px 0px 0px ${borderWidth}
+                    rgba(${actionRgbPartialColor}, 0.3) inset;
+            }
+
+            :host([appearance-variant='primary']) .control:hover {
+                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+            }
+
+            :host([appearance-variant='primary']) .control${focusVisible} {
+                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+            }
+
+            :host([appearance-variant='primary']) .control:active {
+                box-shadow: none;
+            }
+
+            :host([appearance-variant='primary'][disabled]) .control {
+                box-shadow: none;
+            }
+        `), appearanceBehavior(ButtonAppearance.block, css `
+            :host([appearance-variant='primary']) .control {
+                background-clip: padding-box;
+                border-color: rgba(${actionRgbPartialColor}, 0.3);
+                border-width: calc(2 * ${borderWidth});
+                padding: 0 calc(${standardPadding} - ${borderWidth});
+            }
+
+            :host([appearance-variant='primary'][content-hidden]) .control {
+                padding: 0px;
+            }
+
+            :host([appearance-variant='primary']) .control:hover {
+                border-color: ${borderHoverColor};
+                box-shadow: none;
+            }
+
+            :host([appearance-variant='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([appearance-variant='primary'][content-hidden])
+                .control${focusVisible} {
+                padding: 0px;
+            }
+
+            :host([appearance-variant='primary']) .control:active {
+                background-clip: border-box;
+                border-color: ${fillSelectedColor};
+                border-width: ${borderWidth};
+                box-shadow: none;
+                padding: 0 ${standardPadding};
+            }
+
+            :host([appearance-variant='primary'][content-hidden])
+                .control:active {
+                padding: 0px;
+            }
+
+            :host([appearance-variant='primary'][disabled]) .control {
+                background-clip: border-box;
+                border-color: transparent;
+                border-width: ${borderWidth};
+                box-shadow: none;
+                padding: 0 ${standardPadding};
+            }
+
+            :host([appearance-variant='primary'][disabled][content-hidden])
+                .control {
+                padding: 0px;
+            }
+        `));
+
+    const styles$z = css `
+    ${styles$A}
+    ${buttonAppearanceVariantStyles}
+
+    .control {
+        text-decoration: none;
+    }
+`;
+
+    const template$b = (context, definition) => html `
+    <a
+        class="control"
+        part="control"
+        download="${x => x.download}"
+        href=${x => (x.disabled ? null : x.href)}
+        hreflang="${x => x.hreflang}"
+        ping="${x => x.ping}"
+        referrerpolicy="${x => x.referrerpolicy}"
+        rel="${x => x.rel}"
+        target="${x => x.target}"
+        type="${x => x.type}"
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref('control')}
+    >
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
+            <slot ${slotted('defaultSlottedContent')}></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </a>
+`;
+
+    /**
+     * A nimble-styled anchor button
+     */
+    class AnchorButton extends AnchorBase {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: appearance
+             */
+            this.appearance = ButtonAppearance.outline;
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: content-hidden
+             */
+            this.contentHidden = false;
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: disabled
+             */
+            this.disabled = false;
+        }
+    }
+    __decorate$1([
+        attr
+    ], AnchorButton.prototype, "appearance", void 0);
+    __decorate$1([
+        attr({ attribute: 'appearance-variant' })
+    ], AnchorButton.prototype, "appearanceVariant", void 0);
+    __decorate$1([
+        attr({ attribute: 'content-hidden', mode: 'boolean' })
+    ], AnchorButton.prototype, "contentHidden", void 0);
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], AnchorButton.prototype, "disabled", void 0);
+    const nimbleAnchorButton = AnchorButton.compose({
+        baseName: 'anchor-button',
+        template: template$b,
+        styles: styles$z,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
+
+    const styles$y = css `
+    :host {
+        contain: layout;
+        display: block;
+        z-index: 1000;
+    }
+`;
+
+    // When the anchor element changes position on the page, it is the client's responsibility to update the position
+    // of the anchored region by calling update() on the anchored region.
+    //
+    // When the anchor element is recreated on the page, it is the client's responsibility to reset the reference the
+    // anchored region has to the anchor element. This can be done by either recreating the anchor element with a new
+    // ID that is also set as the \`anchor\` attribute on the anchored region or by explicitly setting the value of
+    // anchorElement on the anchored region to the new anchor element.
+    /**
+     * A nimble-styled anchored region control.
+     */
+    class AnchoredRegion extends AnchoredRegion$1 {
+    }
+    const nimbleAnchoredRegion = AnchoredRegion.compose({
+        baseName: 'anchored-region',
+        baseClass: AnchoredRegion$1,
+        template: anchoredRegionTemplate,
+        styles: styles$y
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleAnchoredRegion());
+
+    const styles$x = css `
+    ${display('inline-block')}
+
+    :host {
+        box-sizing: border-box;
+        font: ${linkFont};
+        --ni-private-breadcrumb-link-font-color: ${linkFontColor};
+        --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};
+    }
+
+    :host([appearance='prominent']) {
+        --ni-private-breadcrumb-link-font-color: ${linkProminentFontColor};
+        --ni-private-breadcrumb-link-active-font-color: ${linkActiveProminentFontColor};
+    }
+
+    .list {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    ::slotted(*:first-child) {
+        padding-left: 0px;
+    }
+
+    ::slotted(*:not([href]):last-child) {
+        font: ${bodyEmphasizedFont};
+    }
+`;
+
+    /**
+     * A nimble-styled breadcrumb
+     */
+    class Breadcrumb extends Breadcrumb$1 {
+    }
+    __decorate$1([
+        attr
+    ], Breadcrumb.prototype, "appearance", void 0);
+    const nimbleBreadcrumb = Breadcrumb.compose({
+        baseName: 'breadcrumb',
+        baseClass: Breadcrumb$1,
+        template: breadcrumbTemplate,
+        styles: styles$x
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
+
+    /* 🤖 this file was generated by svg-to-ts*/
     const add16X16 = {
         name: 'add_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M13 7H9V3H7v4H3v2h4v4h2V9h4V7z"/></svg>`
@@ -16579,525 +17151,157 @@
         name: 'triangle_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2L2 14h12zm0 4.875l2.438 4.875H5.585z"/></svg>`
     };
-    const triangleFilled16X16 = {
-        name: 'triangle_filled_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2L2 14h12L8 2z"/></svg>`
-    };
-    const trueFalseRectangle16X16 = {
-        name: 'true_false_rectangle_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M13.4 3.003H2.6a1.6 1.6 0 00-1.6 1.6v6.8a1.595 1.595 0 001.6 1.594h10.8a1.595 1.595 0 001.6-1.594v-6.8a1.6 1.6 0 00-1.6-1.6zM7.587 6.58H6.141v3.736H4.946V6.58H3.5v-.896h4.087zm4.913 0h-2.13v.862h1.974v.896H10.37v1.978H9.181V5.684H12.5z"/></svg>`
-    };
-    const unlink16X16 = {
-        name: 'unlink_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M6.126 8.585c-.581.123-1.117.241-1.362.303a1.547 1.547 0 00-1.182 1.51l.01.155.021.193a1.69 1.69 0 00.216.54l.02.038.105.134.127.144.054.047a1.509 1.509 0 00.992.36h.049a1.306 1.306 0 00.224-.034l.03.015.006-.001c.463-.088.925-.186 1.387-.287l.343 1.538c-.488.11-.976.221-1.467.314a3.112 3.112 0 01-.571.053 3.148 3.148 0 01-2.99-2.258l-.011-.045a3.04 3.04 0 01-.076-.35 3.127 3.127 0 01-.03-.206l-.004-.089a3.112 3.112 0 01-.016-.336A3.164 3.164 0 014.35 7.356c.272-.068.808-.203.802-.206l.623-.137zm4.31-1.544l-.353 1.575c.737.176 1.38.334 1.413.346a1.514 1.514 0 01.789.768l.029.066.053.185.038.164.002.045a1.667 1.667 0 01-.035.58l-.064.185-.056.142a1.546 1.546 0 01-1.4.893 1.661 1.661 0 01-.313-.03 54.946 54.946 0 01-1.15-.24l-.347 1.55.406.097-.013-.017c.276.057.55.118.826.173a3.02 3.02 0 00.578.056 3.188 3.188 0 002.811-1.74 3.018 3.018 0 00.129-.311l.033-.083.061-.197a3.047 3.047 0 00.082-.351l.008-.044a3.132 3.132 0 00-2.281-3.513c-.297-.077-.777-.19-1.245-.299M7.932 2.393L6.875 6.075h.75l.3 3.032 1.2-3.782h-.75z"/></svg>`
-    };
-    const unlock16X16 = {
-        name: 'unlock_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M6.062 8V5.986a2.407 2.407 0 01.566-1.516A1.834 1.834 0 018 4a1.883 1.883 0 012 2h2a3.888 3.888 0 00-4-4 3.822 3.822 0 00-2.81 1.078A4.349 4.349 0 004.062 6v2H3v6h10V8z"/></svg>`
-    };
-    const upload16X16 = {
-        name: 'upload_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M14 9v5H2V9h1v4h10V9zM7.982 2L5 7.9l2.004-1.312L7 11h2V6.613L11 7.9z"/></svg>`
-    };
-    const user16X16 = {
-        name: 'user_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.004 2a2.18 2.18 0 012.184 2.182v1.09c.647 0 .378.932 0 1.455a4.275 4.275 0 01-.335.364 8.55 8.55 0 01-.31.742l.208 1.076h.437l2.75 1.527A2.148 2.148 0 0114 12.291V14H2v-1.673a2.163 2.163 0 011.063-1.869l2.758-1.55h.437l.21-1.068a8.52 8.52 0 01-.312-.749 4.275 4.275 0 01-.335-.364c-.378-.523-.647-1.454 0-1.454v-1.09A2.18 2.18 0 018.004 2"/></svg>`
-    };
-    const watch16X16 = {
-        name: 'watch_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M12.57 7.28l-.06.013a4.556 4.556 0 00-1.38-2.609V3.44a.481.481 0 00-.48-.48h-.48V2H5.85v.96h-.48a.481.481 0 00-.48.48v1.24a4.545 4.545 0 000 6.64v1.24a.481.481 0 00.48.48h.48V14h4.32v-.96h.48a.481.481 0 00.48-.48v-1.24a4.547 4.547 0 001.379-2.612l.061.012a.481.481 0 00.48-.48v-.48a.481.481 0 00-.48-.48zm-2.3 2.662a1.59 1.59 0 00-.182-.26L8.747 8.338a.785.785 0 000-.666c.132-.133.894-.899.965-1a1.216 1.216 0 00.14-.485 1.004 1.004 0 00-.515.157l-.955.957a.784.784 0 100 1.408c.163.167.956.974 1.236 1.254a1.477 1.477 0 00.36.276 3.055 3.055 0 11.291-.297z"/></svg>`
-    };
-    const waveform16X16 = {
-        name: 'waveform_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M9.77 11.225c-1.582 0-2.076-1.262-2.512-2.376l-.17-.426a26.242 26.242 0 01-.218-.595c-.32-.9-.41-1.046-.652-1.046-.24 0-.308.065-.612.88-.088.237-.188.504-.317.801l-.098.238c-.486 1.178-1.037 2.513-2.747 2.513H2V9.221h.444c.318 0 .48-.316.9-1.292l.133-.307c.06-.148.121-.304.181-.457.435-1.116.927-2.382 2.56-2.382 1.59 0 2.063 1.274 2.48 2.398l.168.443c.082.205.155.396.221.572.345.905.427 1.03.684 1.03.259 0 .409-.317.742-1.157.08-.201.167-.42.266-.652l.097-.228c.477-1.127 1.016-2.405 2.668-2.412l.444-.002L14 6.782h-.447c-.367 0-.506.245-.994 1.387 0 0-.179.434-.238.584-.433 1.101-.973 2.472-2.55 2.472z"/></svg>`
-    };
-    const webviCustom16X16 = {
-        name: 'webvi_custom_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2a6 6 0 106 6 6 6 0 00-6-6zm4.089 2.526h-1.868a5.598 5.598 0 00-.854-1.712 5.363 5.363 0 012.722 1.712zm-2.722 8.66a5.599 5.599 0 00.854-1.712h1.868a5.363 5.363 0 01-2.722 1.712zm3.181-2.344h-2.146a10.644 10.644 0 00.208-1.187L9.923 10c-.05.294-.106.58-.176.843h-1.51l-1.263.632h2.583C9.145 12.647 8.554 13.368 8 13.368c-.517 0-1.065-.633-1.47-1.672l-.56.28a5.018 5.018 0 00.663 1.21 5.363 5.363 0 01-2.722-1.712h.317a.955.955 0 01-.017-.17v-.462h-.76a5.33 5.33 0 01-.804-2.526h1.564v-.632H2.646a5.33 5.33 0 01.805-2.526h.759V4.69a.95.95 0 01.016-.164h-.316a5.363 5.363 0 012.722-1.712 5.017 5.017 0 00-.663 1.207l.56.28c.406-1.037.953-1.67 1.47-1.67.554 0 1.145.722 1.557 1.895H6.98l1.261.632h1.507c.07.263.126.548.176.842l.687.344a10.66 10.66 0 00-.208-1.186h2.146a5.33 5.33 0 01.804 2.526h-.67a.92.92 0 01-.001.632h.671a5.33 5.33 0 01-.804 2.526zM12.105 8a.326.326 0 01-.19.296l-6.598 3.3-.148.036a.327.327 0 01-.327-.328V4.69a.327.327 0 01.492-.281l6.595 3.302a.326.326 0 01.176.29z"/></svg>`
-    };
-    const webviHost16X16 = {
-        name: 'webvi_host_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2a6 6 0 106 6 6 6 0 00-6-6zm4.09 2.526H10.22a5.6 5.6 0 00-.854-1.712 5.364 5.364 0 012.722 1.712zm-2.723 8.66a5.6 5.6 0 00.854-1.712h1.868a5.363 5.363 0 01-2.722 1.712zm3.181-2.344h-2.146a10.657 10.657 0 00.208-1.187L9.923 10a9.85 9.85 0 01-.176.843h-1.51l-1.263.632h2.583C9.145 12.647 8.554 13.368 8 13.368c-.517 0-1.064-.633-1.47-1.672l-.56.28a5.02 5.02 0 00.663 1.21 5.363 5.363 0 01-2.722-1.712h.317a.96.96 0 01-.017-.17v-.462h-.76a5.33 5.33 0 01-.804-2.526H4.21v-.632H2.647a5.33 5.33 0 01.805-2.526h.759V4.69a.95.95 0 01.016-.164h-.316a5.364 5.364 0 012.722-1.712 5.02 5.02 0 00-.663 1.207l.56.28c.406-1.037.953-1.67 1.47-1.67.554 0 1.145.722 1.557 1.895H6.98l1.262.632h1.506c.07.263.126.548.176.842l.687.344a10.646 10.646 0 00-.208-1.186h2.146a5.33 5.33 0 01.804 2.526h-.67a.92.92 0 01-.001.632h.671a5.33 5.33 0 01-.804 2.526zm-.619-3.131L5.334 4.409a.327.327 0 00-.492.281v6.613a.327.327 0 00.327.328l.148-.035 6.598-3.3a.326.326 0 00.014-.585zm-6.087 2.505V5.78L10.274 8z"/></svg>`
-    };
-    const windowCode16X16 = {
-        name: 'window_code_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M2 2v12h12V2zm11 11H3V5h10zM4 9.135l2.698-1.118v.75l-1.588.65 1.588.646v.75l-2.694-1.12zm4.42-1.49h.792l-1.565 3.71h-.783zM12 9.135v.557l-2.694 1.12v-.75l.062-.024 1.526-.626-1.588-.648v-.747z"/></svg>`
-    };
-    const windowText16X16 = {
-        name: 'window_text_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M2 2v12h12V2zm11 11H3V5h10zM7 8H4V6h3zm5 2H4V9h8zm0 2H4v-1h8z"/></svg>`
-    };
-    const wrenchHammer16X16 = {
-        name: 'wrench_hammer_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M12.286 11.714l-5.791-5.79a2.504 2.504 0 00.17-.755 2.149 2.149 0 00-.095-.814 2.12 2.12 0 00-.55-.904 2.328 2.328 0 00-1.76-.685h-.045a2.104 2.104 0 00-.718.155l1.102 1.104.32.32.244.245a1.864 1.864 0 01-.22.854 1.043 1.043 0 01-.114.145 1.648 1.648 0 01-1.003.335L2.61 4.704l-.449-.449a2.074 2.074 0 00-.135.545l-.015.105a2.337 2.337 0 00.384 1.518 2.51 2.51 0 00.295.36 2.205 2.205 0 001.576.65 2.453 2.453 0 00.898-.175l4.793 4.796 1.203 1.2h.668l.663-.665v-.67zM5.75 8.908l1.367 1.367-2.988 2.987h-.923l-.45-.45v-.916zM14 5.906l-1.81 1.809-1.298-1.216-1.38 1.38-1.367-1.365 1.374-1.382-1.622-1.62.683-.774 2.252.45z"/></svg>`
-    };
-    const xmark16X16 = {
-        name: 'xmark_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M13 4.667L9.667 7.999 13 11.333 11.333 13 8 9.667 4.667 13 3 11.333 6.333 8 3 4.667 4.667 3 8 6.333 11.333 3z"/></svg>`
-    };
-    const xmarkCheck16X16 = {
-        name: 'xmark_check_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026L4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363zm1.155-10.68l-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312z"/></svg>`
-    };
-
-    /**
-     * 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$w = 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:any-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:any-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$w,
-        separator: forwardSlash16X16.data
-    });
-    DesignSystem.getOrCreate()
-        .withPrefix('nimble')
-        .register(nimbleBreadcrumbItem());
-
-    /**
-     * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
-     * styles are applied while the property matches and that styles are not applied if the property does
-     * not match.
-     *
-     * @public
-     */
-    class MultivaluePropertyStyleSheetBehavior {
-        /**
-         * Constructs a {@link MultivaluePropertyStyleSheetBehavior} instance.
-         * @param propertyName - The property name to operate from.
-         * @param value - The property value or values to operate from.
-         * @param styles - The styles to coordinate with the property.
-         */
-        constructor(propertyName, value, styles) {
-            this.propertyName = propertyName;
-            this.value = value;
-            this.styles = styles;
-        }
-        /**
-         * Binds the behavior to the element.
-         * @param elementInstance - The element for which the property is applied.
-         */
-        bind(elementInstance) {
-            Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
-            this.handleChange(elementInstance, this.propertyName);
-        }
-        /**
-         * Unbinds the behavior from the element.
-         * @param source - The element for which the behavior is unbinding.
-         */
-        unbind(source) {
-            Observable.getNotifier(source).unsubscribe(this, this.propertyName);
-            source.$fastController.removeStyles(this.styles);
-        }
-        /**
-         * Change event for the provided element.
-         * @param source - the element for which to attach or detach styles.
-         * @param key - the key to lookup to know if the element already has the styles
-         * @internal
-         */
-        handleChange(source, key) {
-            // @ts-expect-error Accessing arbitrary property of an element
-            const currentValue = source[key];
-            if (Array.isArray(this.value)
-                ? this.value.includes(currentValue)
-                : this.value === currentValue) {
-                source.$fastController.addStyles(this.styles);
-            }
-            else {
-                source.$fastController.removeStyles(this.styles);
-            }
-        }
-    }
-
-    /**
-     * Behavior that will conditionally apply a stylesheet based on the element's
-     * appearance property
-     *
-     * @param value - The value or values of the appearance property
-     * @param styles - The styles to be applied when condition matches
-     *
-     * @public
-     */
-    function appearanceBehavior(value, styles) {
-        return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
-    }
-
-    /**
-     * Types of button appearance.
-     * @public
-     */
-    const ButtonAppearance = {
-        outline: 'outline',
-        ghost: 'ghost',
-        block: 'block'
+    const triangleFilled16X16 = {
+        name: 'triangle_filled_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2L2 14h12L8 2z"/></svg>`
+    };
+    const trueFalseRectangle16X16 = {
+        name: 'true_false_rectangle_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M13.4 3.003H2.6a1.6 1.6 0 00-1.6 1.6v6.8a1.595 1.595 0 001.6 1.594h10.8a1.595 1.595 0 001.6-1.594v-6.8a1.6 1.6 0 00-1.6-1.6zM7.587 6.58H6.141v3.736H4.946V6.58H3.5v-.896h4.087zm4.913 0h-2.13v.862h1.974v.896H10.37v1.978H9.181V5.684H12.5z"/></svg>`
+    };
+    const unlink16X16 = {
+        name: 'unlink_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M6.126 8.585c-.581.123-1.117.241-1.362.303a1.547 1.547 0 00-1.182 1.51l.01.155.021.193a1.69 1.69 0 00.216.54l.02.038.105.134.127.144.054.047a1.509 1.509 0 00.992.36h.049a1.306 1.306 0 00.224-.034l.03.015.006-.001c.463-.088.925-.186 1.387-.287l.343 1.538c-.488.11-.976.221-1.467.314a3.112 3.112 0 01-.571.053 3.148 3.148 0 01-2.99-2.258l-.011-.045a3.04 3.04 0 01-.076-.35 3.127 3.127 0 01-.03-.206l-.004-.089a3.112 3.112 0 01-.016-.336A3.164 3.164 0 014.35 7.356c.272-.068.808-.203.802-.206l.623-.137zm4.31-1.544l-.353 1.575c.737.176 1.38.334 1.413.346a1.514 1.514 0 01.789.768l.029.066.053.185.038.164.002.045a1.667 1.667 0 01-.035.58l-.064.185-.056.142a1.546 1.546 0 01-1.4.893 1.661 1.661 0 01-.313-.03 54.946 54.946 0 01-1.15-.24l-.347 1.55.406.097-.013-.017c.276.057.55.118.826.173a3.02 3.02 0 00.578.056 3.188 3.188 0 002.811-1.74 3.018 3.018 0 00.129-.311l.033-.083.061-.197a3.047 3.047 0 00.082-.351l.008-.044a3.132 3.132 0 00-2.281-3.513c-.297-.077-.777-.19-1.245-.299M7.932 2.393L6.875 6.075h.75l.3 3.032 1.2-3.782h-.75z"/></svg>`
+    };
+    const unlock16X16 = {
+        name: 'unlock_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M6.062 8V5.986a2.407 2.407 0 01.566-1.516A1.834 1.834 0 018 4a1.883 1.883 0 012 2h2a3.888 3.888 0 00-4-4 3.822 3.822 0 00-2.81 1.078A4.349 4.349 0 004.062 6v2H3v6h10V8z"/></svg>`
+    };
+    const upload16X16 = {
+        name: 'upload_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M14 9v5H2V9h1v4h10V9zM7.982 2L5 7.9l2.004-1.312L7 11h2V6.613L11 7.9z"/></svg>`
+    };
+    const user16X16 = {
+        name: 'user_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.004 2a2.18 2.18 0 012.184 2.182v1.09c.647 0 .378.932 0 1.455a4.275 4.275 0 01-.335.364 8.55 8.55 0 01-.31.742l.208 1.076h.437l2.75 1.527A2.148 2.148 0 0114 12.291V14H2v-1.673a2.163 2.163 0 011.063-1.869l2.758-1.55h.437l.21-1.068a8.52 8.52 0 01-.312-.749 4.275 4.275 0 01-.335-.364c-.378-.523-.647-1.454 0-1.454v-1.09A2.18 2.18 0 018.004 2"/></svg>`
+    };
+    const watch16X16 = {
+        name: 'watch_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M12.57 7.28l-.06.013a4.556 4.556 0 00-1.38-2.609V3.44a.481.481 0 00-.48-.48h-.48V2H5.85v.96h-.48a.481.481 0 00-.48.48v1.24a4.545 4.545 0 000 6.64v1.24a.481.481 0 00.48.48h.48V14h4.32v-.96h.48a.481.481 0 00.48-.48v-1.24a4.547 4.547 0 001.379-2.612l.061.012a.481.481 0 00.48-.48v-.48a.481.481 0 00-.48-.48zm-2.3 2.662a1.59 1.59 0 00-.182-.26L8.747 8.338a.785.785 0 000-.666c.132-.133.894-.899.965-1a1.216 1.216 0 00.14-.485 1.004 1.004 0 00-.515.157l-.955.957a.784.784 0 100 1.408c.163.167.956.974 1.236 1.254a1.477 1.477 0 00.36.276 3.055 3.055 0 11.291-.297z"/></svg>`
+    };
+    const waveform16X16 = {
+        name: 'waveform_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M9.77 11.225c-1.582 0-2.076-1.262-2.512-2.376l-.17-.426a26.242 26.242 0 01-.218-.595c-.32-.9-.41-1.046-.652-1.046-.24 0-.308.065-.612.88-.088.237-.188.504-.317.801l-.098.238c-.486 1.178-1.037 2.513-2.747 2.513H2V9.221h.444c.318 0 .48-.316.9-1.292l.133-.307c.06-.148.121-.304.181-.457.435-1.116.927-2.382 2.56-2.382 1.59 0 2.063 1.274 2.48 2.398l.168.443c.082.205.155.396.221.572.345.905.427 1.03.684 1.03.259 0 .409-.317.742-1.157.08-.201.167-.42.266-.652l.097-.228c.477-1.127 1.016-2.405 2.668-2.412l.444-.002L14 6.782h-.447c-.367 0-.506.245-.994 1.387 0 0-.179.434-.238.584-.433 1.101-.973 2.472-2.55 2.472z"/></svg>`
+    };
+    const webviCustom16X16 = {
+        name: 'webvi_custom_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2a6 6 0 106 6 6 6 0 00-6-6zm4.089 2.526h-1.868a5.598 5.598 0 00-.854-1.712 5.363 5.363 0 012.722 1.712zm-2.722 8.66a5.599 5.599 0 00.854-1.712h1.868a5.363 5.363 0 01-2.722 1.712zm3.181-2.344h-2.146a10.644 10.644 0 00.208-1.187L9.923 10c-.05.294-.106.58-.176.843h-1.51l-1.263.632h2.583C9.145 12.647 8.554 13.368 8 13.368c-.517 0-1.065-.633-1.47-1.672l-.56.28a5.018 5.018 0 00.663 1.21 5.363 5.363 0 01-2.722-1.712h.317a.955.955 0 01-.017-.17v-.462h-.76a5.33 5.33 0 01-.804-2.526h1.564v-.632H2.646a5.33 5.33 0 01.805-2.526h.759V4.69a.95.95 0 01.016-.164h-.316a5.363 5.363 0 012.722-1.712 5.017 5.017 0 00-.663 1.207l.56.28c.406-1.037.953-1.67 1.47-1.67.554 0 1.145.722 1.557 1.895H6.98l1.261.632h1.507c.07.263.126.548.176.842l.687.344a10.66 10.66 0 00-.208-1.186h2.146a5.33 5.33 0 01.804 2.526h-.67a.92.92 0 01-.001.632h.671a5.33 5.33 0 01-.804 2.526zM12.105 8a.326.326 0 01-.19.296l-6.598 3.3-.148.036a.327.327 0 01-.327-.328V4.69a.327.327 0 01.492-.281l6.595 3.302a.326.326 0 01.176.29z"/></svg>`
+    };
+    const webviHost16X16 = {
+        name: 'webvi_host_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2a6 6 0 106 6 6 6 0 00-6-6zm4.09 2.526H10.22a5.6 5.6 0 00-.854-1.712 5.364 5.364 0 012.722 1.712zm-2.723 8.66a5.6 5.6 0 00.854-1.712h1.868a5.363 5.363 0 01-2.722 1.712zm3.181-2.344h-2.146a10.657 10.657 0 00.208-1.187L9.923 10a9.85 9.85 0 01-.176.843h-1.51l-1.263.632h2.583C9.145 12.647 8.554 13.368 8 13.368c-.517 0-1.064-.633-1.47-1.672l-.56.28a5.02 5.02 0 00.663 1.21 5.363 5.363 0 01-2.722-1.712h.317a.96.96 0 01-.017-.17v-.462h-.76a5.33 5.33 0 01-.804-2.526H4.21v-.632H2.647a5.33 5.33 0 01.805-2.526h.759V4.69a.95.95 0 01.016-.164h-.316a5.364 5.364 0 012.722-1.712 5.02 5.02 0 00-.663 1.207l.56.28c.406-1.037.953-1.67 1.47-1.67.554 0 1.145.722 1.557 1.895H6.98l1.262.632h1.506c.07.263.126.548.176.842l.687.344a10.646 10.646 0 00-.208-1.186h2.146a5.33 5.33 0 01.804 2.526h-.67a.92.92 0 01-.001.632h.671a5.33 5.33 0 01-.804 2.526zm-.619-3.131L5.334 4.409a.327.327 0 00-.492.281v6.613a.327.327 0 00.327.328l.148-.035 6.598-3.3a.326.326 0 00.014-.585zm-6.087 2.505V5.78L10.274 8z"/></svg>`
+    };
+    const windowCode16X16 = {
+        name: 'window_code_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M2 2v12h12V2zm11 11H3V5h10zM4 9.135l2.698-1.118v.75l-1.588.65 1.588.646v.75l-2.694-1.12zm4.42-1.49h.792l-1.565 3.71h-.783zM12 9.135v.557l-2.694 1.12v-.75l.062-.024 1.526-.626-1.588-.648v-.747z"/></svg>`
+    };
+    const windowText16X16 = {
+        name: 'window_text_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M2 2v12h12V2zm11 11H3V5h10zM7 8H4V6h3zm5 2H4V9h8zm0 2H4v-1h8z"/></svg>`
+    };
+    const wrenchHammer16X16 = {
+        name: 'wrench_hammer_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M12.286 11.714l-5.791-5.79a2.504 2.504 0 00.17-.755 2.149 2.149 0 00-.095-.814 2.12 2.12 0 00-.55-.904 2.328 2.328 0 00-1.76-.685h-.045a2.104 2.104 0 00-.718.155l1.102 1.104.32.32.244.245a1.864 1.864 0 01-.22.854 1.043 1.043 0 01-.114.145 1.648 1.648 0 01-1.003.335L2.61 4.704l-.449-.449a2.074 2.074 0 00-.135.545l-.015.105a2.337 2.337 0 00.384 1.518 2.51 2.51 0 00.295.36 2.205 2.205 0 001.576.65 2.453 2.453 0 00.898-.175l4.793 4.796 1.203 1.2h.668l.663-.665v-.67zM5.75 8.908l1.367 1.367-2.988 2.987h-.923l-.45-.45v-.916zM14 5.906l-1.81 1.809-1.298-1.216-1.38 1.38-1.367-1.365 1.374-1.382-1.622-1.62.683-.774 2.252.45z"/></svg>`
+    };
+    const xmark16X16 = {
+        name: 'xmark_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M13 4.667L9.667 7.999 13 11.333 11.333 13 8 9.667 4.667 13 3 11.333 6.333 8 3 4.667 4.667 3 8 6.333 11.333 3z"/></svg>`
+    };
+    const xmarkCheck16X16 = {
+        name: 'xmark_check_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026L4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363zm1.155-10.68l-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312z"/></svg>`
     };
 
-    const styles$v = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
-        background-color: transparent;
         height: ${controlHeight};
-        color: ${buttonLabelFontColor};
-        font: ${buttonLabelFont};
-        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;
-    }
-
-    :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;
-    }
-
-    :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;
-    }
-`.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;
-            }
-        `));
+        box-sizing: border-box;
+        padding-left: calc(4px - ${borderWidth});
 
-    const styles$u = styles$v.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
-            :host([appearance-variant='primary']) .control {
-                box-shadow: 0px 0px 0px ${borderWidth}
-                    rgba(${actionRgbPartialColor}, 0.3) inset;
-            }
+        ${
+/* When href removed the .control element is also removed
+ so this becomes the fallback color for the slot */ ''}
+        color: ${bodyFontColor};
+        font: ${linkFont};
+    }
 
-            :host([appearance-variant='primary']) .control:hover {
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            }
+    .listitem {
+        display: flex;
+        align-items: center;
+    }
 
-            :host([appearance-variant='primary']) .control${focusVisible} {
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            }
+    .control {
+        color: var(--ni-private-breadcrumb-link-font-color);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: ${borderWidth} solid transparent;
+        padding-right: calc(4px - ${borderWidth});
+        text-decoration: none;
+    }
 
-            :host([appearance-variant='primary']) .control:active {
-                box-shadow: none;
-            }
+    .control:hover {
+        text-decoration: underline;
+    }
 
-            :host([appearance-variant='primary']) .control[disabled] {
-                box-shadow: none;
-            }
-        `), appearanceBehavior(ButtonAppearance.block, css `
-            :host([appearance-variant='primary']) .control {
-                background-clip: padding-box;
-                border-color: rgba(${actionRgbPartialColor}, 0.3);
-                border-width: calc(2 * ${borderWidth});
-                padding: 0 calc(${standardPadding} - ${borderWidth});
-            }
+    .control${focusVisible} {
+        border: ${borderWidth} solid ${borderHoverColor};
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: 1px;
+    }
 
-            :host([appearance-variant='primary'][content-hidden]) .control {
-                padding: 0px;
-            }
+    .control:active {
+        color: var(--ni-private-breadcrumb-link-active-font-color);
+        text-decoration: underline;
+    }
 
-            :host([appearance-variant='primary']) .control:hover {
-                border-color: ${borderHoverColor};
-                box-shadow: none;
-            }
+    .start,
+    .end {
+        display: flex;
+        align-items: center;
+    }
 
-            :host([appearance-variant='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([appearance-variant='primary'][content-hidden])
-                .control${focusVisible} {
-                padding: 0px;
-            }
+    slot[name='separator'] {
+        display: flex;
+        align-items: center;
+    }
 
-            :host([appearance-variant='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([appearance-variant='primary'][content-hidden])
-                .control:active {
-                padding: 0px;
-            }
+    slot[name='separator'] path {
+        fill: ${placeholderFontColor};
+    }
+`;
 
-            :host([appearance-variant='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$w,
+        separator: forwardSlash16X16.data
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleBreadcrumbItem());
 
-            :host([appearance-variant='primary'][content-hidden])
-                .control[disabled] {
-                padding: 0px;
-            }
-        `));
+    const styles$v = css `
+    ${styles$A}
+    ${buttonAppearanceVariantStyles}
+`;
 
     /**
      * A nimble-styled HTML button
@@ -17119,13 +17323,13 @@
             this.contentHidden = false;
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], Button.prototype, "appearance", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'appearance-variant' })
     ], Button.prototype, "appearanceVariant", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'content-hidden', mode: 'boolean' })
     ], Button.prototype, "contentHidden", void 0);
     /**
@@ -17141,14 +17345,87 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$u,
+        styles: styles$v,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
-    const styles$t = css `
+    /**
+     * Subscription for {@link ThemeStyleSheetBehavior}
+     */
+    class ThemeStyleSheetBehaviorSubscription {
+        constructor(value, styles, source) {
+            this.value = value;
+            this.styles = styles;
+            this.source = source;
+        }
+        handleChange() {
+            const theme$1 = theme.getValueFor(this.source);
+            if (Array.isArray(this.value)
+                ? this.value.includes(theme$1)
+                : this.value === theme$1) {
+                this.source.$fastController.addStyles(this.styles);
+            }
+            else {
+                this.source.$fastController.removeStyles(this.styles);
+            }
+        }
+    }
+    /**
+     * Behavior to conditionally apply theme-based stylesheets.
+     */
+    class ThemeStyleSheetBehavior {
+        constructor(theme, styles) {
+            this.theme = theme;
+            this.styles = styles;
+            this.cache = new WeakMap();
+        }
+        /**
+         * @internal
+         */
+        bind(source) {
+            const subscriber = this.cache.get(source)
+                || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
+            // Currently subscriber from cache may have gone through unbind
+            // but still be in cache so always resubscribe
+            // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+            theme.subscribe(subscriber, source);
+            subscriber.handleChange();
+            this.cache.set(source, subscriber);
+        }
+        /**
+         * @internal
+         */
+        unbind(source) {
+            const subscriber = this.cache.get(source);
+            if (subscriber) {
+                theme.unsubscribe(subscriber);
+            }
+            // Currently does not evict subscriber from cache
+            // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+        }
+    }
+    /**
+     * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
+     * the behavior will use the nearest ThemeProvider's 'theme' design system value.
+     *
+     * @public
+     * @example
+     * ```ts
+     * css`
+     *     // ...
+     * `.withBehaviors(
+     *     themeBehavior(Theme.light, css` ... `),
+     *     // Apply style for both dark and color theme
+     *     themeBehavior([Theme.dark, Theme.color], css` ... `)
+     * )
+     * ```
+     */
+    const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
+
+    const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -17292,7 +17569,7 @@
             this.selected = false;
         }
     }
-    __decorate([
+    __decorate$1([
         attr({ mode: 'boolean' })
     ], CardButton.prototype, "selected", void 0);
     /**
@@ -17307,14 +17584,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$t,
+        styles: styles$u,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$s = css `
+    const styles$t = css `
     ${display('inline-flex')}
 
     :host {
@@ -17432,14 +17709,14 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$s,
+        styles: styles$t,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    const styles$r = css `
-    ${styles$v}
+    const styles$s = css `
+    ${styles$A}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -17454,18 +17731,18 @@
         background-color: ${fillSelectedColor};
     }
 
-    .control[aria-pressed='true'][disabled] {
+    :host([disabled]) .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
     }
 
-    .control[aria-pressed='true'][disabled]:hover {
+    :host([disabled]) .control[aria-pressed='true']:hover {
         background-color: ${fillSelectedColor};
         border-color: ${fillSelectedColor};
     }
 `;
 
-    const template$9 = (context, definition) => html `
+    const template$a = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -17531,17 +17808,17 @@
             this.contentHidden = false;
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], ToggleButton.prototype, "appearance", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'content-hidden', mode: 'boolean' })
     ], ToggleButton.prototype, "contentHidden", void 0);
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$9,
-        styles: styles$r,
+        template: template$a,
+        styles: styles$s,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17554,13 +17831,13 @@
     </div>
 `;
 
-    const template$8 = html `
+    const template$9 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -17607,14 +17884,14 @@
             this.icon = icon;
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], Icon.prototype, "severity", void 0);
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$8,
-            styles: styles$q,
+            template: template$9,
+            styles: styles$r,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -17648,7 +17925,7 @@
         block: 'block'
     };
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('inline-flex')}
 
     :host {
@@ -17876,7 +18153,7 @@
             }
         `));
 
-    const styles$o = css `
+    const styles$p = css `
     .error-icon {
         display: none;
     }
@@ -17914,9 +18191,9 @@
     }
 `;
 
-    const styles$n = css `
+    const styles$o = css `
+    ${styles$q}
     ${styles$p}
-    ${styles$o}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -18136,23 +18413,23 @@
             }
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], Combobox.prototype, "appearance", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], Combobox.prototype, "dropdownButton", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'error-text' })
     ], Combobox.prototype, "errorText", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'error-visible', mode: 'boolean' })
     ], Combobox.prototype, "errorVisible", void 0);
     const nimbleCombobox = Combobox.compose({
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$n,
+        styles: styles$o,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -18196,7 +18473,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('grid')}
 
     dialog {
@@ -18312,7 +18589,7 @@
             }
         `));
 
-    const template$7 = html `
+    const template$8 = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -18420,31 +18697,31 @@
     // We want the member to match the name of the constant
     // eslint-disable-next-line @typescript-eslint/naming-convention
     Dialog.UserDismissed = UserDismissed;
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
     ], Dialog.prototype, "preventDismiss", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'header-hidden', mode: 'boolean' })
     ], Dialog.prototype, "headerHidden", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'footer-hidden', mode: 'boolean' })
     ], Dialog.prototype, "footerHidden", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], Dialog.prototype, "footerIsEmpty", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], Dialog.prototype, "slottedFooterElements", void 0);
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$7,
-        styles: styles$m,
+        template: template$8,
+        styles: styles$n,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('block')}
 
     :host {
@@ -18599,7 +18876,7 @@
             }
         `));
 
-    const template$6 = html `
+    const template$7 = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -18704,17 +18981,17 @@
     // We want the member to match the name of the constant
     // eslint-disable-next-line @typescript-eslint/naming-convention
     Drawer.UserDismissed = UserDismissed;
-    __decorate([
+    __decorate$1([
         attr
     ], Drawer.prototype, "location", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
     ], Drawer.prototype, "preventDismiss", void 0);
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$6,
-        styles: styles$l
+        template: template$7,
+        styles: styles$m
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -20346,7 +20623,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('flex')}
 
     :host {
@@ -20426,11 +20703,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$k
+        styles: styles$l
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('grid')}
 
     :host {
@@ -20485,11 +20762,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$j
+        styles: styles$k
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('inline-block')}
 
     :host {
@@ -20508,7 +20785,7 @@
 `;
 
     // prettier-ignore
-    const template$5 = html `
+    const template$6 = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -20690,41 +20967,41 @@
             }
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], MenuButton.prototype, "appearance", void 0);
-    __decorate([
+    __decorate$1([
         attr({ mode: 'boolean' })
     ], MenuButton.prototype, "disabled", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'content-hidden', mode: 'boolean' })
     ], MenuButton.prototype, "contentHidden", void 0);
-    __decorate([
+    __decorate$1([
         attr({ mode: 'boolean' })
     ], MenuButton.prototype, "open", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'position' })
     ], MenuButton.prototype, "position", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], MenuButton.prototype, "toggleButton", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], MenuButton.prototype, "region", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$5,
-        styles: styles$i,
+        template: template$6,
+        styles: styles$j,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$h = css `
+    const styles$i = css `
     ${display('grid')}
 
     :host {
@@ -20822,7 +21099,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$h,
+        styles: styles$i,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -20836,9 +21113,9 @@
         block: 'block'
     };
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('inline-block')}
-    ${styles$o}
+    ${styles$p}
 
     :host {
         font: ${bodyFont};
@@ -21031,13 +21308,13 @@
             this.control.setAttribute('role', 'spinbutton');
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], NumberField.prototype, "appearance", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'error-text' })
     ], NumberField.prototype, "errorText", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'error-visible', mode: 'boolean' })
     ], NumberField.prototype, "errorVisible", void 0);
     /**
@@ -21052,7 +21329,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$g,
+        styles: styles$h,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -21093,7 +21370,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('inline-flex')}
 
     :host {
@@ -21193,12 +21470,12 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$f,
+        styles: styles$g,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -21233,16 +21510,16 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$e,
+        styles: styles$f,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
 
-    const styles$d = css `
+    const styles$e = css `
+    ${styles$q}
     ${styles$p}
-    ${styles$o}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -21305,20 +21582,20 @@
             }
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], Select.prototype, "appearance", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'error-text' })
     ], Select.prototype, "errorText", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'error-visible', mode: 'boolean' })
     ], Select.prototype, "errorVisible", void 0);
     const nimbleSelect = Select.compose({
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$d,
+        styles: styles$e,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${DesignSystem.tagFor(IconExclamationMark)}
@@ -21330,6 +21607,172 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
+    const styles$d = css `
+    ${display('inline-flex')}
+
+    :host {
+        width: 16px;
+        height: 16px;
+    }
+
+    div.container {
+        margin: max(2px, 6.25%);
+        flex: 1;
+        ${
+/**
+ * At some spinner sizes / browser zoom levels, the spinner bits/squares appear to slightly overlap visually.
+ * If we set a color with transparency on each bit, it'll look wrong in the overlapping region (since the opacity
+ * combines and affects the color at the overlapping spot).
+ * Currently all 3 themes use a color with opacity = 0.6, so that's applied here on the parent element instead,
+ * which avoids that issue.
+ */
+''}
+        opacity: 0.6;
+    }
+
+    div.bit1,
+    div.bit2 {
+        background: var(--ni-private-spinner-bits-background-color);
+        width: 50%;
+        height: 50%;
+        margin: auto;
+        animation-duration: 1600ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 0);
+    }
+
+    div.bit1 {
+        animation-name: ni-private-spinner-keyframes-1;
+    }
+
+    div.bit2 {
+        animation-name: ni-private-spinner-keyframes-2;
+    }
+
+    @media (prefers-reduced-motion) {
+        div.bit1,
+        div.bit2 {
+            animation-timing-function: ease-in-out, steps(1);
+            animation-duration: 3200ms;
+        }
+
+        div.bit1 {
+            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+                ni-private-spinner-no-motion-transform-keyframes-1;
+        }
+
+        div.bit2 {
+            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+                ni-private-spinner-no-motion-transform-keyframes-2;
+        }
+    }
+
+    @keyframes ni-private-spinner-keyframes-1 {
+        0%,
+        100% {
+            transform: translate(-50%, 0);
+        }
+
+        25% {
+            transform: translate(50%, 0);
+        }
+
+        50% {
+            transform: translate(50%, 100%);
+        }
+
+        75% {
+            transform: translate(-50%, 100%);
+        }
+    }
+
+    @keyframes ni-private-spinner-keyframes-2 {
+        0%,
+        100% {
+            transform: translate(50%, 0);
+        }
+
+        25% {
+            transform: translate(-50%, 0);
+        }
+
+        50% {
+            transform: translate(-50%, -100%);
+        }
+
+        75% {
+            transform: translate(50%, -100%);
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-opacity-keyframes {
+        0%,
+        50%,
+        100% {
+            opacity: 0;
+        }
+
+        25%,
+        75% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-transform-keyframes-1 {
+        0%,
+        100% {
+            transform: translate(-50%, 0);
+        }
+        50% {
+            transform: translate(50%, 0);
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-transform-keyframes-2 {
+        0%,
+        100% {
+            transform: translate(50%, 0);
+        }
+
+        50% {
+            transform: translate(-50%, 0);
+        }
+    }
+`.withBehaviors(themeBehavior(Theme.light, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${Black91}
+        `), themeBehavior(Theme.dark, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${Black15};
+            }
+        `), themeBehavior(Theme.color, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${White};
+            }
+        `));
+
+    const template$5 = html `
+    <template role="progressbar">
+        <div class="container">
+            <div class="bit1"></div>
+            <div class="bit2"></div>
+        </div>
+    </template>
+`;
+
+    /**
+     * A Nimble-styled spinner component.
+     * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
+     */
+    class Spinner extends FoundationElement {
+    }
+    const nimbleSpinner = Spinner.compose({
+        baseName: 'spinner',
+        template: template$5,
+        styles: styles$d
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
+
     const styles$c = css `
     ${display('inline-flex')}
 
@@ -24756,13 +25199,13 @@
             this.columnHeaders = generatedColumns.map(x => x.header);
         }
     }
-    __decorate([
+    __decorate$1([
         observable
     ], Table.prototype, "data", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], Table.prototype, "tableData", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], Table.prototype, "columnHeaders", void 0);
     const nimbleTable = Table.compose({
@@ -24986,7 +25429,7 @@
             this.appearance = TextAreaAppearance.outline;
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], TextArea.prototype, "appearance", void 0);
     const nimbleTextArea = TextArea.compose({
@@ -25012,7 +25455,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$o}
+    ${styles$p}
 
     :host {
         font: ${bodyFont};
@@ -25260,16 +25703,16 @@
             this.fullBleed = false;
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], TextField.prototype, "appearance", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'error-text' })
     ], TextField.prototype, "errorText", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'error-visible', mode: 'boolean' })
     ], TextField.prototype, "errorVisible", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'full-bleed', mode: 'boolean' })
     ], TextField.prototype, "fullBleed", void 0);
     const nimbleTextField = TextField.compose({
@@ -25466,10 +25909,10 @@
             this.iconVisible = false;
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], Tooltip.prototype, "severity", void 0);
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'icon-visible', mode: 'boolean' })
     ], Tooltip.prototype, "iconVisible", void 0);
     const nimbleTooltip = Tooltip.compose({
@@ -25895,7 +26338,7 @@ Instead styling against the role which is more general and likely a better appro
             return treeItemChild !== null;
         }
     }
-    __decorate([
+    __decorate$1([
         attr({ attribute: 'selection-mode' })
     ], TreeView.prototype, "selectionMode", void 0);
     const nimbleTreeView = TreeView.compose({
@@ -25906,19 +26349,75 @@ Instead styling against the role which is more general and likely a better appro
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
-    // prettier-ignore
     const template = html `
-    <div>
-        <ul>
-            ${repeat(x => x.dies, html ` <li>
-                    ${x => html `dieX: ${x.x}, dieY: ${x.y}, value:
-                        ${x.value}%`}
-                </li>`)}
-        </ul>
+    <div class="wafer-map-container">
+        <svg class="svg-root ${x => x.orientation}">
+            <g class="zoom-container">               
+                <svg class="circle-base" version="1.1" x="0px" y="0px" viewbox="1 .45 20 21">
+                    <path class="circle-drawing-path" d="m 21 12 a 10 10 330 1 1 0 -1.98 a 1 1 0 0 0 0 2"/>
+                </svg>
+            </g>
+        </svg>
+        <div class="wafer-map-area" style="left: 0px; top: 0px">
+            <canvas width=500 height="500" ${ref('canvas')}>
+        </div>
     </div>
 `;
 
-    const styles = css ``;
+    const styles = css `
+    .wafer-map-container {
+        width: 500px;
+        height: 500px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .svg-root {
+        width: 100%;
+        height: 100%;
+    }
+
+    .svg-root.top {
+        transform: rotate(-90deg);
+    }
+
+    .svg-root.right {
+        transform: rotate(0deg);
+    }
+
+    .svg-root.left {
+        transform: rotate(180deg);
+    }
+
+    .svg-root.bottom {
+        transform: rotate(90deg);
+    }
+
+    .zoom-container {
+        width: 100%;
+        height: 100%;
+    }
+
+    .circle-base {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        fill: white;
+    }
+
+    .circle-drawing-path {
+        shape-rendering: 'crispEdges';
+        vector-effect: non-scaling-stroke;
+        stroke-width: ${borderWidth};
+        stroke: ${borderColor};
+    }
+
+    .wafer-map-area {
+        position: absolute;
+    }
+`;
 
     const WaferMapQuadrant = {
         bottomLeft: 'bottom-left',
@@ -28750,6 +29249,32 @@ Instead styling against the role which is more general and likely a better appro
         }
     }
 
+    /**
+     * Responsible for drawing the dies inside the wafer map
+     */
+    class RenderingModule {
+        constructor(waferData, canvas) {
+            this.waferData = waferData;
+            this.context = canvas.getContext('2d');
+        }
+        drawWafer() {
+            const dies = this.waferData.diesRenderInfo;
+            const dimensions = this.waferData.dieDimensions;
+            for (const die of dies) {
+                this.context.fillStyle = die.fillStyle;
+                this.context?.fillRect(die.x, die.y, dimensions.width, dimensions.height);
+                this.context.font = this.waferData.labelsFontSize.toString();
+                this.context.fillStyle = '#ffffff';
+                this.context.textAlign = 'center';
+                const aproxTextHeight = this.context.measureText('M');
+                this.context.fillText(die.text, die.x + dimensions.width / 2, die.y + dimensions.height / 2 + aproxTextHeight.width / 2);
+            }
+        }
+        clearCanvas() {
+            this.context.clearRect(0, 0, this.waferData.containerDimensions.width, this.waferData.containerDimensions.height);
+        }
+    }
+
     /**
      * A nimble-styled WaferMap
      */
@@ -28770,12 +29295,18 @@ Instead styling against the role which is more general and likely a better appro
             };
             this.renderQueued = false;
         }
+        connectedCallback() {
+            super.connectedCallback();
+            this.queueRender();
+        }
         /**
          * @internal
          */
         render() {
             this.renderQueued = false;
-            this.dataManager = new DataManager(this.dies, this.quadrant, { width: this.offsetWidth, height: this.offsetHeight }, this.colorScale, this.highlightedValues, this.colorScaleMode, this.dieLabelsHidden, this.dieLabelsSuffix, this.maxCharacters);
+            this.dataManager = new DataManager(this.dies, this.quadrant, { width: 500, height: 500 }, this.colorScale, this.highlightedValues, this.colorScaleMode, this.dieLabelsHidden, this.dieLabelsSuffix, this.maxCharacters);
+            const renderer = new RenderingModule(this.dataManager, this.canvas);
+            renderer.drawWafer();
         }
         quadrantChanged() {
             this.queueRender();
@@ -28805,47 +29336,53 @@ Instead styling against the role which is more general and likely a better appro
             this.queueRender();
         }
         queueRender() {
+            if (!this.$fastController.isConnected) {
+                return;
+            }
             if (!this.renderQueued) {
                 this.renderQueued = true;
                 DOM.queueUpdate(() => this.render());
             }
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], WaferMap.prototype, "quadrant", void 0);
-    __decorate([
+    __decorate$1([
         attr
     ], WaferMap.prototype, "orientation", void 0);
-    __decorate([
+    __decorate$1([
         attr({
             attribute: 'max-characters',
             converter: nullableNumberConverter
         })
     ], WaferMap.prototype, "maxCharacters", void 0);
-    __decorate([
+    __decorate$1([
         attr({
             attribute: 'die-labels-hidden',
             mode: 'boolean'
         })
     ], WaferMap.prototype, "dieLabelsHidden", void 0);
-    __decorate([
+    __decorate$1([
         attr({
             attribute: 'die-labels-suffix'
         })
     ], WaferMap.prototype, "dieLabelsSuffix", void 0);
-    __decorate([
+    __decorate$1([
         attr({
             attribute: 'color-scale-mode'
         })
+    ], WaferMap.prototype, "canvas", void 0);
+    __decorate$1([
+        observable
     ], WaferMap.prototype, "colorScaleMode", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], WaferMap.prototype, "highlightedValues", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], WaferMap.prototype, "dies", void 0);
-    __decorate([
+    __decorate$1([
         observable
     ], WaferMap.prototype, "colorScale", void 0);
     const nimbleWaferMap = WaferMap.compose({