npm - @ni/nimble-components - Versions diffs - 35.1.1 → 35.2.0 - Mend

@ni/nimble-components 35.1.1 → 35.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/all-components-bundle.js +395 -373
package/dist/all-components-bundle.js.map +1 -1
package/dist/all-components-bundle.min.js +5087 -5126
package/dist/all-components-bundle.min.js.map +1 -1
package/dist/esm/all-components.d.ts +3 -0
package/dist/esm/all-components.js +3 -0
package/dist/esm/all-components.js.map +1 -1
package/dist/esm/anchor-step/index.d.ts +12 -0
package/dist/esm/anchor-step/index.js +16 -0
package/dist/esm/anchor-step/index.js.map +1 -0
package/dist/esm/anchor-step/styles.d.ts +1 -0
package/dist/esm/anchor-step/styles.js +6 -0
package/dist/esm/anchor-step/styles.js.map +1 -0
package/dist/esm/anchor-step/template.d.ts +2 -0
package/dist/esm/anchor-step/template.js +5 -0
package/dist/esm/anchor-step/template.js.map +1 -0
package/dist/esm/step/index.d.ts +12 -0
package/dist/esm/step/index.js +16 -0
package/dist/esm/step/index.js.map +1 -0
package/dist/esm/step/styles.d.ts +1 -0
package/dist/esm/step/styles.js +6 -0
package/dist/esm/step/styles.js.map +1 -0
package/dist/esm/step/template.d.ts +2 -0
package/dist/esm/step/template.js +5 -0
package/dist/esm/step/template.js.map +1 -0
package/dist/esm/stepper/index.d.ts +12 -0
package/dist/esm/stepper/index.js +16 -0
package/dist/esm/stepper/index.js.map +1 -0
package/dist/esm/stepper/styles.d.ts +1 -0
package/dist/esm/stepper/styles.js +6 -0
package/dist/esm/stepper/styles.js.map +1 -0
package/dist/esm/stepper/template.d.ts +2 -0
package/dist/esm/stepper/template.js +5 -0
package/dist/esm/stepper/template.js.map +1 -0
package/package.json +3 -3

package/dist/all-components-bundle.js CHANGED Viewed

@@ -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$O = html `<slot></slot>`;
+  const template$R = html `<slot></slot>`;
-  const styles$11 = css `
+  const styles$14 = css `
     ${display('contents')}
 `;
@@ -15036,8 +14998,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$11,
-      template: template$O
+      styles: styles$14,
+      template: template$R
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16610,7 +16572,7 @@
   }
   // #endregion
-  const styles$10 = css `
+  const styles$13 = css `
     @layer base, hover, focusVisible, active, disabled;
     @layer base {
@@ -16688,7 +16650,7 @@
     }
 `;
-  const template$N = (_context, definition) => html `${
+  const template$Q = (_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$N,
-      styles: styles$10,
+      template: template$Q,
+      styles: styles$13,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16901,7 +16863,7 @@
     padding: 0;
 `;
-  const styles$$ = css `
+  const styles$12 = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
     @layer base {
@@ -17185,8 +17147,8 @@
             }
         `));
-  const styles$_ = css `
-    ${styles$$}
+  const styles$11 = css `
+    ${styles$12}
     ${buttonAppearanceVariantStyles}
     .control {
@@ -17206,7 +17168,7 @@
     }
 `;
-  const template$M = (context, definition) => html `
+  const template$P = (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$M,
-      styles: styles$_,
+      template: template$P,
+      styles: styles$11,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17297,7 +17259,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
-  const styles$Z = css `
+  const styles$10 = css `
     ${display('grid')}
     :host {
@@ -17380,7 +17342,7 @@
     }
 `;
-  const template$L = (context, definition) => html `
+  const template$O = (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$L,
-      styles: styles$Z,
+      template: template$O,
+      styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17492,7 +17454,27 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
-  const styles$Y = css `
+  const styles$$ = css `
+    ${display('flex')}
+`;
+  const template$N = 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$N,
+      styles: styles$$
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
+  const styles$_ = css `
     ${display('inline-flex')}
     :host {
@@ -17609,7 +17591,7 @@
     }
 `;
-  const template$K = (context, definition) => html `
+  const template$M = (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$K,
-      styles: styles$Y,
+      template: template$M,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
-  const styles$X = css `
+  const styles$Z = css `
     ${display('flex')}
     :host {
@@ -17709,12 +17691,12 @@
     }
 `;
-  const styles$W = css `
-    ${styles$$}
+  const styles$Y = css `
+    ${styles$12}
     ${buttonAppearanceVariantStyles}
 `;
-  const template$J = (context, definition) => html `
+  const template$L = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -17805,8 +17787,8 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$J,
-      styles: styles$W,
+      template: template$L,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18753,7 +18735,7 @@
   };
   // Avoiding any whitespace in the template because this is an inline element
-  const template$I = html `<div
+  const template$K = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -18768,7 +18750,7 @@
     -webkit-user-select: none;
 `;
-  const styles$V = css `
+  const styles$X = css `
     ${display('inline-flex')}
     :host {
@@ -18831,8 +18813,8 @@
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$I,
-          styles: styles$V
+          template: template$K,
+          styles: styles$X
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -18927,7 +18909,7 @@
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.itemRemoveLabel);
-  const template$H = (context, definition) => html `
+  const template$J = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -19226,15 +19208,15 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$H,
-      styles: styles$X,
+      template: template$J,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
-  const styles$U = css `
+  const styles$W = css `
     ${display('block')}
     :host {
@@ -19339,7 +19321,7 @@
     }
 `;
-  const template$G = (context, definition) => html `
+  const template$I = (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$G,
-      styles: styles$U,
+      template: template$I,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19493,7 +19475,7 @@
       zIndex1000: '1000'
   };
-  const styles$T = css `
+  const styles$V = css `
     ${display('block')}
     :host {
@@ -19524,7 +19506,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$T
+      styles: styles$V
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -19605,7 +19587,7 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
-  const styles$S = css `
+  const styles$U = css `
     ${display('flex')}
     :host {
@@ -19783,7 +19765,7 @@
       information: 'information'
   };
-  const template$F = html `
+  const template$H = 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$F,
-      styles: styles$S
+      template: template$H,
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -19943,7 +19925,7 @@
     </template>
 `;
-  const styles$R = css `
+  const styles$T = css `
     ${display('inline-flex')}
     :host {
@@ -20047,11 +20029,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$R
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
-  const styles$Q = css `
+  const styles$S = 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$Q,
+      styles: styles$S,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
-  const styles$P = css `
+  const styles$R = css `
     ${display('flex')}
     :host {
@@ -20179,7 +20161,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
-  const template$E = html `
+  const template$G = 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$E,
-      styles: styles$P
+      template: template$G,
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
-  const styles$O = css `
+  const styles$Q = css `
     ${display('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$O,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
-  const styles$N = css `
+  const styles$P = css `
     .error-icon {
         display: none;
     }
@@ -20398,9 +20380,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
-  const styles$M = css `
+  const styles$O = css `
     ${display('inline-grid')}
-    ${styles$N}
+    ${styles$P}
     :host {
         font: ${bodyFont};
@@ -20594,7 +20576,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
-  const template$D = (_context, definition) => html `
+  const template$F = (_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$D,
-      styles: styles$M,
+      template: template$F,
+      styles: styles$O,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
-  const styles$L = css `
-    ${styles$$}
+  const styles$N = css `
+    ${styles$12}
     ${buttonAppearanceVariantStyles}
     @layer checked {
@@ -20735,7 +20717,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
-  const template$C = (context, definition) => html `
+  const template$E = (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$C,
-      styles: styles$L,
+      template: template$E,
+      styles: styles$N,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20861,7 +20843,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
-  const styles$K = css `
+  const styles$M = css `
     ${display('inline-flex')}
     :host {
@@ -21151,7 +21133,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
-  const styles$J = css `
+  const styles$L = 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$I = css `
-    ${styles$K}
-    ${styles$N}
-    ${styles$J}
+  const styles$K = css `
+    ${styles$M}
+    ${styles$P}
+    ${styles$L}
     :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$B = (context, definition) => html `
+  const template$D = (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$B,
-      styles: styles$I,
+      template: template$D,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -22122,7 +22104,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
-  const styles$H = css `
+  const styles$J = css `
     ${display('grid')}
     dialog {
@@ -22215,7 +22197,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
-  const template$A = html `
+  const template$C = 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$A,
-      styles: styles$H,
+      template: template$C,
+      styles: styles$J,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
-  const styles$G = css `
+  const styles$I = css `
     ${display('block')}
     :host {
@@ -22512,7 +22494,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
-  const template$z = html `
+  const template$B = 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$z,
-      styles: styles$G
+      template: template$B,
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -25436,7 +25418,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
-  const styles$F = css `
+  const styles$H = css `
     ${display('none')}
 `;
@@ -25501,7 +25483,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$F
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -25668,13 +25650,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$F
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
-  const styles$E = css `
+  const styles$G = css `
     ${display('flex')}
     :host {
@@ -25750,7 +25732,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$y = (context, definition) => html `
+  const template$A = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25863,13 +25845,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$y,
-      styles: styles$E
+      template: template$A,
+      styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
-  const styles$D = css `
+  const styles$F = css `
     ${display('flex')}
     :host {
@@ -25931,7 +25913,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$x = html `
+  const template$z = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -26073,8 +26055,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$x,
-      styles: styles$D
+      template: template$z,
+      styles: styles$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26101,9 +26083,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
-  const template$w = html `<template slot="mapping"></template>`;
+  const template$y = html `<template slot="mapping"></template>`;
-  const styles$C = css `
+  const styles$E = css `
     ${display('none')}
 `;
@@ -26119,8 +26101,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$w,
-      styles: styles$C
+      template: template$y,
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
@@ -26190,8 +26172,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$w,
-      styles: styles$C
+      template: template$y,
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
@@ -26214,8 +26196,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$w,
-      styles: styles$C
+      template: template$y,
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
@@ -26231,8 +26213,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$w,
-      styles: styles$C
+      template: template$y,
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
@@ -26534,7 +26516,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
-  const template$v = () => html `
+  const template$x = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -26551,7 +26533,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
-  const styles$B = css `
+  const styles$D = css `
     ${display('grid')}
     :host {
@@ -26622,8 +26604,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$v,
-      styles: styles$B
+      template: template$x,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
@@ -26638,7 +26620,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
-  const styles$A = css `
+  const styles$C = css `
     ${display('inline-block')}
     :host {
@@ -26656,7 +26638,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
-  const template$u = html `
+  const template$w = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -26906,8 +26888,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$u,
-      styles: styles$A,
+      template: template$w,
+      styles: styles$C,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -26915,7 +26897,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
-  const styles$z = css `
+  const styles$B = css `
     ${display('grid')}
     :host {
@@ -27012,7 +26994,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$z,
+      styles: styles$B,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -27027,10 +27009,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
-  const styles$y = css `
+  const styles$A = css `
     ${display('inline-block')}
-    ${styles$N}
-    ${styles$J}
+    ${styles$P}
+    ${styles$L}
     :host {
         font: ${bodyFont};
@@ -27253,7 +27235,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$t = (context, definition) => html `
+  const template$v = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -27407,8 +27389,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$t,
-      styles: styles$y,
+      template: template$v,
+      styles: styles$A,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -27451,7 +27433,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
-  const styles$x = css `
+  const styles$z = css `
     ${display('inline-flex')}
     :host {
@@ -27551,15 +27533,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$x,
+      styles: styles$z,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
-  const styles$w = css `
+  const styles$y = css `
     ${display('inline-block')}
-    ${styles$N}
-    ${styles$J}
+    ${styles$P}
+    ${styles$L}
     .positioning-region {
         display: flex;
@@ -27598,7 +27580,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$s = html `
+  const template$u = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -27638,8 +27620,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$s,
-      styles: styles$w,
+      template: template$u,
+      styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -31575,7 +31557,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
@@ -31613,7 +31595,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.
@@ -31674,7 +31656,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.
       */
@@ -31735,11 +31717,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.
       */
@@ -31797,11 +31779,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.
       */
@@ -31854,11 +31836,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.
       */
@@ -31904,12 +31886,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
@@ -31993,13 +31975,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
@@ -32092,7 +32074,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) {
@@ -33016,7 +32998,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.
       */
@@ -33066,11 +33048,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.
       */
@@ -33111,7 +33093,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
@@ -46783,7 +46765,7 @@ ${renderedContent}
   // src/index.ts
   var index_default$7 = HardBreak;
-  const styles$v = css `
+  const styles$x = css `
     ${display('inline')}
     .positioning-region {
@@ -46820,7 +46802,7 @@ ${renderedContent}
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$v
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -46849,8 +46831,8 @@ ${renderedContent}
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
-  const styles$u = css `
-    ${styles$K}
+  const styles$w = css `
+    ${styles$M}
     :host {
         height: auto;
@@ -46868,7 +46850,7 @@ ${renderedContent}
     }
 `;
-  const template$r = html `
+  const template$t = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -47156,15 +47138,15 @@ ${renderedContent}
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$r,
-      styles: styles$u
+      template: template$t,
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
-  const template$q = html `
+  const template$s = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -47266,9 +47248,9 @@ ${renderedContent}
     </template>
 `;
-  const styles$t = css `
+  const styles$v = css `
     ${display('inline-flex')}
-    ${styles$N}
+    ${styles$P}
     :host {
         font: ${bodyFont};
@@ -63642,8 +63624,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$q,
-      styles: styles$t,
+      template: template$s,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -63652,13 +63634,13 @@ ${nextLine.slice(indentLevel + 2)}`;
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
-  const template$p = html `
+  const template$r = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
-  const styles$s = css `
+  const styles$u = css `
     ${display('flex')}
     :host {
@@ -63771,17 +63753,17 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$p,
-      styles: styles$s
+      template: template$r,
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
-  const styles$r = css `
-    ${styles$K}
-    ${styles$N}
-    ${styles$J}
+  const styles$t = css `
+    ${styles$M}
+    ${styles$P}
+    ${styles$L}
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -63944,7 +63926,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
-  const styles$q = css `
+  const styles$s = css `
     ${display('inline-grid')}
     :host {
@@ -64114,7 +64096,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
-  const template$o = html `
+  const template$q = html `
     <template role="progressbar">
         ${''
 /**
@@ -64161,8 +64143,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$o,
-      styles: styles$q
+      template: template$q,
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -64178,7 +64160,7 @@ ${nextLine.slice(indentLevel + 2)}`;
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$n = (context, definition) => html `
+  const template$p = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -65394,8 +65376,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$n,
-      styles: styles$r,
+      template: template$p,
+      styles: styles$t,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -65408,6 +65390,46 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
+  const styles$r = css `
+    ${display('flex')}
+`;
+  const template$o = html `
+    <template>step</template>
+`;
+  /**
+   * A nimble-styled step for a stepper
+   */
+  class Step extends FoundationElement {
+  }
+  const nimbleStep = Step.compose({
+      baseName: 'step',
+      template: template$o,
+      styles: styles$r
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
+  const styles$q = css `
+    ${display('flex')}
+`;
+  const template$n = html `
+    <template>stepper: <slot></slot></template>
+`;
+  /**
+   * A nimble-styled stepper
+   */
+  class Stepper extends FoundationElement {
+  }
+  const nimbleStepper = Stepper.compose({
+      baseName: 'stepper',
+      template: template$n,
+      styles: styles$q
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
   const styles$p = css `
     ${display('inline-flex')}
@@ -77651,7 +77673,7 @@ focus outline in that case.
       .register(nimbleTableColumnText());
   const styles$8 = css `
-    ${styles$X}
+    ${styles$Z}
     .tabpanel {
         overflow: auto;
@@ -77732,7 +77754,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$H,
+      template: template$J,
       styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -77814,8 +77836,8 @@ focus outline in that case.
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$N}
-    ${styles$J}
+    ${styles$P}
+    ${styles$L}
     :host {
         font: ${bodyFont};
@@ -78175,8 +78197,8 @@ focus outline in that case.
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$N}
-    ${styles$J}
+    ${styles$P}
+    ${styles$L}
     :host {
         font: ${bodyFont};