@ni/spright-components 4.5.0 → 5.0.0

package/dist/all-components-bundle.js

@@ -18,7 +18,7 @@
   /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
-  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;
@@ -174,7 +174,7 @@
       };
   }
 
-  const updateQueue = $global.FAST.getById(1 /* updateQueue */, () => {
+  const updateQueue = $global.FAST.getById(1 /* KernelServiceId.updateQueue */, () => {
       const tasks = [];
       const pendingErrors = [];
       function throwFirstError() {
@@ -558,7 +558,7 @@
    * Common Observable APIs.
    * @public
    */
-  const Observable = FAST.getById(2 /* observable */, () => {
+  const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
       const volatileRegex = /(:|&&|\|\||if)/;
       const notifierLookup = new WeakMap();
       const queueUpdate = DOM.queueUpdate;
@@ -812,7 +812,7 @@
           },
       });
   }
-  const contextEvent = FAST.getById(3 /* contextEvent */, () => {
+  const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
       let current = null;
       return {
           get() {
@@ -1821,13 +1821,6 @@
    * @internal
    */
   class AdoptedStyleSheetsStyles extends ElementStyles {
-      constructor(styles, styleSheetCache) {
-          super();
-          this.styles = styles;
-          this.styleSheetCache = styleSheetCache;
-          this._styleSheets = void 0;
-          this.behaviors = reduceBehaviors(styles);
-      }
       get styleSheets() {
           if (this._styleSheets === void 0) {
               const styles = this.styles;
@@ -1847,6 +1840,13 @@
           }
           return this._styleSheets;
       }
+      constructor(styles, styleSheetCache) {
+          super();
+          this.styles = styles;
+          this.styleSheetCache = styleSheetCache;
+          this._styleSheets = void 0;
+          this.behaviors = reduceBehaviors(styles);
+      }
       addStylesTo(target) {
           addAdoptedStyleSheets(target, this.styleSheets);
           super.addStylesTo(target);
@@ -2098,7 +2098,7 @@
 
   const defaultShadowOptions = { mode: "open" };
   const defaultElementOptions = {};
-  const fastRegistry = FAST.getById(4 /* elementRegistry */, () => {
+  const fastRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */, () => {
       const typeToDefinition = new Map();
       return Object.freeze({
           register(definition) {
@@ -2118,6 +2118,12 @@
    * @public
    */
   class FASTElementDefinition {
+      /**
+       * Indicates if this element has been defined in at least one registry.
+       */
+      get isDefined() {
+          return !!fastRegistry.getByType(this.type);
+      }
       /**
        * Creates an instance of FASTElementDefinition.
        * @param type - The type this definition is being created for.
@@ -2164,12 +2170,6 @@
                           ? nameOrConfig.styles
                           : ElementStyles.create([nameOrConfig.styles]);
       }
-      /**
-       * Indicates if this element has been defined in at least one registry.
-       */
-      get isDefined() {
-          return !!fastRegistry.getByType(this.type);
-      }
       /**
        * Defines a custom element based on this definition.
        * @param registry - The element registry to define the element in.
@@ -2213,6 +2213,55 @@
    * @public
    */
   class Controller extends PropertyChangeNotifier {
+      /**
+       * Indicates whether or not the custom element has been
+       * connected to the document.
+       */
+      get isConnected() {
+          Observable.track(this, "isConnected");
+          return this._isConnected;
+      }
+      setIsConnected(value) {
+          this._isConnected = value;
+          Observable.notify(this, "isConnected");
+      }
+      /**
+       * Gets/sets the template used to render the component.
+       * @remarks
+       * This value can only be accurately read after connect but can be set at any time.
+       */
+      get template() {
+          return this._template;
+      }
+      set template(value) {
+          if (this._template === value) {
+              return;
+          }
+          this._template = value;
+          if (!this.needsInitialization) {
+              this.renderTemplate(value);
+          }
+      }
+      /**
+       * Gets/sets the primary styles used for the component.
+       * @remarks
+       * This value can only be accurately read after connect but can be set at any time.
+       */
+      get styles() {
+          return this._styles;
+      }
+      set styles(value) {
+          if (this._styles === value) {
+              return;
+          }
+          if (this._styles !== null) {
+              this.removeStyles(this._styles);
+          }
+          this._styles = value;
+          if (!this.needsInitialization && value !== null) {
+              this.addStyles(value);
+          }
+      }
       /**
        * Creates a Controller to control the specified element.
        * @param element - The element to be controlled by this controller.
@@ -2269,55 +2318,6 @@
               }
           }
       }
-      /**
-       * Indicates whether or not the custom element has been
-       * connected to the document.
-       */
-      get isConnected() {
-          Observable.track(this, "isConnected");
-          return this._isConnected;
-      }
-      setIsConnected(value) {
-          this._isConnected = value;
-          Observable.notify(this, "isConnected");
-      }
-      /**
-       * Gets/sets the template used to render the component.
-       * @remarks
-       * This value can only be accurately read after connect but can be set at any time.
-       */
-      get template() {
-          return this._template;
-      }
-      set template(value) {
-          if (this._template === value) {
-              return;
-          }
-          this._template = value;
-          if (!this.needsInitialization) {
-              this.renderTemplate(value);
-          }
-      }
-      /**
-       * Gets/sets the primary styles used for the component.
-       * @remarks
-       * This value can only be accurately read after connect but can be set at any time.
-       */
-      get styles() {
-          return this._styles;
-      }
-      set styles(value) {
-          if (this._styles === value) {
-              return;
-          }
-          if (this._styles !== null) {
-              this.removeStyles(this._styles);
-          }
-          this._styles = value;
-          if (!this.needsInitialization && value !== null) {
-              this.addStyles(value);
-          }
-      }
       /**
        * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
        * @param styles - The styles to add.
@@ -3816,30 +3816,6 @@
     </span>
 `;
 
-  /*! *****************************************************************************
-  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.
-  ***************************************************************************** */
-  /* global Reflect, Promise */
-
-
-  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;
-  }
-
   /**
    * Big thanks to https://github.com/fkleuver and the https://github.com/aurelia/aurelia project
    * for the bulk of this code and many of the associated tests.
@@ -3888,7 +3864,7 @@
        * @returns The resolver.
        */
       instance(value) {
-          return this.registerResolver(0 /* instance */, value);
+          return this.registerResolver(0 /* ResolverStrategy.instance */, value);
       }
       /**
        * Creates a resolver that enforces a singleton lifetime.
@@ -3896,7 +3872,7 @@
        * @returns The resolver.
        */
       singleton(value) {
-          return this.registerResolver(1 /* singleton */, value);
+          return this.registerResolver(1 /* ResolverStrategy.singleton */, value);
       }
       /**
        * Creates a resolver that creates a new instance for every dependency request.
@@ -3904,7 +3880,7 @@
        * @returns - The resolver.
        */
       transient(value) {
-          return this.registerResolver(2 /* transient */, value);
+          return this.registerResolver(2 /* ResolverStrategy.transient */, value);
       }
       /**
        * Creates a resolver that invokes a callback function for every dependency resolution
@@ -3913,7 +3889,7 @@
        * @returns The resolver.
        */
       callback(value) {
-          return this.registerResolver(3 /* callback */, value);
+          return this.registerResolver(3 /* ResolverStrategy.callback */, value);
       }
       /**
        * Creates a resolver that invokes a callback function the first time that a dependency
@@ -3923,7 +3899,7 @@
        * @returns The resolver.
        */
       cachedCallback(value) {
-          return this.registerResolver(3 /* callback */, cacheCallbackResult(value));
+          return this.registerResolver(3 /* ResolverStrategy.callback */, cacheCallbackResult(value));
       }
       /**
        * Aliases the current key to a different key.
@@ -3931,7 +3907,7 @@
        * @returns The resolver.
        */
       aliasTo(destinationKey) {
-          return this.registerResolver(5 /* alias */, destinationKey);
+          return this.registerResolver(5 /* ResolverStrategy.alias */, destinationKey);
       }
       registerResolver(strategy, state) {
           const { container, key } = this;
@@ -3971,7 +3947,7 @@
        * @returns The resolver.
        */
       singleton(key) {
-          return new ResolverImpl(key, 1 /* singleton */, key);
+          return new ResolverImpl(key, 1 /* ResolverStrategy.singleton */, key);
       },
       /**
        * Provides default transient resolution behavior during auto-registration.
@@ -3979,7 +3955,7 @@
        * @returns The resolver.
        */
       transient(key) {
-          return new ResolverImpl(key, 2 /* transient */, key);
+          return new ResolverImpl(key, 2 /* ResolverStrategy.transient */, key);
       },
   });
   /**
@@ -4400,9 +4376,9 @@
       }
       resolve(handler, requestor) {
           switch (this.strategy) {
-              case 0 /* instance */:
+              case 0 /* ResolverStrategy.instance */:
                   return this.state;
-              case 1 /* singleton */: {
+              case 1 /* ResolverStrategy.singleton */: {
                   if (this.resolving) {
                       throw new Error(`Cyclic dependency found: ${this.state.name}`);
                   }
@@ -4410,11 +4386,11 @@
                   this.state = handler
                       .getFactory(this.state)
                       .construct(requestor);
-                  this.strategy = 0 /* instance */;
+                  this.strategy = 0 /* ResolverStrategy.instance */;
                   this.resolving = false;
                   return this.state;
               }
-              case 2 /* transient */: {
+              case 2 /* ResolverStrategy.transient */: {
                   // Always create transients from the requesting container
                   const factory = handler.getFactory(this.state);
                   if (factory === null) {
@@ -4422,11 +4398,11 @@
                   }
                   return factory.construct(requestor);
               }
-              case 3 /* callback */:
+              case 3 /* ResolverStrategy.callback */:
                   return this.state(handler, requestor, this);
-              case 4 /* array */:
+              case 4 /* ResolverStrategy.array */:
                   return this.state[0].resolve(handler, requestor);
-              case 5 /* alias */:
+              case 5 /* ResolverStrategy.alias */:
                   return requestor.get(this.state);
               default:
                   throw new Error(`Invalid resolver strategy specified: ${this.strategy}.`);
@@ -4435,10 +4411,10 @@
       getFactory(container) {
           var _a, _b, _c;
           switch (this.strategy) {
-              case 1 /* singleton */:
-              case 2 /* transient */:
+              case 1 /* ResolverStrategy.singleton */:
+              case 2 /* ResolverStrategy.transient */:
                   return container.getFactory(this.state);
-              case 5 /* alias */:
+              case 5 /* ResolverStrategy.alias */:
                   return (_c = (_b = (_a = container.getResolver(this.state)) === null || _a === void 0 ? void 0 : _a.getFactory) === null || _b === void 0 ? void 0 : _b.call(_a, container)) !== null && _c !== void 0 ? _c : null;
               default:
                   return null;
@@ -4533,6 +4509,18 @@
    * @internal
    */
   class ContainerImpl {
+      get parent() {
+          if (this._parent === void 0) {
+              this._parent = this.config.parentLocator(this.owner);
+          }
+          return this._parent;
+      }
+      get depth() {
+          return this.parent === null ? 0 : this.parent.depth + 1;
+      }
+      get responsibleForOwnerRequests() {
+          return this.config.responsibleForOwnerRequests;
+      }
       constructor(owner, config) {
           this.owner = owner;
           this.config = config;
@@ -4553,18 +4541,6 @@
               });
           }
       }
-      get parent() {
-          if (this._parent === void 0) {
-              this._parent = this.config.parentLocator(this.owner);
-          }
-          return this._parent;
-      }
-      get depth() {
-          return this.parent === null ? 0 : this.parent.depth + 1;
-      }
-      get responsibleForOwnerRequests() {
-          return this.config.responsibleForOwnerRequests;
-      }
       registerWithContext(context, ...params) {
           this.context = context;
           this.register(...params);
@@ -4625,11 +4601,11 @@
               resolvers.set(key, resolver);
           }
           else if (result instanceof ResolverImpl &&
-              result.strategy === 4 /* array */) {
+              result.strategy === 4 /* ResolverStrategy.array */) {
               result.state.push(resolver);
           }
           else {
-              resolvers.set(key, new ResolverImpl(key, 4 /* array */, [result, resolver]));
+              resolvers.set(key, new ResolverImpl(key, 4 /* ResolverStrategy.array */, [result, resolver]));
           }
           return resolver;
       }
@@ -4829,7 +4805,7 @@
        * @param value - The instance to return when the key is requested.
        */
       instance(key, value) {
-          return new ResolverImpl(key, 0 /* instance */, value);
+          return new ResolverImpl(key, 0 /* ResolverStrategy.instance */, value);
       },
       /**
        * Creates an instance from the class.
@@ -4844,7 +4820,7 @@
        * @param value - The class to instantiate as a singleton when first requested.
        */
       singleton(key, value) {
-          return new ResolverImpl(key, 1 /* singleton */, value);
+          return new ResolverImpl(key, 1 /* ResolverStrategy.singleton */, value);
       },
       /**
        * Creates an instance from a class.
@@ -4859,7 +4835,7 @@
        * @param value - The class to instantiate each time the key is requested.
        */
       transient(key, value) {
-          return new ResolverImpl(key, 2 /* transient */, value);
+          return new ResolverImpl(key, 2 /* ResolverStrategy.transient */, value);
       },
       /**
        * Delegates to a callback function to provide the dependency.
@@ -4876,7 +4852,7 @@
        * @param callback - The function that is expected to return the dependency.
        */
       callback(key, callback) {
-          return new ResolverImpl(key, 3 /* callback */, callback);
+          return new ResolverImpl(key, 3 /* ResolverStrategy.callback */, callback);
       },
       /**
        * Delegates to a callback function to provide the dependency and then caches the
@@ -4895,7 +4871,7 @@
        * Should all references to the resolver returned be removed, the cache will expire.
        */
       cachedCallback(key, callback) {
-          return new ResolverImpl(key, 3 /* callback */, cacheCallbackResult(callback));
+          return new ResolverImpl(key, 3 /* ResolverStrategy.callback */, cacheCallbackResult(callback));
       },
       /**
        * Creates an alternate {@link Key} to retrieve an instance by.
@@ -4912,7 +4888,7 @@
        * @param aliasKey - The alias to the original key.
        */
       aliasTo(originalKey, aliasKey) {
-          return new ResolverImpl(aliasKey, 5 /* alias */, originalKey);
+          return new ResolverImpl(aliasKey, 5 /* ResolverStrategy.alias */, originalKey);
       },
   });
   /** @internal */
@@ -4923,7 +4899,7 @@
   }
   function buildAllResponse(resolver, handler, requestor) {
       if (resolver instanceof ResolverImpl &&
-          resolver.strategy === 4 /* array */) {
+          resolver.strategy === 4 /* ResolverStrategy.array */) {
           const state = resolver.state;
           let i = state.length;
           const results = new Array(i);
@@ -5250,7 +5226,7 @@
   /**
    * Standard orientation values
    */
-  const Orientation$1 = {
+  const Orientation = {
       horizontal: "horizontal",
       vertical: "vertical",
   };
@@ -5261,7 +5237,7 @@
    * @param array - the array to test
    * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
    */
-  function findLastIndex$1(array, predicate) {
+  function findLastIndex(array, predicate) {
       let k = array.length;
       while (k--) {
           if (predicate(array[k], k, array)) {
@@ -5281,14 +5257,14 @@
   /**
    * A test that ensures that all arguments are HTML Elements
    */
-  function isHTMLElement$1(...args) {
+  function isHTMLElement(...args) {
       return args.every((arg) => arg instanceof HTMLElement);
   }
   /**
    * Returns all displayed elements inside of a root node that match a provided selector
    */
   function getDisplayedNodes(rootNode, selector) {
-      if (!rootNode || false || !isHTMLElement$1(rootNode)) {
+      if (!rootNode || false || !isHTMLElement(rootNode)) {
           return;
       }
       const nodes = Array.from(rootNode.querySelectorAll(selector));
@@ -5348,6 +5324,8 @@
    * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
    * and should include all non-deprecated and non-experimental Standard events
    */
+  const eventAnimationEnd = "animationend";
+  const eventChange = "change";
   const eventResize = "resize";
   const eventScroll = "scroll";
 
@@ -5409,8 +5387,10 @@
       KeyCodes[KeyCodes["numPad9"] = 105] = "numPad9";
       KeyCodes[KeyCodes["numPadDivide"] = 111] = "numPadDivide";
       KeyCodes[KeyCodes["numPadDot"] = 110] = "numPadDot";
+      // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
       KeyCodes[KeyCodes["numPadMinus"] = 109] = "numPadMinus";
       KeyCodes[KeyCodes["numPadMultiply"] = 106] = "numPadMultiply";
+      // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
       KeyCodes[KeyCodes["numPadPlus"] = 107] = "numPadPlus";
       KeyCodes[KeyCodes["openBracket"] = 219] = "openBracket";
       KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
@@ -5424,37 +5404,41 @@
       KeyCodes[KeyCodes["tab"] = 9] = "tab";
       KeyCodes[KeyCodes["tilde"] = 192] = "tilde";
       KeyCodes[KeyCodes["windowsLeft"] = 91] = "windowsLeft";
+      // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
       KeyCodes[KeyCodes["windowsOpera"] = 219] = "windowsOpera";
       KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
   })(KeyCodes || (KeyCodes = {}));
   /**
    * String values for use with KeyboardEvent.key
    */
-  const keyArrowDown$1 = "ArrowDown";
-  const keyArrowLeft$1 = "ArrowLeft";
-  const keyArrowRight$1 = "ArrowRight";
-  const keyArrowUp$1 = "ArrowUp";
-  const keyEnter$1 = "Enter";
-  const keyEscape$1 = "Escape";
-  const keyHome$1 = "Home";
-  const keyEnd$1 = "End";
-  const keySpace$1 = " ";
-  const keyTab$1 = "Tab";
+  const keyArrowDown = "ArrowDown";
+  const keyArrowLeft = "ArrowLeft";
+  const keyArrowRight = "ArrowRight";
+  const keyArrowUp = "ArrowUp";
+  const keyEnter = "Enter";
+  const keyEscape = "Escape";
+  const keyHome = "Home";
+  const keyEnd = "End";
+  const keyFunction2 = "F2";
+  const keyPageDown = "PageDown";
+  const keyPageUp = "PageUp";
+  const keySpace = " ";
+  const keyTab = "Tab";
   const ArrowKeys = {
-      ArrowDown: keyArrowDown$1,
-      ArrowLeft: keyArrowLeft$1,
-      ArrowRight: keyArrowRight$1,
-      ArrowUp: keyArrowUp$1,
+      ArrowDown: keyArrowDown,
+      ArrowLeft: keyArrowLeft,
+      ArrowRight: keyArrowRight,
+      ArrowUp: keyArrowUp,
   };
 
   /**
    * Expose ltr and rtl strings
    */
-  var Direction$1;
+  var Direction;
   (function (Direction) {
       Direction["ltr"] = "ltr";
       Direction["rtl"] = "rtl";
-  })(Direction$1 || (Direction$1 = {}));
+  })(Direction || (Direction = {}));
 
   /**
    * This method keeps a given value within the bounds of a min and max value. If the value
@@ -5465,7 +5449,7 @@
    * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
    * If value is greater than max, max will be returned.
    */
-  function limit$1(min, max, value) {
+  function limit(min, max, value) {
       return Math.min(Math.max(value, min), max);
   }
   /**
@@ -5480,16 +5464,16 @@
       return min <= value && value < max;
   }
 
-  let uniqueIdCounter$1 = 0;
+  let uniqueIdCounter = 0;
   /**
    * Generates a unique ID based on incrementing a counter.
    */
-  function uniqueId$1(prefix = "") {
-      return `${prefix}${uniqueIdCounter$1++}`;
+  function uniqueId(prefix = "") {
+      return `${prefix}${uniqueIdCounter++}`;
   }
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#(Anchor:class)} component.
+   * The template for the {@link @ni/fast-foundation#(Anchor:class)} component.
    * @public
    */
   const anchorTemplate = (context, definition) => html `
@@ -5685,7 +5669,7 @@
   applyMixins(Anchor$1, StartEnd, DelegatesARIALink);
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#(AnchoredRegion:class)} component.
+   * The template for the {@link @ni/fast-foundation#(AnchoredRegion:class)} component.
    * @public
    */
   const anchoredRegionTemplate = (context, definition) => html `
@@ -5703,7 +5687,7 @@
    */
   const getDirection = (rootNode) => {
       const dirNode = rootNode.closest("[dir]");
-      return dirNode !== null && dirNode.dir === "rtl" ? Direction$1.rtl : Direction$1.ltr;
+      return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
   };
 
   /**
@@ -5955,7 +5939,7 @@
           this.baseVerticalOffset = 0;
           this.pendingPositioningUpdate = false;
           this.pendingReset = false;
-          this.currentDirection = Direction$1.ltr;
+          this.currentDirection = Direction.ltr;
           this.regionVisible = false;
           // indicates that a layout update should occur even if geometry has not changed
           // used to ensure some attribute changes are applied
@@ -6155,7 +6139,7 @@
                               this.initialize();
                               return;
                           }
-                          if (this.currentDirection === Direction$1.ltr) {
+                          if (this.currentDirection === Direction.ltr) {
                               dirCorrectedHorizontalDefaultPosition =
                                   dirCorrectedHorizontalDefaultPosition === "start"
                                       ? "left"
@@ -6757,7 +6741,7 @@
   ], AnchoredRegion$1.prototype, "initialLayoutComplete", void 0);
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#(BreadcrumbItem:class)} component.
+   * The template for the {@link @ni/fast-foundation#(BreadcrumbItem:class)} component.
    * @public
    */
   const breadcrumbItemTemplate = (context, definition) => html `
@@ -6798,7 +6782,7 @@
   applyMixins(BreadcrumbItem$1, StartEnd, DelegatesARIALink);
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#Breadcrumb} component.
+   * The template for the {@link @ni/fast-foundation#Breadcrumb} component.
    * @public
    */
   const breadcrumbTemplate = (context, definition) => html `
@@ -6879,7 +6863,7 @@
   ], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#(Button:class)} component.
+   * The template for the {@link @ni/fast-foundation#(Button:class)} component.
    * @public
    */
   const buttonTemplate = (context, definition) => html `
@@ -6943,37 +6927,6 @@
    */
   function FormAssociated(BaseCtor) {
       const C = class extends BaseCtor {
-          constructor(...args) {
-              super(...args);
-              /**
-               * Track whether the value has been changed from the initial value
-               */
-              this.dirtyValue = false;
-              /**
-               * Sets the element's disabled state. A disabled element will not be included during form submission.
-               *
-               * @remarks
-               * HTML Attribute: disabled
-               */
-              this.disabled = false;
-              /**
-               * These are events that are still fired by the proxy
-               * element based on user / programmatic interaction.
-               *
-               * The proxy implementation should be transparent to
-               * the app author, so block these events from emitting.
-               */
-              this.proxyEventsToBlock = ["change", "click"];
-              this.proxyInitialized = false;
-              this.required = false;
-              this.initialValue = this.initialValue || "";
-              if (!this.elementInternals) {
-                  // When elementInternals is not supported, formResetCallback is
-                  // bound to an event listener, so ensure the handler's `this`
-                  // context is correct.
-                  this.formResetCallback = this.formResetCallback.bind(this);
-              }
-          }
           /**
            * Must evaluate to true to enable elementInternals.
            * Feature detects API support and resolve respectively
@@ -7152,6 +7105,37 @@
               }
               return internals;
           }
+          constructor(...args) {
+              super(...args);
+              /**
+               * Track whether the value has been changed from the initial value
+               */
+              this.dirtyValue = false;
+              /**
+               * Sets the element's disabled state. A disabled element will not be included during form submission.
+               *
+               * @remarks
+               * HTML Attribute: disabled
+               */
+              this.disabled = false;
+              /**
+               * These are events that are still fired by the proxy
+               * element based on user / programmatic interaction.
+               *
+               * The proxy implementation should be transparent to
+               * the app author, so block these events from emitting.
+               */
+              this.proxyEventsToBlock = ["change", "click"];
+              this.proxyInitialized = false;
+              this.required = false;
+              this.initialValue = this.initialValue || "";
+              if (!this.elementInternals) {
+                  // When elementInternals is not supported, formResetCallback is
+                  // bound to an event listener, so ensure the handler's `this`
+                  // context is correct.
+                  this.formResetCallback = this.formResetCallback.bind(this);
+              }
+          }
           /**
            * @internal
            */
@@ -7279,7 +7263,7 @@
           }
           _keypressHandler(e) {
               switch (e.key) {
-                  case keyEnter$1:
+                  case keyEnter:
                       if (this.form instanceof HTMLFormElement) {
                           // Implicit submission
                           const defaultButton = this.form.querySelector("[type=submit]");
@@ -7311,33 +7295,6 @@
       class C extends FormAssociated(BaseCtor) {
       }
       class D extends C {
-          constructor(...args) {
-              super(args);
-              /**
-               * Tracks whether the "checked" property has been changed.
-               * This is necessary to provide consistent behavior with
-               * normal input checkboxes
-               */
-              this.dirtyChecked = false;
-              /**
-               * Provides the default checkedness of the input element
-               * Passed down to proxy
-               *
-               * @public
-               * @remarks
-               * HTML Attribute: checked
-               */
-              this.checkedAttribute = false;
-              /**
-               * The checked state of the control.
-               *
-               * @public
-               */
-              this.checked = false;
-              // Re-initialize dirtyChecked because initialization of other values
-              // causes it to become true
-              this.dirtyChecked = false;
-          }
           checkedAttributeChanged() {
               this.defaultChecked = this.checkedAttribute;
           }
@@ -7370,6 +7327,33 @@
           currentCheckedChanged(prev, next) {
               this.checked = this.currentChecked;
           }
+          constructor(...args) {
+              super(args);
+              /**
+               * Tracks whether the "checked" property has been changed.
+               * This is necessary to provide consistent behavior with
+               * normal input checkboxes
+               */
+              this.dirtyChecked = false;
+              /**
+               * Provides the default checkedness of the input element
+               * Passed down to proxy
+               *
+               * @public
+               * @remarks
+               * HTML Attribute: checked
+               */
+              this.checkedAttribute = false;
+              /**
+               * The checked state of the control.
+               *
+               * @public
+               */
+              this.checked = false;
+              // Re-initialize dirtyChecked because initialization of other values
+              // causes it to become true
+              this.dirtyChecked = false;
+          }
           updateForm() {
               const value = this.checked ? this.value : null;
               this.setFormValue(value, value);
@@ -7394,7 +7378,7 @@
   class _Button extends FoundationElement {
   }
   /**
-   * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
+   * A form-associated base class for the {@link @ni/fast-foundation#(Button:class)} component.
    *
    * @internal
    */
@@ -7597,7 +7581,7 @@
   class _Checkbox extends FoundationElement {
   }
   /**
-   * A form-associated base class for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
+   * A form-associated base class for the {@link @ni/fast-foundation#(Checkbox:class)} component.
    *
    * @internal
    */
@@ -7622,6 +7606,11 @@
    * @public
    */
   let Checkbox$1 = class Checkbox extends FormAssociatedCheckbox {
+      readOnlyChanged() {
+          if (this.proxy instanceof HTMLInputElement) {
+              this.proxy.readOnly = this.readOnly;
+          }
+      }
       constructor() {
           super();
           /**
@@ -7643,7 +7632,7 @@
                   return;
               }
               switch (e.key) {
-                  case keySpace$1:
+                  case keySpace:
                       if (this.indeterminate) {
                           this.indeterminate = false;
                       }
@@ -7664,11 +7653,6 @@
           };
           this.proxy.setAttribute("type", "checkbox");
       }
-      readOnlyChanged() {
-          if (this.proxy instanceof HTMLInputElement) {
-              this.proxy.readOnly = this.readOnly;
-          }
-      }
   };
   __decorate([
       attr({ attribute: "readonly", mode: "boolean" })
@@ -7687,7 +7671,7 @@
    * @public
    */
   function isListboxOption(el) {
-      return (isHTMLElement$1(el) &&
+      return (isHTMLElement(el) &&
           (el.getAttribute("role") === "option" ||
               el instanceof HTMLOptionElement));
   }
@@ -7703,43 +7687,6 @@
    * @public
    */
   class ListboxOption extends FoundationElement {
-      constructor(text, value, defaultSelected, selected) {
-          super();
-          /**
-           * The defaultSelected state of the option.
-           * @public
-           */
-          this.defaultSelected = false;
-          /**
-           * Tracks whether the "selected" property has been changed.
-           * @internal
-           */
-          this.dirtySelected = false;
-          /**
-           * The checked state of the control.
-           *
-           * @public
-           */
-          this.selected = this.defaultSelected;
-          /**
-           * Track whether the value has been changed from the initial value
-           */
-          this.dirtyValue = false;
-          if (text) {
-              this.textContent = text;
-          }
-          if (value) {
-              this.initialValue = value;
-          }
-          if (defaultSelected) {
-              this.defaultSelected = defaultSelected;
-          }
-          if (selected) {
-              this.selected = selected;
-          }
-          this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
-          this.proxy.disabled = this.disabled;
-      }
       /**
        * Updates the ariaChecked property when the checked property changes.
        *
@@ -7830,6 +7777,43 @@
       get form() {
           return this.proxy ? this.proxy.form : null;
       }
+      constructor(text, value, defaultSelected, selected) {
+          super();
+          /**
+           * The defaultSelected state of the option.
+           * @public
+           */
+          this.defaultSelected = false;
+          /**
+           * Tracks whether the "selected" property has been changed.
+           * @internal
+           */
+          this.dirtySelected = false;
+          /**
+           * The checked state of the control.
+           *
+           * @public
+           */
+          this.selected = this.defaultSelected;
+          /**
+           * Track whether the value has been changed from the initial value
+           */
+          this.dirtyValue = false;
+          if (text) {
+              this.textContent = text;
+          }
+          if (value) {
+              this.initialValue = value;
+          }
+          if (defaultSelected) {
+              this.defaultSelected = defaultSelected;
+          }
+          if (selected) {
+              this.selected = selected;
+          }
+          this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+          this.proxy.disabled = this.disabled;
+      }
   }
   __decorate([
       observable
@@ -8119,7 +8103,7 @@
           const key = e.key;
           switch (key) {
               // Select the first available option
-              case keyHome$1: {
+              case keyHome: {
                   if (!e.shiftKey) {
                       e.preventDefault();
                       this.selectFirstOption();
@@ -8127,7 +8111,7 @@
                   break;
               }
               // Select the next selectable option
-              case keyArrowDown$1: {
+              case keyArrowDown: {
                   if (!e.shiftKey) {
                       e.preventDefault();
                       this.selectNextOption();
@@ -8135,7 +8119,7 @@
                   break;
               }
               // Select the previous selectable option
-              case keyArrowUp$1: {
+              case keyArrowUp: {
                   if (!e.shiftKey) {
                       e.preventDefault();
                       this.selectPreviousOption();
@@ -8143,20 +8127,20 @@
                   break;
               }
               // Select the last available option
-              case keyEnd$1: {
+              case keyEnd: {
                   e.preventDefault();
                   this.selectLastOption();
                   break;
               }
-              case keyTab$1: {
+              case keyTab: {
                   this.focusAndScrollOptionIntoView();
                   return true;
               }
-              case keyEnter$1:
-              case keyEscape$1: {
+              case keyEnter:
+              case keyEscape: {
                   return true;
               }
-              case keySpace$1: {
+              case keySpace: {
                   if (this.typeaheadExpired) {
                       return true;
                   }
@@ -8252,7 +8236,7 @@
        */
       selectLastOption() {
           if (!this.disabled) {
-              this.selectedIndex = findLastIndex$1(this.options, o => !o.disabled);
+              this.selectedIndex = findLastIndex(this.options, o => !o.disabled);
           }
       }
       /**
@@ -8315,7 +8299,7 @@
           const setSize = `${this.options.length}`;
           this.options.forEach((option, index) => {
               if (!option.id) {
-                  option.id = uniqueId$1("option-");
+                  option.id = uniqueId("option-");
               }
               option.ariaPosInSet = `${index + 1}`;
               option.ariaSetSize = setSize;
@@ -8479,7 +8463,7 @@
            *
            * @internal
            */
-          this.listboxId = uniqueId$1("listbox-");
+          this.listboxId = uniqueId("listbox-");
           /**
            * The max height for the listbox when opened.
            *
@@ -8830,7 +8814,7 @@
        */
       selectedIndexChanged(prev, next) {
           if (this.$fastController.isConnected) {
-              next = limit$1(-1, this.options.length - 1, next);
+              next = limit(-1, this.options.length - 1, next);
               // we only want to call the super method when the selectedIndex is in range
               if (next !== this.selectedIndex) {
                   this.selectedIndex = next;
@@ -9111,6 +9095,13 @@
    * Handles setting properties for a FASTElement using an HTMLStyleElement
    */
   class StyleElementStyleSheetTarget {
+      targetChanged() {
+          if (this.target !== null) {
+              for (const [key, value] of this.store.entries()) {
+                  this.target.setProperty(key, value);
+              }
+          }
+      }
       constructor(target) {
           this.store = new Map();
           this.target = null;
@@ -9120,13 +9111,6 @@
           Observable.getNotifier(controller).subscribe(this, "isConnected");
           this.handleChange(controller, "isConnected");
       }
-      targetChanged() {
-          if (this.target !== null) {
-              for (const [key, value] of this.store.entries()) {
-                  this.target.setProperty(key, value);
-              }
-          }
-      }
       setProperty(name, value) {
           this.store.set(name, value);
           DOM.queueUpdate(() => {
@@ -9274,18 +9258,6 @@
    * Implementation of {@link (DesignToken:interface)}
    */
   class DesignTokenImpl extends CSSDirective {
-      constructor(configuration) {
-          super();
-          this.subscribers = new WeakMap();
-          this._appliedTo = new Set();
-          this.name = configuration.name;
-          if (configuration.cssCustomPropertyName !== null) {
-              this.cssCustomProperty = `--${configuration.cssCustomPropertyName}`;
-              this.cssVar = `var(${this.cssCustomProperty})`;
-          }
-          this.id = DesignTokenImpl.uniqueId();
-          DesignTokenImpl.tokensById.set(this.id, this);
-      }
       get appliedTo() {
           return [...this._appliedTo];
       }
@@ -9317,6 +9289,18 @@
           return (this.subscribers.get(target) ||
               (this.subscribers.set(target, new Set()) && this.subscribers.get(target)));
       }
+      constructor(configuration) {
+          super();
+          this.subscribers = new WeakMap();
+          this._appliedTo = new Set();
+          this.name = configuration.name;
+          if (configuration.cssCustomPropertyName !== null) {
+              this.cssCustomProperty = `--${configuration.cssCustomPropertyName}`;
+              this.cssVar = `var(${this.cssCustomProperty})`;
+          }
+          this.id = DesignTokenImpl.uniqueId();
+          DesignTokenImpl.tokensById.set(this.id, this);
+      }
       createCSS() {
           return this.cssVar || "";
       }
@@ -9485,52 +9469,6 @@
    * inheritance structures.
    */
   class DesignTokenNode {
-      constructor(target) {
-          this.target = target;
-          /**
-           * Stores all resolved token values for a node
-           */
-          this.store = new Store();
-          /**
-           * All children assigned to the node
-           */
-          this.children = [];
-          /**
-           * All values explicitly assigned to the node in their raw form
-           */
-          this.assignedValues = new Map();
-          /**
-           * Tokens currently being reflected to CSS custom properties
-           */
-          this.reflecting = new Set();
-          /**
-           * Binding observers for assigned and inherited derived values.
-           */
-          this.bindingObservers = new Map();
-          /**
-           * Emits notifications to token when token values
-           * change the DesignTokenNode
-           */
-          this.tokenValueChangeHandler = {
-              handleChange: (source, arg) => {
-                  const token = DesignTokenImpl.getTokenById(arg);
-                  if (token) {
-                      // Notify any token subscribers
-                      token.notify(this.target);
-                      this.updateCSSTokenReflection(source, token);
-                  }
-              },
-          };
-          nodeCache.set(target, this);
-          // Map store change notifications to token change notifications
-          Observable.getNotifier(this.store).subscribe(this.tokenValueChangeHandler);
-          if (target instanceof FASTElement) {
-              target.$fastController.addBehaviors([this]);
-          }
-          else if (target.isConnected) {
-              this.bind();
-          }
-      }
       /**
        * Returns a DesignTokenNode for an element.
        * Creates a new instance if one does not already exist for a node,
@@ -9610,6 +9548,52 @@
               }
           }
       }
+      constructor(target) {
+          this.target = target;
+          /**
+           * Stores all resolved token values for a node
+           */
+          this.store = new Store();
+          /**
+           * All children assigned to the node
+           */
+          this.children = [];
+          /**
+           * All values explicitly assigned to the node in their raw form
+           */
+          this.assignedValues = new Map();
+          /**
+           * Tokens currently being reflected to CSS custom properties
+           */
+          this.reflecting = new Set();
+          /**
+           * Binding observers for assigned and inherited derived values.
+           */
+          this.bindingObservers = new Map();
+          /**
+           * Emits notifications to token when token values
+           * change the DesignTokenNode
+           */
+          this.tokenValueChangeHandler = {
+              handleChange: (source, arg) => {
+                  const token = DesignTokenImpl.getTokenById(arg);
+                  if (token) {
+                      // Notify any token subscribers
+                      token.notify(this.target);
+                      this.updateCSSTokenReflection(source, token);
+                  }
+              },
+          };
+          nodeCache.set(target, this);
+          // Map store change notifications to token change notifications
+          Observable.getNotifier(this.store).subscribe(this.tokenValueChangeHandler);
+          if (target instanceof FASTElement) {
+              target.$fastController.addBehaviors([this]);
+          }
+          else if (target.isConnected) {
+              this.bind();
+          }
+      }
       /**
        * Checks if a token has been assigned an explicit value the node.
        * @param token - the token to check.
@@ -10126,26 +10110,58 @@
   /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
   /*!
-  * tabbable 5.3.3
+  * tabbable 6.2.0
   * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
   */
-  var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
+  // NOTE: separate `:not()` selectors has broader browser support than the newer
+  //  `:not([inert], [inert] *)` (Feb 2023)
+  // CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
+  //  the entire query to fail, resulting in no nodes found, which will break a lot
+  //  of things... so we have to rely on JS to identify nodes inside an inert container
+  var candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable="false"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];
   var NoElement = typeof Element === 'undefined';
   var matches$1 = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
   var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
-    return element.getRootNode();
+    var _element$getRootNode;
+    return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
   } : function (element) {
-    return element.ownerDocument;
+    return element === null || element === void 0 ? void 0 : element.ownerDocument;
   };
 
+  /**
+   * Determines if a node is inert or in an inert ancestor.
+   * @param {Element} [node]
+   * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
+   *  see if any of them are inert. If false, only `node` itself is considered.
+   * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
+   *  False if `node` is falsy.
+   */
+  var isInert = function isInert(node, lookUp) {
+    var _node$getAttribute;
+    if (lookUp === void 0) {
+      lookUp = true;
+    }
+    // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
+    //  JS API property; we have to check the attribute, which can either be empty or 'true';
+    //  if it's `null` (not specified) or 'false', it's an active element
+    var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
+    var inert = inertAtt === '' || inertAtt === 'true';
+
+    // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
+    //  if it weren't for `matches()` not being a function on shadow roots; the following
+    //  code works for any kind of node
+    // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
+    //  so it likely would not support `:is([inert] *)` either...
+    var result = inert || lookUp && node && isInert(node.parentNode); // recursive
+
+    return result;
+  };
   var isInput = function isInput(node) {
     return node.tagName === 'INPUT';
   };
-
   var isHiddenInput = function isHiddenInput(node) {
     return isInput(node) && node.type === 'hidden';
   };
-
   var isDetailsWithSummary = function isDetailsWithSummary(node) {
     var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
       return child.tagName === 'SUMMARY';
@@ -10153,18 +10169,62 @@
     return r;
   };
 
+  // determines if a node is ultimately attached to the window's document
+  var isNodeAttached = function isNodeAttached(node) {
+    var _nodeRoot;
+    // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
+    //  (but NOT _the_ document; see second 'If' comment below for more).
+    // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
+    //  is attached, and the one we need to check if it's in the document or not (because the
+    //  shadow, and all nodes it contains, is never considered in the document since shadows
+    //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
+    //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
+    //  visibility, including all the nodes it contains). The host could be any normal node,
+    //  or a custom element (i.e. web component). Either way, that's the one that is considered
+    //  part of the document, not the shadow root, nor any of its children (i.e. the node being
+    //  tested).
+    // To further complicate things, we have to look all the way up until we find a shadow HOST
+    //  that is attached (or find none) because the node might be in nested shadows...
+    // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
+    //  document (per the docs) and while it's a Document-type object, that document does not
+    //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
+    //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
+    //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
+    //  node is actually detached.
+    // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible
+    //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed
+    //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then
+    //  `ownerDocument` will be `null`, hence the optional chaining on it.
+    var nodeRoot = node && getRootNode(node);
+    var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
+
+    // in some cases, a detached node will return itself as the root instead of a document or
+    //  shadow root object, in which case, we shouldn't try to look further up the host chain
+    var attached = false;
+    if (nodeRoot && nodeRoot !== node) {
+      var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
+      attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
+      while (!attached && nodeRootHost) {
+        var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
+        // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
+        //  which means we need to get the host's host and check if that parent host is contained
+        //  in (i.e. attached to) the document
+        nodeRoot = getRootNode(nodeRootHost);
+        nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
+        attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
+      }
+    }
+    return attached;
+  };
   var isZeroArea = function isZeroArea(node) {
     var _node$getBoundingClie = node.getBoundingClientRect(),
-        width = _node$getBoundingClie.width,
-        height = _node$getBoundingClie.height;
-
+      width = _node$getBoundingClie.width,
+      height = _node$getBoundingClie.height;
     return width === 0 && height === 0;
   };
-
   var isHidden = function isHidden(node, _ref) {
     var displayCheck = _ref.displayCheck,
-        getShadowRoot = _ref.getShadowRoot;
-
+      getShadowRoot = _ref.getShadowRoot;
     // NOTE: visibility will be `undefined` if node is detached from the document
     //  (see notes about this further down), which means we will consider it visible
     //  (this is legacy behavior from a very long way back)
@@ -10173,44 +10233,19 @@
     if (getComputedStyle(node).visibility === 'hidden') {
       return true;
     }
-
     var isDirectSummary = matches$1.call(node, 'details>summary:first-of-type');
     var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
-
     if (matches$1.call(nodeUnderDetails, 'details:not([open]) *')) {
       return true;
-    } // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
-    //  (but NOT _the_ document; see second 'If' comment below for more).
-    // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
-    //  is attached, and the one we need to check if it's in the document or not (because the
-    //  shadow, and all nodes it contains, is never considered in the document since shadows
-    //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
-    //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
-    //  visibility, including all the nodes it contains). The host could be any normal node,
-    //  or a custom element (i.e. web component). Either way, that's the one that is considered
-    //  part of the document, not the shadow root, nor any of its children (i.e. the node being
-    //  tested).
-    // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
-    //  document (per the docs) and while it's a Document-type object, that document does not
-    //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
-    //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
-    //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
-    //  node is actually detached.
-
-
-    var nodeRootHost = getRootNode(node).host;
-    var nodeIsAttached = (nodeRootHost === null || nodeRootHost === void 0 ? void 0 : nodeRootHost.ownerDocument.contains(nodeRootHost)) || node.ownerDocument.contains(node);
-
-    if (!displayCheck || displayCheck === 'full') {
+    }
+    if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {
       if (typeof getShadowRoot === 'function') {
         // figure out if we should consider the node to be in an undisclosed shadow and use the
         //  'non-zero-area' fallback
         var originalNode = node;
-
         while (node) {
           var parentElement = node.parentElement;
           var rootNode = getRootNode(node);
-
           if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
           ) {
             // node has an undisclosed shadow which means we can only treat it as a black box, so we
@@ -10227,25 +10262,27 @@
             node = parentElement;
           }
         }
-
         node = originalNode;
-      } // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
+      }
+      // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
       //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
       //  it might be a falsy value, which means shadow DOM support is disabled
+
       // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
       //  now we can just test to see if it would normally be visible or not, provided it's
       //  attached to the main document.
       // NOTE: We must consider case where node is inside a shadow DOM and given directly to
       //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
 
-
-      if (nodeIsAttached) {
+      if (isNodeAttached(node)) {
         // this works wherever the node is: if there's at least one client rect, it's
         //  somehow displayed; it also covers the CSS 'display: contents' case where the
         //  node itself is hidden in place of its contents; and there's no need to search
         //  up the hierarchy either
         return !node.getClientRects().length;
-      } // Else, the node isn't attached to the document, which means the `getClientRects()`
+      }
+
+      // Else, the node isn't attached to the document, which means the `getClientRects()`
       //  API will __always__ return zero rects (this can happen, for example, if React
       //  is used to render nodes onto a detached tree, as confirmed in this thread:
       //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
@@ -10258,7 +10295,13 @@
       //  APIs on nodes in detached containers has actually implicitly used tabbable in what
       //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
       //  considering __everything__ to be visible because of the innability to determine styles.
-
+      //
+      // v6.0.0: As of this major release, the default 'full' option __no longer treats detached
+      //  nodes as visible with the 'none' fallback.__
+      if (displayCheck !== 'legacy-full') {
+        return true; // hidden
+      }
+      // else, fallback to 'none' mode and consider the node visible
     } else if (displayCheck === 'non-zero-area') {
       // NOTE: Even though this tests that the node's client rect is non-zero to determine
       //  whether it's displayed, and that a detached node will __always__ have a zero-area
@@ -10266,67 +10309,64 @@
       //  this mode, we do want to consider nodes that have a zero area to be hidden at all
       //  times, and that includes attached or not.
       return isZeroArea(node);
-    } // visible, as far as we can tell, or per current `displayCheck` mode
-
+    }
 
+    // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
+    //  it's visible
     return false;
-  }; // form fields (nested) inside a disabled fieldset are not focusable/tabbable
+  };
+
+  // form fields (nested) inside a disabled fieldset are not focusable/tabbable
   //  unless they are in the _first_ <legend> element of the top-most disabled
   //  fieldset
-
-
   var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
     if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
-      var parentNode = node.parentElement; // check if `node` is contained in a disabled <fieldset>
-
+      var parentNode = node.parentElement;
+      // check if `node` is contained in a disabled <fieldset>
       while (parentNode) {
         if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
           // look for the first <legend> among the children of the disabled <fieldset>
           for (var i = 0; i < parentNode.children.length; i++) {
-            var child = parentNode.children.item(i); // when the first <legend> (in document order) is found
-
+            var child = parentNode.children.item(i);
+            // when the first <legend> (in document order) is found
             if (child.tagName === 'LEGEND') {
               // if its parent <fieldset> is not nested in another disabled <fieldset>,
               // return whether `node` is a descendant of its first <legend>
               return matches$1.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
             }
-          } // the disabled <fieldset> containing `node` has no <legend>
-
-
+          }
+          // the disabled <fieldset> containing `node` has no <legend>
           return true;
         }
-
         parentNode = parentNode.parentElement;
       }
-    } // else, node's tabbable/focusable state should not be affected by a fieldset's
-    //  enabled/disabled state
-
+    }
 
+    // else, node's tabbable/focusable state should not be affected by a fieldset's
+    //  enabled/disabled state
     return false;
   };
-
   var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
-    if (node.disabled || isHiddenInput(node) || isHidden(node, options) || // For a details element with a summary, the summary element gets the focus
+    if (node.disabled ||
+    // we must do an inert look up to filter out any elements inside an inert ancestor
+    //  because we're limited in the type of selectors we can use in JSDom (see related
+    //  note related to `candidateSelectors`)
+    isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
+    // For a details element with a summary, the summary element gets the focus
     isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
       return false;
     }
-
     return true;
   };
-
   var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
-
   var isFocusable = function isFocusable(node, options) {
     options = options || {};
-
     if (!node) {
       throw new Error('No node provided');
     }
-
     if (matches$1.call(node, focusableCandidateSelector) === false) {
       return false;
     }
-
     return isNodeMatchingSelectorFocusable(options, node);
   };
 
@@ -10612,35 +10652,35 @@
           this.shouldSkipFocus = false;
           switch (key) {
               // Select the first available option
-              case keyHome$1: {
+              case keyHome: {
                   this.checkFirstOption(shiftKey);
                   return;
               }
               // Select the next selectable option
-              case keyArrowDown$1: {
+              case keyArrowDown: {
                   this.checkNextOption(shiftKey);
                   return;
               }
               // Select the previous selectable option
-              case keyArrowUp$1: {
+              case keyArrowUp: {
                   this.checkPreviousOption(shiftKey);
                   return;
               }
               // Select the last available option
-              case keyEnd$1: {
+              case keyEnd: {
                   this.checkLastOption(shiftKey);
                   return;
               }
-              case keyTab$1: {
+              case keyTab: {
                   this.focusAndScrollOptionIntoView();
                   return true;
               }
-              case keyEscape$1: {
+              case keyEscape: {
                   this.uncheckAllOptions();
                   this.checkActiveIndex();
                   return true;
               }
-              case keySpace$1: {
+              case keySpace: {
                   e.preventDefault();
                   if (this.typeAheadExpired) {
                       this.toggleSelectedForAllCheckedOptions();
@@ -10845,7 +10885,7 @@
            *
            * @internal
            */
-          this.currentDirection = Direction$1.ltr;
+          this.currentDirection = Direction.ltr;
           this.focusSubmenuOnLoad = false;
           /**
            * @internal
@@ -10855,15 +10895,15 @@
                   return false;
               }
               switch (e.key) {
-                  case keyEnter$1:
-                  case keySpace$1:
+                  case keyEnter:
+                  case keySpace:
                       this.invoke();
                       return false;
-                  case keyArrowRight$1:
+                  case keyArrowRight:
                       //open/focus on submenu
                       this.expandAndFocus();
                       return false;
-                  case keyArrowLeft$1:
+                  case keyArrowLeft:
                       //close submenu
                       if (this.expanded) {
                           this.expanded = false;
@@ -11046,7 +11086,7 @@
   applyMixins(MenuItem$1, StartEnd);
 
   /**
-   * Generates a template for the {@link @microsoft/fast-foundation#(MenuItem:class)} component using
+   * Generates a template for the {@link @ni/fast-foundation#(MenuItem:class)} component using
    * the provided prefix.
    *
    * @public
@@ -11123,7 +11163,7 @@
   class _TextField extends FoundationElement {
   }
   /**
-   * A form-associated base class for the {@link @microsoft/fast-foundation#(TextField:class)} component.
+   * A form-associated base class for the {@link @ni/fast-foundation#(TextField:class)} component.
    *
    * @internal
    */
@@ -11324,7 +11364,7 @@
   class _NumberField extends FoundationElement {
   }
   /**
-   * A form-associated base class for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
+   * A form-associated base class for the {@link @ni/fast-foundation#(NumberField:class)} component.
    *
    * @internal
    */
@@ -11561,10 +11601,10 @@
       handleKeyDown(e) {
           const key = e.key;
           switch (key) {
-              case keyArrowUp$1:
+              case keyArrowUp:
                   this.stepUp();
                   return false;
-              case keyArrowDown$1:
+              case keyArrowDown:
                   this.stepDown();
                   return false;
           }
@@ -11638,7 +11678,7 @@
            * @remarks
            * HTML Attribute: orientation
            */
-          this.orientation = Orientation$1.horizontal;
+          this.orientation = Orientation.horizontal;
           this.radioChangeHandler = (e) => {
               const changedRadio = e.target;
               if (changedRadio.checked) {
@@ -11739,11 +11779,11 @@
               e.preventDefault();
           };
           this.shouldMoveOffGroupToTheRight = (index, group, key) => {
-              return index === group.length && this.isInsideToolbar && key === keyArrowRight$1;
+              return index === group.length && this.isInsideToolbar && key === keyArrowRight;
           };
           this.shouldMoveOffGroupToTheLeft = (group, key) => {
               const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-              return index < 0 && this.isInsideToolbar && key === keyArrowLeft$1;
+              return index < 0 && this.isInsideToolbar && key === keyArrowLeft;
           };
           this.checkFocusedRadio = () => {
               if (this.focusedRadio !== null &&
@@ -11827,13 +11867,13 @@
                   return true;
               }
               switch (key) {
-                  case keyEnter$1: {
+                  case keyEnter: {
                       this.checkFocusedRadio();
                       break;
                   }
-                  case keyArrowRight$1:
-                  case keyArrowDown$1: {
-                      if (this.direction === Direction$1.ltr) {
+                  case keyArrowRight:
+                  case keyArrowDown: {
+                      if (this.direction === Direction.ltr) {
                           this.moveRight(e);
                       }
                       else {
@@ -11841,9 +11881,9 @@
                       }
                       break;
                   }
-                  case keyArrowLeft$1:
-                  case keyArrowUp$1: {
-                      if (this.direction === Direction$1.ltr) {
+                  case keyArrowLeft:
+                  case keyArrowUp: {
+                      if (this.direction === Direction.ltr) {
                           this.moveLeft(e);
                       }
                       else {
@@ -12004,7 +12044,7 @@
   ], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#(Radio:class)} component.
+   * The template for the {@link @ni/fast-foundation#(Radio:class)} component.
    * @public
    */
   const radioTemplate = (context, definition) => html `
@@ -12037,7 +12077,7 @@
   class _Radio extends FoundationElement {
   }
   /**
-   * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
+   * A form-associated base class for the {@link @ni/fast-foundation#(Radio:class)} component.
    *
    * @internal
    */
@@ -12061,6 +12101,26 @@
    * @public
    */
   let Radio$1 = class Radio extends FormAssociatedRadio {
+      readOnlyChanged() {
+          if (this.proxy instanceof HTMLInputElement) {
+              this.proxy.readOnly = this.readOnly;
+          }
+      }
+      /**
+       * @internal
+       */
+      defaultCheckedChanged() {
+          var _a;
+          if (this.$fastController.isConnected && !this.dirtyChecked) {
+              // Setting this.checked will cause us to enter a dirty state,
+              // but if we are clean when defaultChecked is changed, we want to stay
+              // in a clean state, so reset this.dirtyChecked
+              if (!this.isInsideRadioGroup()) {
+                  this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
+                  this.dirtyChecked = false;
+              }
+          }
+      }
       constructor() {
           super();
           /**
@@ -12075,7 +12135,7 @@
            */
           this.keypressHandler = (e) => {
               switch (e.key) {
-                  case keySpace$1:
+                  case keySpace:
                       if (!this.checked && !this.readOnly) {
                           this.checked = true;
                       }
@@ -12085,26 +12145,6 @@
           };
           this.proxy.setAttribute("type", "radio");
       }
-      readOnlyChanged() {
-          if (this.proxy instanceof HTMLInputElement) {
-              this.proxy.readOnly = this.readOnly;
-          }
-      }
-      /**
-       * @internal
-       */
-      defaultCheckedChanged() {
-          var _a;
-          if (this.$fastController.isConnected && !this.dirtyChecked) {
-              // Setting this.checked will cause us to enter a dirty state,
-              // but if we are clean when defaultChecked is changed, we want to stay
-              // in a clean state, so reset this.dirtyChecked
-              if (!this.isInsideRadioGroup()) {
-                  this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
-                  this.dirtyChecked = false;
-              }
-          }
-      }
       /**
        * @internal
        */
@@ -12170,7 +12210,7 @@
   class _Select extends ListboxElement {
   }
   /**
-   * A form-associated base class for the {@link @microsoft/fast-foundation#(Select:class)} component.
+   * A form-associated base class for the {@link @ni/fast-foundation#(Select:class)} component.
    *
    * @internal
    */
@@ -12222,7 +12262,7 @@
            *
            * @internal
            */
-          this.listboxId = uniqueId$1("listbox-");
+          this.listboxId = uniqueId("listbox-");
           /**
            * The max height for the listbox when opened.
            *
@@ -12561,31 +12601,31 @@
           super.keydownHandler(e);
           const key = e.key || e.key.charCodeAt(0);
           switch (key) {
-              case keySpace$1: {
+              case keySpace: {
                   e.preventDefault();
                   if (this.collapsible && this.typeAheadExpired) {
                       this.open = !this.open;
                   }
                   break;
               }
-              case keyHome$1:
-              case keyEnd$1: {
+              case keyHome:
+              case keyEnd: {
                   e.preventDefault();
                   break;
               }
-              case keyEnter$1: {
+              case keyEnter: {
                   e.preventDefault();
                   this.open = !this.open;
                   break;
               }
-              case keyEscape$1: {
+              case keyEscape: {
                   if (this.collapsible && this.open) {
                       e.preventDefault();
                       this.open = false;
                   }
                   break;
               }
-              case keyTab$1: {
+              case keyTab: {
                   if (this.collapsible && this.open) {
                       e.preventDefault();
                       this.open = false;
@@ -12597,7 +12637,7 @@
               this.updateValue(true);
               this.indexWhenOpened = this.selectedIndex;
           }
-          return !(key === keyArrowDown$1 || key === keyArrowUp$1);
+          return !(key === keyArrowDown || key === keyArrowUp);
       }
       connectedCallback() {
           super.connectedCallback();
@@ -12667,7 +12707,7 @@
   class _Switch extends FoundationElement {
   }
   /**
-   * A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
+   * A form-associated base class for the {@link @ni/fast-foundation#(Switch:class)} component.
    *
    * @internal
    */
@@ -12695,6 +12735,14 @@
    * @public
    */
   let Switch$1 = class Switch extends FormAssociatedSwitch {
+      readOnlyChanged() {
+          if (this.proxy instanceof HTMLInputElement) {
+              this.proxy.readOnly = this.readOnly;
+          }
+          this.readOnly
+              ? this.classList.add("readonly")
+              : this.classList.remove("readonly");
+      }
       constructor() {
           super();
           /**
@@ -12712,8 +12760,8 @@
                   return;
               }
               switch (e.key) {
-                  case keyEnter$1:
-                  case keySpace$1:
+                  case keyEnter:
+                  case keySpace:
                       this.checked = !this.checked;
                       break;
               }
@@ -12728,14 +12776,6 @@
           };
           this.proxy.setAttribute("type", "checkbox");
       }
-      readOnlyChanged() {
-          if (this.proxy instanceof HTMLInputElement) {
-              this.proxy.readOnly = this.readOnly;
-          }
-          this.readOnly
-              ? this.classList.add("readonly")
-              : this.classList.remove("readonly");
-      }
       /**
        * @internal
        */
@@ -12755,7 +12795,7 @@
   ], Switch$1.prototype, "defaultSlottedNodes", void 0);
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#TabPanel} component.
+   * The template for the {@link @ni/fast-foundation#TabPanel} component.
    * @public
    */
   const tabPanelTemplate = (context, definition) => html `
@@ -12765,7 +12805,7 @@
 `;
 
   /**
-   * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+   * A TabPanel Component to be used with {@link @ni/fast-foundation#(Tabs:class)}
    *
    * @slot - The default slot for the tabpanel content
    *
@@ -12775,7 +12815,7 @@
   };
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#Tab} component.
+   * The template for the {@link @ni/fast-foundation#Tab} component.
    * @public
    */
   const tabTemplate = (context, definition) => html `
@@ -12785,7 +12825,7 @@
 `;
 
   /**
-   * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+   * A Tab Component to be used with {@link @ni/fast-foundation#(Tabs:class)}
    *
    * @slot - The default slot for the tab content
    *
@@ -12798,7 +12838,7 @@
   ], Tab$1.prototype, "disabled", void 0);
 
   /**
-   * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
+   * The orientation of the {@link @ni/fast-foundation#(Tabs:class)} component
    * @public
    */
   const TabsOrientation = {
@@ -12915,11 +12955,11 @@
           this.handleTabKeyDown = (event) => {
               if (this.isHorizontal()) {
                   switch (event.key) {
-                      case keyArrowLeft$1:
+                      case keyArrowLeft:
                           event.preventDefault();
                           this.adjustBackward(event);
                           break;
-                      case keyArrowRight$1:
+                      case keyArrowRight:
                           event.preventDefault();
                           this.adjustForward(event);
                           break;
@@ -12927,22 +12967,22 @@
               }
               else {
                   switch (event.key) {
-                      case keyArrowUp$1:
+                      case keyArrowUp:
                           event.preventDefault();
                           this.adjustBackward(event);
                           break;
-                      case keyArrowDown$1:
+                      case keyArrowDown:
                           event.preventDefault();
                           this.adjustForward(event);
                           break;
                   }
               }
               switch (event.key) {
-                  case keyHome$1:
+                  case keyHome:
                       event.preventDefault();
                       this.adjust(-this.activeTabIndex);
                       break;
-                  case keyEnd$1:
+                  case keyEnd:
                       event.preventDefault();
                       this.adjust(this.tabs.length - this.activeTabIndex - 1);
                       break;
@@ -13060,13 +13100,13 @@
       getTabIds() {
           return this.tabs.map((tab) => {
               var _a;
-              return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${uniqueId$1()}`;
+              return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${uniqueId()}`;
           });
       }
       getTabPanelIds() {
           return this.tabpanels.map((tabPanel) => {
               var _a;
-              return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId$1()}`;
+              return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId()}`;
           });
       }
       setComponent() {
@@ -13123,7 +13163,7 @@
       adjust(adjustment) {
           const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
           const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-          const nextTabIndex = limit$1(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+          const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
           // the index of the next focusable tab within the context of all available tabs
           const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
           if (nextIndex > -1) {
@@ -13169,7 +13209,7 @@
   class _TextArea extends FoundationElement {
   }
   /**
-   * A form-associated base class for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
+   * A form-associated base class for the {@link @ni/fast-foundation#(TextArea:class)} component.
    *
    * @internal
    */
@@ -13331,7 +13371,7 @@
   applyMixins(TextArea$1, DelegatesARIATextbox);
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#(Toolbar:class)} component.
+   * The template for the {@link @ni/fast-foundation#(Toolbar:class)} component.
    *
    * @public
    */
@@ -13383,21 +13423,21 @@
    */
   const ToolbarArrowKeyMap = Object.freeze({
       [ArrowKeys.ArrowUp]: {
-          [Orientation$1.vertical]: -1,
+          [Orientation.vertical]: -1,
       },
       [ArrowKeys.ArrowDown]: {
-          [Orientation$1.vertical]: 1,
+          [Orientation.vertical]: 1,
       },
       [ArrowKeys.ArrowLeft]: {
-          [Orientation$1.horizontal]: {
-              [Direction$1.ltr]: -1,
-              [Direction$1.rtl]: 1,
+          [Orientation.horizontal]: {
+              [Direction.ltr]: -1,
+              [Direction.rtl]: 1,
           },
       },
       [ArrowKeys.ArrowRight]: {
-          [Orientation$1.horizontal]: {
-              [Direction$1.ltr]: 1,
-              [Direction$1.rtl]: -1,
+          [Orientation.horizontal]: {
+              [Direction.ltr]: 1,
+              [Direction.rtl]: -1,
           },
       },
   });
@@ -13427,7 +13467,7 @@
            *
            * @internal
            */
-          this.direction = Direction$1.ltr;
+          this.direction = Direction.ltr;
           /**
            * The orientation of the toolbar.
            *
@@ -13435,7 +13475,7 @@
            * @remarks
            * HTML Attribute: `orientation`
            */
-          this.orientation = Orientation$1.horizontal;
+          this.orientation = Orientation.horizontal;
       }
       /**
        * The index of the currently focused element, clamped between 0 and the last element.
@@ -13448,7 +13488,7 @@
       }
       set activeIndex(value) {
           if (this.$fastController.isConnected) {
-              this._activeIndex = limit$1(0, this.focusableElements.length - 1, value);
+              this._activeIndex = limit(0, this.focusableElements.length - 1, value);
               Observable.notify(this, "activeIndex");
           }
       }
@@ -13795,7 +13835,7 @@
            *
            * @internal
            */
-          this.currentDirection = Direction$1.ltr;
+          this.currentDirection = Direction.ltr;
           /**
            * The timer that tracks delay time before the tooltip is shown on hover
            */
@@ -13946,7 +13986,7 @@
           this.handleDocumentKeydown = (e) => {
               if (!e.defaultPrevented && this.tooltipVisible) {
                   switch (e.key) {
-                      case keyEscape$1:
+                      case keyEscape:
                           this.isAnchorHoveredFocused = false;
                           this.updateTooltipVisibility();
                           this.$emit("dismiss");
@@ -14208,7 +14248,7 @@
   ], Tooltip$1.prototype, "currentDirection", void 0);
 
   /**
-   * The template for the {@link @microsoft/fast-foundation#(TreeItem:class)} component.
+   * The template for the {@link @ni/fast-foundation#(TreeItem:class)} component.
    * @public
    */
   const treeItemTemplate = (context, definition) => html `
@@ -14265,7 +14305,7 @@
    * determines if element is an HTMLElement and if it has the role treeitem
    */
   function isTreeItemElement(el) {
-      return isHTMLElement$1(el) && el.getAttribute("role") === "treeitem";
+      return isHTMLElement(el) && el.getAttribute("role") === "treeitem";
   }
   /**
    * A Tree item Custom HTML Element.
@@ -14469,17 +14509,17 @@
               }
               const treeItems = this.getVisibleNodes();
               switch (e.key) {
-                  case keyHome$1:
+                  case keyHome:
                       if (treeItems.length) {
                           TreeItem$1.focusItem(treeItems[0]);
                       }
                       return;
-                  case keyEnd$1:
+                  case keyEnd:
                       if (treeItems.length) {
                           TreeItem$1.focusItem(treeItems[treeItems.length - 1]);
                       }
                       return;
-                  case keyArrowLeft$1:
+                  case keyArrowLeft:
                       if (e.target && this.isFocusableElement(e.target)) {
                           const item = e.target;
                           if (item instanceof TreeItem$1 &&
@@ -14493,7 +14533,7 @@
                           }
                       }
                       return false;
-                  case keyArrowRight$1:
+                  case keyArrowRight:
                       if (e.target && this.isFocusableElement(e.target)) {
                           const item = e.target;
                           if (item instanceof TreeItem$1 &&
@@ -14506,17 +14546,17 @@
                           }
                       }
                       return;
-                  case keyArrowDown$1:
+                  case keyArrowDown:
                       if (e.target && this.isFocusableElement(e.target)) {
                           this.focusNextNode(1, e.target);
                       }
                       return;
-                  case keyArrowUp$1:
+                  case keyArrowUp:
                       if (e.target && this.isFocusableElement(e.target)) {
                           this.focusNextNode(-1, e.target);
                       }
                       return;
-                  case keyEnter$1:
+                  case keyEnter:
                       // In single-select trees where selection does not follow focus (see note below),
                       // the default action is typically to select the focused node.
                       this.handleClick(e);
@@ -14625,7 +14665,7 @@
               return;
           }
           const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-          if (isHTMLElement$1(focusItem)) {
+          if (isHTMLElement(focusItem)) {
               TreeItem$1.focusItem(focusItem);
           }
       }
@@ -14801,6 +14841,15 @@
    * @public
    */
   class ColorRGBA64 {
+      /**
+       * Construct a {@link ColorRGBA64} from a {@link ColorRGBA64Config}
+       * @param data - the config object
+       */
+      static fromObject(data) {
+          return data && !isNaN(data.r) && !isNaN(data.g) && !isNaN(data.b)
+              ? new ColorRGBA64(data.r, data.g, data.b, data.a)
+              : null;
+      }
       /**
        *
        * @param red - the red value
@@ -14814,15 +14863,6 @@
           this.b = blue;
           this.a = typeof alpha === "number" && !isNaN(alpha) ? alpha : 1;
       }
-      /**
-       * Construct a {@link ColorRGBA64} from a {@link ColorRGBA64Config}
-       * @param data - the config object
-       */
-      static fromObject(data) {
-          return data && !isNaN(data.r) && !isNaN(data.g) && !isNaN(data.b)
-              ? new ColorRGBA64(data.r, data.g, data.b, data.a)
-              : null;
-      }
       /**
        * Determines if one color is equal to another.
        * @param rhs - the color to compare
@@ -15675,7 +15715,7 @@
       return webRGBARegex.test(raw);
   }
   /**
-   * Tests whether a color is in {@link @microsoft/fast-colors#NamedColors}.
+   * Tests whether a color is in {@link @ni/fast-colors#NamedColors}.
    * @param raw - the color name to test
    * @public
    */
@@ -15683,7 +15723,7 @@
       return namedColorsConfigs.hasOwnProperty(raw);
   }
   /**
-   * Converts a hexadecimal color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+   * Converts a hexadecimal color string to a {@link @ni/fast-colors#ColorRGBA64}.
    * @param raw - a color string in the form of "#RRGGBB" or "#RGB"
    * @example
    * ```ts
@@ -15712,7 +15752,7 @@
       return new ColorRGBA64(normalize$3((rawInt & 0xff0000) >>> 16, 0, 255), normalize$3((rawInt & 0x00ff00) >>> 8, 0, 255), normalize$3(rawInt & 0x0000ff, 0, 255), 1);
   }
   /**
-   * Converts a hexadecimal color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+   * Converts a hexadecimal color string to a {@link @ni/fast-colors#ColorRGBA64}.
    * @param raw - a color string in the form of "#AARRGGBB" or "#ARGB"
    * @example
    * ```ts
@@ -15742,7 +15782,7 @@
       return new ColorRGBA64(normalize$3((rawInt & 0x00ff0000) >>> 16, 0, 255), normalize$3((rawInt & 0x0000ff00) >>> 8, 0, 255), normalize$3(rawInt & 0x000000ff, 0, 255), normalize$3((rawInt & 0xff000000) >>> 24, 0, 255));
   }
   /**
-   * Converts a rgb color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+   * Converts a rgb color string to a {@link @ni/fast-colors#ColorRGBA64}.
    * @param raw - a color string format "rgba(RR,GG,BB)" where RR,GG,BB are [0,255]
    * @example
    * ```ts
@@ -15759,7 +15799,7 @@
       return new ColorRGBA64(normalize$3(Number(split[0]), 0, 255), normalize$3(Number(split[1]), 0, 255), normalize$3(Number(split[2]), 0, 255), 1);
   }
   /**
-   * Converts a rgba color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+   * Converts a rgba color string to a {@link @ni/fast-colors#ColorRGBA64}.
    * @param raw - a color string format "rgba(RR,GG,BB,a)" where RR,GG,BB are [0,255] and a is [0,1]
    * @example
    * ```ts
@@ -15779,7 +15819,7 @@
       return null;
   }
   /**
-   * Converts a named color to a {@link @microsoft/fast-colors#ColorRGBA64}.
+   * Converts a named color to a {@link @ni/fast-colors#ColorRGBA64}.
    * @param raw - a {@link https://www.w3schools.com/colors/colors_names.asp | CSS color name}.
    * @example
    * ```ts
@@ -16067,89 +16107,6 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  /**
-   * Standard orientation values
-   */
-  const Orientation = {
-      horizontal: "horizontal"};
-
-  /**
-   * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
-   *
-   * @param array - the array to test
-   * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
-   */
-  function findLastIndex(array, predicate) {
-      let k = array.length;
-      while (k--) {
-          if (predicate(array[k], k, array)) {
-              return k;
-          }
-      }
-      return -1;
-  }
-
-  /**
-   * A test that ensures that all arguments are HTML Elements
-   */
-  function isHTMLElement(...args) {
-      return args.every((arg) => arg instanceof HTMLElement);
-  }
-
-  /**
-   * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
-   * and should include all non-deprecated and non-experimental Standard events
-   */
-  const eventAnimationEnd = "animationend";
-  const eventChange = "change";
-
-  /**
-   * String values for use with KeyboardEvent.key
-   */
-  const keyArrowDown = "ArrowDown";
-  const keyArrowLeft = "ArrowLeft";
-  const keyArrowRight = "ArrowRight";
-  const keyArrowUp = "ArrowUp";
-  const keyEnd = "End";
-  const keyEnter = "Enter";
-  const keyEscape = "Escape";
-  const keyHome = "Home";
-  const keyFunction2 = "F2";
-  const keyPageDown = "PageDown";
-  const keyPageUp = "PageUp";
-  const keySpace = " ";
-  const keyTab = "Tab";
-
-  /**
-   * Expose ltr and rtl strings
-   */
-  var Direction;
-  (function (Direction) {
-      Direction["ltr"] = "ltr";
-      Direction["rtl"] = "rtl";
-  })(Direction || (Direction = {}));
-
-  /**
-   * This method keeps a given value within the bounds of a min and max value. If the value
-   * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
-   * the maximum will be returned. Otherwise, the value is returned un-changed.
-   */
-  /**
-   * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
-   * If value is greater than max, max will be returned.
-   */
-  function limit(min, max, value) {
-      return Math.min(Math.max(value, min), max);
-  }
-
-  let uniqueIdCounter = 0;
-  /**
-   * Generates a unique ID based on incrementing a counter.
-   */
-  function uniqueId(prefix = "") {
-      return `${prefix}${uniqueIdCounter++}`;
-  }
-
   const template$R = html `<slot></slot>`;
 
   const styles$14 = css `
@@ -16175,7 +16132,7 @@
           });
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], DocumentElementLang.prototype, "lang", void 0);
   const documentElementLang = new DocumentElementLang();
@@ -16256,13 +16213,13 @@
           }
       }
   }
-  __decorate$1([
+  __decorate([
       attr()
   ], ThemeProvider.prototype, "lang", void 0);
-  __decorate$1([
+  __decorate([
       attr()
   ], ThemeProvider.prototype, "direction", void 0);
-  __decorate$1([
+  __decorate([
       attr()
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
@@ -16658,16 +16615,16 @@
           this.underlineHidden = false;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'underline-hidden', mode: 'boolean' })
   ], Anchor.prototype, "underlineHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], Anchor.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'tabindex', converter: nullableNumberConverter })
   ], Anchor.prototype, "tabIndex", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'contenteditable' })
   ], Anchor.prototype, "contentEditable", void 0);
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
@@ -17157,16 +17114,16 @@
           this.disabled = false;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], AnchorButton.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'appearance-variant' })
   ], AnchorButton.prototype, "appearanceVariant", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'content-hidden', mode: 'boolean' })
   ], AnchorButton.prototype, "contentHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
@@ -17352,13 +17309,13 @@
           this.anchor.tabIndex = value;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], AnchorMenuItem.prototype, "disabled", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], AnchorMenuItem.prototype, "anchor", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], AnchorMenuItem.prototype, "startColumnCount", void 0);
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
@@ -17535,10 +17492,10 @@
           this.ariaSelected = 'false';
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], AnchorTab.prototype, "disabled", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'aria-selected' })
   ], AnchorTab.prototype, "ariaSelected", void 0);
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
@@ -17664,21 +17621,21 @@
           this.contentHidden = false;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], Button.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'appearance-variant' })
   ], Button.prototype, "appearanceVariant", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'content-hidden', mode: 'boolean' })
   ], Button.prototype, "contentHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'tabindex', converter: nullableNumberConverter })
   ], Button.prototype, "tabIndex", void 0);
   /**
    * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
-   * Implements {@link @microsoft/fast-foundation#buttonTemplate}
+   * Implements {@link @ni/fast-foundation#buttonTemplate}
    *
    * @public
    * @remarks
@@ -18610,7 +18567,7 @@
           this.icon = icon;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], Icon.prototype, "severity", void 0);
   const registerIcon = (baseName, iconClass) => {
@@ -18995,13 +18952,13 @@
           return tab.shadowRoot.querySelector('a');
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], AnchorTabs.prototype, "activeid", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], AnchorTabs.prototype, "tabs", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], AnchorTabs.prototype, "showScrollButtons", void 0);
   applyMixins(AnchorTabs, StartEnd);
@@ -19248,10 +19205,10 @@
           }
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], AnchorTreeItem.prototype, "selected", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], AnchorTreeItem.prototype, "disabled", void 0);
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
@@ -19668,16 +19625,16 @@
           this.open = false;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], Banner.prototype, "open", void 0);
-  __decorate$1([
+  __decorate([
       attr()
   ], Banner.prototype, "severity", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'title-hidden', mode: 'boolean' })
   ], Banner.prototype, "titleHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
   ], Banner.prototype, "preventDismiss", void 0);
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
@@ -19711,7 +19668,7 @@
    */
   class Breadcrumb extends Breadcrumb$1 {
   }
-  __decorate$1([
+  __decorate([
       attr
   ], Breadcrumb.prototype, "appearance", void 0);
   const nimbleBreadcrumb = Breadcrumb.compose({
@@ -20013,12 +19970,12 @@ so this becomes the fallback color for the slot */ ''}
           this.selected = false;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], CardButton.prototype, "selected", void 0);
   /**
    * A function that returns a nimble-card-button registration for configuring the component with a DesignSystem.
-   * Implements {@link @microsoft/fast-foundation#buttonTemplate}
+   * Implements {@link @ni/fast-foundation#buttonTemplate}
    *
    * @public
    * @remarks
@@ -20344,7 +20301,7 @@ so this becomes the fallback color for the slot */ ''}
           return this.disabled ? undefined : `${tabIndex}`;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'tabindex', converter: nullableNumberConverter })
   ], Checkbox.prototype, "tabIndex", void 0);
   const nimbleCheckbox = Checkbox.compose({
@@ -20489,16 +20446,16 @@ so this becomes the fallback color for the slot */ ''}
           return this.disabled ? undefined : `${tabIndex}`;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], ToggleButton.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'appearance-variant' })
   ], ToggleButton.prototype, "appearanceVariant", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'content-hidden', mode: 'boolean' })
   ], ToggleButton.prototype, "contentHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'tabindex', converter: nullableNumberConverter })
   ], ToggleButton.prototype, "tabIndex", void 0);
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
@@ -21670,46 +21627,46 @@ so this becomes the fallback color for the slot */ ''}
           return this.options.findIndex(o => !o.disabled && o.text === optionText);
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], Combobox.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'autocomplete', mode: 'fromView' })
   ], Combobox.prototype, "autocomplete", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'position' })
   ], Combobox.prototype, "positionAttribute", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'open', mode: 'boolean' })
   ], Combobox.prototype, "open", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], Combobox.prototype, "placeholder", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Combobox.prototype, "position", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Combobox.prototype, "region", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Combobox.prototype, "controlWrapper", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Combobox.prototype, "control", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Combobox.prototype, "listbox", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Combobox.prototype, "dropdownButton", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Combobox.prototype, "filteredOptions", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Combobox.prototype, "hasOverflow", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Combobox.prototype, "availableViewportHeight", void 0);
   const nimbleCombobox = Combobox.compose({
@@ -21983,19 +21940,19 @@ so this becomes the fallback color for the slot */ ''}
   // We want the member to match the name of the constant
   // eslint-disable-next-line @typescript-eslint/naming-convention
   Dialog.UserDismissed = UserDismissed;
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
   ], Dialog.prototype, "preventDismiss", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'header-hidden', mode: 'boolean' })
   ], Dialog.prototype, "headerHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'footer-hidden', mode: 'boolean' })
   ], Dialog.prototype, "footerHidden", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Dialog.prototype, "footerIsEmpty", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Dialog.prototype, "slottedFooterElements", void 0);
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
@@ -22283,10 +22240,10 @@ so this becomes the fallback color for the slot */ ''}
   // We want the member to match the name of the constant
   // eslint-disable-next-line @typescript-eslint/naming-convention
   Drawer.UserDismissed = UserDismissed;
-  __decorate$1([
+  __decorate([
       attr
   ], Drawer.prototype, "location", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
   ], Drawer.prototype, "preventDismiss", void 0);
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
@@ -24836,37 +24793,37 @@ so this becomes the fallback color for the slot */ ''}
           this.supportedLabels = supportedLabels$1;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'popup-dismiss' })
   ], LabelProviderCore.prototype, "popupDismiss", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'numeric-decrement' })
   ], LabelProviderCore.prototype, "numericDecrement", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'numeric-increment' })
   ], LabelProviderCore.prototype, "numericIncrement", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'popup-icon-error' })
   ], LabelProviderCore.prototype, "popupIconError", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'popup-icon-warning' })
   ], LabelProviderCore.prototype, "popupIconWarning", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'popup-icon-information' })
   ], LabelProviderCore.prototype, "popupIconInformation", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'filter-search' })
   ], LabelProviderCore.prototype, "filterSearch", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'filter-no-results' })
   ], LabelProviderCore.prototype, "filterNoResults", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'loading' })
   ], LabelProviderCore.prototype, "loading", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'scroll-backward' })
   ], LabelProviderCore.prototype, "scrollBackward", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'scroll-forward' })
   ], LabelProviderCore.prototype, "scrollForward", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
@@ -24988,52 +24945,52 @@ so this becomes the fallback color for the slot */ ''}
           this.supportedLabels = supportedLabels;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'group-collapse' })
   ], LabelProviderTable.prototype, "groupCollapse", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'group-expand' })
   ], LabelProviderTable.prototype, "groupExpand", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'row-collapse' })
   ], LabelProviderTable.prototype, "rowCollapse", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'row-expand' })
   ], LabelProviderTable.prototype, "rowExpand", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'collapse-all' })
   ], LabelProviderTable.prototype, "collapseAll", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'cell-action-menu' })
   ], LabelProviderTable.prototype, "cellActionMenu", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'column-header-grouped' })
   ], LabelProviderTable.prototype, "columnHeaderGrouped", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'column-header-sorted-ascending' })
   ], LabelProviderTable.prototype, "columnHeaderSortedAscending", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'column-header-sorted-descending' })
   ], LabelProviderTable.prototype, "columnHeaderSortedDescending", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'select-all' })
   ], LabelProviderTable.prototype, "selectAll", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'group-select-all' })
   ], LabelProviderTable.prototype, "groupSelectAll", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'row-select' })
   ], LabelProviderTable.prototype, "rowSelect", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'row-operation-column' })
   ], LabelProviderTable.prototype, "rowOperationColumn", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'row-loading' })
   ], LabelProviderTable.prototype, "rowLoading", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'group-row-placeholder-no-value' })
   ], LabelProviderTable.prototype, "groupRowPlaceholderNoValue", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'group-row-placeholder-empty' })
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
@@ -25117,7 +25074,7 @@ so this becomes the fallback color for the slot */ ''}
 
   // Based on template in FAST repo: https://github.com/microsoft/fast/blob/2ea80697bc3a5193e6123fb08ac3be2a76571aeb/packages/web-components/fast-foundation/src/listbox-option/listbox-option.template.ts
   /**
-   * The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.
+   * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
   // prettier-ignore
@@ -25219,16 +25176,16 @@ so this becomes the fallback color for the slot */ ''}
           return typeof parent.registerOption === 'function';
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], ListOption.prototype, "hidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'visually-hidden', mode: 'boolean' })
   ], ListOption.prototype, "visuallyHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'active-option', mode: 'boolean' })
   ], ListOption.prototype, "activeOption", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ListOption.prototype, "hasOverflow", void 0);
   const nimbleListOption = ListOption.compose({
@@ -25418,28 +25375,28 @@ so this becomes the fallback color for the slot */ ''}
           this.visuallyHidden = next.length === 0 || allOptionsHidden;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], ListOptionGroup.prototype, "label", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], ListOptionGroup.prototype, "hidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'visually-hidden', mode: 'boolean' })
   ], ListOptionGroup.prototype, "visuallyHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'top-separator-visible', mode: 'boolean' })
   ], ListOptionGroup.prototype, "topSeparatorVisible", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'bottom-separator-visible', mode: 'boolean' })
   ], ListOptionGroup.prototype, "bottomSeparatorVisible", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ListOptionGroup.prototype, "hasOverflow", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ListOptionGroup.prototype, "listOptions", void 0);
-  __decorate$1([
+  __decorate([
       volatile
   ], ListOptionGroup.prototype, "labelContent", null);
   const nimbleListOptionGroup = ListOptionGroup.compose({
@@ -25457,7 +25414,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   let Mapping$1 = class Mapping extends FoundationElement {
   };
-  __decorate$1([
+  __decorate([
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
@@ -25474,7 +25431,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   class MappingEmpty extends Mapping$1 {
   }
-  __decorate$1([
+  __decorate([
       attr()
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
@@ -25533,19 +25490,19 @@ so this becomes the fallback color for the slot */ ''}
           void this.resolveIconAsync(icon);
       }
   }
-  __decorate$1([
+  __decorate([
       attr()
   ], MappingIcon.prototype, "icon", void 0);
-  __decorate$1([
+  __decorate([
       attr()
   ], MappingIcon.prototype, "severity", void 0);
-  __decorate$1([
+  __decorate([
       attr()
   ], MappingIcon.prototype, "text", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'text-hidden', mode: 'boolean' })
   ], MappingIcon.prototype, "textHidden", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
@@ -25566,10 +25523,10 @@ so this becomes the fallback color for the slot */ ''}
           this.textHidden = false;
       }
   }
-  __decorate$1([
+  __decorate([
       attr()
   ], MappingSpinner.prototype, "text", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'text-hidden', mode: 'boolean' })
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
@@ -25586,7 +25543,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   class MappingText extends Mapping$1 {
   }
-  __decorate$1([
+  __decorate([
       attr()
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
@@ -25887,10 +25844,10 @@ so this becomes the fallback color for the slot */ ''}
       }
   };
   Menu$1.focusableElementRoles = roleForMenuItem;
-  __decorate$1([
+  __decorate([
       observable
   ], Menu$1.prototype, "items", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
@@ -25975,7 +25932,7 @@ so this becomes the fallback color for the slot */ ''}
   }
   /**
    * A function that returns a nimble-menu registration for configuring the component with a DesignSystem.
-   * Implements {@link @microsoft/fast-foundation#menuTemplate}
+   * Implements {@link @ni/fast-foundation#menuTemplate}
    *
    * @public
    * @remarks
@@ -26238,34 +26195,34 @@ so this becomes the fallback color for the slot */ ''}
           }
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], MenuButton.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'appearance-variant' })
   ], MenuButton.prototype, "appearanceVariant", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], MenuButton.prototype, "disabled", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'content-hidden', mode: 'boolean' })
   ], MenuButton.prototype, "contentHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'tabindex', converter: nullableNumberConverter })
   ], MenuButton.prototype, "tabIndex", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], MenuButton.prototype, "open", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'position' })
   ], MenuButton.prototype, "position", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], MenuButton.prototype, "toggleButton", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], MenuButton.prototype, "region", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
@@ -26365,7 +26322,7 @@ so this becomes the fallback color for the slot */ ''}
   }
   /**
    * A function that returns a nimble-menu-item registration for configuring the component with a DesignSystem.
-   * Implements {@link @microsoft/fast-foundation#menuItemTemplate}
+   * Implements {@link @ni/fast-foundation#menuItemTemplate}
    *
    * @public
    * @remarks
@@ -26589,7 +26546,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>`);
   /**
-   * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
+   * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
   const template$w = (context, definition) => html `
@@ -26682,7 +26639,7 @@ so this becomes the fallback color for the slot */ ''}
           this.control.setAttribute('role', 'spinbutton');
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], NumberField.prototype, "appearance", void 0);
   /**
@@ -45671,19 +45628,19 @@ img.ProseMirror-separator {
           this.open = value;
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextMentionListbox.prototype, "open", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextMentionListbox.prototype, "region", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextMentionListbox.prototype, "availableViewportHeight", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextMentionListbox.prototype, "filteredOptions", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
@@ -55493,13 +55450,13 @@ img.ProseMirror-separator {
           this.mentionUpdateEmitter = mentionUpdateEmitter;
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], MentionInternals.prototype, "mappingConfigs", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], MentionInternals.prototype, "pattern", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], MentionInternals.prototype, "buttonLabel", void 0);
 
@@ -55595,13 +55552,13 @@ img.ProseMirror-separator {
           }
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], RichTextMention.prototype, "pattern", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'button-label' })
   ], RichTextMention.prototype, "buttonLabel", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextMention.prototype, "mappingElements", void 0);
 
@@ -55896,10 +55853,10 @@ img.ProseMirror-separator {
           this.mentionInternalsNotifiers = [];
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], RichText.prototype, "childItems", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichText.prototype, "configuration", void 0);
 
@@ -60430,34 +60387,34 @@ img.ProseMirror-separator {
           };
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], RichTextEditor.prototype, "disabled", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'footer-hidden', mode: 'boolean' })
   ], RichTextEditor.prototype, "footerHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], RichTextEditor.prototype, "placeholder", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextEditor.prototype, "boldButton", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextEditor.prototype, "italicsButton", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextEditor.prototype, "bulletListButton", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextEditor.prototype, "numberedListButton", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextEditor.prototype, "scrollbarWidth", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextEditor.prototype, "activeMentionCharacter", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], RichTextEditor.prototype, "activeMappingConfigs", void 0);
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
@@ -60544,6 +60501,8 @@ img.ProseMirror-separator {
            *
            * @public
            * Markdown string to render its corresponding rich text content in the component.
+           * @remarks
+           * HTML Attribute: markdown
            */
           this.markdown = '';
           this.mentionedHrefs = [];
@@ -60585,8 +60544,8 @@ img.ProseMirror-separator {
           }
       }
   }
-  __decorate$1([
-      observable
+  __decorate([
+      attr({ mode: 'fromView' })
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
@@ -60970,7 +60929,7 @@ img.ProseMirror-separator {
           this.appearance = SpinnerAppearance.default;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
@@ -62143,61 +62102,61 @@ img.ProseMirror-separator {
           }
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], Select.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'position' })
   ], Select.prototype, "positionAttribute", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'filter-mode' })
   ], Select.prototype, "filterMode", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'clearable', mode: 'boolean' })
   ], Select.prototype, "clearable", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'loading-visible', mode: 'boolean' })
   ], Select.prototype, "loadingVisible", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "displayPlaceholder", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'open', mode: 'boolean' })
   ], Select.prototype, "open", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "position", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "control", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "scrollableRegion", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "filterInput", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "anchoredRegion", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "hasOverflow", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "filteredOptions", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "filter", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Select.prototype, "availableViewportHeight", void 0);
-  __decorate$1([
+  __decorate([
       volatile
   ], Select.prototype, "collapsible", null);
-  __decorate$1([
+  __decorate([
       volatile
   ], Select.prototype, "labelContent", null);
-  __decorate$1([
+  __decorate([
       volatile
   ], Select.prototype, "displayValue", null);
   const nimbleSelect = Select.compose({
@@ -63151,7 +63110,7 @@ img.ProseMirror-separator {
     var _row$getValue4;
     return (_row$getValue4 = row.getValue(columnId)) == null ? void 0 : _row$getValue4.includes(filterValue);
   };
-  arrIncludes.autoRemove = val => testFalsey(val) || !(val != null && val.length);
+  arrIncludes.autoRemove = val => testFalsey(val);
   const arrIncludesAll = (row, columnId, filterValue) => {
     return !filterValue.some(val => {
       var _row$getValue5;
@@ -65849,10 +65808,10 @@ img.ProseMirror-separator {
    */
   class TableGroupHeaderView extends FoundationElement {
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableGroupHeaderView.prototype, "groupHeaderValue", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableGroupHeaderView.prototype, "columnConfig", void 0);
 
@@ -65922,16 +65881,16 @@ img.ProseMirror-separator {
           }
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableCellView.prototype, "cellRecord", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableCellView.prototype, "columnConfig", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableCellView.prototype, "column", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableCellView.prototype, "recordId", void 0);
 
@@ -66051,55 +66010,55 @@ img.ProseMirror-separator {
           this.currentPixelWidth = this.pixelWidth;
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "columnConfig", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "operandDataRecordFieldName", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "sortOperation", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "dataRecordFieldNames", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "groupingDisabled", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "groupIndex", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "pixelWidth", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "fractionalWidth", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "minPixelWidth", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "resizingDisabled", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "hideHeaderIndicators", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "headerAlignment", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "currentFractionalWidth", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "currentPixelWidth", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "sortingDisabled", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "currentSortIndex", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnInternals.prototype, "currentSortDirection", void 0);
   function isColumnInternalsProperty(changedProperty, ...args) {
@@ -66143,19 +66102,19 @@ img.ProseMirror-separator {
           this.setAttribute('slot', this.columnInternals.uniqueId);
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'column-id' })
   ], TableColumn.prototype, "columnId", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'action-menu-slot' })
   ], TableColumn.prototype, "actionMenuSlot", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'action-menu-label' })
   ], TableColumn.prototype, "actionMenuLabel", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'column-hidden', mode: 'boolean' })
   ], TableColumn.prototype, "columnHidden", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumn.prototype, "hasOverflow", void 0);
 
@@ -66609,19 +66568,19 @@ focus outline in that case.
           }
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'sort-direction' })
   ], TableHeader.prototype, "sortDirection", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'first-sorted-column', mode: 'boolean' })
   ], TableHeader.prototype, "firstSortedColumn", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'indicators-hidden', mode: 'boolean' })
   ], TableHeader.prototype, "indicatorsHidden", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableHeader.prototype, "alignment", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
@@ -66940,34 +66899,34 @@ focus outline in that case.
           this.$emit('cell-blur', this);
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableCell.prototype, "cellState", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableCell.prototype, "column", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableCell.prototype, "recordId", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'column-id' })
   ], TableCell.prototype, "columnId", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'has-action-menu', mode: 'boolean' })
   ], TableCell.prototype, "hasActionMenu", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'menu-open', mode: 'boolean' })
   ], TableCell.prototype, "menuOpen", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'action-menu-label' })
   ], TableCell.prototype, "actionMenuLabel", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableCell.prototype, "cellViewTemplate", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableCell.prototype, "cellViewContainer", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
@@ -67299,76 +67258,76 @@ focus outline in that case.
           }
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'record-id' })
   ], TableRow.prototype, "recordId", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], TableRow.prototype, "selectable", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], TableRow.prototype, "selected", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'hide-selection', mode: 'boolean' })
   ], TableRow.prototype, "hideSelection", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], TableRow.prototype, "expanded", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'reserve-collapse-space', mode: 'boolean' })
   ], TableRow.prototype, "reserveCollapseSpace", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableRow.prototype, "dataRecord", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableRow.prototype, "columns", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableRow.prototype, "currentActionMenuColumn", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableRow.prototype, "nestingLevel", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableRow.prototype, "resolvedRowIndex", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'is-parent-row', mode: 'boolean' })
   ], TableRow.prototype, "isParentRow", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'menu-open', mode: 'boolean' })
   ], TableRow.prototype, "menuOpen", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'row-operation-grid-cell-hidden', mode: 'boolean' })
   ], TableRow.prototype, "rowOperationGridCellHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], TableRow.prototype, "loading", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableRow.prototype, "cellIndentLevels", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableRow.prototype, "cellStates", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableRow.prototype, "selectionCheckbox", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableRow.prototype, "animationClass", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'allow-hover', mode: 'boolean' })
   ], TableRow.prototype, "allowHover", void 0);
-  __decorate$1([
+  __decorate([
       volatile
   ], TableRow.prototype, "isTopLevelParentRow", null);
-  __decorate$1([
+  __decorate([
       volatile
   ], TableRow.prototype, "isNestedParent", null);
-  __decorate$1([
+  __decorate([
       volatile
   ], TableRow.prototype, "showSelectionCheckbox", null);
-  __decorate$1([
+  __decorate([
       volatile
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
@@ -67594,37 +67553,37 @@ focus outline in that case.
           }
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableGroupRow.prototype, "groupRowValue", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableGroupRow.prototype, "nestingLevel", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableGroupRow.prototype, "resolvedRowIndex", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableGroupRow.prototype, "immediateChildCount", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableGroupRow.prototype, "groupColumn", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], TableGroupRow.prototype, "expanded", void 0);
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], TableGroupRow.prototype, "selectable", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'selection-state' })
   ], TableGroupRow.prototype, "selectionState", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableGroupRow.prototype, "selectionCheckbox", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableGroupRow.prototype, "animationClass", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'allow-hover', mode: 'boolean' })
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
@@ -68249,12 +68208,18 @@ focus outline in that case.
         }
       );
       this.calculateRange = memo(
-        () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
-        (measurements, outerSize, scrollOffset) => {
+        () => [
+          this.getMeasurements(),
+          this.getSize(),
+          this.getScrollOffset(),
+          this.options.lanes
+        ],
+        (measurements, outerSize, scrollOffset, lanes) => {
           return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
             measurements,
             outerSize,
-            scrollOffset
+            scrollOffset,
+            lanes
           }) : null;
         },
         {
@@ -68386,15 +68351,15 @@ focus outline in that case.
           )]
         );
       };
-      this.getOffsetForAlignment = (toOffset, align) => {
+      this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
         const size = this.getSize();
         const scrollOffset = this.getScrollOffset();
         if (align === "auto") {
-          if (toOffset >= scrollOffset + size) {
-            align = "end";
-          }
+          align = toOffset >= scrollOffset + size ? "end" : "start";
         }
-        if (align === "end") {
+        if (align === "center") {
+          toOffset += (itemSize - size) / 2;
+        } else if (align === "end") {
           toOffset -= size;
         }
         const scrollSizeProp = this.options.horizontal ? "scrollWidth" : "scrollHeight";
@@ -68419,27 +68384,11 @@ focus outline in that case.
             return [scrollOffset, align];
           }
         }
-        const centerOffset = item.start - this.options.scrollPaddingStart + (item.size - size) / 2;
-        switch (align) {
-          case "center":
-            return [this.getOffsetForAlignment(centerOffset, align), align];
-          case "end":
-            return [
-              this.getOffsetForAlignment(
-                item.end + this.options.scrollPaddingEnd,
-                align
-              ),
-              align
-            ];
-          default:
-            return [
-              this.getOffsetForAlignment(
-                item.start - this.options.scrollPaddingStart,
-                align
-              ),
-              align
-            ];
-        }
+        const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
+        return [
+          this.getOffsetForAlignment(toOffset, align, item.size),
+          align
+        ];
       };
       this.isDynamicMode = () => this.elementsCache.size > 0;
       this.cancelScrollToIndex = () => {
@@ -68553,15 +68502,25 @@ focus outline in that case.
   function calculateRange({
     measurements,
     outerSize,
-    scrollOffset
+    scrollOffset,
+    lanes
   }) {
-    const count = measurements.length - 1;
+    const lastIndex = measurements.length - 1;
     const getOffset = (index) => measurements[index].start;
-    const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+    let startIndex = findNearestBinarySearch(
+      0,
+      lastIndex,
+      getOffset,
+      scrollOffset
+    );
     let endIndex = startIndex;
-    while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
+    while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
       endIndex++;
     }
+    if (lanes > 1) {
+      startIndex = Math.max(0, startIndex - startIndex % lanes);
+      endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
+    }
     return { startIndex, endIndex };
   }
 
@@ -68680,22 +68639,22 @@ focus outline in that case.
           this._pageSize = Math.round(this.table.viewport.clientHeight / this.table.rowHeight);
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], Virtualizer.prototype, "visibleItems", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Virtualizer.prototype, "scrollHeight", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Virtualizer.prototype, "horizontalScrollbarHeight", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Virtualizer.prototype, "isScrolling", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Virtualizer.prototype, "headerContainerMarginRight", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Virtualizer.prototype, "rowContainerYOffset", void 0);
 
@@ -69027,13 +68986,13 @@ focus outline in that case.
           return Math.floor(dividerIndex / 2);
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableLayoutManager.prototype, "isColumnBeingSized", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableLayoutManager.prototype, "activeColumnIndex", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableLayoutManager.prototype, "activeColumnDivider", void 0);
 
@@ -69789,7 +69748,7 @@ focus outline in that case.
           }
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], ColumnValidator.prototype, "isColumnValid", void 0);
 
@@ -71659,67 +71618,67 @@ focus outline in that case.
           this.virtualizer?.updateRowHeight();
       }
   };
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'id-field-name' })
   ], Table$1.prototype, "idFieldName", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'parent-id-field-name' })
   ], Table$1.prototype, "parentIdFieldName", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'selection-mode' })
   ], Table$1.prototype, "selectionMode", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "tableData", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "columns", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "childItems", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "rowElements", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "openActionMenuRecordId", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "canRenderRows", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "scrollX", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "rowGridColumns", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "selectionState", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "selectionCheckbox", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "collapseAllButton", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "showCollapseAll", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "canHaveCollapsibleRows", void 0);
-  __decorate$1([
+  __decorate([
       volatile
   ], Table$1.prototype, "collapseButtonVisibility", null);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "firstSortedColumn", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "visibleColumns", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "tableScrollableMinWidth", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
@@ -71929,16 +71888,16 @@ focus outline in that case.
           return [];
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnAnchorCellView.prototype, "hasOverflow", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnAnchorCellView.prototype, "isPlaceholder", void 0);
-  __decorate$1([
+  __decorate([
       volatile
   ], TableColumnAnchorCellView.prototype, "text", null);
-  __decorate$1([
+  __decorate([
       volatile
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
@@ -72014,10 +71973,10 @@ focus outline in that case.
           return false;
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "hasOverflow", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
@@ -72272,37 +72231,37 @@ focus outline in that case.
           this.columnInternals.sortOperation = this.getResolvedSortOperation(this.defaultSortOperation);
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'label-field-name' })
   ], TableColumnAnchor.prototype, "labelFieldName", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'href-field-name' })
   ], TableColumnAnchor.prototype, "hrefFieldName", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnAnchor.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'underline-hidden', mode: 'boolean' })
   ], TableColumnAnchor.prototype, "underlineHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnAnchor.prototype, "hreflang", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnAnchor.prototype, "ping", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnAnchor.prototype, "referrerpolicy", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnAnchor.prototype, "rel", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnAnchor.prototype, "target", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnAnchor.prototype, "type", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
@@ -72323,7 +72282,7 @@ focus outline in that case.
           this.columnInternals.operandDataRecordFieldName = this.fieldName;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'field-name' })
   ], TableColumnTextBase.prototype, "fieldName", void 0);
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-explicit-any
@@ -72459,16 +72418,16 @@ focus outline in that case.
           return this.isPlaceholder;
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnTextCellViewBase.prototype, "hasOverflow", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnTextCellViewBase.prototype, "text", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnTextCellViewBase.prototype, "alignment", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnTextCellViewBase.prototype, "isPlaceholder", void 0);
 
@@ -72684,64 +72643,64 @@ focus outline in that case.
           return options;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnDateText.prototype, "format", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-locale-matcher' })
   ], TableColumnDateText.prototype, "customLocaleMatcher", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-weekday' })
   ], TableColumnDateText.prototype, "customWeekday", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-era' })
   ], TableColumnDateText.prototype, "customEra", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-year' })
   ], TableColumnDateText.prototype, "customYear", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-month' })
   ], TableColumnDateText.prototype, "customMonth", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-day' })
   ], TableColumnDateText.prototype, "customDay", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-hour' })
   ], TableColumnDateText.prototype, "customHour", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-minute' })
   ], TableColumnDateText.prototype, "customMinute", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-second' })
   ], TableColumnDateText.prototype, "customSecond", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-time-zone-name' })
   ], TableColumnDateText.prototype, "customTimeZoneName", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-format-matcher' })
   ], TableColumnDateText.prototype, "customFormatMatcher", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-hour12', converter: optionalBooleanConverter })
   ], TableColumnDateText.prototype, "customHour12", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-time-zone' })
   ], TableColumnDateText.prototype, "customTimeZone", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-calendar' })
   ], TableColumnDateText.prototype, "customCalendar", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-day-period' })
   ], TableColumnDateText.prototype, "customDayPeriod", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-numbering-system' })
   ], TableColumnDateText.prototype, "customNumberingSystem", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-date-style' })
   ], TableColumnDateText.prototype, "customDateStyle", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-time-style' })
   ], TableColumnDateText.prototype, "customTimeStyle", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'custom-hour-cycle' })
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
@@ -73017,13 +72976,13 @@ focus outline in that case.
           }
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnEnumBase.prototype, "mappings", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'field-name' })
   ], TableColumnEnumBase.prototype, "fieldName", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
@@ -73276,16 +73235,16 @@ focus outline in that case.
           this.severity = IconSeverity.default;
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMappingGroupHeaderView.prototype, "hasOverflow", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMappingGroupHeaderView.prototype, "text", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMappingGroupHeaderView.prototype, "severity", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
@@ -73393,19 +73352,19 @@ focus outline in that case.
           this.severity = IconSeverity.default;
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMappingCellView.prototype, "severity", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMappingCellView.prototype, "text", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMappingCellView.prototype, "visualizationTemplate", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMappingCellView.prototype, "textHidden", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
@@ -73489,7 +73448,7 @@ focus outline in that case.
           return defaultMinPixelWidth;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'width-mode' })
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
@@ -73597,10 +73556,10 @@ focus outline in that case.
           e.stopPropagation();
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnMenuButtonCellView.prototype, "hasOverflow", void 0);
-  __decorate$1([
+  __decorate([
       volatile
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
@@ -73653,10 +73612,10 @@ focus outline in that case.
           };
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'field-name' })
   ], TableColumnMenuButton.prototype, "fieldName", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'menu-slot' })
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
@@ -74104,7 +74063,7 @@ focus outline in that case.
    */
   class Unit extends FoundationElement {
   }
-  __decorate$1([
+  __decorate([
       observable
   ], Unit.prototype, "resolvedUnitScale", void 0);
 
@@ -74230,25 +74189,25 @@ focus outline in that case.
           return TableColumnAlignment.left;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnNumberText.prototype, "format", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], TableColumnNumberText.prototype, "alignment", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'decimal-digits', converter: nullableNumberConverter })
   ], TableColumnNumberText.prototype, "decimalDigits", void 0);
-  __decorate$1([
+  __decorate([
       attr({
           attribute: 'decimal-maximum-digits',
           converter: nullableNumberConverter
       })
   ], TableColumnNumberText.prototype, "decimalMaximumDigits", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnNumberText.prototype, "unitElements", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
@@ -74410,7 +74369,7 @@ focus outline in that case.
           });
       }
   }
-  __decorate$1([
+  __decorate([
       observable
   ], Tabs.prototype, "showScrollButtons", void 0);
   const nimbleTabs = Tabs.compose({
@@ -74773,10 +74732,10 @@ focus outline in that case.
           this.scrollbarWidth = this.control.offsetWidth - this.control.clientWidth;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], TextArea.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TextArea.prototype, "scrollbarWidth", void 0);
   const nimbleTextArea = TextArea.compose({
@@ -75053,7 +75012,7 @@ focus outline in that case.
         ></slot>
     </label>`);
   /**
-   * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
+   * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
    * @public
    */
   const template$7 = (context, definition) => html `
@@ -75128,10 +75087,10 @@ focus outline in that case.
           this.fullBleed = false;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], TextField.prototype, "appearance", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'full-bleed', mode: 'boolean' })
   ], TextField.prototype, "fullBleed", void 0);
   const nimbleTextField = TextField.compose({
@@ -75285,10 +75244,10 @@ focus outline in that case.
           this.iconVisible = false;
       }
   }
-  __decorate$1([
+  __decorate([
       attr
   ], Tooltip.prototype, "severity", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'icon-visible', mode: 'boolean' })
   ], Tooltip.prototype, "iconVisible", void 0);
   const nimbleTooltip = Tooltip.compose({
@@ -75316,8 +75275,8 @@ focus outline in that case.
    * @public
    * @example
    * ```ts
-   * import { css } from "@microsoft/fast-element";
-   * import { DirectionalStyleSheetBehavior } from "@microsoft/fast-foundation";
+   * import { css } from "@ni/fast-element";
+   * import { DirectionalStyleSheetBehavior } from "@ni/fast-foundation";
    *
    * css`
    *  // ...
@@ -75576,7 +75535,7 @@ focus outline in that case.
 
   /**
    * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
-   * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
+   * Implements {@link @ni/fast-foundation#treeItemTemplate}
    *
    *
    * @public
@@ -75593,7 +75552,7 @@ focus outline in that case.
           this.groupSelected = false;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'group-selected', mode: 'boolean' })
   ], TreeItem.prototype, "groupSelected", void 0);
   const nimbleTreeItem = TreeItem.compose({
@@ -75637,7 +75596,7 @@ focus outline in that case.
 
   /**
    * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
-   * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
+   * Implements {@link @ni/fast-foundation#treeViewTemplate}
    *
    *
    * @public
@@ -75707,10 +75666,10 @@ focus outline in that case.
           }
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'selection-mode' })
   ], TreeView.prototype, "selectionMode", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], TreeView.prototype, "selectedItems", void 0);
   const nimbleTreeView = TreeView.compose({
@@ -75858,7 +75817,7 @@ focus outline in that case.
               : byteUnitScale;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ mode: 'boolean' })
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
@@ -92908,73 +92867,73 @@ focus outline in that case.
   WaferMap.Arrow = {
       tableFromIPC
   };
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'origin-location' })
   ], WaferMap.prototype, "originLocation", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'grid-min-x', converter: nullableNumberConverter })
   ], WaferMap.prototype, "gridMinX", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'grid-max-x', converter: nullableNumberConverter })
   ], WaferMap.prototype, "gridMaxX", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'grid-min-y', converter: nullableNumberConverter })
   ], WaferMap.prototype, "gridMinY", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'grid-max-y', converter: nullableNumberConverter })
   ], WaferMap.prototype, "gridMaxY", void 0);
-  __decorate$1([
+  __decorate([
       attr
   ], WaferMap.prototype, "orientation", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'max-characters', converter: nullableNumberConverter })
   ], WaferMap.prototype, "maxCharacters", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'die-labels-hidden', mode: 'boolean' })
   ], WaferMap.prototype, "dieLabelsHidden", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'die-labels-suffix' })
   ], WaferMap.prototype, "dieLabelsSuffix", void 0);
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'color-scale-mode' })
   ], WaferMap.prototype, "colorScaleMode", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "renderer", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "canvasWidth", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "canvasHeight", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "transform", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "hoverTransform", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "hoverOpacity", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "hoverWidth", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "hoverHeight", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "hoverDie", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "highlightedTags", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "dies", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "diesTable", void 0);
-  __decorate$1([
+  __decorate([
       observable
   ], WaferMap.prototype, "colorScale", void 0);
   const nimbleWaferMap = WaferMap.compose({
@@ -93092,7 +93051,7 @@ focus outline in that case.
           this.messageType = ChatMessageType.system;
       }
   }
-  __decorate$1([
+  __decorate([
       attr({ attribute: 'message-type' })
   ], ChatMessage.prototype, "messageType", void 0);
   const sprightChatMessage = ChatMessage.compose({