@ni/ok-components 0.2.2 → 0.2.4

package/dist/all-components-bundle.js

@@ -111,7 +111,7 @@
           // eslint-disable-next-line no-new-func
           return new Function("return this")();
       }
-      catch (_a) {
+      catch {
           // If all fails, give up and create an object.
           // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           return {};
@@ -127,7 +127,10 @@
       writable: false,
   };
   if ($global.FAST === void 0) {
-      Reflect.defineProperty($global, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
+      Reflect.defineProperty($global, "FAST", {
+          value: Object.create(null),
+          ...propConfig,
+      });
   }
   /**
    * The FAST global.
@@ -136,13 +139,16 @@
   const FAST = $global.FAST;
   if (FAST.getById === void 0) {
       const storage = Object.create(null);
-      Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
+      Reflect.defineProperty(FAST, "getById", {
+          value(id, initialize) {
               let found = storage[id];
               if (found === void 0) {
                   found = initialize ? (storage[id] = initialize()) : null;
               }
               return found;
-          } }, propConfig));
+          },
+          ...propConfig,
+      });
   }
   /**
    * A readonly, empty array.
@@ -511,12 +517,11 @@
        * @param propertyName - The property name, passed along to subscribers during notification.
        */
       notify(propertyName) {
-          var _a;
           const subscribers = this.subscribers[propertyName];
           if (subscribers !== void 0) {
               subscribers.notify(propertyName);
           }
-          (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
+          this.sourceSubscribers?.notify(propertyName);
       }
       /**
        * Subscribes to notification of changes in an object's state.
@@ -524,7 +529,6 @@
        * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
        */
       subscribe(subscriber, propertyToWatch) {
-          var _a;
           if (propertyToWatch) {
               let subscribers = this.subscribers[propertyToWatch];
               if (subscribers === void 0) {
@@ -534,7 +538,7 @@
           }
           else {
               this.sourceSubscribers =
-                  (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
+                  this.sourceSubscribers ?? new SubscriberSet(this.source);
               this.sourceSubscribers.subscribe(subscriber);
           }
       }
@@ -544,7 +548,6 @@
        * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
        */
       unsubscribe(subscriber, propertyToUnwatch) {
-          var _a;
           if (propertyToUnwatch) {
               const subscribers = this.subscribers[propertyToUnwatch];
               if (subscribers !== void 0) {
@@ -552,7 +555,7 @@
               }
           }
           else {
-              (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
+              this.sourceSubscribers?.unsubscribe(subscriber);
           }
       }
   }
@@ -562,7 +565,7 @@
    * @public
    */
   const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
-      const volatileRegex = /(:|&&|\|\||if)/;
+      const volatileRegex = /(\?\?|:|&&|\|\||if)/;
       const notifierLookup = new WeakMap();
       const queueUpdate = DOM.queueUpdate;
       let watcher = void 0;
@@ -1110,14 +1113,15 @@
       /**
        * Creates an instance of BindingDirective.
        * @param binding - A binding that returns the data used to update the DOM.
+       * @param isVolatile - Optional parameter indicating whether the binding is volatile. If not provided, the volatility of the binding is determined by Observable.isVolatileBinding().
        */
-      constructor(binding) {
+      constructor(binding, isVolatile) {
           super();
           this.binding = binding;
           this.bind = normalBind;
           this.unbind = normalUnbind;
           this.updateTarget = updateAttributeTarget;
-          this.isBindingVolatile = Observable.isVolatileBinding(this.binding);
+          this.isBindingVolatile = isVolatile ?? Observable.isVolatileBinding(this.binding);
       }
       /**
        * Gets/sets the name of the attribute or property that this
@@ -1252,12 +1256,14 @@
           return parts[0];
       }
       let targetName;
+      let isVolatile = false;
       const partCount = parts.length;
       const finalParts = parts.map((x) => {
           if (typeof x === "string") {
               return () => x;
           }
           targetName = x.targetName || targetName;
+          isVolatile = isVolatile || Observable.isVolatileBinding(x.binding);
           return x.binding;
       });
       const binding = (scope, context) => {
@@ -1267,7 +1273,7 @@
           }
           return output;
       };
-      const directive = new HTMLBindingDirective(binding);
+      const directive = new HTMLBindingDirective(binding, isVolatile);
       directive.targetName = targetName;
       return directive;
   }
@@ -1739,20 +1745,20 @@
               this.behaviors === null ? behaviors : this.behaviors.concat(behaviors);
           return this;
       }
-  }
-  /**
-   * Create ElementStyles from ComposableStyles.
-   */
-  ElementStyles.create = (() => {
-      if (DOM.supportsAdoptedStyleSheets) {
-          const styleSheetCache = new Map();
-          return (styles) => 
+      /**
+       * Create ElementStyles from ComposableStyles.
+       */
+      static { this.create = (() => {
+          if (DOM.supportsAdoptedStyleSheets) {
+              const styleSheetCache = new Map();
+              return (styles) => 
+              // eslint-disable-next-line @typescript-eslint/no-use-before-define
+              new AdoptedStyleSheetsStyles(styles, styleSheetCache);
+          }
           // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          new AdoptedStyleSheetsStyles(styles, styleSheetCache);
-      }
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      return (styles) => new StyleElementStyles(styles);
-  })();
+          return (styles) => new StyleElementStyles(styles);
+      })(); }
+  }
   function reduceStyles(styles) {
       return styles
           .map((x) => x instanceof ElementStyles ? reduceStyles(x.styles) : [x])
@@ -1812,7 +1818,7 @@
               }
           };
       }
-      catch (_a) {
+      catch {
           // Do nothing if an error is thrown, the default
           // case handles FrozenArray.
       }
@@ -2159,11 +2165,11 @@
                   ? defaultShadowOptions
                   : nameOrConfig.shadowOptions === null
                       ? void 0
-                      : Object.assign(Object.assign({}, defaultShadowOptions), nameOrConfig.shadowOptions);
+                      : { ...defaultShadowOptions, ...nameOrConfig.shadowOptions };
           this.elementOptions =
               nameOrConfig.elementOptions === void 0
                   ? defaultElementOptions
-                  : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
+                  : { ...defaultElementOptions, ...nameOrConfig.elementOptions };
           this.styles =
               nameOrConfig.styles === void 0
                   ? void 0
@@ -2195,12 +2201,12 @@
           }
           return this;
       }
+      /**
+       * Gets the element definition associated with the specified type.
+       * @param type - The custom element type to retrieve the definition for.
+       */
+      static { this.forType = fastRegistry.getByType; }
   }
-  /**
-   * Gets the element definition associated with the specified type.
-   * @param type - The custom element type to retrieve the definition for.
-   */
-  FASTElementDefinition.forType = fastRegistry.getByType;
 
   const shadowRoots = new WeakMap();
   const defaultEventOptions = {
@@ -2479,7 +2485,7 @@
        */
       emit(type, detail, options) {
           if (this._isConnected) {
-              return this.element.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
+              return this.element.dispatchEvent(new CustomEvent(type, { detail, ...defaultEventOptions, ...options }));
           }
           return false;
       }
@@ -3566,7 +3572,10 @@
       const templateBinding = typeof templateOrTemplateBinding === "function"
           ? templateOrTemplateBinding
           : () => templateOrTemplateBinding;
-      return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
+      return new RepeatDirective(itemsBinding, templateBinding, {
+          ...defaultRepeatOptions,
+          ...options,
+      });
   }
 
   /**
@@ -4239,7 +4248,7 @@
           Interface.friendlyName = friendlyName == null ? "(anonymous)" : friendlyName;
           if (configure != null) {
               Interface.register = function (container, key) {
-                  return configure(new ResolverBuilder(container, key !== null && key !== void 0 ? key : Interface));
+                  return configure(new ResolverBuilder(container, key ?? Interface));
               };
           }
           Interface.toString = function toString() {
@@ -4417,13 +4426,12 @@
           }
       }
       getFactory(container) {
-          var _a, _b, _c;
           switch (this.strategy) {
               case 1 /* ResolverStrategy.singleton */:
               case 2 /* ResolverStrategy.transient */:
                   return container.getFactory(this.state);
               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;
+                  return container.getResolver(this.state)?.getFactory?.(container) ?? null;
               default:
                   return null;
           }
@@ -5164,7 +5172,10 @@
           this.type = type;
           this.elementDefinition = elementDefinition;
           this.overrideDefinition = overrideDefinition;
-          this.definition = Object.assign(Object.assign({}, this.elementDefinition), this.overrideDefinition);
+          this.definition = {
+              ...this.elementDefinition,
+              ...this.overrideDefinition,
+          };
       }
       register(container, context) {
           const definition = this.definition;
@@ -5616,14 +5627,12 @@
            * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
            */
           this.handleUnsupportedDelegatesFocus = () => {
-              var _a;
               // Check to see if delegatesFocus is supported
               if (window.ShadowRoot &&
                   !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
-                  ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                  this.$fastController.definition.shadowOptions?.delegatesFocus) {
                   this.focus = () => {
-                      var _a;
-                      (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
+                      this.control?.focus();
                   };
               }
           };
@@ -5713,12 +5722,11 @@
            * @internal
            */
           this.requestPosition = (target, callback) => {
-              var _a;
               if (this.intersectionDetector === null) {
                   return;
               }
               if (this.observedElements.has(target)) {
-                  (_a = this.observedElements.get(target)) === null || _a === void 0 ? void 0 : _a.push(callback);
+                  this.observedElements.get(target)?.push(callback);
                   return;
               }
               this.observedElements.set(target, [callback]);
@@ -5763,9 +5771,8 @@
               const pendingCallbackParams = [];
               // go through the entries to build a list of callbacks and params for each
               entries.forEach((entry) => {
-                  var _a;
                   // stop watching this element until we get new update requests for it
-                  (_a = this.intersectionDetector) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
+                  this.intersectionDetector?.unobserve(entry.target);
                   const thisElementCallbacks = this.observedElements.get(entry.target);
                   if (thisElementCallbacks !== undefined) {
                       thisElementCallbacks.forEach((callback) => {
@@ -6592,6 +6599,7 @@
               this.initialize();
           }
       }
+      static { this.intersectionService = new IntersectionService(); }
       /**
        * @internal
        */
@@ -6689,7 +6697,6 @@
           this.updateRegionStyle();
       }
   };
-  AnchoredRegion$1.intersectionService = new IntersectionService();
   __decorate([
       attr
   ], AnchoredRegion$1.prototype, "anchor", void 0);
@@ -6821,12 +6828,11 @@
        * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
        */
       findChildWithHref(node) {
-          var _a, _b;
           if (node.childElementCount > 0) {
               return node.querySelector("a[href]");
           }
-          else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
-              return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
+          else if (node.shadowRoot?.childElementCount) {
+              return node.shadowRoot?.querySelector("a[href]");
           }
           else
               return null;
@@ -7213,7 +7219,6 @@
            * Attach the proxy element to the DOM
            */
           attachProxy() {
-              var _a;
               if (!this.proxyInitialized) {
                   this.proxyInitialized = true;
                   this.proxy.style.display = "none";
@@ -7234,16 +7239,15 @@
                   this.proxySlot = document.createElement("slot");
                   this.proxySlot.setAttribute("name", proxySlotName);
               }
-              (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(this.proxySlot);
+              this.shadowRoot?.appendChild(this.proxySlot);
               this.appendChild(this.proxy);
           }
           /**
            * Detach the proxy element from the DOM
            */
           detachProxy() {
-              var _a;
               this.removeChild(this.proxy);
-              (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
+              this.shadowRoot?.removeChild(this.proxySlot);
           }
           /** {@inheritDoc (FormAssociated:interface).validate} */
           validate(anchor) {
@@ -7267,7 +7271,7 @@
                       if (this.form instanceof HTMLFormElement) {
                           // Implicit submission
                           const defaultButton = this.form.querySelector("[type=submit]");
-                          defaultButton === null || defaultButton === void 0 ? void 0 : defaultButton.click();
+                          defaultButton?.click();
                       }
                       break;
               }
@@ -7409,8 +7413,7 @@
            * @internal
            */
           this.handleClick = (e) => {
-              var _a;
-              if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
+              if (this.disabled && this.defaultSlottedContent?.length <= 1) {
                   e.stopPropagation();
               }
           };
@@ -7441,8 +7444,7 @@
            * Resets the parent form
            */
           this.handleFormReset = () => {
-              var _a;
-              (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
+              this.form?.reset();
           };
           /**
            * Overrides the focus call for where delegatesFocus is unsupported.
@@ -7450,11 +7452,10 @@
            * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
            */
           this.handleUnsupportedDelegatesFocus = () => {
-              var _a;
               // Check to see if delegatesFocus is supported
               if (window.ShadowRoot &&
                   !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
-                  ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                  this.$fastController.definition.shadowOptions?.delegatesFocus) {
                   this.focus = () => {
                       this.control.focus();
                   };
@@ -7507,11 +7508,10 @@
        * @internal
        */
       connectedCallback() {
-          var _a;
           super.connectedCallback();
           this.proxy.setAttribute("type", this.type);
           this.handleUnsupportedDelegatesFocus();
-          const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+          const elements = Array.from(this.control?.children);
           if (elements) {
               elements.forEach((span) => {
                   span.addEventListener("click", this.handleClick);
@@ -7522,9 +7522,8 @@
        * @internal
        */
       disconnectedCallback() {
-          var _a;
           super.disconnectedCallback();
-          const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+          const elements = Array.from(this.control?.children);
           if (elements) {
               elements.forEach((span) => {
                   span.removeEventListener("click", this.handleClick);
@@ -7760,15 +7759,13 @@
           }
       }
       get label() {
-          var _a;
-          return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+          return this.value ?? this.text;
       }
       get text() {
-          var _a, _b;
-          return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+          return this.textContent?.replace(/\s+/g, " ").trim() ?? "";
       }
       set value(next) {
-          const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+          const newValue = `${next ?? ""}`;
           this._value = newValue;
           this.dirtyValue = true;
           if (this.proxy instanceof HTMLOptionElement) {
@@ -7777,9 +7774,8 @@
           Observable.notify(this, "value");
       }
       get value() {
-          var _a;
           Observable.track(this, "value");
-          return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+          return this._value ?? this.text;
       }
       get form() {
           return this.proxy ? this.proxy.form : null;
@@ -7926,8 +7922,7 @@
        * @internal
        */
       get firstSelectedOption() {
-          var _a;
-          return (_a = this.selectedOptions[0]) !== null && _a !== void 0 ? _a : null;
+          return this.selectedOptions[0] ?? null;
       }
       /**
        * Returns true if there is one or more selectable option.
@@ -7943,8 +7938,7 @@
        * @public
        */
       get length() {
-          var _a, _b;
-          return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+          return this.options?.length ?? 0;
       }
       /**
        * The list of options.
@@ -7971,6 +7965,19 @@
       set typeAheadExpired(value) {
           this.typeaheadExpired = value;
       }
+      /**
+       * A static filter to include only selectable options.
+       *
+       * @param n - element to filter
+       * @public
+       */
+      static { this.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden; }
+      /**
+       * Typeahead timeout in milliseconds.
+       *
+       * @internal
+       */
+      static { this.TYPE_AHEAD_TIMEOUT_MS = 1000; }
       /**
        * Handle click events for listbox options.
        *
@@ -8191,12 +8198,11 @@
        * @internal
        */
       selectedIndexChanged(prev, next) {
-          var _a;
           if (!this.hasSelectableOptions) {
               this.selectedIndex = -1;
               return;
           }
-          if (((_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && typeof prev === "number") {
+          if (this.options[this.selectedIndex]?.disabled && typeof prev === "number") {
               const selectableIndex = this.getSelectableIndex(prev, next);
               const newNext = selectableIndex > -1 ? selectableIndex : prev;
               this.selectedIndex = newNext;
@@ -8216,9 +8222,8 @@
        * @internal
        */
       selectedOptionsChanged(prev, next) {
-          var _a;
           const filteredNext = next.filter(Listbox.slottedOptionFilter);
-          (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
+          this.options?.forEach(o => {
               const notifier = Observable.getNotifier(o);
               notifier.unsubscribe(this, "selected");
               o.selected = filteredNext.includes(o);
@@ -8231,9 +8236,8 @@
        * @public
        */
       selectFirstOption() {
-          var _a, _b;
           if (!this.disabled) {
-              this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(o => !o.disabled)) !== null && _b !== void 0 ? _b : -1;
+              this.selectedIndex = this.options?.findIndex(o => !o.disabled) ?? -1;
           }
       }
       /**
@@ -8272,8 +8276,7 @@
        * @internal
        */
       setDefaultSelectedOption() {
-          var _a, _b;
-          this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(el => el.defaultSelected)) !== null && _b !== void 0 ? _b : -1;
+          this.selectedIndex = this.options?.findIndex(el => el.defaultSelected) ?? -1;
       }
       /**
        * Sets an option as selected and gives it focus.
@@ -8281,10 +8284,9 @@
        * @public
        */
       setSelectedOptions() {
-          var _a, _b, _c;
-          if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
+          if (this.options?.length) {
               this.selectedOptions = [this.options[this.selectedIndex]];
-              this.ariaActiveDescendant = (_c = (_b = this.firstSelectedOption) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : "";
+              this.ariaActiveDescendant = this.firstSelectedOption?.id ?? "";
               this.focusAndScrollOptionIntoView();
           }
       }
@@ -8337,19 +8339,6 @@
           }
       }
   }
-  /**
-   * A static filter to include only selectable options.
-   *
-   * @param n - element to filter
-   * @public
-   */
-  Listbox.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
-  /**
-   * Typeahead timeout in milliseconds.
-   *
-   * @internal
-   */
-  Listbox.TYPE_AHEAD_TIMEOUT_MS = 1000;
   __decorate([
       attr({ mode: "boolean" })
   ], Listbox.prototype, "disabled", void 0);
@@ -8568,17 +8557,16 @@
           return this._value;
       }
       set value(next) {
-          var _a, _b, _c;
           const prev = `${this._value}`;
           if (this.$fastController.isConnected && this.options) {
               const selectedIndex = this.options.findIndex(el => el.text.toLowerCase() === next.toLowerCase());
-              const prevSelectedValue = (_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.text;
-              const nextSelectedValue = (_b = this.options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.text;
+              const prevSelectedValue = this.options[this.selectedIndex]?.text;
+              const nextSelectedValue = this.options[selectedIndex]?.text;
               this.selectedIndex =
                   prevSelectedValue !== nextSelectedValue
                       ? selectedIndex
                       : this.selectedIndex;
-              next = ((_c = this.firstSelectedOption) === null || _c === void 0 ? void 0 : _c.text) || next;
+              next = this.firstSelectedOption?.text || next;
           }
           if (prev !== next) {
               this._value = next;
@@ -8594,7 +8582,7 @@
        */
       clickHandler(e) {
           const captured = e.target.closest(`option,[role=option]`);
-          if (this.disabled || (captured === null || captured === void 0 ? void 0 : captured.disabled)) {
+          if (this.disabled || captured?.disabled) {
               return;
           }
           if (this.open) {
@@ -8667,8 +8655,7 @@
               this.control.focus();
               if (this.firstSelectedOption) {
                   requestAnimationFrame(() => {
-                      var _a;
-                      (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: "nearest" });
+                      this.firstSelectedOption?.scrollIntoView({ block: "nearest" });
                   });
               }
           }
@@ -8887,8 +8874,7 @@
        * @internal
        */
       syncValue() {
-          var _a;
-          const newValue = this.selectedIndex > -1 ? (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text : this.control.value;
+          const newValue = this.selectedIndex > -1 ? this.firstSelectedOption?.text : this.control.value;
           this.updateValue(this.value !== newValue);
       }
       /**
@@ -8949,9 +8935,8 @@
        * @internal
        */
       updateValue(shouldEmit) {
-          var _a;
           if (this.$fastController.isConnected) {
-              this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
+              this.value = this.firstSelectedOption?.text || this.control.value;
               this.control.value = this.value;
           }
           if (shouldEmit) {
@@ -9180,6 +9165,8 @@
    * @internal
    */
   class RootStyleSheetTarget {
+      static { this.roots = new Set(); }
+      static { this.properties = {}; }
       setProperty(name, value) {
           RootStyleSheetTarget.properties[name] = value;
           for (const target of RootStyleSheetTarget.roots.values()) {
@@ -9221,8 +9208,6 @@
           return root === defaultElement ? document : root;
       }
   }
-  RootStyleSheetTarget.roots = new Set();
-  RootStyleSheetTarget.properties = {};
   // Caches PropertyTarget instances
   const propertyTargetCache = new WeakMap();
   // Use Constructable StyleSheets for FAST elements when supported, otherwise use
@@ -9284,6 +9269,13 @@
       static isDerivedDesignTokenValue(value) {
           return typeof value === "function";
       }
+      static { this.uniqueId = (() => {
+          let id = 0;
+          return () => {
+              id++;
+              return id.toString(16);
+          };
+      })(); }
       /**
        * Gets a token by ID. Returns undefined if the token was not found.
        * @param id - The ID of the token
@@ -9292,6 +9284,10 @@
       static getTokenById(id) {
           return DesignTokenImpl.tokensById.get(id);
       }
+      /**
+       * Token storage by token ID
+       */
+      static { this.tokensById = new Map(); }
       getOrCreateSubscriberSet(target = this) {
           return (this.subscribers.get(target) ||
               (this.subscribers.set(target, new Set()) && this.subscribers.get(target)));
@@ -9373,17 +9369,6 @@
           return ((target) => token.getValueFor(target));
       }
   }
-  DesignTokenImpl.uniqueId = (() => {
-      let id = 0;
-      return () => {
-          id++;
-          return id.toString(16);
-      };
-  })();
-  /**
-   * Token storage by token ID
-   */
-  DesignTokenImpl.tokensById = new Map();
   class CustomPropertyReflector {
       startReflection(token, target) {
           token.subscribe(this, target);
@@ -9530,6 +9515,10 @@
           } while (current !== null);
           return null;
       }
+      /**
+       * Responsible for reflecting tokens to CSS custom properties
+       */
+      static { this.cssCustomPropertyReflector = new CustomPropertyReflector(); }
       /**
        * The parent DesignTokenNode, or null.
        */
@@ -9630,11 +9619,10 @@
        * @returns
        */
       getRaw(token) {
-          var _a;
           if (this.assignedValues.has(token)) {
               return this.assignedValues.get(token);
           }
-          return (_a = DesignTokenNode.findClosestAssignedNode(token, this)) === null || _a === void 0 ? void 0 : _a.getRaw(token);
+          return DesignTokenNode.findClosestAssignedNode(token, this)?.getRaw(token);
       }
       /**
        * Sets a token to a value for a node
@@ -9835,10 +9823,6 @@
           return false;
       }
   }
-  /**
-   * Responsible for reflecting tokens to CSS custom properties
-   */
-  DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
   __decorate([
       observable
   ], DesignTokenNode.prototype, "children", void 0);
@@ -10108,7 +10092,10 @@
           ComponentPresentation.define(this.name, presentation, this.container);
       }
       defineElement(definition) {
-          this.definition = new FASTElementDefinition(this.type, Object.assign(Object.assign({}, definition), { name: this.name }));
+          this.definition = new FASTElementDefinition(this.type, {
+              ...definition,
+              name: this.name,
+          });
       }
       tagFor(type) {
           return DesignSystem.tagFor(type);
@@ -10404,8 +10391,7 @@
        * @internal
        */
       get checkedOptions() {
-          var _a;
-          return (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter(o => o.checked);
+          return this.options?.filter(o => o.checked);
       }
       /**
        * Returns the index of the first selected option.
@@ -10424,8 +10410,7 @@
        * @internal
        */
       activeIndexChanged(prev, next) {
-          var _a, _b;
-          this.ariaActiveDescendant = (_b = (_a = this.options[next]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "";
+          this.ariaActiveDescendant = this.options[next]?.id ?? "";
           this.focusAndScrollOptionIntoView();
       }
       /**
@@ -10573,11 +10558,10 @@
        * @internal
        */
       clickHandler(e) {
-          var _a;
           if (!this.multiple) {
               return super.clickHandler(e);
           }
-          const captured = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(`[role=option]`);
+          const captured = e.target?.closest(`[role=option]`);
           if (!captured || captured.disabled) {
               return;
           }
@@ -10710,9 +10694,8 @@
        * @internal
        */
       multipleChanged(prev, next) {
-          var _a;
           this.ariaMultiSelectable = next ? "true" : null;
-          (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
+          this.options?.forEach(o => {
               o.checked = next ? false : undefined;
           });
           this.setSelectedOptions();
@@ -10742,8 +10725,7 @@
        * @internal
        */
       sizeChanged(prev, next) {
-          var _a;
-          const size = Math.max(0, parseInt((_a = next === null || next === void 0 ? void 0 : next.toFixed()) !== null && _a !== void 0 ? _a : "", 10));
+          const size = Math.max(0, parseInt(next?.toFixed() ?? "", 10));
           if (size !== next) {
               DOM.queueUpdate(() => {
                   this.size = size;
@@ -11423,8 +11405,7 @@
        * @internal
        */
       maxChanged(previous, next) {
-          var _a;
-          this.max = Math.max(next, (_a = this.min) !== null && _a !== void 0 ? _a : next);
+          this.max = Math.max(next, this.min ?? next);
           const min = Math.min(this.min, this.max);
           if (this.min !== undefined && this.min !== min) {
               this.min = min;
@@ -11440,8 +11421,7 @@
        * @internal
        */
       minChanged(previous, next) {
-          var _a;
-          this.min = Math.min(next, (_a = this.max) !== null && _a !== void 0 ? _a : next);
+          this.min = Math.min(next, this.max ?? next);
           const max = Math.max(this.min, this.max);
           if (this.max !== undefined && this.max !== max) {
               this.max = max;
@@ -11737,12 +11717,10 @@
               radio.focus();
           };
           this.moveRightOffGroup = () => {
-              var _a;
-              (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+              this.nextElementSibling?.focus();
           };
           this.moveLeftOffGroup = () => {
-              var _a;
-              (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+              this.previousElementSibling?.focus();
           };
           /**
            * @internal
@@ -11968,12 +11946,10 @@
           return this.closest('[role="toolbar"]');
       }
       get isInsideToolbar() {
-          var _a;
-          return ((_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false);
+          return (this.parentToolbar ?? false);
       }
       get isInsideFoundationToolbar() {
-          var _a;
-          return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a["$fastController"]);
+          return !!this.parentToolbar?.["$fastController"];
       }
       /**
        * @internal
@@ -12130,13 +12106,12 @@
        * @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.checked = this.defaultChecked ?? false;
                   this.dirtyChecked = false;
               }
           }
@@ -12169,10 +12144,9 @@
        * @internal
        */
       connectedCallback() {
-          var _a, _b;
           super.connectedCallback();
           this.validate();
-          if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" &&
+          if (this.parentElement?.getAttribute("role") !== "radiogroup" &&
               this.getAttribute("tabindex") === null) {
               if (!this.disabled) {
                   this.setAttribute("tabindex", "0");
@@ -12184,7 +12158,7 @@
                   // 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 = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
+                      this.checked = this.defaultChecked ?? false;
                       this.dirtyChecked = false;
                   }
               }
@@ -12333,17 +12307,16 @@
           return this._value;
       }
       set value(next) {
-          var _a, _b, _c, _d, _e, _f, _g;
           const prev = `${this._value}`;
-          if ((_a = this._options) === null || _a === void 0 ? void 0 : _a.length) {
+          if (this._options?.length) {
               const selectedIndex = this._options.findIndex(el => el.value === next);
-              const prevSelectedValue = (_c = (_b = this._options[this.selectedIndex]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null;
-              const nextSelectedValue = (_e = (_d = this._options[selectedIndex]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : null;
+              const prevSelectedValue = this._options[this.selectedIndex]?.value ?? null;
+              const nextSelectedValue = this._options[selectedIndex]?.value ?? null;
               if (selectedIndex === -1 || prevSelectedValue !== nextSelectedValue) {
                   next = "";
                   this.selectedIndex = selectedIndex;
               }
-              next = (_g = (_f = this.firstSelectedOption) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : next;
+              next = this.firstSelectedOption?.value ?? next;
           }
           if (prev !== next) {
               this._value = next;
@@ -12360,9 +12333,8 @@
        * @internal
        */
       updateValue(shouldEmit) {
-          var _a, _b;
           if (this.$fastController.isConnected) {
-              this.value = (_b = (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+              this.value = this.firstSelectedOption?.value ?? "";
           }
           if (shouldEmit) {
               this.$emit("input");
@@ -12414,9 +12386,8 @@
        * @public
        */
       get displayValue() {
-          var _a, _b;
           Observable.track(this, "displayValue");
-          return (_b = (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : "";
+          return this.firstSelectedOption?.text ?? "";
       }
       /**
        * Synchronize the `aria-disabled` property when the `disabled` property changes.
@@ -12477,7 +12448,6 @@
        * @internal
        */
       focusoutHandler(e) {
-          var _a;
           super.focusoutHandler(e);
           if (!this.open) {
               return true;
@@ -12487,7 +12457,7 @@
               this.focus();
               return;
           }
-          if (!((_a = this.options) === null || _a === void 0 ? void 0 : _a.includes(focusTarget))) {
+          if (!this.options?.includes(focusTarget)) {
               this.open = false;
               if (this.indexWhenOpened !== this.selectedIndex) {
                   this.updateValue(true);
@@ -12539,8 +12509,7 @@
        * @internal
        */
       mousedownHandler(e) {
-          var _a;
-          if (e.offsetX >= 0 && e.offsetX <= ((_a = this.listbox) === null || _a === void 0 ? void 0 : _a.scrollWidth)) {
+          if (e.offsetX >= 0 && e.offsetX <= this.listbox?.scrollWidth) {
               return super.mousedownHandler(e);
           }
           return this.collapsible;
@@ -12567,11 +12536,9 @@
        * @internal
        */
       selectedOptionsChanged(prev, next) {
-          var _a;
           super.selectedOptionsChanged(prev, next);
-          (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach((o, i) => {
-              var _a;
-              const proxyOption = (_a = this.proxy) === null || _a === void 0 ? void 0 : _a.options.item(i);
+          this.options?.forEach((o, i) => {
+              const proxyOption = this.proxy?.options.item(i);
               if (proxyOption) {
                   proxyOption.selected = o.selected;
               }
@@ -12585,9 +12552,8 @@
        * @internal
        */
       setDefaultSelectedOption() {
-          var _a;
-          const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox.slottedOptionFilter);
-          const selectedIndex = options === null || options === void 0 ? void 0 : options.findIndex(el => el.hasAttribute("selected") || el.selected || el.value === this.value);
+          const options = this.options ?? Array.from(this.children).filter(Listbox.slottedOptionFilter);
+          const selectedIndex = options?.findIndex(el => el.hasAttribute("selected") || el.selected || el.value === this.value);
           if (selectedIndex !== -1) {
               this.selectedIndex = selectedIndex;
               return;
@@ -13133,14 +13099,12 @@
       }
       getTabIds() {
           return this.tabs.map((tab) => {
-              var _a;
-              return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${uniqueId()}`;
+              return tab.getAttribute("id") ?? `tab-${uniqueId()}`;
           });
       }
       getTabPanelIds() {
           return this.tabpanels.map((tabPanel) => {
-              var _a;
-              return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId()}`;
+              return tabPanel.getAttribute("id") ?? `panel-${uniqueId()}`;
           });
       }
       setComponent() {
@@ -13537,8 +13501,7 @@
        * @internal
        */
       mouseDownHandler(e) {
-          var _a;
-          const activeIndex = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a.findIndex(x => x.contains(e.target));
+          const activeIndex = this.focusableElements?.findIndex(x => x.contains(e.target));
           if (activeIndex > -1 && this.activeIndex !== activeIndex) {
               this.setFocusedElement(activeIndex);
           }
@@ -13576,8 +13539,9 @@
        * @internal
        */
       getDirectionalIncrementer(key) {
-          var _a, _b, _c, _d, _e;
-          return ((_e = (_c = (_b = (_a = ToolbarArrowKeyMap[key]) === null || _a === void 0 ? void 0 : _a[this.orientation]) === null || _b === void 0 ? void 0 : _b[this.direction]) !== null && _c !== void 0 ? _c : (_d = ToolbarArrowKeyMap[key]) === null || _d === void 0 ? void 0 : _d[this.orientation]) !== null && _e !== void 0 ? _e : 0);
+          return (ToolbarArrowKeyMap[key]?.[this.orientation]?.[this.direction] ??
+              ToolbarArrowKeyMap[key]?.[this.orientation] ??
+              0);
       }
       /**
        * Handle keyboard events for the toolbar.
@@ -13617,8 +13581,7 @@
        * @internal
        */
       reduceFocusableElements() {
-          var _a;
-          const previousFocusedElement = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a[this.activeIndex];
+          const previousFocusedElement = this.focusableElements?.[this.activeIndex];
           this.focusableElements = this.allSlottedItems.reduce(Toolbar.reduceFocusableItems, []);
           // If the previously active item is still focusable, adjust the active index to the
           // index of that item.
@@ -13651,10 +13614,9 @@
        * @internal
        */
       static reduceFocusableItems(elements, element) {
-          var _a, _b, _c, _d;
           const isRoleRadio = element.getAttribute("role") === "radio";
-          const isFocusableFastElement = (_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus;
-          const hasFocusableShadow = Array.from((_d = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("*")) !== null && _d !== void 0 ? _d : []).some(x => isFocusable(x));
+          const isFocusableFastElement = element.$fastController?.definition.shadowOptions?.delegatesFocus;
+          const hasFocusableShadow = Array.from(element.shadowRoot?.querySelectorAll("*") ?? []).some(x => isFocusable(x));
           if (!element.hasAttribute("disabled") &&
               !element.hasAttribute("hidden") &&
               (isFocusable(element) ||
@@ -14919,9 +14881,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$W = html `<slot></slot>`;
+  const template$Z = html `<slot></slot>`;
 
-  const styles$19 = css `
+  const styles$1c = css `
     ${display$2('contents')}
 `;
 
@@ -15036,8 +14998,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$19,
-      template: template$W
+      styles: styles$1c,
+      template: template$Z
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16610,7 +16572,7 @@
   }
   // #endregion
 
-  const styles$18 = css `
+  const styles$1b = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -16688,7 +16650,7 @@
     }
 `;
 
-  const template$V = (_context, definition) => html `${
+  const template$Y = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -16791,8 +16753,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$V,
-      styles: styles$18,
+      template: template$Y,
+      styles: styles$1b,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16901,7 +16863,7 @@
     padding: 0;
 `;
 
-  const styles$17 = css `
+  const styles$1a = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17185,8 +17147,8 @@
             }
         `));
 
-  const styles$16 = css `
-    ${styles$17}
+  const styles$19 = css `
+    ${styles$1a}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17206,7 +17168,7 @@
     }
 `;
 
-  const template$U = (context, definition) => html `
+  const template$X = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17288,8 +17250,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$U,
-      styles: styles$16,
+      template: template$X,
+      styles: styles$19,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17297,7 +17259,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$15 = css `
+  const styles$18 = css `
     ${display$2('grid')}
 
     :host {
@@ -17380,7 +17342,7 @@
     }
 `;
 
-  const template$T = (context, definition) => html `
+  const template$W = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17481,8 +17443,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$T,
-      styles: styles$15,
+      template: template$W,
+      styles: styles$18,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17492,7 +17454,27 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$14 = css `
+  const styles$17 = css `
+    ${display$2('flex')}
+`;
+
+  const template$V = html `
+    <template>anchor step</template>
+`;
+
+  /**
+   * A nimble-styled anchor step for a stepper
+   */
+  class AnchorStep extends FoundationElement {
+  }
+  const nimbleAnchorStep = AnchorStep.compose({
+      baseName: 'anchor-step',
+      template: template$V,
+      styles: styles$17
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
+
+  const styles$16 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -17609,7 +17591,7 @@
     }
 `;
 
-  const template$S = (context, definition) => html `
+  const template$U = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17661,15 +17643,15 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$S,
-      styles: styles$14,
+      template: template$U,
+      styles: styles$16,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$13 = css `
+  const styles$15 = css `
     ${display$2('flex')}
 
     :host {
@@ -17709,12 +17691,12 @@
     }
 `;
 
-  const styles$12 = css `
-    ${styles$17}
+  const styles$14 = css `
+    ${styles$1a}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$R = (context, definition) => html `
+  const template$T = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -17805,8 +17787,8 @@
   const nimbleButton = Button$1.compose({
       baseName: 'button',
       baseClass: Button$2,
-      template: template$R,
-      styles: styles$12,
+      template: template$T,
+      styles: styles$14,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18753,7 +18735,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$Q = html `<div
+  const template$S = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -18768,7 +18750,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$11 = css `
+  const styles$13 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -18831,8 +18813,8 @@
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$Q,
-          styles: styles$11
+          template: template$S,
+          styles: styles$13
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -18927,7 +18909,7 @@
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.itemRemoveLabel);
 
-  const template$P = (context, definition) => html `
+  const template$R = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -19226,15 +19208,15 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$P,
-      styles: styles$13,
+      template: template$R,
+      styles: styles$15,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$10 = css `
+  const styles$12 = css `
     ${display$2('block')}
 
     :host {
@@ -19339,7 +19321,7 @@
     }
 `;
 
-  const template$O = (context, definition) => html `
+  const template$Q = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -19476,8 +19458,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$O,
-      styles: styles$10,
+      template: template$Q,
+      styles: styles$12,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19493,7 +19475,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$$ = css `
+  const styles$11 = css `
     ${display$2('block')}
 
     :host {
@@ -19524,7 +19506,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$$
+      styles: styles$11
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -19605,7 +19587,7 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$_ = css `
+  const styles$10 = css `
     ${display$2('flex')}
 
     :host {
@@ -19783,7 +19765,7 @@
       information: 'information'
   };
 
-  const template$N = html `
+  const template$P = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -19901,8 +19883,8 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$N,
-      styles: styles$_
+      template: template$P,
+      styles: styles$10
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -19943,7 +19925,7 @@
     </template>
 `;
 
-  const styles$Z = css `
+  const styles$$ = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20047,11 +20029,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$Z
+      styles: styles$$
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$Y = css `
+  const styles$_ = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -20148,14 +20130,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$Y,
+      styles: styles$_,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$X = css `
+  const styles$Z = css `
     ${display$2('flex')}
 
     :host {
@@ -20179,7 +20161,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$M = html `
+  const template$O = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20194,12 +20176,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$M,
-      styles: styles$X
+      template: template$O,
+      styles: styles$Z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$W = css `
+  const styles$Y = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20357,14 +20339,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$W,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$V = css `
+  const styles$X = css `
     .error-icon {
         display: none;
     }
@@ -20398,9 +20380,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$U = css `
+  const styles$W = css `
     ${display$2('inline-grid')}
-    ${styles$V}
+    ${styles$X}
 
     :host {
         font: ${bodyFont};
@@ -20594,7 +20576,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$L = (_context, definition) => html `
+  const template$N = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20679,16 +20661,16 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$L,
-      styles: styles$U,
+      template: template$N,
+      styles: styles$W,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$T = css `
-    ${styles$17}
+  const styles$V = css `
+    ${styles$1a}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20735,7 +20717,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$K = (context, definition) => html `
+  const template$M = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20830,8 +20812,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$K,
-      styles: styles$T,
+      template: template$M,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20861,7 +20843,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$S = css `
+  const styles$U = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21151,7 +21133,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$R = css `
+  const styles$T = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -21178,10 +21160,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$Q = css `
-    ${styles$S}
-    ${styles$V}
-    ${styles$R}
+  const styles$S = css `
+    ${styles$U}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21302,7 +21284,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$J = (context, definition) => html `
+  const template$L = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -22077,8 +22059,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$J,
-      styles: styles$Q,
+      template: template$L,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -22122,7 +22104,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$P = css `
+  const styles$R = css `
     ${display$2('grid')}
 
     dialog {
@@ -22215,7 +22197,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$I = html `
+  const template$K = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22363,13 +22345,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$I,
-      styles: styles$P,
+      template: template$K,
+      styles: styles$R,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$O = css `
+  const styles$Q = css `
     ${display$2('block')}
 
     :host {
@@ -22512,7 +22494,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$H = html `
+  const template$J = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22654,8 +22636,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$H,
-      styles: styles$O
+      template: template$J,
+      styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -25437,7 +25419,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$N = css `
+  const styles$P = css `
     ${display$2('none')}
 `;
 
@@ -25502,7 +25484,7 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderCore.prototype, "itemRemove", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$N
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -25669,13 +25651,13 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$N
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$M = css `
+  const styles$O = css `
     ${display$2('flex')}
 
     :host {
@@ -25751,7 +25733,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$G = (context, definition) => html `
+  const template$I = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25864,13 +25846,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$G,
-      styles: styles$M
+      template: template$I,
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$L = css `
+  const styles$N = css `
     ${display$2('flex')}
 
     :host {
@@ -25932,7 +25914,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$F = html `
+  const template$H = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -26074,8 +26056,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$F,
-      styles: styles$L
+      template: template$H,
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26102,9 +26084,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$E = html `<template slot="mapping"></template>`;
+  const template$G = html `<template slot="mapping"></template>`;
 
-  const styles$K = css `
+  const styles$M = css `
     ${display$2('none')}
 `;
 
@@ -26120,8 +26102,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -26191,8 +26173,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -26215,8 +26197,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -26232,8 +26214,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -26535,7 +26517,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$D = () => html `
+  const template$F = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -26552,7 +26534,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$J = css `
+  const styles$L = css `
     ${display$2('grid')}
 
     :host {
@@ -26623,8 +26605,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$D,
-      styles: styles$J
+      template: template$F,
+      styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -26639,7 +26621,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$I = css `
+  const styles$K = css `
     ${display$2('inline-block')}
 
     :host {
@@ -26657,7 +26639,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$C = html `
+  const template$E = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -26907,8 +26889,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$C,
-      styles: styles$I,
+      template: template$E,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -26916,7 +26898,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$H = css `
+  const styles$J = css `
     ${display$2('grid')}
 
     :host {
@@ -27013,7 +26995,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$H,
+      styles: styles$J,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -27028,10 +27010,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$G = css `
+  const styles$I = css `
     ${display$2('inline-block')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         font: ${bodyFont};
@@ -27254,7 +27236,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$B = (context, definition) => html `
+  const template$D = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -27408,8 +27390,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$B,
-      styles: styles$G,
+      template: template$D,
+      styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -27452,7 +27434,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$F = css `
+  const styles$H = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -27552,15 +27534,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$F,
+      styles: styles$H,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$E = css `
+  const styles$G = css `
     ${display$2('inline-block')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     .positioning-region {
         display: flex;
@@ -27599,7 +27581,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$A = html `
+  const template$C = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -27639,8 +27621,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$A,
-      styles: styles$E,
+      template: template$C,
+      styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -31576,7 +31558,7 @@ so this becomes the fallback color for the slot */ ''}
   JSON-serialization identifier using
   [`Step.jsonID`](https://prosemirror.net/docs/ref/#transform.Step^jsonID).
   */
-  class Step {
+  let Step$1 = class Step {
       /**
       Get the step map that represents the changes made by this step,
       and which can be used to transform between positions in the old
@@ -31614,7 +31596,7 @@ so this becomes the fallback color for the slot */ ''}
           stepClass.prototype.jsonID = id;
           return stepClass;
       }
-  }
+  };
   /**
   The result of [applying](https://prosemirror.net/docs/ref/#transform.Step.apply) a step. Contains either a
   new document or a failure value.
@@ -31675,7 +31657,7 @@ so this becomes the fallback color for the slot */ ''}
   /**
   Add a mark to all inline content between two positions.
   */
-  class AddMarkStep extends Step {
+  class AddMarkStep extends Step$1 {
       /**
       Create a mark step.
       */
@@ -31736,11 +31718,11 @@ so this becomes the fallback color for the slot */ ''}
           return new AddMarkStep(json.from, json.to, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("addMark", AddMarkStep);
+  Step$1.jsonID("addMark", AddMarkStep);
   /**
   Remove a mark from all inline content between two positions.
   */
-  class RemoveMarkStep extends Step {
+  class RemoveMarkStep extends Step$1 {
       /**
       Create a mark-removing step.
       */
@@ -31798,11 +31780,11 @@ so this becomes the fallback color for the slot */ ''}
           return new RemoveMarkStep(json.from, json.to, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("removeMark", RemoveMarkStep);
+  Step$1.jsonID("removeMark", RemoveMarkStep);
   /**
   Add a mark to a specific node.
   */
-  class AddNodeMarkStep extends Step {
+  class AddNodeMarkStep extends Step$1 {
       /**
       Create a node mark step.
       */
@@ -31855,11 +31837,11 @@ so this becomes the fallback color for the slot */ ''}
           return new AddNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("addNodeMark", AddNodeMarkStep);
+  Step$1.jsonID("addNodeMark", AddNodeMarkStep);
   /**
   Remove a mark from a specific node.
   */
-  class RemoveNodeMarkStep extends Step {
+  class RemoveNodeMarkStep extends Step$1 {
       /**
       Create a mark-removing step.
       */
@@ -31905,12 +31887,12 @@ so this becomes the fallback color for the slot */ ''}
           return new RemoveNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("removeNodeMark", RemoveNodeMarkStep);
+  Step$1.jsonID("removeNodeMark", RemoveNodeMarkStep);
 
   /**
   Replace a part of the document with a slice of new content.
   */
-  class ReplaceStep extends Step {
+  class ReplaceStep extends Step$1 {
       /**
       The given `slice` should fit the 'gap' between `from` and
       `to`—the depths must line up, and the surrounding nodes must be
@@ -31994,13 +31976,13 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceStep(json.from, json.to, Slice.fromJSON(schema, json.slice), !!json.structure);
       }
   }
-  Step.jsonID("replace", ReplaceStep);
+  Step$1.jsonID("replace", ReplaceStep);
   /**
   Replace a part of the document with a slice of content, but
   preserve a range of the replaced content by moving it into the
   slice.
   */
-  class ReplaceAroundStep extends Step {
+  class ReplaceAroundStep extends Step$1 {
       /**
       Create a replace-around step with the given range and gap.
       `insert` should be the point in the slice into which the content
@@ -32093,7 +32075,7 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceAroundStep(json.from, json.to, json.gapFrom, json.gapTo, Slice.fromJSON(schema, json.slice), json.insert, !!json.structure);
       }
   }
-  Step.jsonID("replaceAround", ReplaceAroundStep);
+  Step$1.jsonID("replaceAround", ReplaceAroundStep);
   function contentBetween(doc, from, to) {
       let $from = doc.resolve(from), dist = to - from, depth = $from.depth;
       while (dist > 0 && depth > 0 && $from.indexAfter(depth) == $from.node(depth).childCount) {
@@ -33017,7 +32999,7 @@ so this becomes the fallback color for the slot */ ''}
   /**
   Update an attribute in a specific node.
   */
-  class AttrStep extends Step {
+  class AttrStep extends Step$1 {
       /**
       Construct an attribute step.
       */
@@ -33067,11 +33049,11 @@ so this becomes the fallback color for the slot */ ''}
           return new AttrStep(json.pos, json.attr, json.value);
       }
   }
-  Step.jsonID("attr", AttrStep);
+  Step$1.jsonID("attr", AttrStep);
   /**
   Update an attribute in the doc node.
   */
-  class DocAttrStep extends Step {
+  class DocAttrStep extends Step$1 {
       /**
       Construct an attribute step.
       */
@@ -33112,7 +33094,7 @@ so this becomes the fallback color for the slot */ ''}
           return new DocAttrStep(json.attr, json.value);
       }
   }
-  Step.jsonID("docAttr", DocAttrStep);
+  Step$1.jsonID("docAttr", DocAttrStep);
 
   /**
   @internal
@@ -46784,7 +46766,7 @@ ${renderedContent}
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$D = css `
+  const styles$F = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -46821,7 +46803,7 @@ ${renderedContent}
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$D
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -46850,8 +46832,8 @@ ${renderedContent}
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$C = css `
-    ${styles$S}
+  const styles$E = css `
+    ${styles$U}
 
     :host {
         height: auto;
@@ -46869,7 +46851,7 @@ ${renderedContent}
     }
 `;
 
-  const template$z = html `
+  const template$B = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -47157,15 +47139,15 @@ ${renderedContent}
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$z,
-      styles: styles$C
+      template: template$B,
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$y = html `
+  const template$A = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -47267,9 +47249,9 @@ ${renderedContent}
     </template>
 `;
 
-  const styles$B = css `
+  const styles$D = css `
     ${display$2('inline-flex')}
-    ${styles$V}
+    ${styles$X}
 
     :host {
         font: ${bodyFont};
@@ -63643,8 +63625,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$y,
-      styles: styles$B,
+      template: template$A,
+      styles: styles$D,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -63653,13 +63635,13 @@ ${nextLine.slice(indentLevel + 2)}`;
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$x = html `
+  const template$z = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$A = css `
+  const styles$C = css `
     ${display$2('flex')}
 
     :host {
@@ -63772,17 +63754,17 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$x,
-      styles: styles$A
+      template: template$z,
+      styles: styles$C
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$z = css `
-    ${styles$S}
-    ${styles$V}
-    ${styles$R}
+  const styles$B = css `
+    ${styles$U}
+    ${styles$X}
+    ${styles$T}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -63945,7 +63927,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const styles$y = css `
+  const styles$A = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -64115,7 +64097,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const template$w = html `
+  const template$y = html `
     <template role="progressbar">
         ${''
 /**
@@ -64162,8 +64144,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$w,
-      styles: styles$y
+      template: template$y,
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -64179,7 +64161,7 @@ ${nextLine.slice(indentLevel + 2)}`;
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$v = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -65395,8 +65377,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$v,
-      styles: styles$z,
+      template: template$x,
+      styles: styles$B,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -65409,6 +65391,46 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
+  const styles$z = css `
+    ${display$2('flex')}
+`;
+
+  const template$w = html `
+    <template>step</template>
+`;
+
+  /**
+   * A nimble-styled step for a stepper
+   */
+  class Step extends FoundationElement {
+  }
+  const nimbleStep = Step.compose({
+      baseName: 'step',
+      template: template$w,
+      styles: styles$z
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
+
+  const styles$y = css `
+    ${display$2('flex')}
+`;
+
+  const template$v = html `
+    <template>stepper: <slot></slot></template>
+`;
+
+  /**
+   * A nimble-styled stepper
+   */
+  class Stepper extends FoundationElement {
+  }
+  const nimbleStepper = Stepper.compose({
+      baseName: 'stepper',
+      template: template$v,
+      styles: styles$y
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
+
   const styles$x = css `
     ${display$2('inline-flex')}
 
@@ -77652,7 +77674,7 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$g = css `
-    ${styles$13}
+    ${styles$15}
 
     .tabpanel {
         overflow: auto;
@@ -77733,7 +77755,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$P,
+      template: template$R,
       styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -77815,8 +77837,8 @@ focus outline in that case.
 
   const styles$e = css `
     ${display$2('inline-flex')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         font: ${bodyFont};
@@ -78176,8 +78198,8 @@ focus outline in that case.
 
   const styles$d = css `
     ${display$2('inline-block')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         font: ${bodyFont};