@ni/nimble-components 15.5.8 → 16.0.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$c = html `<slot></slot>`;
 
-    const styles$y = css `
+    const styles$B = 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$B,
+        template: template$c
     });
     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,145 +15913,702 @@
         }
     }
 
-    /**
-     * 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$A = 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());
+
+    :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$b = (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$b,
+        styles: styles$A,
+        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$z = 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$y = css `
+    ${styles$z}
+    ${buttonAppearanceVariantStyles}
+
+    .control {
+        text-decoration: none;
+    }
+`;
+
+    const template$a = (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$a,
+        styles: styles$y,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
+
+    const styles$x = 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$x
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleAnchoredRegion());
+
+    const styles$w = 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$w
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
     /* 🤖 this file was generated by svg-to-ts*/
     const add16X16 = {
@@ -16640,464 +17212,96 @@
         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 styles$v = css `
     ${display('inline-flex')}
 
-    :host {
-        background-color: transparent;
-        height: ${controlHeight};
-        color: ${buttonLabelFontColor};
-        font: ${buttonLabelFont};
-        cursor: pointer;
-        outline: none;
-        border: none;
+    :host {
+        height: ${controlHeight};
         box-sizing: border-box;
+        padding-left: calc(4px - ${borderWidth});
+
         ${
-/*
-    Not sure why but this is needed to get buttons with icons and buttons
-    without icons to align on the same line when the button is inline-flex
-    See: https://github.com/microsoft/fast/issues/5414
-*/ ''}
-        vertical-align: middle;
+/* When href removed the .control element is also removed
+ so this becomes the fallback color for the slot */ ''}
+        color: ${bodyFontColor};
+        font: ${linkFont};
     }
 
-    :host([disabled]) {
-        color: ${buttonLabelDisabledFontColor};
-        cursor: default;
+    .listitem {
+        display: flex;
+        align-items: center;
     }
 
     .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;
+        color: var(--ni-private-breadcrumb-link-font-color);
+        display: 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;
-        }
+        border: ${borderWidth} solid transparent;
+        padding-right: calc(4px - ${borderWidth});
+        text-decoration: none;
     }
 
     .control:hover {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-        outline: none;
+        text-decoration: underline;
     }
 
     .control${focusVisible} {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-        outline: ${borderWidth} solid ${borderHoverColor};
-        outline-offset: -4px;
+        border: ${borderWidth} solid ${borderHoverColor};
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: 1px;
     }
 
     .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};
+        color: var(--ni-private-breadcrumb-link-active-font-color);
+        text-decoration: underline;
     }
 
-    :host([disabled]) slot[name='start']::slotted(*) {
-        opacity: 0.3;
+    .start,
+    .end {
+        display: flex;
+        align-items: center;
     }
 
-    [part='end'] {
-        display: contents;
-        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+    .start {
+        margin-inline-end: 4px;
     }
 
-    :host([disabled]) slot[name='end']::slotted(*) {
-        opacity: 0.3;
+    slot[name='separator'] {
+        display: flex;
+        align-items: center;
     }
 
-    :host([content-hidden]) [part='end'] {
-        display: none;
+    slot[name='separator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
     }
-`.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;
-            }
-        `));
-
-    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;
-            }
-
-            :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']) .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});
-            }
-
-            :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;
-            }
+    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$v,
+        separator: forwardSlash16X16.data
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleBreadcrumbItem());
 
-            :host([appearance-variant='primary'][content-hidden])
-                .control[disabled] {
-                padding: 0px;
-            }
-        `));
+    const styles$u = css `
+    ${styles$z}
+    ${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);
     /**
@@ -17148,6 +17352,79 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
+    /**
+     * 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$t = css `
     ${display('inline-flex')}
 
@@ -17292,7 +17569,7 @@
             this.selected = false;
         }
     }
-    __decorate([
+    __decorate$1([
         attr({ mode: 'boolean' })
     ], CardButton.prototype, "selected", void 0);
     /**
@@ -17439,7 +17716,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
     const styles$r = css `
-    ${styles$v}
+    ${styles$z}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -17454,12 +17731,12 @@
         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};
     }
@@ -17531,10 +17808,10 @@
             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);
@@ -17607,7 +17884,7 @@
             this.icon = icon;
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], Icon.prototype, "severity", void 0);
     const registerIcon = (baseName, iconClass) => {
@@ -18136,16 +18413,16 @@
             }
         }
     }
-    __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({
@@ -18420,19 +18697,19 @@
     // 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);
@@ -18704,10 +18981,10 @@
     // 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);
@@ -20690,28 +20967,28 @@
             }
         }
     }
-    __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({
@@ -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);
     /**
@@ -21305,13 +21582,13 @@
             }
         }
     }
-    __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({
@@ -24756,13 +25033,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 +25263,7 @@
             this.appearance = TextAreaAppearance.outline;
         }
     }
-    __decorate([
+    __decorate$1([
         attr
     ], TextArea.prototype, "appearance", void 0);
     const nimbleTextArea = TextArea.compose({
@@ -25260,16 +25537,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 +25743,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 +26172,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 +26183,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 +29083,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 +29129,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 +29170,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({