@ni/ok-components 1.8.3 → 1.9.1

package/dist/all-components-bundle.js

@@ -108,12 +108,10 @@
       try {
           // Hopefully we never get here...
           // Not all environments allow eval and Function. Use only as a last resort:
-          // eslint-disable-next-line no-new-func
           return new Function("return this")();
       }
       catch {
           // If all fails, give up and create an object.
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           return {};
       }
   })();
@@ -194,6 +192,17 @@
           ...propConfig,
       });
   }
+  /**
+   * Core services shared across FAST instances.
+   * @internal
+   */
+  var KernelServiceId;
+  (function (KernelServiceId) {
+      KernelServiceId[KernelServiceId["updateQueue"] = 1] = "updateQueue";
+      KernelServiceId[KernelServiceId["observable"] = 2] = "observable";
+      KernelServiceId[KernelServiceId["contextEvent"] = 3] = "contextEvent";
+      KernelServiceId[KernelServiceId["elementRegistry"] = 4] = "elementRegistry";
+  })(KernelServiceId || (KernelServiceId = {}));
   /**
    * A readonly, empty array.
    * @remarks
@@ -224,7 +233,7 @@
       };
   }
 
-  const updateQueue = $global.FAST.getById(1 /* KernelServiceId.updateQueue */, () => {
+  const updateQueue = $global.FAST.getById(KernelServiceId.updateQueue, () => {
       const tasks = [];
       const pendingErrors = [];
       function throwFirstError() {
@@ -275,11 +284,9 @@
           process,
       });
   });
-  /* eslint-disable */
   const fastHTMLPolicy = $global.trustedTypes.createPolicy("fast-html", {
       createHTML: html => html,
   });
-  /* eslint-enable */
   let htmlPolicy = fastHTMLPolicy;
   const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
   /** @internal */
@@ -610,7 +617,7 @@
    * Common Observable APIs.
    * @public
    */
-  const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
+  const Observable = FAST.getById(KernelServiceId.observable, () => {
       const volatileRegex = /(\?\?|:|&&|\|\||if)/;
       const notifierLookup = new WeakMap();
       const queueUpdate = DOM.queueUpdate;
@@ -864,7 +871,7 @@
           },
       });
   }
-  const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
+  const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
       let current = null;
       return {
           get() {
@@ -1821,7 +1828,9 @@
   function separateSheetsToPrepend(sheets) {
       const prepend = [];
       const append = [];
-      sheets.forEach(x => (x[prependToAdoptedStyleSheetsSymbol] ? prepend : append).push(x));
+      sheets.forEach(x => 
+      // @ts-expect-error
+      (x[prependToAdoptedStyleSheetsSymbol] ? prepend : append).push(x));
       return { prepend, append };
   }
   let addAdoptedStyleSheets = (target, sheets) => {
@@ -2035,15 +2044,18 @@
        * @param value - The value to set the attribute/property to.
        */
       setValue(source, newValue) {
+          // @ts-expect-error
           const oldValue = source[this.fieldName];
           const converter = this.converter;
           if (converter !== void 0) {
               newValue = converter.fromView(newValue);
           }
           if (oldValue !== newValue) {
+              // @ts-expect-error
               source[this.fieldName] = newValue;
               this.tryReflectToAttribute(source);
               if (this.hasCallback) {
+                  // @ts-expect-error
                   source[this.callbackName](oldValue, newValue);
               }
               source.$fastController.notify(this.name);
@@ -2055,6 +2067,7 @@
        */
       getValue(source) {
           Observable.track(source, this.name);
+          // @ts-expect-error
           return source[this.fieldName];
       }
       /** @internal */
@@ -2074,6 +2087,7 @@
           }
           DOM.queueUpdate(() => {
               guards.add(element);
+              // @ts-expect-error
               const latestValue = element[this.fieldName];
               switch (mode) {
                   case "reflect":
@@ -2143,7 +2157,7 @@
 
   const defaultShadowOptions = { mode: "open" };
   const defaultElementOptions = {};
-  const fastRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */, () => {
+  const fastRegistry = FAST.getById(KernelServiceId.elementRegistry, () => {
       const typeToDefinition = new Map();
       return Object.freeze({
           register(definition) {
@@ -2613,11 +2627,9 @@
       }
   }
 
-  /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
   function createFASTElement(BaseType) {
       return class extends BaseType {
           constructor() {
-              /* eslint-disable-next-line */
               super();
               Controller.forCustomElement(this);
           }
@@ -3178,7 +3190,6 @@
       }
   }
   /* eslint-disable prefer-rest-params */
-  /* eslint-disable @typescript-eslint/explicit-function-return-type */
   /**
    * Enables the array observation mechanism.
    * @remarks
@@ -3282,7 +3293,6 @@
       };
   }
   /* eslint-enable prefer-rest-params */
-  /* eslint-enable @typescript-eslint/explicit-function-return-type */
 
   /**
    * The runtime behavior for template references.
@@ -3310,7 +3320,6 @@
        * Unbinds this behavior from the source.
        * @param source - The source to unbind from.
        */
-      /* eslint-disable-next-line @typescript-eslint/no-empty-function */
       unbind() { }
   }
   /**
@@ -3917,7 +3926,7 @@
        * @returns The resolver.
        */
       instance(value) {
-          return this.registerResolver(0 /* ResolverStrategy.instance */, value);
+          return this.registerResolver(ResolverStrategy.instance, value);
       }
       /**
        * Creates a resolver that enforces a singleton lifetime.
@@ -3925,7 +3934,7 @@
        * @returns The resolver.
        */
       singleton(value) {
-          return this.registerResolver(1 /* ResolverStrategy.singleton */, value);
+          return this.registerResolver(ResolverStrategy.singleton, value);
       }
       /**
        * Creates a resolver that creates a new instance for every dependency request.
@@ -3933,7 +3942,7 @@
        * @returns - The resolver.
        */
       transient(value) {
-          return this.registerResolver(2 /* ResolverStrategy.transient */, value);
+          return this.registerResolver(ResolverStrategy.transient, value);
       }
       /**
        * Creates a resolver that invokes a callback function for every dependency resolution
@@ -3942,7 +3951,7 @@
        * @returns The resolver.
        */
       callback(value) {
-          return this.registerResolver(3 /* ResolverStrategy.callback */, value);
+          return this.registerResolver(ResolverStrategy.callback, value);
       }
       /**
        * Creates a resolver that invokes a callback function the first time that a dependency
@@ -3952,7 +3961,7 @@
        * @returns The resolver.
        */
       cachedCallback(value) {
-          return this.registerResolver(3 /* ResolverStrategy.callback */, cacheCallbackResult(value));
+          return this.registerResolver(ResolverStrategy.callback, cacheCallbackResult(value));
       }
       /**
        * Aliases the current key to a different key.
@@ -3960,11 +3969,10 @@
        * @returns The resolver.
        */
       aliasTo(destinationKey) {
-          return this.registerResolver(5 /* ResolverStrategy.alias */, destinationKey);
+          return this.registerResolver(ResolverStrategy.alias, destinationKey);
       }
       registerResolver(strategy, state) {
           const { container, key } = this;
-          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
           this.container = this.key = (void 0);
           return container.registerResolver(key, new ResolverImpl(key, strategy, state));
       }
@@ -4000,7 +4008,7 @@
        * @returns The resolver.
        */
       singleton(key) {
-          return new ResolverImpl(key, 1 /* ResolverStrategy.singleton */, key);
+          return new ResolverImpl(key, ResolverStrategy.singleton, key);
       },
       /**
        * Provides default transient resolution behavior during auto-registration.
@@ -4008,7 +4016,7 @@
        * @returns The resolver.
        */
       transient(key) {
-          return new ResolverImpl(key, 2 /* ResolverStrategy.transient */, key);
+          return new ResolverImpl(key, ResolverStrategy.transient, key);
       },
   });
   /**
@@ -4230,8 +4238,10 @@
                           const handleChange = () => {
                               const newContainer = DI.findResponsibleContainer(this);
                               const newValue = newContainer.get(key);
+                              // @ts-expect-error
                               const oldValue = this[diPropertyKey];
                               if (newValue !== oldValue) {
+                                  // @ts-expect-error
                                   this[diPropertyKey] = value;
                                   notifier.notify(propertyName);
                               }
@@ -4414,6 +4424,16 @@
   DI.inject;
   const defaultSingletonOptions = { scoped: false };
   /** @internal */
+  var ResolverStrategy;
+  (function (ResolverStrategy) {
+      ResolverStrategy[ResolverStrategy["instance"] = 0] = "instance";
+      ResolverStrategy[ResolverStrategy["singleton"] = 1] = "singleton";
+      ResolverStrategy[ResolverStrategy["transient"] = 2] = "transient";
+      ResolverStrategy[ResolverStrategy["callback"] = 3] = "callback";
+      ResolverStrategy[ResolverStrategy["array"] = 4] = "array";
+      ResolverStrategy[ResolverStrategy["alias"] = 5] = "alias";
+  })(ResolverStrategy || (ResolverStrategy = {}));
+  /** @internal */
   class ResolverImpl {
       constructor(key, strategy, state) {
           this.key = key;
@@ -4429,9 +4449,9 @@
       }
       resolve(handler, requestor) {
           switch (this.strategy) {
-              case 0 /* ResolverStrategy.instance */:
+              case ResolverStrategy.instance:
                   return this.state;
-              case 1 /* ResolverStrategy.singleton */: {
+              case ResolverStrategy.singleton: {
                   if (this.resolving) {
                       throw new Error(`Cyclic dependency found: ${this.state.name}`);
                   }
@@ -4439,11 +4459,11 @@
                   this.state = handler
                       .getFactory(this.state)
                       .construct(requestor);
-                  this.strategy = 0 /* ResolverStrategy.instance */;
+                  this.strategy = ResolverStrategy.instance;
                   this.resolving = false;
                   return this.state;
               }
-              case 2 /* ResolverStrategy.transient */: {
+              case ResolverStrategy.transient: {
                   // Always create transients from the requesting container
                   const factory = handler.getFactory(this.state);
                   if (factory === null) {
@@ -4451,11 +4471,11 @@
                   }
                   return factory.construct(requestor);
               }
-              case 3 /* ResolverStrategy.callback */:
+              case ResolverStrategy.callback:
                   return this.state(handler, requestor, this);
-              case 4 /* ResolverStrategy.array */:
+              case ResolverStrategy.array:
                   return this.state[0].resolve(handler, requestor);
-              case 5 /* ResolverStrategy.alias */:
+              case ResolverStrategy.alias:
                   return requestor.get(this.state);
               default:
                   throw new Error(`Invalid resolver strategy specified: ${this.strategy}.`);
@@ -4463,10 +4483,10 @@
       }
       getFactory(container) {
           switch (this.strategy) {
-              case 1 /* ResolverStrategy.singleton */:
-              case 2 /* ResolverStrategy.transient */:
+              case ResolverStrategy.singleton:
+              case ResolverStrategy.transient:
                   return container.getFactory(this.state);
-              case 5 /* ResolverStrategy.alias */:
+              case ResolverStrategy.alias:
                   return container.getResolver(this.state)?.getFactory?.(container) ?? null;
               default:
                   return null;
@@ -4653,11 +4673,11 @@
               resolvers.set(key, resolver);
           }
           else if (result instanceof ResolverImpl &&
-              result.strategy === 4 /* ResolverStrategy.array */) {
+              result.strategy === ResolverStrategy.array) {
               result.state.push(resolver);
           }
           else {
-              resolvers.set(key, new ResolverImpl(key, 4 /* ResolverStrategy.array */, [result, resolver]));
+              resolvers.set(key, new ResolverImpl(key, ResolverStrategy.array, [result, resolver]));
           }
           return resolver;
       }
@@ -4749,9 +4769,7 @@
               while (current != null) {
                   resolver = current.resolvers.get(key);
                   if (resolver != null) {
-                      resolutions = resolutions.concat(
-                      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-                      buildAllResponse(resolver, current, requestor));
+                      resolutions = resolutions.concat(buildAllResponse(resolver, current, requestor));
                   }
                   current = current.parent;
               }
@@ -4857,7 +4875,7 @@
        * @param value - The instance to return when the key is requested.
        */
       instance(key, value) {
-          return new ResolverImpl(key, 0 /* ResolverStrategy.instance */, value);
+          return new ResolverImpl(key, ResolverStrategy.instance, value);
       },
       /**
        * Creates an instance from the class.
@@ -4872,7 +4890,7 @@
        * @param value - The class to instantiate as a singleton when first requested.
        */
       singleton(key, value) {
-          return new ResolverImpl(key, 1 /* ResolverStrategy.singleton */, value);
+          return new ResolverImpl(key, ResolverStrategy.singleton, value);
       },
       /**
        * Creates an instance from a class.
@@ -4887,7 +4905,7 @@
        * @param value - The class to instantiate each time the key is requested.
        */
       transient(key, value) {
-          return new ResolverImpl(key, 2 /* ResolverStrategy.transient */, value);
+          return new ResolverImpl(key, ResolverStrategy.transient, value);
       },
       /**
        * Delegates to a callback function to provide the dependency.
@@ -4904,7 +4922,7 @@
        * @param callback - The function that is expected to return the dependency.
        */
       callback(key, callback) {
-          return new ResolverImpl(key, 3 /* ResolverStrategy.callback */, callback);
+          return new ResolverImpl(key, ResolverStrategy.callback, callback);
       },
       /**
        * Delegates to a callback function to provide the dependency and then caches the
@@ -4923,7 +4941,7 @@
        * Should all references to the resolver returned be removed, the cache will expire.
        */
       cachedCallback(key, callback) {
-          return new ResolverImpl(key, 3 /* ResolverStrategy.callback */, cacheCallbackResult(callback));
+          return new ResolverImpl(key, ResolverStrategy.callback, cacheCallbackResult(callback));
       },
       /**
        * Creates an alternate {@link Key} to retrieve an instance by.
@@ -4940,7 +4958,7 @@
        * @param aliasKey - The alias to the original key.
        */
       aliasTo(originalKey, aliasKey) {
-          return new ResolverImpl(aliasKey, 5 /* ResolverStrategy.alias */, originalKey);
+          return new ResolverImpl(aliasKey, ResolverStrategy.alias, originalKey);
       },
   });
   /** @internal */
@@ -4951,7 +4969,7 @@
   }
   function buildAllResponse(resolver, handler, requestor) {
       if (resolver instanceof ResolverImpl &&
-          resolver.strategy === 4 /* ResolverStrategy.array */) {
+          resolver.strategy === ResolverStrategy.array) {
           const state = resolver.state;
           let i = state.length;
           const results = new Array(i);
@@ -5268,9 +5286,7 @@
       baseCtors.forEach(baseCtor => {
           Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
               if (name !== "constructor") {
-                  Object.defineProperty(derivedCtor.prototype, name, 
-                  /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-                  Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
+                  Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
               }
           });
           const baseAttributes = AttributeConfiguration.locate(baseCtor);
@@ -5366,7 +5382,7 @@
           styleElement.sheet.insertRule("foo:focus-visible {color:inherit}", 0);
           _canUseFocusVisible = true;
       }
-      catch (_a) {
+      catch {
           _canUseFocusVisible = false;
       }
       finally {
@@ -9087,6 +9103,7 @@
       constructor(source) {
           super();
           const sheet = new CSSStyleSheet();
+          // @ts-expect-error
           sheet[prependToAdoptedStyleSheetsSymbol] = true;
           this.target = sheet.cssRules[sheet.insertRule(":host{}")].style;
           source.$fastController.addStyles(ElementStyles.create([sheet]));
@@ -9266,7 +9283,6 @@
               };
           }
           if (propertyTargetCache.has(source)) {
-              /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
               return propertyTargetCache.get(source);
           }
           let target;
@@ -9938,9 +9954,7 @@
           RootStyleSheetTarget.unregisterRoot(target);
       },
   });
-  /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
-  /* eslint-disable @typescript-eslint/no-non-null-assertion */
   /**
    * Indicates what to do with an ambiguous (duplicate) element.
    * @public
@@ -10144,7 +10158,6 @@
           return DesignSystem.tagFor(type);
       }
   }
-  /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
   /*!
   * tabbable 6.5.0
@@ -11994,6 +12007,7 @@
           return (this.parentToolbar ?? false);
       }
       get isInsideFoundationToolbar() {
+          // @ts-expect-error
           return !!this.parentToolbar?.["$fastController"];
       }
       /**
@@ -12964,8 +12978,11 @@
                   }
                   // If the original property isn't emptied out,
                   // the next set will morph into a grid-area style setting that is not what we want
+                  // @ts-expect-error
                   tab.style[gridHorizontalProperty] = "";
+                  // @ts-expect-error
                   tab.style[gridVerticalProperty] = "";
+                  // @ts-expect-error
                   tab.style[gridProperty] = `${index + 1}`;
                   if (!this.isHorizontal()) {
                       tab.classList.add("vertical");
@@ -13183,15 +13200,20 @@
               ? "translateX"
               : "translateY";
           const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
+          // @ts-expect-error
           const prev = this.activeIndicatorRef[offsetProperty];
+          // @ts-expect-error
           this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
+          // @ts-expect-error
           const next = this.activeIndicatorRef[offsetProperty];
+          // @ts-expect-error
           this.activeIndicatorRef.style[gridProperty] = `${this.prevActiveTabIndex + 1}`;
           const dif = next - prev;
           this.activeIndicatorRef.style.transform = `${translateProperty}(${dif}px)`;
           this.activeIndicatorRef.classList.add("activeIndicatorTransition");
           this.activeIndicatorRef.addEventListener("transitionend", () => {
               this.ticking = false;
+              // @ts-expect-error
               this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
               this.activeIndicatorRef.style.transform = `${translateProperty}(0px)`;
               this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
@@ -13590,7 +13612,10 @@
        * @internal
        */
       getDirectionalIncrementer(key) {
-          return (ToolbarArrowKeyMap[key]?.[this.orientation]?.[this.direction] ??
+          return (
+          // @ts-expect-error
+          ToolbarArrowKeyMap[key]?.[this.orientation]?.[this.direction] ??
+              // @ts-expect-error
               ToolbarArrowKeyMap[key]?.[this.orientation] ??
               0);
       }
@@ -14955,9 +14980,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$1m = html `<slot></slot>`;
+  const template$1n = html `<slot></slot>`;
 
-  const styles$1C = css `
+  const styles$1D = css `
     ${display$2('contents')}
 
     :host {
@@ -15084,8 +15109,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1C,
-      template: template$1m
+      styles: styles$1D,
+      template: template$1n
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -15197,6 +15222,30 @@
           this.b = blue;
           this.a = typeof alpha === "number" && !isNaN(alpha) ? alpha : 1;
       }
+      /**
+       * The red value
+       * @remarks
+       * Scaled to the range [0.0 , 1.0]. Values outside this range are allowed but any methods that convert or tostring the values will also be clamped
+       */
+      r;
+      /**
+       * The green value
+       * @remarks
+       * Scaled to the range [0.0 , 1.0]. Values outside this range are allowed but any methods that convert or tostring the values will also be clamped
+       */
+      g;
+      /**
+       * The blue value
+       * @remarks
+       * Scaled to the range [0.0 , 1.0]. Values outside this range are allowed but any methods that convert or tostring the values will also be clamped
+       */
+      b;
+      /**
+       * The alpha value
+       * @remarks
+       * Scaled to the range [0.0 , 1.0]. Values outside this range are allowed but any methods that convert or tostring the values will also be clamped
+       */
+      a;
       /**
        * Determines if one color is equal to another.
        * @param rhs - the color to compare
@@ -16550,7 +16599,7 @@
   const sectionBackgroundColor = createThemeColorToken(tokenNames.sectionBackgroundColor, tokenValues.sectionBackgroundColor);
   const sectionBackgroundImage = createThemeColorToken(tokenNames.sectionBackgroundImage, tokenValues.sectionBackgroundImage);
   const dividerBackgroundColor = createThemeColorToken(tokenNames.dividerBackgroundColor, tokenValues.dividerBackgroundColor);
-  createThemeColorToken(tokenNames.dividerBackgroundDynamicColor, tokenValues.dividerBackgroundDynamicColor);
+  const dividerBackgroundDynamicColor = createThemeColorToken(tokenNames.dividerBackgroundDynamicColor, tokenValues.dividerBackgroundDynamicColor);
   const fillSelectedColor = createThemeColorToken(tokenNames.fillSelectedColor, tokenValues.fillSelectedColor);
   const fillSelectedRgbPartialColor = createThemeColorToken(tokenNames.fillSelectedRgbPartialColor, tokenValues.fillSelectedRgbPartialColor);
   const fillHoverSelectedColor = createThemeColorToken(tokenNames.fillHoverSelectedColor, tokenValues.fillHoverSelectedColor);
@@ -16731,7 +16780,7 @@
   }
   // #endregion
 
-  const styles$1B = css `
+  const styles$1C = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16809,7 +16858,7 @@
     }
 `;
 
-  const template$1l = (_context, definition) => html `${
+  const template$1m = (_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
@@ -16912,8 +16961,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$1l,
-      styles: styles$1B,
+      template: template$1m,
+      styles: styles$1C,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17022,7 +17071,7 @@
     padding: 0;
 `;
 
-  const styles$1A = css `
+  const styles$1B = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17306,8 +17355,8 @@
             }
         `));
 
-  const styles$1z = css `
-    ${styles$1A}
+  const styles$1A = css `
+    ${styles$1B}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17327,7 +17376,7 @@
     }
 `;
 
-  const template$1k = (context, definition) => html `
+  const template$1l = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17409,8 +17458,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$1k,
-      styles: styles$1z,
+      template: template$1l,
+      styles: styles$1A,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17418,7 +17467,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1y = css `
+  const styles$1z = css `
     ${display$2('grid')}
 
     :host {
@@ -17501,7 +17550,7 @@
     }
 `;
 
-  const template$1j = (context, definition) => html `
+  const template$1k = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17602,8 +17651,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$1j,
-      styles: styles$1y,
+      template: template$1k,
+      styles: styles$1z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17615,7 +17664,7 @@
 
   // These styles end up inside a @layer block so must use the
   // cssPartial tag instead of the css tag
-  const styles$1x = cssPartial `
+  const styles$1y = cssPartial `
     .severity-text {
         display: none;
         font: ${errorTextFont};
@@ -17725,12 +17774,12 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$1w = css `
+  const styles$1x = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
-        ${styles$1x}
+        ${styles$1y}
         :host {
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
@@ -18410,8 +18459,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             }
         `));
 
-  const styles$1v = css `
-    ${styles$1w}
+  const styles$1w = css `
+    ${styles$1x}
     ${'' /* Anchor specific styles */}
     @layer base {
         .control {
@@ -19470,13 +19519,13 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$1i = html `<div
+  const template$1j = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$1u = css `
+  const styles$1v = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19539,8 +19588,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$1i,
-          styles: styles$1u
+          template: template$1j,
+          styles: styles$1v
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19664,7 +19713,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
    */
   const StepperOrientation = Orientation;
 
-  const template$1h = (context, definition) => html `
+  const template$1i = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -19811,15 +19860,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   ], AnchorStep.prototype, "tabIndex", void 0);
   const nimbleAnchorStep = AnchorStep.compose({
       baseName: 'anchor-step',
-      template: template$1h,
-      styles: styles$1v,
+      template: template$1i,
+      styles: styles$1w,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1t = css `
+  const styles$1u = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19936,7 +19985,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$1g = (context, definition) => html `
+  const template$1h = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -19988,15 +20037,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$1g,
-      styles: styles$1t,
+      template: template$1h,
+      styles: styles$1u,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1s = css `
+  const styles$1t = css `
     ${display$2('flex')}
 
     :host {
@@ -20036,12 +20085,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$1r = css `
-    ${styles$1A}
+  const styles$1s = css `
+    ${styles$1B}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$1f = (context, definition) => html `
+  const template$1g = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -20132,8 +20181,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$1f,
-      styles: styles$1r,
+      template: template$1g,
+      styles: styles$1s,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20167,7 +20216,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   registerIconSvg('icon-arrow-expander-right', IconArrowExpanderRight);
   const iconArrowExpanderRightTag = 'nimble-icon-arrow-expander-right';
 
-  const template$1e = (context, definition) => html `
+  const template$1f = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -20468,15 +20517,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$1e,
-      styles: styles$1s,
+      template: template$1f,
+      styles: styles$1t,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$1q = css `
+  const styles$1r = css `
     ${display$2('block')}
 
     :host {
@@ -20581,7 +20630,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$1d = (context, definition) => html `
+  const template$1e = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -20718,8 +20767,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   // 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$1d,
-      styles: styles$1q,
+      template: template$1e,
+      styles: styles$1r,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20735,7 +20784,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       zIndex1000: '1000'
   };
 
-  const styles$1p = css `
+  const styles$1q = css `
     ${display$2('block')}
 
     :host {
@@ -20766,14 +20815,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$1p
+      styles: styles$1q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$1o = css `
+  const styles$1p = css `
     ${display$2('flex')}
 
     :host {
@@ -20925,7 +20974,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       information: 'information'
   };
 
-  const template$1c = html `
+  const template$1d = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -21043,8 +21092,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$1c,
-      styles: styles$1o
+      template: template$1d,
+      styles: styles$1p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -21085,7 +21134,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  const styles$1n = css `
+  const styles$1o = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21189,11 +21238,11 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$1n
+      styles: styles$1o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$1m = css `
+  const styles$1n = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -21290,14 +21339,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$1m,
+      styles: styles$1n,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$1l = css `
+  const styles$1m = css `
     ${display$2('flex')}
 
     :host {
@@ -21321,7 +21370,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$1b = html `
+  const template$1c = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -21336,12 +21385,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$1b,
-      styles: styles$1l
+      template: template$1c,
+      styles: styles$1m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$1k = css `
+  const styles$1l = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21499,7 +21548,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$1k,
+      styles: styles$1l,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21507,7 +21556,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   const cardButtonTag = 'nimble-card-button';
 
-  const styles$1j = css `
+  const styles$1k = css `
     .error-icon {
         display: none;
     }
@@ -21541,9 +21590,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$1i = css `
+  const styles$1j = css `
     ${display$2('inline-grid')}
-    ${styles$1j}
+    ${styles$1k}
 
     :host {
         font: ${bodyFont};
@@ -21683,7 +21732,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$1a = (_context, definition) => html `
+  const template$1b = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -21780,8 +21829,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$1a,
-      styles: styles$1i,
+      template: template$1b,
+      styles: styles$1j,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
@@ -21793,7 +21842,7 @@ so this becomes the fallback color for the slot */ ''}
       block: 'block'
   };
 
-  const styles$1h = css `
+  const styles$1i = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21854,7 +21903,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$19 = (context, definition) => html `
+  const template$1a = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <span
         class="content"
@@ -21940,8 +21989,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Chip, StartEnd);
   const nimbleChip = Chip.compose({
       baseName: 'chip',
-      template: template$19,
-      styles: styles$1h,
+      template: template$1a,
+      styles: styles$1i,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21949,8 +21998,8 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
   const chipTag = 'nimble-chip';
 
-  const styles$1g = css `
-    ${styles$1A}
+  const styles$1h = css `
+    ${styles$1B}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -21997,7 +22046,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$18 = (context, definition) => html `
+  const template$19 = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -22092,8 +22141,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$18,
-      styles: styles$1g,
+      template: template$19,
+      styles: styles$1h,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -22123,7 +22172,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$1f = css `
+  const styles$1g = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -22413,7 +22462,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$1e = css `
+  const styles$1f = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -22440,10 +22489,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$1d = css `
+  const styles$1e = css `
+    ${styles$1g}
+    ${styles$1k}
     ${styles$1f}
-    ${styles$1j}
-    ${styles$1e}
 
     :host {
         field-sizing: fixed;
@@ -22571,7 +22620,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$17 = (context, definition) => html `
+  const template$18 = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -23346,8 +23395,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$17,
-      styles: styles$1d,
+      template: template$18,
+      styles: styles$1e,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -23391,7 +23440,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$1c = css `
+  const styles$1d = css `
     ${display$2('grid')}
 
     dialog {
@@ -23484,7 +23533,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$16 = html `
+  const template$17 = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -23632,13 +23681,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$16,
-      styles: styles$1c,
+      template: template$17,
+      styles: styles$1d,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$1b = css `
+  const styles$1c = css `
     ${display$2('block')}
 
     :host {
@@ -23781,7 +23830,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$15 = html `
+  const template$16 = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -23923,8 +23972,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$15,
-      styles: styles$1b
+      template: template$16,
+      styles: styles$1c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -26764,7 +26813,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$1a = css `
+  const styles$1b = css `
     ${display$2('none')}
 `;
 
@@ -26837,7 +26886,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$1a
+      styles: styles$1b
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27004,13 +27053,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$1a
+      styles: styles$1b
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$19 = css `
+  const styles$1a = css `
     ${display$2('flex')}
 
     :host {
@@ -27086,7 +27135,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$14 = (context, definition) => html `
+  const template$15 = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -27188,13 +27237,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$14,
-      styles: styles$19
+      template: template$15,
+      styles: styles$1a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$18 = css `
+  const styles$19 = css `
     ${display$2('flex')}
 
     :host {
@@ -27256,7 +27305,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$13 = html `
+  const template$14 = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -27398,8 +27447,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$13,
-      styles: styles$18
+      template: template$14,
+      styles: styles$19
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27426,9 +27475,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$12 = html `<template slot="mapping"></template>`;
+  const template$13 = html `<template slot="mapping"></template>`;
 
-  const styles$17 = css `
+  const styles$18 = css `
     ${display$2('none')}
 `;
 
@@ -27444,8 +27493,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$12,
-      styles: styles$17
+      template: template$13,
+      styles: styles$18
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -27515,8 +27564,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$12,
-      styles: styles$17
+      template: template$13,
+      styles: styles$18
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -27539,8 +27588,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$12,
-      styles: styles$17
+      template: template$13,
+      styles: styles$18
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -27556,8 +27605,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$12,
-      styles: styles$17
+      template: template$13,
+      styles: styles$18
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -27859,7 +27908,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$11 = () => html `
+  const template$12 = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -27876,7 +27925,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$16 = css `
+  const styles$17 = css `
     ${display$2('grid')}
 
     :host {
@@ -27947,8 +27996,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$11,
-      styles: styles$16
+      template: template$12,
+      styles: styles$17
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   const menuTag = 'nimble-menu';
@@ -27965,7 +28014,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$15 = css `
+  const styles$16 = css `
     ${display$2('inline-block')}
 
     :host {
@@ -27983,7 +28032,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$10 = html `
+  const template$11 = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -28233,8 +28282,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$10,
-      styles: styles$15,
+      template: template$11,
+      styles: styles$16,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -28242,7 +28291,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$14 = css `
+  const styles$15 = css `
     ${display$2('grid')}
 
     :host {
@@ -28339,7 +28388,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$14,
+      styles: styles$15,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -28355,10 +28404,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$13 = css `
+  const styles$14 = css `
     ${display$2('inline-block')}
-    ${styles$1j}
-    ${styles$1e}
+    ${styles$1k}
+    ${styles$1f}
 
     :host {
         font: ${bodyFont};
@@ -28589,7 +28638,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$$ = (context, definition) => html `
+  const template$10 = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -28743,8 +28792,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$$,
-      styles: styles$13,
+      template: template$10,
+      styles: styles$14,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -28787,7 +28836,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$12 = css `
+  const styles$13 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -28887,15 +28936,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$12,
+      styles: styles$13,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$11 = css `
+  const styles$12 = css `
     ${display$2('inline-block')}
-    ${styles$1j}
-    ${styles$1e}
+    ${styles$1k}
+    ${styles$1f}
 
     .positioning-region {
         display: flex;
@@ -28934,7 +28983,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$_ = html `
+  const template$$ = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -28974,8 +29023,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$_,
-      styles: styles$11,
+      template: template$$,
+      styles: styles$12,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -48741,7 +48790,7 @@ img.ProseMirror-separator {
   //#region src/index.ts
   var src_default$7 = HardBreak;
 
-  const styles$10 = css `
+  const styles$11 = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -48778,7 +48827,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$10
+      styles: styles$11
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -48807,8 +48856,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$$ = css `
-    ${styles$1f}
+  const styles$10 = css `
+    ${styles$1g}
 
     :host {
         height: auto;
@@ -48826,7 +48875,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$Z = html `
+  const template$_ = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -49114,15 +49163,15 @@ img.ProseMirror-separator {
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$Z,
-      styles: styles$$
+      template: template$_,
+      styles: styles$10
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$Y = html `
+  const template$Z = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -49224,9 +49273,9 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$_ = css `
+  const styles$$ = css `
     ${display$2('inline-flex')}
-    ${styles$1j}
+    ${styles$1k}
 
     :host {
         font: ${bodyFont};
@@ -52306,6 +52355,19 @@ img.ProseMirror-separator {
   const QUOTE_TEST_RE = /['"]/;
   const QUOTE_RE = /['"]/g;
   const APOSTROPHE$1 = '\u2019'; /* ’ */
+  // Caps memory on malicious input
+  const MAX_OPENERS = 1000;
+
+  function truncateStack (stack, heads, length) {
+    while (stack.length > length) {
+      const item = stack.pop();
+      if (item.isSingleQuote) {
+        heads.single = item.prevSameQuoteIdx;
+      } else {
+        heads.double = item.prevSameQuoteIdx;
+      }
+    }
+  }
 
   function addReplacement (replacements, tokenIdx, pos, ch) {
     if (!replacements[tokenIdx]) {
@@ -52335,6 +52397,8 @@ img.ProseMirror-separator {
     let j;
 
     const stack = [];
+    // stack indexes of topmost openers of each type (-1 if none)
+    const heads = { single: -1, double: -1 };
     // token index -> list of replacements in the original token content
     const replacements = {};
 
@@ -52346,7 +52410,7 @@ img.ProseMirror-separator {
       for (j = stack.length - 1; j >= 0; j--) {
         if (stack[j].level <= thisLevel) { break }
       }
-      stack.length = j + 1;
+      truncateStack(stack, heads, j + 1);
 
       if (token.type !== 'text') { continue }
 
@@ -52450,39 +52514,45 @@ img.ProseMirror-separator {
         }
 
         if (canClose) {
-          // this could be a closing quote, rewind the stack to get a match
-          for (j = stack.length - 1; j >= 0; j--) {
-            let item = stack[j];
-            if (stack[j].level < thisLevel) { break }
-            if (item.single === isSingle && stack[j].level === thisLevel) {
-              item = stack[j];
-
-              let openQuote;
-              let closeQuote;
-              if (isSingle) {
-                openQuote = state.md.options.quotes[2];
-                closeQuote = state.md.options.quotes[3];
-              } else {
-                openQuote = state.md.options.quotes[0];
-                closeQuote = state.md.options.quotes[1];
-              }
+          // Stack levels never decrease, so an opener of this type below
+          // the current level means there is no match
+          j = isSingle ? heads.single : heads.double;
+          if (j >= 0 && stack[j].level === thisLevel) {
+            const item = stack[j];
+
+            let openQuote;
+            let closeQuote;
+            if (isSingle) {
+              openQuote = state.md.options.quotes[2];
+              closeQuote = state.md.options.quotes[3];
+            } else {
+              openQuote = state.md.options.quotes[0];
+              closeQuote = state.md.options.quotes[1];
+            }
 
-              addReplacement(replacements, i, t.index, closeQuote);
-              addReplacement(replacements, item.token, item.pos, openQuote);
+            addReplacement(replacements, i, t.index, closeQuote);
+            addReplacement(replacements, item.tokenIdx, item.contentPos, openQuote);
 
-              stack.length = j;
-              continue OUTER
-            }
+            truncateStack(stack, heads, j);
+            continue OUTER
           }
         }
 
         if (canOpen) {
+          if (stack.length >= MAX_OPENERS) { return }
           stack.push({
-            token: i,
-            pos: t.index,
-            single: isSingle,
-            level: thisLevel
+            tokenIdx: i,
+            contentPos: t.index,
+            isSingleQuote: isSingle,
+            level: thisLevel,
+            // stack index of the previous opener of the same quote type, -1 if none
+            prevSameQuoteIdx: isSingle ? heads.single : heads.double
           });
+          if (isSingle) {
+            heads.single = stack.length - 1;
+          } else {
+            heads.double = stack.length - 1;
+          }
         } else if (canClose && isSingle) {
           addReplacement(replacements, i, t.index, APOSTROPHE$1);
         }
@@ -68431,8 +68501,8 @@ img.ProseMirror-separator {
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$Y,
-      styles: styles$_,
+      template: template$Z,
+      styles: styles$$,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -68441,13 +68511,13 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$X = html `
+  const template$Y = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$Z = css `
+  const styles$_ = css `
     ${display$2('flex')}
 
     :host {
@@ -68560,17 +68630,17 @@ img.ProseMirror-separator {
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$X,
-      styles: styles$Z
+      template: template$Y,
+      styles: styles$_
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$Y = css `
+  const styles$Z = css `
+    ${styles$1g}
+    ${styles$1k}
     ${styles$1f}
-    ${styles$1j}
-    ${styles$1e}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -68733,7 +68803,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$X = css `
+  const styles$Y = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -68903,7 +68973,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const template$W = html `
+  const template$X = html `
     <template role="progressbar">
         ${''
 /**
@@ -68950,8 +69020,8 @@ img.ProseMirror-separator {
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$W,
-      styles: styles$X
+      template: template$X,
+      styles: styles$Y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -68967,7 +69037,7 @@ img.ProseMirror-separator {
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$V = (context, definition) => html `
+  const template$W = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -70179,8 +70249,8 @@ img.ProseMirror-separator {
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$V,
-      styles: styles$Y,
+      template: template$W,
+      styles: styles$Z,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -70193,8 +70263,8 @@ img.ProseMirror-separator {
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$W = css `
-    ${styles$1w}
+  const styles$X = css `
+    ${styles$1x}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -70205,7 +70275,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$U = (context, definition) => html `
+  const template$V = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -70327,15 +70397,15 @@ img.ProseMirror-separator {
   ], Step.prototype, "tabIndex", void 0);
   const nimbleStep = Step.compose({
       baseName: 'step',
-      template: template$U,
-      styles: styles$W,
+      template: template$V,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
-  const styles$V = css `
+  const styles$W = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -70406,7 +70476,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$T = html `
+  const template$U = html `
     ${when(x => x.showScrollButtons, html `
         <${buttonTag}
             content-hidden
@@ -70551,12 +70621,12 @@ img.ProseMirror-separator {
   ], Stepper.prototype, "steps", void 0);
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
-      template: template$T,
-      styles: styles$V
+      template: template$U,
+      styles: styles$W
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
 
-  const styles$U = css `
+  const styles$V = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -70786,7 +70856,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const template$S = html `
+  const template$T = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -70830,12 +70900,12 @@ img.ProseMirror-separator {
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$S,
-      styles: styles$U
+      template: template$T,
+      styles: styles$V
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$T = css `
+  const styles$U = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -70946,11 +71016,11 @@ img.ProseMirror-separator {
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$T
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$S = css `
+  const styles$T = css `
     ${display$2('block')}
 
     :host {
@@ -70969,7 +71039,7 @@ img.ProseMirror-separator {
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -74712,7 +74782,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$R = css `
+  const styles$S = css `
     ${display$2('flex')}
 
     :host {
@@ -74950,7 +75020,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display$2('flex')}
 
     :host {
@@ -74983,7 +75053,7 @@ focus outline in that case.
     }
 `;
 
-  const template$R = html `
+  const template$S = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -75069,13 +75139,13 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$R,
-      styles: styles$Q
+      template: template$S,
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$P = css `
+  const styles$Q = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -75100,9 +75170,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$O = css `
+  const styles$P = css `
     ${display$2('flex')}
-    ${styles$P}
+    ${styles$Q}
 
     :host {
         width: fit-content;
@@ -75348,7 +75418,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$N = css `
+  const styles$O = css `
     ${display$2('flex')}
 
     :host {
@@ -75393,7 +75463,7 @@ focus outline in that case.
     }
 `;
 
-  const template$Q = html `
+  const template$R = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -75490,8 +75560,8 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$Q,
-      styles: styles$N
+      template: template$R,
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -75527,7 +75597,7 @@ focus outline in that case.
         `)}
     </${tableCellTag}>
 `;
-  const template$P = html `
+  const template$Q = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -75903,15 +75973,15 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$P,
-      styles: styles$O
+      template: template$Q,
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$M = css `
+  const styles$N = css `
     ${display$2('grid')}
-    ${styles$P}
+    ${styles$Q}
 
     :host {
         align-items: center;
@@ -76084,7 +76154,7 @@ focus outline in that case.
             }
         `));
 
-  const template$O = html `
+  const template$P = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -76260,8 +76330,8 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$O,
-      styles: styles$M
+      template: template$P,
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -76281,7 +76351,7 @@ focus outline in that case.
         <slot name="${x => x.slot}"></slot>
     </${tableHeaderTag}>
 `;
-  const template$N = html `
+  const template$O = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -76449,8 +76519,11 @@ focus outline in that case.
     </template>
 `;
 
-  function createLazyMeasurementsView(count, flat, getItemKey) {
-    const cache = new Array(count);
+  function getMeasurementKey(item) {
+    return typeof item === "object" ? item.key : item;
+  }
+  function createLazyMeasurementsView(cache, flat) {
+    const count = cache.length;
     return new Proxy(cache, {
       get(target, prop, receiver) {
         if (typeof prop === "string") {
@@ -76459,11 +76532,11 @@ focus outline in that case.
             const i = +prop;
             if (Number.isInteger(i) && i >= 0 && i < count) {
               let v = target[i];
-              if (!v) {
+              if (typeof v !== "object") {
                 const s = flat[i * 2];
                 v = target[i] = {
                   index: i,
-                  key: getItemKey(i),
+                  key: v,
                   start: s,
                   size: flat[i * 2 + 1],
                   end: s + flat[i * 2 + 1],
@@ -76635,7 +76708,7 @@ focus outline in that case.
     let offset = 0;
     const fallback = registerScrollendEvent ? null : debounce(
       targetWindow,
-      () => cb(offset, false),
+      () => cb(readOffset(element), false),
       instance.options.isScrollingResetDelay
     );
     const createHandler = (isScrolling) => () => {
@@ -76697,6 +76770,27 @@ focus outline in that case.
     });
   };
   const elementScroll = scrollWithAdjustments;
+  function isAppendWithTrim(prevCount, nextCount, getPreviousKey, getNextKey) {
+    if (nextCount === 0) return false;
+    const firstKey = getNextKey(0);
+    const removedKeys = /* @__PURE__ */ new Set();
+    let removedCount = 0;
+    while (removedCount < prevCount) {
+      const key = getPreviousKey(removedCount);
+      if (key === firstKey) break;
+      removedKeys.add(key);
+      removedCount++;
+    }
+    const retainedCount = prevCount - removedCount;
+    if (retainedCount === 0 || retainedCount >= nextCount) return false;
+    for (let i = 0; i < retainedCount; i++) {
+      if (getNextKey(i) !== getPreviousKey(removedCount + i)) return false;
+    }
+    for (let i = retainedCount; i < nextCount; i++) {
+      if (removedKeys.has(getNextKey(i))) return false;
+    }
+    return true;
+  }
   let Virtualizer$1 = class Virtualizer {
     constructor(opts) {
       this.unsubs = [];
@@ -76705,7 +76799,7 @@ focus outline in that case.
       this.isScrolling = false;
       this.scrollState = null;
       this.measurementsCache = [];
-      this._flatMeasurements = null;
+      this._singleLaneMeasurements = null;
       this.itemSizeCache = /* @__PURE__ */ new Map();
       this.itemSizeCacheVersion = 0;
       this.laneAssignments = /* @__PURE__ */ new Map();
@@ -76723,6 +76817,7 @@ focus outline in that case.
       this._iosJustTouchEnded = false;
       this._iosTouchEndTimerId = null;
       this._intendedScrollOffset = null;
+      this._clampedAdjustment = null;
       this.elementsCache = /* @__PURE__ */ new Map();
       this.now = () => {
         var _a, _b, _c;
@@ -76782,7 +76877,7 @@ focus outline in that case.
       })();
       this.range = null;
       this.setOptions = (opts2) => {
-        var _a, _b;
+        var _a;
         const merged = {
           debug: false,
           initialOffset: 0,
@@ -76826,8 +76921,10 @@ focus outline in that case.
           const prevCount = prevOptions.count;
           const nextCount = merged.count;
           const measurements = this.getMeasurements();
-          const prevFirstKey = prevCount > 0 ? ((_a = measurements[0]) == null ? void 0 : _a.key) ?? prevOptions.getItemKey(0) : null;
-          const prevLastKey = prevCount > 0 ? ((_b = measurements[prevCount - 1]) == null ? void 0 : _b.key) ?? prevOptions.getItemKey(prevCount - 1) : null;
+          const previousItems = ((_a = this._singleLaneMeasurements) == null ? void 0 : _a.items) ?? measurements;
+          const getPreviousKey = (index) => getMeasurementKey(previousItems[index]);
+          const prevFirstKey = prevCount > 0 ? getPreviousKey(0) : null;
+          const prevLastKey = prevCount > 0 ? getPreviousKey(prevCount - 1) : null;
           const didCountChange = nextCount !== prevCount;
           const didEdgeKeysChange = didCountChange || prevCount > 0 && nextCount > 0 && (merged.getItemKey(0) !== prevFirstKey || merged.getItemKey(nextCount - 1) !== prevLastKey);
           if (didEdgeKeysChange) {
@@ -76837,8 +76934,15 @@ focus outline in that case.
               anchor = [item.key, this.getScrollOffset() - item.start];
             }
             const behavior = merged.followOnAppend === true ? "auto" : merged.followOnAppend || null;
-            if (behavior && nextCount > prevCount && this.isAtEnd(prevOptions.scrollEndThreshold) && (prevCount === 0 || merged.getItemKey(nextCount - 1) !== prevLastKey)) {
-              followOnAppend = behavior;
+            if (behavior && nextCount > 0 && this.isAtEnd(prevOptions.scrollEndThreshold) && (prevCount === 0 || merged.getItemKey(nextCount - 1) !== prevLastKey)) {
+              if (nextCount > prevCount || isAppendWithTrim(
+                prevCount,
+                nextCount,
+                getPreviousKey,
+                merged.getItemKey
+              )) {
+                followOnAppend = behavior;
+              }
             }
           }
         }
@@ -76861,7 +76965,7 @@ focus outline in that case.
             const anchorItem = newMeasurements[idx];
             if (anchorItem) {
               const newOffset = Math.max(0, anchorItem.start + anchorOffset);
-              if (newOffset !== this.scrollOffset) {
+              if (!followOnAppend && newOffset !== this.scrollOffset) {
                 anchorDelta = newOffset - this.scrollOffset;
                 this.scrollOffset = newOffset;
                 anchorResolved = true;
@@ -76918,6 +77022,7 @@ focus outline in that case.
         this._iosDeferredAdjustment = 0;
         this._iosTouching = false;
         this._iosJustTouchEnded = false;
+        this._clampedAdjustment = null;
         this.scrollElement = null;
         this.targetWindow = null;
       };
@@ -76927,7 +77032,7 @@ focus outline in that case.
         };
       };
       this._willUpdate = () => {
-        var _a;
+        var _a, _b;
         const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
         if (this.scrollElement !== scrollElement) {
           this.cleanup();
@@ -76959,6 +77064,9 @@ focus outline in that case.
                 offset = this._intendedScrollOffset;
               }
               this._intendedScrollOffset = null;
+              if (this._clampedAdjustment !== null && Math.abs(offset - this._clampedAdjustment.maxAtWrite) >= 1.5) {
+                this._clampedAdjustment = null;
+              }
               this.scrollAdjustments = 0;
               const prevOffset = this.getScrollOffset();
               this.scrollDirection = isScrolling ? prevOffset === offset ? this.scrollDirection : prevOffset < offset ? "forward" : "backward" : null;
@@ -77026,7 +77134,11 @@ focus outline in that case.
               if (anchorDelta !== 0) {
                 this._iosDeferredAdjustment += anchorDelta;
               }
-            } else {
+            } else if (((_b = this.scrollState) == null ? void 0 : _b.behavior) === "smooth" && !approxEqual(
+              this.getScrollOffset() - anchorDelta,
+              this.scrollState.lastTargetOffset
+            )) ;
+            else {
               this._scrollToOffset(this.getScrollOffset(), {
                 adjustments: void 0,
                 behavior: void 0
@@ -77037,6 +77149,21 @@ focus outline in that case.
             this.scrollToEnd({ behavior: followOnAppend });
           }
         }
+        this._retryClampedAdjustment();
+      };
+      this._retryClampedAdjustment = () => {
+        if (this._clampedAdjustment === null || !this.scrollElement || !this.options.enabled) {
+          return;
+        }
+        const { target, maxAtWrite } = this._clampedAdjustment;
+        const max = this.getMaxScrollOffset();
+        if (max > maxAtWrite + 0.5) {
+          this._clampedAdjustment = target > max + 0.5 ? { target, maxAtWrite: max } : null;
+          this._scrollToOffset(target, {
+            adjustments: void 0,
+            behavior: void 0
+          });
+        }
       };
       this._flushIosDeferredIfReady = () => {
         if (this._iosDeferredAdjustment === 0) return;
@@ -77120,9 +77247,11 @@ focus outline in that case.
           laneAssignmentMode,
           gap
         }, _itemSizeCacheVersion) => {
+          var _a;
           const itemSizeCache = this.itemSizeCache;
           if (!enabled) {
             this.measurementsCache = [];
+            this._singleLaneMeasurements = null;
             this.itemSizeCache.clear();
             this.laneAssignments.clear();
             return [];
@@ -77138,6 +77267,7 @@ focus outline in that case.
             this.lanesChangedFlag = false;
             this.lanesSettling = true;
             this.measurementsCache = [];
+            this._singleLaneMeasurements = null;
             this.itemSizeCache.clear();
             this.laneAssignments.clear();
             this.pendingMin = null;
@@ -77155,13 +77285,13 @@ focus outline in that case.
           }
           if (lanes === 1) {
             const need = count * 2;
-            let flat = this._flatMeasurements;
+            let flat = (_a = this._singleLaneMeasurements) == null ? void 0 : _a.flat;
             if (!flat || flat.length < need) {
               const next = new Float64Array(need);
               if (flat && min > 0) next.set(flat.subarray(0, min * 2));
               flat = next;
-              this._flatMeasurements = flat;
             }
+            const items = min === 0 ? new Array(count) : this._singleLaneMeasurements.items.slice();
             let runningStart;
             if (min === 0) {
               runningStart = paddingStart + scrollMargin;
@@ -77171,13 +77301,15 @@ focus outline in that case.
             }
             for (let i = min; i < count; i++) {
               const key = getItemKey(i);
+              items[i] = key;
               const measuredSize = itemSizeCache.get(key);
               const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
               flat[i * 2] = runningStart;
               flat[i * 2 + 1] = size;
               runningStart += size + gap;
             }
-            const view = createLazyMeasurementsView(count, flat, getItemKey);
+            this._singleLaneMeasurements = { flat, items };
+            const view = createLazyMeasurementsView(items, flat);
             this.measurementsCache = view;
             return view;
           }
@@ -77272,7 +77404,7 @@ focus outline in that case.
             lanes,
             // Pass the typed array so binary search + forward-walk can read
             // start/end directly from Float64Array, skipping the Proxy traps.
-            lanes === 1 && this._flatMeasurements != null ? this._flatMeasurements : null
+            lanes === 1 && this._singleLaneMeasurements !== null ? this._singleLaneMeasurements.flat : null
           );
           return this.range;
         },
@@ -77369,13 +77501,13 @@ focus outline in that case.
         }
       };
       this.resizeItem = (index, size) => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!this.isIndexInRange(index)) return;
         let cachedSize;
         let itemStart;
         let key;
-        const flat = this._flatMeasurements;
-        if (this.options.lanes === 1 && flat !== null) {
+        const flat = (_a = this._singleLaneMeasurements) == null ? void 0 : _a.flat;
+        if (this.options.lanes === 1 && flat != null) {
           key = this.options.getItemKey(index);
           itemStart = flat[index * 2];
           cachedSize = flat[index * 2 + 1];
@@ -77389,7 +77521,7 @@ focus outline in that case.
         const itemSize = this.itemSizeCache.get(key) ?? cachedSize;
         const delta = size - itemSize;
         if (delta !== 0) {
-          const wasAtEnd = this.options.anchorTo === "end" && ((_a = this.scrollState) == null ? void 0 : _a.behavior) !== "smooth" && this.getVirtualDistanceFromEnd() <= this.options.scrollEndThreshold;
+          const wasAtEnd = this.options.anchorTo === "end" && ((_b = this.scrollState) == null ? void 0 : _b.behavior) !== "smooth" && this.getVirtualDistanceFromEnd() <= this.options.scrollEndThreshold;
           const prevTotalSize = wasAtEnd ? this.getTotalSize() : 0;
           const scrollOffsetWithAdj = this.getScrollOffset() + this.scrollAdjustments;
           const isFirstMeasure = !this.itemSizeCache.has(key);
@@ -77408,7 +77540,7 @@ focus outline in that case.
             // scrolling up" cascade.
             itemStart + itemSize <= scrollOffsetWithAdj && this.scrollDirection !== "backward"
           );
-          const shouldAdjustScroll = ((_b = this.scrollState) == null ? void 0 : _b.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(
+          const shouldAdjustScroll = ((_c = this.scrollState) == null ? void 0 : _c.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(
             // The callback expects a VirtualItem; build one lazily only
             // when the consumer actually supplied a custom predicate.
             this.measurementsCache[index] ?? {
@@ -77436,6 +77568,7 @@ focus outline in that case.
             adjustedSync = this.applyScrollAdjustment(delta);
           }
           this.notify(adjustedSync);
+          this._retryClampedAdjustment();
         }
       };
       this.getVirtualItems = memo(
@@ -77455,11 +77588,12 @@ focus outline in that case.
         }
       );
       this.getVirtualItemForOffset = (offset) => {
+        var _a;
         const measurements = this.getMeasurements();
         if (measurements.length === 0) {
           return void 0;
         }
-        const flat = this._flatMeasurements;
+        const flat = (_a = this._singleLaneMeasurements) == null ? void 0 : _a.flat;
         const useFlat = this.options.lanes === 1 && flat != null;
         const idx = findNearestBinarySearch(
           0,
@@ -77594,18 +77728,18 @@ focus outline in that case.
         });
       };
       this.getTotalSize = () => {
-        var _a;
+        var _a, _b;
         const measurements = this.getMeasurements();
         let end;
         if (measurements.length === 0) {
           end = this.options.paddingStart;
         } else if (this.options.lanes === 1) {
           const lastIdx = measurements.length - 1;
-          const flat = this._flatMeasurements;
+          const flat = (_a = this._singleLaneMeasurements) == null ? void 0 : _a.flat;
           if (flat != null) {
             end = flat[lastIdx * 2] + flat[lastIdx * 2 + 1];
           } else {
-            end = ((_a = measurements[lastIdx]) == null ? void 0 : _a.end) ?? 0;
+            end = ((_b = measurements[lastIdx]) == null ? void 0 : _b.end) ?? 0;
           }
         } else {
           const endByLane = Array(this.options.lanes).fill(null);
@@ -77671,6 +77805,10 @@ focus outline in that case.
         this._iosDeferredAdjustment += delta;
         return false;
       } else {
+        const target = this.getScrollOffset() + this.scrollAdjustments + delta;
+        const el = this.scrollElement;
+        const maxAtWrite = el !== null && ("scrollHeight" in el || "document" in el) ? this.getMaxScrollOffset() : null;
+        this._clampedAdjustment = maxAtWrite !== null && target > maxAtWrite + 0.5 ? { target, maxAtWrite } : null;
         this._scrollToOffset(this.getScrollOffset(), {
           adjustments: this.scrollAdjustments += delta,
           behavior
@@ -81085,12 +81223,12 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$N,
-      styles: styles$R
+      template: template$O,
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$L = css `
+  const styles$M = css `
     ${display$2('contents')}
 
     .header-content {
@@ -81102,7 +81240,7 @@ focus outline in that case.
 
   // Avoiding a wrapping <template> and be careful about starting and ending whitspace
   // so the template can be composed into other column header templates
-  const template$M = html `<span
+  const template$N = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -81167,7 +81305,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$K = css `
+  const styles$L = css `
     ${display$2('flex')}
 
     :host {
@@ -81198,7 +81336,7 @@ focus outline in that case.
     }
 `;
 
-  const template$L = html `
+  const template$M = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -81290,8 +81428,8 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$L,
-      styles: styles$K
+      template: template$M,
+      styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -81368,7 +81506,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$K = html `
+  const template$L = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -81377,7 +81515,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$J = css `
+  const styles$K = css `
     ${display$2('flex')}
 
     span {
@@ -81401,8 +81539,8 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$K,
-      styles: styles$J
+      template: template$L,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -81646,8 +81784,8 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$M,
-      styles: styles$L
+      template: template$N,
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -81699,15 +81837,15 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$K,
-      styles: styles$J
+      template: template$L,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  const template$J = html `
+  const template$K = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -81723,7 +81861,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$I = css `
+  const styles$J = css `
     ${display$2('flex')}
 
     :host {
@@ -81825,8 +81963,8 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$J,
-      styles: styles$I
+      template: template$K,
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -82084,8 +82222,8 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$M,
-      styles: styles$L
+      template: template$N,
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82101,8 +82239,8 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$J,
-      styles: styles$I
+      template: template$K,
+      styles: styles$J
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82203,8 +82341,8 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$K,
-      styles: styles$J
+      template: template$L,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82256,8 +82394,8 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$M,
-      styles: styles$L
+      template: template$N,
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82365,15 +82503,15 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$H = css `
-    ${styles$L}
+  const styles$I = css `
+    ${styles$M}
 
     slot[name='mapping'] {
         display: none;
     }
 `;
 
-  const template$I = html `${template$M}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$J = html `${template$N}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
@@ -82476,7 +82614,7 @@ focus outline in that case.
       }
   }
 
-  const styles$G = css `
+  const styles$H = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -82500,7 +82638,7 @@ focus outline in that case.
     }
 `;
 
-  const template$H = html `
+  const template$I = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -82644,15 +82782,15 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$H,
-      styles: styles$G
+      template: template$I,
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$F = css `
+  const styles$G = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -82676,7 +82814,7 @@ focus outline in that case.
     }
 `;
 
-  const template$G = html `
+  const template$H = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -82763,8 +82901,8 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$G,
-      styles: styles$F
+      template: template$H,
+      styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -82847,23 +82985,23 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$I,
-      styles: styles$H
+      template: template$J,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$F = html `
+  const template$G = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$M}</template
+        >${template$N}</template
     >
 `;
 
   /** @internal */
   const cellViewMenuSlotName = 'menu-button-menu';
 
-  const template$E = html `
+  const template$F = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -82882,7 +83020,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$E = css `
+  const styles$F = css `
     :host {
         align-self: center;
         width: 100%;
@@ -82957,8 +83095,8 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$E,
-      styles: styles$E
+      template: template$F,
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -83013,8 +83151,8 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$F,
-      styles: styles$L
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83022,7 +83160,7 @@ focus outline in that case.
 
   // Avoiding a wrapping <template> and be careful about starting and ending whitespace
   // so the template can be composed into other column header templates
-  const template$D = html `<span
+  const template$E = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -83041,8 +83179,8 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$K,
-      styles: styles$J
+      template: template$L,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83063,8 +83201,8 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$J,
-      styles: styles$I
+      template: template$K,
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -83604,8 +83742,8 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$D,
-      styles: styles$L
+      template: template$E,
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83623,8 +83761,8 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$J,
-      styles: styles$I
+      template: template$K,
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -83678,15 +83816,15 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$M,
-      styles: styles$L
+      template: template$N,
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$D = css `
-    ${styles$1s}
+  const styles$E = css `
+    ${styles$1t}
 
     .tabpanel {
         overflow: auto;
@@ -83767,12 +83905,12 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$1e,
-      styles: styles$D
+      template: template$1f,
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$C = css `
+  const styles$D = css `
     ${display$2('flex')}
 
     :host {
@@ -83804,7 +83942,7 @@ focus outline in that case.
     }
 `;
 
-  const template$C = (context, definition) => html `
+  const template$D = (context, definition) => html `
     <template slot="end">
         ${when(x => x.defaultSlottedElements.length > 0, html `
             <div class="separator"></div>
@@ -83836,8 +83974,8 @@ focus outline in that case.
   ], TabsToolbar.prototype, "defaultSlottedElements", void 0);
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$C,
-      styles: styles$C
+      template: template$D,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -83847,10 +83985,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$B = css `
+  const styles$C = css `
     ${display$2('inline-flex')}
-    ${styles$1j}
-    ${styles$1e}
+    ${styles$1k}
+    ${styles$1f}
 
     :host {
         font: ${bodyFont};
@@ -84045,7 +84183,7 @@ focus outline in that case.
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
 `);
-  const template$B = () => html `
+  const template$C = () => html `
     ${labelTemplate$1}
     <div class="container">
         <textarea
@@ -84193,8 +84331,8 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$B,
-      styles: styles$B,
+      template: template$C,
+      styles: styles$C,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -84211,10 +84349,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$A = css `
+  const styles$B = css `
     ${display$2('inline-block')}
-    ${styles$1j}
-    ${styles$1e}
+    ${styles$1k}
+    ${styles$1f}
 
     :host {
         font: ${bodyFont};
@@ -84491,7 +84629,7 @@ focus outline in that case.
    * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
    * @public
    */
-  const template$A = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <template
         class="
             ${x => (x.readOnly ? 'readonly' : '')}
@@ -84580,8 +84718,8 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: template$A,
-      styles: styles$A,
+      template: template$B,
+      styles: styles$B,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -84598,7 +84736,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$z = css `
+  const styles$A = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -84684,7 +84822,7 @@ focus outline in that case.
             }
         `));
 
-  const template$z = html `
+  const template$A = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -84736,8 +84874,8 @@ focus outline in that case.
   const nimbleTooltip = Tooltip.compose({
       baseName: 'tooltip',
       baseClass: Tooltip$1,
-      template: template$z,
-      styles: styles$z
+      template: template$A,
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
   const tooltipTag = 'nimble-tooltip';
@@ -84826,7 +84964,7 @@ focus outline in that case.
       }
   }
 
-  const styles$y = css `
+  const styles$z = css `
     ${display$2('block')}
 
     :host {
@@ -85043,12 +85181,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$y,
+      styles: styles$z,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$x = css `
+  const styles$y = css `
     ${display$2('flex')}
 
     :host {
@@ -85062,7 +85200,7 @@ focus outline in that case.
     }
 `;
 
-  const template$y = html `
+  const template$z = html `
     <template
         role="tree"
         ${ref('treeView')}
@@ -85158,8 +85296,8 @@ focus outline in that case.
   const nimbleTreeView = TreeView.compose({
       baseName: 'tree-view',
       baseClass: TreeView$1,
-      template: template$y,
-      styles: styles$x
+      template: template$z,
+      styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -85275,9 +85413,9 @@ focus outline in that case.
   }
   const unitScaleByte = new UnitScaleByte();
 
-  const template$x = html `<template slot="unit"></template>`;
+  const template$y = html `<template slot="unit"></template>`;
 
-  const styles$w = css `
+  const styles$x = css `
     ${display$2('none')}
 `;
 
@@ -85305,8 +85443,8 @@ focus outline in that case.
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$x,
-      styles: styles$w
+      template: template$y,
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -85358,8 +85496,8 @@ focus outline in that case.
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$x,
-      styles: styles$w
+      template: template$y,
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -100403,7 +100541,7 @@ focus outline in that case.
       return new Table(reader.readAll());
   }
 
-  const template$w = html `
+  const template$x = html `
     <div class="wafer-map-container">
         <svg class="svg-root">
             <g ${ref('zoomContainer')} transform=${x => x.transform.toString()}>
@@ -100436,7 +100574,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$v = css `
+  const styles$w = css `
     ${display$2('inline-block')}
 
     :host {
@@ -103461,8 +103599,8 @@ focus outline in that case.
   ], WaferMap.prototype, "colorScale", void 0);
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
-      template: template$w,
-      styles: styles$v
+      template: template$x,
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -103474,7 +103612,7 @@ focus outline in that case.
    */
   const display$1 = (displayValue) => `${display$3(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
-  const styles$u = css `
+  const styles$v = css `
     ${display$1('flex')}
 
     :host {
@@ -103564,7 +103702,7 @@ focus outline in that case.
     }
 `;
 
-  const template$v = html `
+  const template$w = html `
 <div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
     <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
 </div>
@@ -103955,16 +104093,16 @@ focus outline in that case.
   ], ChatConversation.prototype, "slottedEndElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
-      template: template$v,
-      styles: styles$u
+      template: template$w,
+      styles: styles$v
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$t = css `
+  const styles$u = css `
     ${display$1('flex')}
-    ${styles$1j}
+    ${styles$1k}
 
     :host {
         width: 100%;
@@ -104108,7 +104246,7 @@ focus outline in that case.
     }
 `;
 
-  const template$u = html `
+  const template$v = html `
 <div class="container">
     <section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
         <slot
@@ -104360,8 +104498,8 @@ focus outline in that case.
   ], ChatInput.prototype, "slottedAttachmentsElements", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
-      template: template$u,
-      styles: styles$t,
+      template: template$v,
+      styles: styles$u,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -104379,7 +104517,7 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$s = css `
+  const styles$t = css `
     ${display$1('flex')}
 
     :host {
@@ -104453,7 +104591,7 @@ focus outline in that case.
     }
 `;
 
-  const template$t = (context, definition) => html `
+  const template$u = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -104502,12 +104640,12 @@ focus outline in that case.
   applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
-      template: template$t,
-      styles: styles$s
+      template: template$u,
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
 
-  const styles$r = css `
+  const styles$s = css `
     ${display$1('flex')}
 
     :host {
@@ -104565,7 +104703,7 @@ focus outline in that case.
     }
 `;
 
-  const template$s = (context, definition) => html `
+  const template$t = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -104605,12 +104743,12 @@ focus outline in that case.
   applyMixins(ChatMessageInbound, StartEnd);
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
-      template: template$s,
-      styles: styles$r
+      template: template$t,
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
 
-  const styles$q = css `
+  const styles$r = css `
     ${display$1('flex')}
 
     :host {
@@ -104644,7 +104782,7 @@ focus outline in that case.
     }
 `;
 
-  const template$r = () => html `
+  const template$s = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -104666,12 +104804,12 @@ focus outline in that case.
   }
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
-      template: template$r,
-      styles: styles$q
+      template: template$s,
+      styles: styles$r
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
 
-  const styles$p = css `
+  const styles$q = css `
     ${display$1('flex')}
 
     :host {
@@ -104698,7 +104836,7 @@ focus outline in that case.
     }
 `;
 
-  const template$q = () => html `
+  const template$r = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -104718,12 +104856,12 @@ focus outline in that case.
   }
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
-      template: template$q,
-      styles: styles$p
+      template: template$r,
+      styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
-  const styles$o = css `
+  const styles$p = css `
     ${display$1('flex')}
 
     :host {
@@ -104827,13 +104965,13 @@ focus outline in that case.
   <path class="nigel-chat-dark-0" d="M11.36,7.6l-.03.02c-1.12.61-2.04,1.53-2.65,2.65l-.02.03c-.1.18-.35.18-.45,0l-.02-.03c-.61-1.12-1.53-2.04-2.65-2.65l-.03-.02c-.18-.1-.18-.35,0-.45l.03-.02c1.12-.61,2.04-1.53,2.65-2.65l.02-.03c.1-.18.35-.18.45,0l.02.03c.61,1.12,1.53,2.04,2.65,2.65l.03.02c.18.1.18.35,0,.45Z"/>
 </svg>`;
 
-  const template$p = html `
+  const template$q = html `
     <div class="icon light-icon" aria-hidden="true" :innerHTML="${() => nigelChatLightData}"></div>
     <div class="icon dark-icon" aria-hidden="true" :innerHTML="${() => nigelChatDarkData}"></div>
 `;
 
-  const styles$n = css `
-    ${styles$1u}
+  const styles$o = css `
+    ${styles$1v}
 
     .dark-icon {
         display: none;
@@ -104856,15 +104994,15 @@ focus outline in that case.
   }
   const sprightIconNigelChat = IconNigelChat.compose({
       baseName: 'icon-nigel-chat',
-      template: template$p,
-      styles: styles$n
+      template: template$q,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconNigelChat());
   const iconNigelChatTag = 'spright-icon-nigel-chat';
 
-  const template$o = () => html `
+  const template$p = () => html `
     <div class="container">
         <div class="brand-icon">
             <slot name="brand-icon">
@@ -104896,8 +105034,8 @@ focus outline in that case.
   ], ChatMessageWelcome.prototype, "subtitle", void 0);
   const sprightChatMessageWelcome = ChatMessageWelcome.compose({
       baseName: 'chat-message-welcome',
-      template: template$o,
-      styles: styles$o
+      template: template$p,
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
 
@@ -104918,13 +105056,13 @@ focus outline in that case.
    */
   class IconBreakpointConditional extends Icon {
   }
-  const template$n = html `
+  const template$o = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$6}"></div>
 `;
   const sprightIconBreakpointConditional = IconBreakpointConditional.compose({
       baseName: 'icon-breakpoint-conditional',
-      template: template$n,
-      styles: styles$1u
+      template: template$o,
+      styles: styles$1v
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -104949,13 +105087,13 @@ focus outline in that case.
    */
   class IconBreakpointDisabled extends Icon {
   }
-  const template$m = html `
+  const template$n = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$5}"></div>
 `;
   const sprightIconBreakpointDisabled = IconBreakpointDisabled.compose({
       baseName: 'icon-breakpoint-disabled',
-      template: template$m,
-      styles: styles$1u
+      template: template$n,
+      styles: styles$1v
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -104979,13 +105117,13 @@ focus outline in that case.
    */
   class IconBreakpointEnabled extends Icon {
   }
-  const template$l = html `
+  const template$m = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$4}"></div>
 `;
   const sprightIconBreakpointEnabled = IconBreakpointEnabled.compose({
       baseName: 'icon-breakpoint-enabled',
-      template: template$l,
-      styles: styles$1u
+      template: template$m,
+      styles: styles$1v
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105009,13 +105147,13 @@ focus outline in that case.
    */
   class IconBreakpointExecutionPointer extends Icon {
   }
-  const template$k = html `
+  const template$l = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$3}"></div>
 `;
   const sprightIconBreakpointExecutionPointer = IconBreakpointExecutionPointer.compose({
       baseName: 'icon-breakpoint-execution-pointer',
-      template: template$k,
-      styles: styles$1u
+      template: template$l,
+      styles: styles$1v
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105043,13 +105181,13 @@ focus outline in that case.
    */
   class IconBreakpointHitDisabled extends Icon {
   }
-  const template$j = html `
+  const template$k = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$2}"></div>
 `;
   const sprightIconBreakpointHitDisabled = IconBreakpointHitDisabled.compose({
       baseName: 'icon-breakpoint-hit-disabled',
-      template: template$j,
-      styles: styles$1u
+      template: template$k,
+      styles: styles$1v
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105078,13 +105216,13 @@ focus outline in that case.
    */
   class IconBreakpointHit extends Icon {
   }
-  const template$i = html `
+  const template$j = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$1}"></div>
 `;
   const sprightIconBreakpointHit = IconBreakpointHit.compose({
       baseName: 'icon-breakpoint-hit',
-      template: template$i,
-      styles: styles$1u
+      template: template$j,
+      styles: styles$1v
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105109,21 +105247,21 @@ focus outline in that case.
    */
   class IconBreakpointHover extends Icon {
   }
-  const template$h = html `
+  const template$i = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData}"></div>
 `;
   const sprightIconBreakpointHover = IconBreakpointHover.compose({
       baseName: 'icon-breakpoint-hover',
-      template: template$h,
-      styles: styles$1u
+      template: template$i,
+      styles: styles$1v
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointHover());
   const iconBreakpointHoverTag = 'spright-icon-breakpoint-hover';
 
-  const styles$m = css `
-    ${styles$1u}
+  const styles$n = css `
+    ${styles$1v}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -105140,15 +105278,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
-      template: template$1i,
-      styles: styles$m
+      template: template$1j,
+      styles: styles$n
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalendarWeek());
 
-  const styles$l = css `
-    ${styles$1u}
+  const styles$m = css `
+    ${styles$1v}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -105165,15 +105303,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
-      template: template$1i,
-      styles: styles$l
+      template: template$1j,
+      styles: styles$m
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalipers());
 
-  const styles$k = css `
-    ${styles$1u}
+  const styles$l = css `
+    ${styles$1v}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -105190,15 +105328,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
-      template: template$1i,
-      styles: styles$k
+      template: template$1j,
+      styles: styles$l
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemForklift());
 
-  const styles$j = css `
-    ${styles$1u}
+  const styles$k = css `
+    ${styles$1v}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -105215,15 +105353,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
-      template: template$1i,
-      styles: styles$j
+      template: template$1j,
+      styles: styles$k
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemRectangleCheckLines());
 
-  const styles$i = css `
-    ${styles$1u}
+  const styles$j = css `
+    ${styles$1v}
 
     .icon svg {
         fill: ${calendarEventBorderWorkOrderColor};
@@ -105240,15 +105378,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemSquareListCog = IconWorkItemSquareListCog.compose({
       baseName: 'icon-work-item-square-list-cog',
-      template: template$1i,
-      styles: styles$i
+      template: template$1j,
+      styles: styles$j
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemSquareListCog());
 
-  const styles$h = css `
-    ${styles$1u}
+  const styles$i = css `
+    ${styles$1v}
 
     .icon svg {
         fill: ${calendarEventBorderJobColor};
@@ -105265,15 +105403,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
       baseName: 'icon-work-item-user-helmet-safety',
-      template: template$1i,
-      styles: styles$h
+      template: template$1j,
+      styles: styles$i
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemUserHelmetSafety());
 
-  const styles$g = css `
-    ${styles$1u}
+  const styles$h = css `
+    ${styles$1v}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};
@@ -105290,14 +105428,14 @@ focus outline in that case.
   }
   const sprightIconWorkItemWrenchHammer = IconWorkItemWrenchHammer.compose({
       baseName: 'icon-work-item-wrench-hammer',
-      template: template$1i,
-      styles: styles$g
+      template: template$1j,
+      styles: styles$h
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemWrenchHammer());
 
-  const styles$f = css `
+  const styles$g = css `
     ${display$1('inline-block')}
 
     :host {
@@ -105322,7 +105460,7 @@ focus outline in that case.
     }
 `;
 
-  const template$g = html `<slot></slot>`;
+  const template$h = html `<slot></slot>`;
 
   /**
    * A Spright demo component (not for production use)
@@ -105331,8 +105469,8 @@ focus outline in that case.
   }
   const sprightRectangle = Rectangle.compose({
       baseName: 'rectangle',
-      template: template$g,
-      styles: styles$f
+      template: template$h,
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightRectangle());
 
@@ -105359,7 +105497,7 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$e = css `
+  const styles$f = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -105465,7 +105603,7 @@ focus outline in that case.
             }
         `));
 
-  const template$f = html `
+  const template$g = html `
     <details
         class="accordion-item-details"
         ?open="${x => x.expanded}"
@@ -105516,8 +105654,8 @@ focus outline in that case.
   ], FvAccordionItem.prototype, "appearance", void 0);
   const okFvAccordionItem = FvAccordionItem.compose({
       baseName: 'fv-accordion-item',
-      template: template$f,
-      styles: styles$e
+      template: template$g,
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
@@ -105532,7 +105670,7 @@ focus outline in that case.
       card: 'card'
   };
 
-  const styles$d = css `
+  const styles$e = css `
     ${display('block')}
 
     :host {
@@ -105883,7 +106021,7 @@ focus outline in that case.
         </div>
     </div>
 `;
-  const template$e = html `
+  const template$f = html `
     ${when(x => x.interactionMode === FvCardInteractionMode.card, html `
             <${cardButtonTag}
                 class="card-shell card-button-shell"
@@ -106031,14 +106169,14 @@ focus outline in that case.
   ], FvCard.prototype, "hasFooterEndContent", void 0);
   const okFvCard = FvCard.compose({
       baseName: 'fv-card',
-      template: template$e,
-      styles: styles$d
+      template: template$f,
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
       .register(okFvCard());
 
-  const styles$c = css `
+  const styles$d = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -106286,7 +106424,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$d = html `
+  const template$e = html `
     <div class="chip-selector">
         ${when(x => x.label.length > 0, html `
                 <label id="${x => x.labelId}" class="label" for="${x => x.inputId}">
@@ -106778,12 +106916,12 @@ focus outline in that case.
   ], FvChipSelector.prototype, "field", void 0);
   const okFvChipSelector = FvChipSelector.compose({
       baseName: 'fv-chip-selector',
-      template: template$d,
-      styles: styles$c
+      template: template$e,
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());
 
-  const styles$b = css `
+  const styles$c = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -106835,7 +106973,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$c = html `
+  const template$d = html `
     <button
         id="${x => x.tooltipAnchorId}"
         class="context-help-trigger"
@@ -106883,12 +107021,12 @@ focus outline in that case.
   ], FvContextHelp.prototype, "iconVisible", void 0);
   const okFvContextHelp = FvContextHelp.compose({
       baseName: 'fv-context-help',
-      template: template$c,
-      styles: styles$b
+      template: template$d,
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvContextHelp());
 
-  const styles$a = css `
+  const styles$b = css `
     @layer base, hover, selected;
 
     @layer base {
@@ -106985,7 +107123,7 @@ focus outline in that case.
     }
 `;
 
-  const template$b = html `
+  const template$c = html `
     <div class="item" part="item">
         <div class="text" part="text">
             <div class="title" part="title">${x => x.titleText}</div>
@@ -107086,13 +107224,13 @@ focus outline in that case.
   ], FvMasterDetailListItem.prototype, "hasStatusSlotContent", void 0);
   const okFvMasterDetailListItem = FvMasterDetailListItem.compose({
       baseName: 'fv-master-detail-list-item',
-      template: template$b,
-      styles: styles$a
+      template: template$c,
+      styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailListItem());
   const fvMasterDetailListItemTag = 'ok-fv-master-detail-list-item';
 
-  const styles$9 = css `
+  const styles$a = css `
     @layer base, hover, focusVisible;
 
     @layer base {
@@ -107157,7 +107295,7 @@ focus outline in that case.
     }
 `;
 
-  const template$a = html `
+  const template$b = html `
     <div class="master-detail-list">
         <div class="filter-row">
             <input
@@ -107351,15 +107489,15 @@ focus outline in that case.
   ], FvMasterDetailList.prototype, "items", void 0);
   const okFvMasterDetailList = FvMasterDetailList.compose({
       baseName: 'fv-master-detail-list',
-      template: template$a,
-      styles: styles$9,
+      template: template$b,
+      styles: styles$a,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailList());
 
-  const styles$8 = css `
+  const styles$9 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -107576,7 +107714,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$9 = html `
+  const template$a = html `
     <div
         class="split-button-container"
         ${ref('splitButtonContainer')}
@@ -107748,12 +107886,12 @@ focus outline in that case.
   ], FvSplitButton.prototype, "region", void 0);
   const okFvSplitButton = FvSplitButton.compose({
       baseName: 'fv-split-button',
-      template: template$9,
-      styles: styles$8
+      template: template$a,
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButton());
 
-  const styles$7 = css `
+  const styles$8 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -107978,7 +108116,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$8 = html `
+  const template$9 = html `
     <div
         class="split-button-container"
         ${ref('splitButtonContainer')}
@@ -108178,12 +108316,12 @@ focus outline in that case.
   ], FvSplitButtonAnchor.prototype, "region", void 0);
   const okFvSplitButtonAnchor = FvSplitButtonAnchor.compose({
       baseName: 'fv-split-button-anchor',
-      template: template$8,
-      styles: styles$7
+      template: template$9,
+      styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButtonAnchor());
 
-  const styles$6 = css `
+  const styles$7 = css `
     ${display('block')}
 
     .sticky-header {
@@ -108202,7 +108340,7 @@ focus outline in that case.
     }
 `;
 
-  const template$7 = html `
+  const template$8 = html `
     <div class="header" part="header">
         <slot
             name="header"
@@ -108302,12 +108440,12 @@ focus outline in that case.
   ], FvStickyHeader.prototype, "showStickyHeader", void 0);
   const okFvStickyHeader = FvStickyHeader.compose({
       baseName: 'fv-sticky-header',
-      template: template$7,
-      styles: styles$6
+      template: template$8,
+      styles: styles$7
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvStickyHeader());
 
-  const styles$5 = css `
+  const styles$6 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -108375,7 +108513,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$6 = html `
+  const template$7 = html `
     <section class="summary-panel" part="panel">
         <div
             ${ref('summaryItems')}
@@ -108519,12 +108657,12 @@ focus outline in that case.
   ], FvSummaryPanel.prototype, "editItemsButtonLabel", void 0);
   const okFvSummaryPanel = FvSummaryPanel.compose({
       baseName: 'fv-summary-panel',
-      template: template$6,
-      styles: styles$5
+      template: template$7,
+      styles: styles$6
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanel());
 
-  const styles$4 = css `
+  const styles$5 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -108682,7 +108820,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$5 = html `
+  const template$6 = html `
     <${cardButtonTag}
         class="summary-panel-tile"
         ?selected="${x => x.selected}"
@@ -108748,12 +108886,12 @@ focus outline in that case.
   ], FvSummaryPanelTile.prototype, "textPosition", void 0);
   const okFvSummaryPanelTile = FvSummaryPanelTile.compose({
       baseName: 'fv-summary-panel-tile',
-      template: template$5,
-      styles: styles$4
+      template: template$6,
+      styles: styles$5
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanelTile());
 
-  const styles$3 = css `
+  const styles$4 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -108928,7 +109066,7 @@ focus outline in that case.
     }
 `;
 
-  const template$4 = html `
+  const template$5 = html `
     <div class="search-input-container">
         <span class="search-input-icon" aria-hidden="true">
             <${iconMagnifyingGlassTag}></${iconMagnifyingGlassTag}>
@@ -108999,14 +109137,344 @@ focus outline in that case.
   const okFvSearchInput = FvSearchInput.compose({
       baseName: 'fv-search-input',
       baseClass: TextField$1,
-      template: template$4,
-      styles: styles$3,
+      template: template$5,
+      styles: styles$4,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSearchInput());
 
+  const styles$3 = css `
+    @layer base, hover, focusVisible, active;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            position: relative;
+            flex: 0 0 2px;
+            width: 2px;
+            height: 100%;
+            min-height: 0;
+            background: ${dividerBackgroundDynamicColor};
+            outline: none;
+        }
+
+        .splitter {
+            position: absolute;
+            inset: 0 -8px 0 -2px;
+            cursor: col-resize;
+            touch-action: none;
+            user-select: none;
+            -webkit-user-select: none;
+            outline: none;
+        }
+    }
+
+    @layer hover {
+        :host(:hover) {
+            background: ${borderHoverColor};
+        }
+    }
+
+    @layer focusVisible {
+        :host(:focus),
+        :host(:focus-visible) {
+            outline: none;
+        }
+
+        :host(:focus-visible)::before {
+            content: '';
+            position: absolute;
+            z-index: 1;
+            inset-block: 0;
+            left: 1px;
+            width: 3px;
+            transform: translateX(-50%);
+            background: ${borderHoverColor};
+            pointer-events: none;
+        }
+    }
+
+    @layer active {
+        :host([resizing]) {
+            background: ${borderHoverColor};
+        }
+    }
+`;
+
+  const template$4 = html `
+    <div
+        class="splitter"
+        @pointerdown="${(x, c) => x.handlePointerDown(c.event)}"
+        @pointermove="${(x, c) => x.handlePointerMove(c.event)}"
+        @pointerup="${(x, c) => x.handlePointerUp(c.event)}"
+        @pointercancel="${(x, c) => x.handlePointerCancel(c.event)}"
+        @lostpointercapture="${(x, c) => x.handlePointerCancel(c.event)}"
+    ></div>
+`;
+
+  /**
+   * A vertical separator that enables pointer and keyboard resizing between two panes.
+   */
+  class FvSplitter extends FoundationElement {
+      constructor() {
+          super();
+          /** The accessible name for the separator. */
+          this.ariaLabel = 'Resize panes';
+          /** The splitter position as a percentage of the containing layout's width. */
+          this.position = 60;
+          /** The minimum allowed position. */
+          this.min = 0;
+          /** The maximum allowed position. */
+          this.max = 100;
+          /** The percentage-point increment used for keyboard resizing. */
+          this.step = 1;
+          /** @internal */
+          this.resizing = false;
+          this.pointerStartPosition = 0;
+          this.requestedPosition = this.position;
+          this.applyingConstrainedPosition = false;
+          this.requestedPositionResetScheduled = false;
+          this.positionChangeCallbackVersion = 0;
+          this.keydownHandler = (event) => {
+              this.handleKeyDown(event);
+          };
+          const positionDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), 'position');
+          if (!positionDescriptor?.get || !positionDescriptor.set) {
+              return;
+          }
+          const getPosition = positionDescriptor.get.bind(this);
+          const setPosition = positionDescriptor.set.bind(this);
+          Object.defineProperty(this, 'position', {
+              configurable: true,
+              enumerable: positionDescriptor.enumerable,
+              get: getPosition,
+              set: (value) => {
+                  const previousPosition = getPosition();
+                  const callbackVersion = this.positionChangeCallbackVersion;
+                  setPosition(value);
+                  if (!this.applyingConstrainedPosition
+                      && callbackVersion === this.positionChangeCallbackVersion
+                      && previousPosition === getPosition()) {
+                      this.requestedPosition = getPosition();
+                  }
+              }
+          });
+      }
+      /** @internal */
+      connectedCallback() {
+          super.connectedCallback();
+          this.setAttribute('role', 'separator');
+          this.setAttribute('aria-orientation', 'vertical');
+          this.setAttribute('aria-label', this.ariaLabel);
+          this.tabIndex = 0;
+          this.addEventListener('keydown', this.keydownHandler);
+          this.syncAriaValueAttributes();
+      }
+      /** @internal */
+      disconnectedCallback() {
+          this.removeEventListener('keydown', this.keydownHandler);
+          super.disconnectedCallback();
+      }
+      /** @internal */
+      positionChanged() {
+          this.positionChangeCallbackVersion += 1;
+          if (!this.applyingConstrainedPosition) {
+              this.requestedPosition = this.position;
+              this.resetRequestedPositionAfterSynchronousUpdates();
+          }
+          this.applyConstrainedPosition();
+      }
+      /** @internal */
+      minChanged() {
+          this.applyConstrainedPosition();
+      }
+      /** @internal */
+      maxChanged() {
+          this.applyConstrainedPosition();
+      }
+      /** @internal */
+      resizingChanged() {
+          this.toggleAttribute('resizing', this.resizing);
+      }
+      /** @internal */
+      handlePointerDown(event) {
+          if (event.button !== 0 || !event.isPrimary || this.pointerId !== undefined) {
+              return true;
+          }
+          event.preventDefault();
+          const pointerTarget = event.currentTarget;
+          this.focus();
+          this.pointerId = event.pointerId;
+          this.pointerStartPosition = this.position;
+          this.resizing = true;
+          if (event.pointerId !== -1) {
+              pointerTarget.setPointerCapture(event.pointerId);
+          }
+          return true;
+      }
+      /** @internal */
+      handlePointerMove(event) {
+          if (event.pointerId !== this.pointerId) {
+              return true;
+          }
+          const container = this.parentElement;
+          if (!container) {
+              return true;
+          }
+          const bounds = container.getBoundingClientRect();
+          if (bounds.width > 0) {
+              const distanceFromInlineStart = this.isRtl
+                  ? bounds.right - event.clientX
+                  : event.clientX - bounds.left;
+              this.updatePosition((distanceFromInlineStart / bounds.width) * 100);
+          }
+          return true;
+      }
+      /** @internal */
+      handlePointerUp(event) {
+          if (event.pointerId === this.pointerId) {
+              this.finishResize();
+          }
+          return true;
+      }
+      /** @internal */
+      handlePointerCancel(event) {
+          if (event.pointerId === this.pointerId) {
+              this.updatePosition(this.pointerStartPosition);
+              this.resizing = false;
+              this.pointerId = undefined;
+          }
+          return true;
+      }
+      /** @internal */
+      handleKeyDown(event) {
+          let nextPosition;
+          const direction = this.isRtl ? -1 : 1;
+          switch (event.key) {
+              case 'ArrowLeft':
+                  nextPosition = this.position - direction * this.validStep;
+                  break;
+              case 'ArrowRight':
+                  nextPosition = this.position + direction * this.validStep;
+                  break;
+              case 'Home':
+                  nextPosition = this.validMin;
+                  break;
+              case 'End':
+                  nextPosition = this.validMax;
+                  break;
+              default:
+                  return true;
+          }
+          event.preventDefault();
+          const previousPosition = this.position;
+          this.updatePosition(nextPosition);
+          if (this.position !== previousPosition) {
+              this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+          }
+          return true;
+      }
+      get validMin() {
+          return Number.isFinite(this.min) ? Math.min(100, Math.max(0, this.min)) : 0;
+      }
+      get validMax() {
+          const max = Number.isFinite(this.max) ? this.max : 100;
+          return Math.max(this.validMin, Math.min(100, Math.max(0, max)));
+      }
+      get validStep() {
+          return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;
+      }
+      get isRtl() {
+          return getComputedStyle(this).direction === 'rtl';
+      }
+      constrain(position) {
+          const finitePosition = Number.isFinite(position) ? position : 60;
+          return Math.min(this.validMax, Math.max(this.validMin, finitePosition));
+      }
+      updatePosition(position) {
+          const nextPosition = this.constrain(position);
+          this.requestedPosition = nextPosition;
+          if (nextPosition !== this.position) {
+              this.position = nextPosition;
+              this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+          }
+      }
+      applyConstrainedPosition() {
+          const constrainedPosition = this.constrain(this.requestedPosition);
+          if (constrainedPosition !== this.position) {
+              this.applyingConstrainedPosition = true;
+              this.position = constrainedPosition;
+              this.applyingConstrainedPosition = false;
+          }
+          this.syncAriaValueAttributesIfConnected();
+      }
+      resetRequestedPositionAfterSynchronousUpdates() {
+          if (this.requestedPositionResetScheduled) {
+              return;
+          }
+          this.requestedPositionResetScheduled = true;
+          queueMicrotask(() => {
+              this.requestedPositionResetScheduled = false;
+              this.requestedPosition = this.position;
+          });
+      }
+      finishResize() {
+          const changed = this.position !== this.pointerStartPosition;
+          this.resizing = false;
+          this.pointerId = undefined;
+          if (changed) {
+              this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+          }
+      }
+      syncAriaValueAttributesIfConnected() {
+          if (this.$fastController.isConnected) {
+              this.syncAriaValueAttributes();
+          }
+      }
+      syncAriaValueAttributes() {
+          this.setAttribute('aria-valuemin', String(this.validMin));
+          this.setAttribute('aria-valuemax', String(this.validMax));
+          this.setAttribute('aria-valuenow', String(this.position));
+          this.setAttribute('aria-valuetext', `${this.position} percent`);
+      }
+  }
+  __decorate([
+      attr({ attribute: 'aria-label' })
+  ], FvSplitter.prototype, "ariaLabel", void 0);
+  __decorate([
+      attr({ attribute: 'aria-labelledby' })
+  ], FvSplitter.prototype, "ariaLabelledby", void 0);
+  __decorate([
+      attr({ attribute: 'aria-controls' })
+  ], FvSplitter.prototype, "ariaControls", void 0);
+  __decorate([
+      attr({ converter: nullableNumberConverter })
+  ], FvSplitter.prototype, "position", void 0);
+  __decorate([
+      attr({ converter: nullableNumberConverter })
+  ], FvSplitter.prototype, "min", void 0);
+  __decorate([
+      attr({ converter: nullableNumberConverter })
+  ], FvSplitter.prototype, "max", void 0);
+  __decorate([
+      attr({ converter: nullableNumberConverter })
+  ], FvSplitter.prototype, "step", void 0);
+  __decorate([
+      observable
+  ], FvSplitter.prototype, "resizing", void 0);
+  const okFvSplitter = FvSplitter.compose({
+      baseName: 'fv-splitter',
+      template: template$4,
+      styles: styles$3,
+      shadowOptions: {
+          delegatesFocus: false
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitter());
+
   const styles$2 = css `
     ${display('inline-block')}
 
@@ -109556,7 +110024,7 @@ focus outline in that case.
 
   const template = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$M}</template
+        >${template$N}</template
     >
 `;
 
@@ -109642,7 +110110,7 @@ focus outline in that case.
   const tsTableColumnBreakpoint = TsTableColumnBreakpoint.compose({
       baseName: 'ts-table-column-breakpoint',
       template,
-      styles: styles$L
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')