@ni/ok-components 0.2.3 → 0.2.5

package/dist/all-components-bundle.js

@@ -14881,9 +14881,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$W = html `<slot></slot>`;
+  const template$Z = html `<slot></slot>`;
 
-  const styles$19 = css `
+  const styles$1c = css `
     ${display$2('contents')}
 `;
 
@@ -14998,8 +14998,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$19,
-      template: template$W
+      styles: styles$1c,
+      template: template$Z
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16572,7 +16572,7 @@
   }
   // #endregion
 
-  const styles$18 = css `
+  const styles$1b = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -16650,7 +16650,7 @@
     }
 `;
 
-  const template$V = (_context, definition) => html `${
+  const template$Y = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -16696,12 +16696,12 @@
    Whitespace intentionally avoided between tags for inline styles */ ''}<span
         part="start"
         ${ref('startContainer')}
-        class="${_x => (definition.start ? 'start' : null)}"
+        class="${_x => (definition.start !== undefined ? 'start' : null)}"
         ><slot
             name="start"
             ${ref('start')}
             @slotchange="${x => x.handleStartContentChange()}">
-            ${definition.start || ''}
+            ${definition.start ?? ''}
         </slot
     ></span
     ><span
@@ -16714,12 +16714,12 @@
     ><span
         part="end"
         ${ref('endContainer')}
-        class=${_x => (definition.end ? 'end' : null)}
+        class=${_x => (definition.end !== undefined ? 'end' : null)}
         ><slot
             name="end"
             ${ref('end')}
             @slotchange="${x => x.handleEndContentChange()}">
-            ${definition.end || ''}
+            ${definition.end ?? ''}
         </slot
     ></span></a></div>`;
 
@@ -16753,8 +16753,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$V,
-      styles: styles$18,
+      template: template$Y,
+      styles: styles$1b,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16863,7 +16863,7 @@
     padding: 0;
 `;
 
-  const styles$17 = css `
+  const styles$1a = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17147,8 +17147,8 @@
             }
         `));
 
-  const styles$16 = css `
-    ${styles$17}
+  const styles$19 = css `
+    ${styles$1a}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17168,7 +17168,7 @@
     }
 `;
 
-  const template$U = (context, definition) => html `
+  const template$X = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17250,8 +17250,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$U,
-      styles: styles$16,
+      template: template$X,
+      styles: styles$19,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17259,7 +17259,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$15 = css `
+  const styles$18 = css `
     ${display$2('grid')}
 
     :host {
@@ -17342,7 +17342,7 @@
     }
 `;
 
-  const template$T = (context, definition) => html `
+  const template$W = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17443,8 +17443,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$T,
-      styles: styles$15,
+      template: template$W,
+      styles: styles$18,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17454,7 +17454,27 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$14 = css `
+  const styles$17 = css `
+    ${display$2('flex')}
+`;
+
+  const template$V = html `
+    <template>anchor step</template>
+`;
+
+  /**
+   * A nimble-styled anchor step for a stepper
+   */
+  class AnchorStep extends FoundationElement {
+  }
+  const nimbleAnchorStep = AnchorStep.compose({
+      baseName: 'anchor-step',
+      template: template$V,
+      styles: styles$17
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
+
+  const styles$16 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -17571,7 +17591,7 @@
     }
 `;
 
-  const template$S = (context, definition) => html `
+  const template$U = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17623,15 +17643,15 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$S,
-      styles: styles$14,
+      template: template$U,
+      styles: styles$16,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$13 = css `
+  const styles$15 = css `
     ${display$2('flex')}
 
     :host {
@@ -17671,12 +17691,12 @@
     }
 `;
 
-  const styles$12 = css `
-    ${styles$17}
+  const styles$14 = css `
+    ${styles$1a}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$R = (context, definition) => html `
+  const template$T = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -17767,8 +17787,8 @@
   const nimbleButton = Button$1.compose({
       baseName: 'button',
       baseClass: Button$2,
-      template: template$R,
-      styles: styles$12,
+      template: template$T,
+      styles: styles$14,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18715,7 +18735,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$Q = html `<div
+  const template$S = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -18730,7 +18750,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$11 = css `
+  const styles$13 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -18793,8 +18813,8 @@
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$Q,
-          styles: styles$11
+          template: template$S,
+          styles: styles$13
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -18889,7 +18909,7 @@
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.itemRemoveLabel);
 
-  const template$P = (context, definition) => html `
+  const template$R = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -18992,6 +19012,8 @@
                   tab.style[gridHorizontalProperty] = `${index + 1}`;
               });
               if (firstFocusableTab
+                  // False positive. See: https://github.com/typescript-eslint/typescript-eslint/issues/12036
+                  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
                   && (!this.activetab || !this.isFocusableElement(this.activetab))) {
                   firstFocusableTab.setAttribute('tabindex', '0');
               }
@@ -19188,15 +19210,15 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$P,
-      styles: styles$13,
+      template: template$R,
+      styles: styles$15,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$10 = css `
+  const styles$12 = css `
     ${display$2('block')}
 
     :host {
@@ -19301,7 +19323,7 @@
     }
 `;
 
-  const template$O = (context, definition) => html `
+  const template$Q = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -19438,8 +19460,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$O,
-      styles: styles$10,
+      template: template$Q,
+      styles: styles$12,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19455,7 +19477,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$$ = css `
+  const styles$11 = css `
     ${display$2('block')}
 
     :host {
@@ -19486,7 +19508,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$$
+      styles: styles$11
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -19567,7 +19589,7 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$_ = css `
+  const styles$10 = css `
     ${display$2('flex')}
 
     :host {
@@ -19745,7 +19767,7 @@
       information: 'information'
   };
 
-  const template$N = html `
+  const template$P = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -19863,8 +19885,8 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$N,
-      styles: styles$_
+      template: template$P,
+      styles: styles$10
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -19905,7 +19927,7 @@
     </template>
 `;
 
-  const styles$Z = css `
+  const styles$$ = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20009,11 +20031,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$Z
+      styles: styles$$
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$Y = css `
+  const styles$_ = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -20110,14 +20132,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$Y,
+      styles: styles$_,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$X = css `
+  const styles$Z = css `
     ${display$2('flex')}
 
     :host {
@@ -20141,7 +20163,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$M = html `
+  const template$O = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20156,12 +20178,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$M,
-      styles: styles$X
+      template: template$O,
+      styles: styles$Z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$W = css `
+  const styles$Y = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20319,14 +20341,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$W,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$V = css `
+  const styles$X = css `
     .error-icon {
         display: none;
     }
@@ -20360,9 +20382,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$U = css `
+  const styles$W = css `
     ${display$2('inline-grid')}
-    ${styles$V}
+    ${styles$X}
 
     :host {
         font: ${bodyFont};
@@ -20556,7 +20578,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$L = (_context, definition) => html `
+  const template$N = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20572,15 +20594,15 @@ so this becomes the fallback color for the slot */ ''}
             <div part="container" class="container">
                 <div part="control" class="control">
                     <slot name="checked-indicator">
-                        ${definition.checkedIndicator || ''}
+                        ${definition.checkedIndicator ?? ''}
                     </slot>
                     <slot name="indeterminate-indicator">
-                        ${definition.indeterminateIndicator || ''}
+                        ${definition.indeterminateIndicator ?? ''}
                     </slot>
                 </div>
                 <label
                     part="label"
-                    class="${x => (x.defaultSlottedNodes?.length
+                    class="${x => (x.defaultSlottedNodes?.length > 0
     ? 'label'
     : 'label label__hidden')}"
                 >
@@ -20641,16 +20663,16 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$L,
-      styles: styles$U,
+      template: template$N,
+      styles: styles$W,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$T = css `
-    ${styles$17}
+  const styles$V = css `
+    ${styles$1a}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20697,7 +20719,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$K = (context, definition) => html `
+  const template$M = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20792,8 +20814,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$K,
-      styles: styles$T,
+      template: template$M,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20823,7 +20845,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$S = css `
+  const styles$U = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21113,7 +21135,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$R = css `
+  const styles$T = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -21140,10 +21162,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$Q = css `
-    ${styles$S}
-    ${styles$V}
-    ${styles$R}
+  const styles$S = css `
+    ${styles$U}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21264,7 +21286,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$J = (context, definition) => html `
+  const template$L = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21302,7 +21324,7 @@ so this becomes the fallback color for the slot */ ''}
                 />
                 <div class="indicator" part="indicator" aria-hidden="true">
                     <slot name="indicator">
-                        ${definition.indicator || ''}
+                        ${definition.indicator ?? ''}
                     </slot>
                 </div>
             </slot>
@@ -21435,7 +21457,7 @@ so this becomes the fallback color for the slot */ ''}
       set value(next) {
           const prev = this._value;
           let updatedValue = next;
-          if (this.$fastController.isConnected && this.options) {
+          if (this.$fastController.isConnected) {
               const selectedIndex = this.findIndexOfValidOption(next);
               const prevSelectedValue = this.options[this.selectedIndex]?.text;
               const nextSelectedValue = this.options[selectedIndex]?.text;
@@ -21461,7 +21483,7 @@ so this becomes the fallback color for the slot */ ''}
        */
       get options() {
           Observable.track(this, 'options');
-          return this.filteredOptions && this.filter
+          return this.filter
               ? this.filteredOptions
               : this._options;
       }
@@ -21575,12 +21597,12 @@ so this becomes the fallback color for the slot */ ''}
           if (!this.isAutocompleteInline) {
               this.selectedIndex = this.findIndexOfValidOption(this.control.value);
           }
-          if (!e.inputType.includes('deleteContent') && this.filter.length) {
+          if (!e.inputType.includes('deleteContent') && this.filter.length > 0) {
               if (this.isAutocompleteList && !this.open) {
                   this.open = true;
               }
               if (this.isAutocompleteInline) {
-                  if (this.filteredOptions.length) {
+                  if (this.filteredOptions.length > 0) {
                       this.selectedOptions = [this.filteredOptions[0]];
                       this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
                       this.setInlineSelection();
@@ -21719,11 +21741,11 @@ so this becomes the fallback color for the slot */ ''}
        * Overrides `Listbox.setDefaultSelectedOption`
        */
       setDefaultSelectedOption() {
-          if (this.$fastController.isConnected && this.options) {
+          if (this.$fastController.isConnected) {
               const selectedIndex = this.options.findIndex(el => !el.disabled
                   && (el.getAttribute('selected') !== null || el.selected));
               this.selectedIndex = selectedIndex;
-              if (!this.dirtyValue && this.firstSelectedOption) {
+              if (!this.dirtyValue && this.firstSelectedOption !== null) {
                   this.value = this.firstSelectedOption.text;
               }
               this.setSelectedOptions();
@@ -21840,7 +21862,7 @@ so this becomes the fallback color for the slot */ ''}
           if (this.open) {
               if (this.contains(document.activeElement)) {
                   this.control.focus();
-                  if (this.firstSelectedOption) {
+                  if (this.firstSelectedOption !== null) {
                       requestAnimationFrame(() => {
                           this.firstSelectedOption?.scrollIntoView({
                               block: 'nearest'
@@ -21901,12 +21923,12 @@ so this becomes the fallback color for the slot */ ''}
           this.setPositioning();
       }
       regionChanged(_prev, _next) {
-          if (this.region && this.controlWrapper) {
+          if (this.region) {
               this.region.anchorElement = this.controlWrapper;
           }
       }
       controlWrapperChanged(_prev, _next) {
-          if (this.region && this.controlWrapper) {
+          if (this.region) {
               this.region.anchorElement = this.controlWrapper;
           }
       }
@@ -21930,7 +21952,7 @@ so this becomes the fallback color for the slot */ ''}
        * Focus and set the content of the control based on the first selected option.
        */
       setInputToSelection() {
-          if (this.firstSelectedOption) {
+          if (this.firstSelectedOption !== null) {
               this.control.value = this.firstSelectedOption.text;
               this.control.focus();
           }
@@ -21939,7 +21961,7 @@ so this becomes the fallback color for the slot */ ''}
        * Focus, set and select the content of the control based on the first selected option.
        */
       setInlineSelection() {
-          if (this.firstSelectedOption) {
+          if (this.firstSelectedOption !== null) {
               this.setInputToSelection();
               this.control.setSelectionRange(this.filter.length, this.control.value.length, 'backward');
           }
@@ -22039,8 +22061,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$J,
-      styles: styles$Q,
+      template: template$L,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -22084,7 +22106,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$P = css `
+  const styles$R = css `
     ${display$2('grid')}
 
     dialog {
@@ -22177,7 +22199,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$I = html `
+  const template$K = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22267,7 +22289,7 @@ so this becomes the fallback color for the slot */ ''}
           this.doResolveShow(reason);
       }
       slottedFooterElementsChanged(_prev, next) {
-          this.footerIsEmpty = !next?.length;
+          this.footerIsEmpty = next === undefined || next.length === 0;
       }
       /**
        * @internal
@@ -22325,13 +22347,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$I,
-      styles: styles$P,
+      template: template$K,
+      styles: styles$R,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$O = css `
+  const styles$Q = css `
     ${display$2('block')}
 
     :host {
@@ -22474,7 +22496,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$H = html `
+  const template$J = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22616,8 +22638,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$H,
-      styles: styles$O
+      template: template$J,
+      styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -25399,7 +25421,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$N = css `
+  const styles$P = css `
     ${display$2('none')}
 `;
 
@@ -25464,7 +25486,7 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderCore.prototype, "itemRemove", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$N
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -25631,13 +25653,13 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$N
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$M = css `
+  const styles$O = css `
     ${display$2('flex')}
 
     :host {
@@ -25713,7 +25735,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$G = (context, definition) => html `
+  const template$I = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25826,13 +25848,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$G,
-      styles: styles$M
+      template: template$I,
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$L = css `
+  const styles$N = css `
     ${display$2('flex')}
 
     :host {
@@ -25894,7 +25916,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$F = html `
+  const template$H = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -26036,8 +26058,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$F,
-      styles: styles$L
+      template: template$H,
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26064,9 +26086,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$E = html `<template slot="mapping"></template>`;
+  const template$G = html `<template slot="mapping"></template>`;
 
-  const styles$K = css `
+  const styles$M = css `
     ${display$2('none')}
 `;
 
@@ -26082,8 +26104,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -26153,8 +26175,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -26177,8 +26199,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -26194,8 +26216,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -26262,7 +26284,7 @@ so this becomes the fallback color for the slot */ ''}
               // closing an expanded item without opening another
               if (this.expandedItem !== null
                   && changedItem === this.expandedItem
-                  && changedItem.expanded === false) {
+                  && !changedItem.expanded) {
                   this.expandedItem = null;
                   return;
               }
@@ -26291,7 +26313,7 @@ so this becomes the fallback color for the slot */ ''}
               this.menuItems = newItems;
               const menuItems = this.menuItems.filter(this.isMenuItemElement);
               // if our focus index is not -1 we have items
-              if (menuItems.length) {
+              if (menuItems.length > 0) {
                   this.focusIndex = 0;
               }
               function elementIndent(el) {
@@ -26334,7 +26356,7 @@ so this becomes the fallback color for the slot */ ''}
                   return;
               }
               if (changedMenuItem.role === 'menuitemradio'
-                  && changedMenuItem.checked === true) {
+                  && changedMenuItem.checked) {
                   for (let i = changeItemIndex - 1; i >= 0; --i) {
                       const item = this.menuItems[i];
                       const role = item.getAttribute('role');
@@ -26497,7 +26519,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$D = () => html `
+  const template$F = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -26514,7 +26536,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$J = css `
+  const styles$L = css `
     ${display$2('grid')}
 
     :host {
@@ -26585,8 +26607,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$D,
-      styles: styles$J
+      template: template$F,
+      styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -26601,7 +26623,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$I = css `
+  const styles$K = css `
     ${display$2('inline-block')}
 
     :host {
@@ -26619,7 +26641,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$C = html `
+  const template$E = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -26800,7 +26822,7 @@ so this becomes the fallback color for the slot */ ''}
           // Get the menu that is slotted within the menu-button, taking into account
           // that it may be nested within multiple 'slot' elements, such as when used
           // within a table.
-          if (!this.slottedMenus?.length) {
+          if (!this.slottedMenus || this.slottedMenus.length === 0) {
               return undefined;
           }
           let currentItem = this.slottedMenus[0];
@@ -26831,7 +26853,7 @@ so this becomes the fallback color for the slot */ ''}
       }
       focusLastMenuItem() {
           const menuItems = this.getMenu()?.querySelectorAll('[role=menuitem]');
-          if (menuItems?.length) {
+          if (menuItems && menuItems.length > 0) {
               const lastMenuItem = menuItems[menuItems.length - 1];
               lastMenuItem.focus();
           }
@@ -26869,8 +26891,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$C,
-      styles: styles$I,
+      template: template$E,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -26878,7 +26900,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$H = css `
+  const styles$J = css `
     ${display$2('grid')}
 
     :host {
@@ -26975,7 +26997,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$H,
+      styles: styles$J,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -26990,10 +27012,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$G = css `
+  const styles$I = css `
     ${display$2('inline-block')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         font: ${bodyFont};
@@ -27208,7 +27230,7 @@ so this becomes the fallback color for the slot */ ''}
   const labelTemplate$4 = createRequiredVisibleLabelTemplate(html `<label
         part="label"
         for="control"
-        class="${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}"
+        class="${x => (x.defaultSlottedNodes?.length > 0 ? 'label' : 'label label__hidden')}"
     >
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>`);
@@ -27216,7 +27238,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$B = (context, definition) => html `
+  const template$D = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -27273,7 +27295,7 @@ so this becomes the fallback color for the slot */ ''}
                             @click="${x => x.stepUp()}"
                         >
                             <slot name="step-up-glyph">
-                                ${definition.stepUpGlyph || ''}
+                                ${definition.stepUpGlyph ?? ''}
                             </slot>
                         </div>
                         <div
@@ -27282,7 +27304,7 @@ so this becomes the fallback color for the slot */ ''}
                             @click="${x => x.stepDown()}"
                         >
                             <slot name="step-down-glyph">
-                                ${definition.stepDownGlyph || ''}
+                                ${definition.stepDownGlyph ?? ''}
                             </slot>
                         </div>
                     </div>
@@ -27370,8 +27392,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$B,
-      styles: styles$G,
+      template: template$D,
+      styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -27414,7 +27436,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$F = css `
+  const styles$H = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -27514,15 +27536,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$F,
+      styles: styles$H,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$E = css `
+  const styles$G = css `
     ${display$2('inline-block')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     .positioning-region {
         display: flex;
@@ -27561,7 +27583,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$A = html `
+  const template$C = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -27601,8 +27623,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$A,
-      styles: styles$E,
+      template: template$C,
+      styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -31538,7 +31560,7 @@ so this becomes the fallback color for the slot */ ''}
   JSON-serialization identifier using
   [`Step.jsonID`](https://prosemirror.net/docs/ref/#transform.Step^jsonID).
   */
-  class Step {
+  let Step$1 = class Step {
       /**
       Get the step map that represents the changes made by this step,
       and which can be used to transform between positions in the old
@@ -31576,7 +31598,7 @@ so this becomes the fallback color for the slot */ ''}
           stepClass.prototype.jsonID = id;
           return stepClass;
       }
-  }
+  };
   /**
   The result of [applying](https://prosemirror.net/docs/ref/#transform.Step.apply) a step. Contains either a
   new document or a failure value.
@@ -31637,7 +31659,7 @@ so this becomes the fallback color for the slot */ ''}
   /**
   Add a mark to all inline content between two positions.
   */
-  class AddMarkStep extends Step {
+  class AddMarkStep extends Step$1 {
       /**
       Create a mark step.
       */
@@ -31698,11 +31720,11 @@ so this becomes the fallback color for the slot */ ''}
           return new AddMarkStep(json.from, json.to, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("addMark", AddMarkStep);
+  Step$1.jsonID("addMark", AddMarkStep);
   /**
   Remove a mark from all inline content between two positions.
   */
-  class RemoveMarkStep extends Step {
+  class RemoveMarkStep extends Step$1 {
       /**
       Create a mark-removing step.
       */
@@ -31760,11 +31782,11 @@ so this becomes the fallback color for the slot */ ''}
           return new RemoveMarkStep(json.from, json.to, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("removeMark", RemoveMarkStep);
+  Step$1.jsonID("removeMark", RemoveMarkStep);
   /**
   Add a mark to a specific node.
   */
-  class AddNodeMarkStep extends Step {
+  class AddNodeMarkStep extends Step$1 {
       /**
       Create a node mark step.
       */
@@ -31817,11 +31839,11 @@ so this becomes the fallback color for the slot */ ''}
           return new AddNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("addNodeMark", AddNodeMarkStep);
+  Step$1.jsonID("addNodeMark", AddNodeMarkStep);
   /**
   Remove a mark from a specific node.
   */
-  class RemoveNodeMarkStep extends Step {
+  class RemoveNodeMarkStep extends Step$1 {
       /**
       Create a mark-removing step.
       */
@@ -31867,12 +31889,12 @@ so this becomes the fallback color for the slot */ ''}
           return new RemoveNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("removeNodeMark", RemoveNodeMarkStep);
+  Step$1.jsonID("removeNodeMark", RemoveNodeMarkStep);
 
   /**
   Replace a part of the document with a slice of new content.
   */
-  class ReplaceStep extends Step {
+  class ReplaceStep extends Step$1 {
       /**
       The given `slice` should fit the 'gap' between `from` and
       `to`—the depths must line up, and the surrounding nodes must be
@@ -31956,13 +31978,13 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceStep(json.from, json.to, Slice.fromJSON(schema, json.slice), !!json.structure);
       }
   }
-  Step.jsonID("replace", ReplaceStep);
+  Step$1.jsonID("replace", ReplaceStep);
   /**
   Replace a part of the document with a slice of content, but
   preserve a range of the replaced content by moving it into the
   slice.
   */
-  class ReplaceAroundStep extends Step {
+  class ReplaceAroundStep extends Step$1 {
       /**
       Create a replace-around step with the given range and gap.
       `insert` should be the point in the slice into which the content
@@ -32055,7 +32077,7 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceAroundStep(json.from, json.to, json.gapFrom, json.gapTo, Slice.fromJSON(schema, json.slice), json.insert, !!json.structure);
       }
   }
-  Step.jsonID("replaceAround", ReplaceAroundStep);
+  Step$1.jsonID("replaceAround", ReplaceAroundStep);
   function contentBetween(doc, from, to) {
       let $from = doc.resolve(from), dist = to - from, depth = $from.depth;
       while (dist > 0 && depth > 0 && $from.indexAfter(depth) == $from.node(depth).childCount) {
@@ -32979,7 +33001,7 @@ so this becomes the fallback color for the slot */ ''}
   /**
   Update an attribute in a specific node.
   */
-  class AttrStep extends Step {
+  class AttrStep extends Step$1 {
       /**
       Construct an attribute step.
       */
@@ -33029,11 +33051,11 @@ so this becomes the fallback color for the slot */ ''}
           return new AttrStep(json.pos, json.attr, json.value);
       }
   }
-  Step.jsonID("attr", AttrStep);
+  Step$1.jsonID("attr", AttrStep);
   /**
   Update an attribute in the doc node.
   */
-  class DocAttrStep extends Step {
+  class DocAttrStep extends Step$1 {
       /**
       Construct an attribute step.
       */
@@ -33074,7 +33096,7 @@ so this becomes the fallback color for the slot */ ''}
           return new DocAttrStep(json.attr, json.value);
       }
   }
-  Step.jsonID("docAttr", DocAttrStep);
+  Step$1.jsonID("docAttr", DocAttrStep);
 
   /**
   @internal
@@ -46746,7 +46768,7 @@ ${renderedContent}
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$D = css `
+  const styles$F = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -46783,7 +46805,7 @@ ${renderedContent}
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$D
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -46812,8 +46834,8 @@ ${renderedContent}
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$C = css `
-    ${styles$S}
+  const styles$E = css `
+    ${styles$U}
 
     :host {
         height: auto;
@@ -46831,7 +46853,7 @@ ${renderedContent}
     }
 `;
 
-  const template$z = html `
+  const template$B = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -46932,7 +46954,7 @@ ${renderedContent}
        */
       get options() {
           Observable.track(this, 'options');
-          return this.filteredOptions?.length ? this.filteredOptions : [];
+          return this.filteredOptions?.length > 0 ? this.filteredOptions : [];
       }
       set options(value) {
           this._options = value;
@@ -47002,7 +47024,7 @@ ${renderedContent}
           this._options.forEach(o => {
               o.hidden = !this.filteredOptions.includes(o);
           });
-          if (this.filteredOptions.length) {
+          if (this.filteredOptions.length > 0) {
               this.selectedOptions = [this.filteredOptions[0]];
               this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
           }
@@ -47092,7 +47114,7 @@ ${renderedContent}
        * Overrides: `Listbox.focusAndScrollOptionIntoView`
        */
       focusAndScrollOptionIntoView() {
-          if (this.open && this.firstSelectedOption) {
+          if (this.open && this.firstSelectedOption !== null) {
               requestAnimationFrame(() => {
                   this.firstSelectedOption?.scrollIntoView({ block: 'nearest' });
               });
@@ -47119,15 +47141,15 @@ ${renderedContent}
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$z,
-      styles: styles$C
+      template: template$B,
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$y = html `
+  const template$A = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -47229,9 +47251,9 @@ ${renderedContent}
     </template>
 `;
 
-  const styles$B = css `
+  const styles$D = css `
     ${display$2('inline-flex')}
-    ${styles$V}
+    ${styles$X}
 
     :host {
         font: ${bodyFont};
@@ -56890,7 +56912,7 @@ ${renderedContent}
            * https://github.com/ProseMirror/prosemirror-markdown/blob/b7c1fd2fb74c7564bfe5428c7c8141ded7ebdd9f/src/to_markdown.ts#L94C2-L101C7
            */
           const orderedListNode = function orderedList(state, node) {
-              const start = node.attrs.start || 1;
+              const start = node.attrs.start ?? 1;
               const maxW = String(start + node.childCount - 1).length;
               const space = state.repeat(' ', maxW + 2);
               state.renderList(node, space, i => {
@@ -57261,7 +57283,7 @@ ${renderedContent}
           };
       }
       isValid() {
-          return Object.values(this.getValidity()).every(x => x === false);
+          return Object.values(this.getValidity()).every(x => !x);
       }
       validate(mentions) {
           this.validateDuplicateMentionConfigurations(mentions);
@@ -63004,7 +63026,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       const updatedNodes = [];
       fragment.forEach(node => {
           if (node.isText && node.marks.length > 0) {
-              const linkMark = node.marks.find(mark => mark.type.name === 'link' && mark.attrs);
+              const linkMark = node.marks.find(mark => mark.type.name === 'link');
               if (linkMark) {
                   // Checks if the link is valid link or not
                   // Needing to separately validate the link on paste is a workaround for a tiptap issue
@@ -63129,7 +63151,7 @@ ${nextLine.slice(indentLevel + 2)}`;
                   if (node.type.name.startsWith(mentionPluginPrefix)) {
                       hasMention = true;
                   }
-                  const continueDescent = hasMention === false;
+                  const continueDescent = !hasMention;
                   return continueDescent;
               });
               return !hasMention;
@@ -63605,8 +63627,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$y,
-      styles: styles$B,
+      template: template$A,
+      styles: styles$D,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -63615,13 +63637,13 @@ ${nextLine.slice(indentLevel + 2)}`;
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$x = html `
+  const template$z = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$A = css `
+  const styles$C = css `
     ${display$2('flex')}
 
     :host {
@@ -63734,17 +63756,17 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$x,
-      styles: styles$A
+      template: template$z,
+      styles: styles$C
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$z = css `
-    ${styles$S}
-    ${styles$V}
-    ${styles$R}
+  const styles$B = css `
+    ${styles$U}
+    ${styles$X}
+    ${styles$T}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -63907,7 +63929,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const styles$y = css `
+  const styles$A = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -64077,7 +64099,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const template$w = html `
+  const template$y = html `
     <template role="progressbar">
         ${''
 /**
@@ -64124,8 +64146,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$w,
-      styles: styles$y
+      template: template$y,
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -64141,7 +64163,7 @@ ${nextLine.slice(indentLevel + 2)}`;
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$v = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -64193,7 +64215,7 @@ ${nextLine.slice(indentLevel + 2)}`;
                     `)}
                     <div aria-hidden="true" class="indicator" part="indicator">
                         <slot name="indicator">
-                            ${definition.indicator || ''}
+                            ${definition.indicator ?? ''}
                         </slot>
                     </div>
                 </slot>
@@ -64385,7 +64407,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       set value(next) {
           const prev = this._value;
           let newValue = next;
-          if (this.options?.length) {
+          if (this.options !== undefined && this.options.length > 0) {
               const newValueIndex = this.options.findIndex(el => el.value === newValue);
               const prevSelectedValue = this.options[this.selectedIndex]?.value ?? null;
               const nextSelectedValue = this.options[newValueIndex]?.value ?? null;
@@ -64414,7 +64436,7 @@ ${nextLine.slice(indentLevel + 2)}`;
        * @internal
        */
       anchoredRegionChanged(_prev, _next) {
-          if (this.anchoredRegion && this.control) {
+          if (this.anchoredRegion !== undefined && this.control !== undefined) {
               this.anchoredRegion.anchorElement = this.control;
           }
       }
@@ -64422,7 +64444,7 @@ ${nextLine.slice(indentLevel + 2)}`;
        * @internal
        */
       controlChanged(_prev, _next) {
-          if (this.anchoredRegion && this.control) {
+          if (this.anchoredRegion !== undefined && this.control !== undefined) {
               this.anchoredRegion.anchorElement = this.control;
           }
       }
@@ -64579,9 +64601,7 @@ ${nextLine.slice(indentLevel + 2)}`;
        */
       multipleChanged(prev, next) {
           super.multipleChanged(prev, next);
-          if (this.proxy) {
-              this.proxy.multiple = next;
-          }
+          this.proxy.multiple = next;
       }
       /**
        * @internal
@@ -64638,7 +64658,7 @@ ${nextLine.slice(indentLevel + 2)}`;
           if (this.filterMode !== FilterMode.none) {
               this.emitFilterInputEvent();
           }
-          if (e.inputType.includes('deleteContent') || !this.filter.length) {
+          if (e.inputType.includes('deleteContent') || this.filter.length === 0) {
               return true;
           }
           e.stopPropagation();
@@ -64807,7 +64827,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       typeaheadBufferChanged(_, __) {
           if (this.$fastController.isConnected) {
               const typeaheadMatches = this.getTypeaheadMatches();
-              if (typeaheadMatches.length) {
+              if (typeaheadMatches.length > 0) {
                   const activeOptionIndex = this.options.indexOf(typeaheadMatches[0]);
                   if (!(this.open && this.filterMode !== FilterMode.none)) {
                       this.setActiveOption(activeOptionIndex);
@@ -64940,9 +64960,7 @@ ${nextLine.slice(indentLevel + 2)}`;
        */
       sizeChanged(prev, next) {
           super.sizeChanged(prev, next);
-          if (this.proxy) {
-              this.proxy.size = next;
-          }
+          this.proxy.size = next;
       }
       openChanged() {
           if (!this.collapsible) {
@@ -65247,14 +65265,14 @@ ${nextLine.slice(indentLevel + 2)}`;
        * @internal
        */
       setProxyOptions() {
-          if (this.proxy instanceof HTMLSelectElement && this.options) {
+          if (this.proxy instanceof HTMLSelectElement && this.options !== null) {
               this.proxy.options.length = 0;
               this.options.forEach(option => {
                   const proxyOption = option.proxy
-                      || (option instanceof HTMLOptionElement
+                      ?? (option instanceof HTMLOptionElement
                           ? option.cloneNode()
                           : null);
-                  if (proxyOption) {
+                  if (proxyOption !== null) {
                       this.proxy.options.add(proxyOption);
                   }
               });
@@ -65282,7 +65300,7 @@ ${nextLine.slice(indentLevel + 2)}`;
               return;
           }
           const selectedOption = this.firstSelectedOption;
-          if (selectedOption) {
+          if (selectedOption !== null) {
               this.selectedOptionObserver?.observe(selectedOption, {
                   characterData: true,
                   subtree: true,
@@ -65357,8 +65375,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$v,
-      styles: styles$z,
+      template: template$x,
+      styles: styles$B,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -65371,6 +65389,46 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
+  const styles$z = css `
+    ${display$2('flex')}
+`;
+
+  const template$w = html `
+    <template>step</template>
+`;
+
+  /**
+   * A nimble-styled step for a stepper
+   */
+  class Step extends FoundationElement {
+  }
+  const nimbleStep = Step.compose({
+      baseName: 'step',
+      template: template$w,
+      styles: styles$z
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
+
+  const styles$y = css `
+    ${display$2('flex')}
+`;
+
+  const template$v = html `
+    <template>stepper: <slot></slot></template>
+`;
+
+  /**
+   * A nimble-styled stepper
+   */
+  class Stepper extends FoundationElement {
+  }
+  const nimbleStepper = Stepper.compose({
+      baseName: 'stepper',
+      template: template$v,
+      styles: styles$y
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
+
   const styles$x = css `
     ${display$2('inline-flex')}
 
@@ -65546,7 +65604,7 @@ ${nextLine.slice(indentLevel + 2)}`;
     >
         <label
             part="label"
-            class="${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}"
+            class="${x => (x.defaultSlottedNodes?.length > 0 ? 'label' : 'label label__hidden')}"
         >
             <slot ${slotted('defaultSlottedNodes')}></slot>
         </label>
@@ -69348,7 +69406,7 @@ ${nextLine.slice(indentLevel + 2)}`;
           };
       }
       isValid() {
-          return Object.values(this.getValidity()).every(x => x === false);
+          return Object.values(this.getValidity()).every(x => !x);
       }
       areRecordIdsValid() {
           const validity = this.getValidity();
@@ -72075,7 +72133,7 @@ focus outline in that case.
           return this.getVisibleColumns()
               .map(column => {
               const { minPixelWidth, currentPixelWidth, currentFractionalWidth } = column.columnInternals;
-              if (currentPixelWidth) {
+              if (currentPixelWidth !== undefined) {
                   const coercedPixelWidth = Math.max(minPixelWidth, currentPixelWidth);
                   return `${coercedPixelWidth}px`;
               }
@@ -72537,7 +72595,7 @@ focus outline in that case.
           const allRows = [];
           for (const row of topLevelRows) {
               allRows.push(row);
-              if (row.subRows?.length) {
+              if (row.subRows?.length > 0) {
                   allRows.push(...this.getOrderedRows(row.subRows));
               }
           }
@@ -72792,10 +72850,8 @@ focus outline in that case.
                   originalIndex: undefined
               };
           }
-          // if we track orphans, delete this item from the orphan set if it is in it
-          if (orphanIds) {
-              orphanIds.delete(itemId);
-          }
+          // delete this item from the orphan set if it is in it
+          orphanIds.delete(itemId);
           // add the current item's data to the item in the lookup table
           lookup[itemId].clientRecord = item;
           const treeItem = lookup[itemId];
@@ -72815,16 +72871,14 @@ focus outline in that case.
                       clientRecord: undefined,
                       originalIndex: undefined
                   };
-                  // if we track orphans, add the generated parent to the orphan list
-                  if (orphanIds) {
-                      orphanIds.add(parentId);
-                  }
+                  // add the generated parent to the orphan list
+                  orphanIds.add(parentId);
               }
               // add the current item to the parent
               lookup[parentId].subRows.push(treeItem);
           }
       }
-      if (orphanIds?.size) {
+      if (orphanIds.size > 0) {
           const orphans = Array.from(orphanIds.values()).join(',');
           throw new Error(`The items array contains orphans that point to the following parentIds: [${orphans}]. These parentIds do not exist in the items array.`);
       }
@@ -72839,7 +72893,7 @@ focus outline in that case.
    * @returns Number of nodes in the tree
    */
   function countNodes(tree) {
-      return tree.reduce((sum, n) => sum + 1 + (n.subRows && countNodes(n.subRows)), 0);
+      return tree.reduce((sum, n) => sum + 1 + (n.subRows ? countNodes(n.subRows) : 0), 0);
   }
 
   /**
@@ -74905,7 +74959,7 @@ focus outline in that case.
       calculateTanStackSortState() {
           const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.columnInternals.currentSortIndex
               - y.columnInternals.currentSortIndex);
-          this.firstSortedColumn = sortedColumns.length
+          this.firstSortedColumn = sortedColumns.length > 0
               ? sortedColumns[0]
               : undefined;
           return sortedColumns.map(column => {
@@ -76109,13 +76163,13 @@ focus outline in that case.
           }
           const hours = Math.floor((milliseconds / millisecondsPerHour) % 24);
           remainingTime -= hours * millisecondsPerHour;
-          if (hours) {
+          if (hours !== 0) {
               const formattedHours = this.hoursFormatter.format(hours);
               result.push(formattedHours);
           }
           const minutes = Math.floor((milliseconds / millisecondsPerMinute) % 60);
           remainingTime -= minutes * millisecondsPerMinute;
-          if (minutes) {
+          if (minutes !== 0) {
               const formattedMinutes = this.minutesFormatter.format(minutes);
               result.push(formattedMinutes);
           }
@@ -77614,7 +77668,7 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$g = css `
-    ${styles$13}
+    ${styles$15}
 
     .tabpanel {
         overflow: auto;
@@ -77695,7 +77749,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$P,
+      template: template$R,
       styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -77777,8 +77831,8 @@ focus outline in that case.
 
   const styles$e = css `
     ${display$2('inline-flex')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         font: ${bodyFont};
@@ -77965,7 +78019,7 @@ focus outline in that case.
     <label
         part="label"
         for="control"
-        class="${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}"
+        class="${x => (x.defaultSlottedNodes?.length > 0 ? 'label' : 'label label__hidden')}"
     >
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
@@ -78138,8 +78192,8 @@ focus outline in that case.
 
   const styles$d = css `
     ${display$2('inline-block')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         font: ${bodyFont};
@@ -78400,7 +78454,7 @@ focus outline in that case.
   const labelTemplate = createRequiredVisibleLabelTemplate(html `<label
         part="label"
         for="control"
-        class="${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}"
+        class="${x => (x.defaultSlottedNodes?.length > 0 ? 'label' : 'label label__hidden')}"
     >
         <slot
             ${slotted({
@@ -95117,7 +95171,7 @@ focus outline in that case.
           }
           const dieWidth = this.wafermap.dataManager.dieDimensions.width;
           const dieHeight = this.wafermap.dataManager.dieDimensions.height;
-          const dieSize = dieWidth * dieHeight * (this.wafermap.transform.k || 1);
+          const dieSize = dieWidth * dieHeight * (this.wafermap.transform.k !== 0 ? this.wafermap.transform.k : 1);
           if (dieSize >= this.minDieDim) {
               const fontsize = this.wafermap.dataManager.labelsFontSize;
               const context = this.wafermap.canvasContext;
@@ -95311,7 +95365,7 @@ focus outline in that case.
           };
       }
       isValid() {
-          return Object.values(this.getValidity()).every(x => x === false);
+          return Object.values(this.getValidity()).every(x => !x);
       }
       validateGridDimensions() {
           this.invalidGridDimensions = false;
@@ -95706,7 +95760,7 @@ focus outline in that case.
           .join("-");
   }
 
-  const workerCode = "var MatrixRenderer = (function (exports) {\n    'use strict';\n\n    /**\n     * @license\n     * Copyright 2019 Google LLC\n     * SPDX-License-Identifier: Apache-2.0\n     */\n    const proxyMarker = Symbol(\"Comlink.proxy\");\n    const createEndpoint = Symbol(\"Comlink.endpoint\");\n    const releaseProxy = Symbol(\"Comlink.releaseProxy\");\n    const finalizer = Symbol(\"Comlink.finalizer\");\n    const throwMarker = Symbol(\"Comlink.thrown\");\n    const isObject = (val) => (typeof val === \"object\" && val !== null) || typeof val === \"function\";\n    /**\n     * Internal transfer handle to handle objects marked to proxy.\n     */\n    const proxyTransferHandler = {\n        canHandle: (val) => isObject(val) && val[proxyMarker],\n        serialize(obj) {\n            const { port1, port2 } = new MessageChannel();\n            expose(obj, port1);\n            return [port2, [port2]];\n        },\n        deserialize(port) {\n            port.start();\n            return wrap(port);\n        },\n    };\n    /**\n     * Internal transfer handler to handle thrown exceptions.\n     */\n    const throwTransferHandler = {\n        canHandle: (value) => isObject(value) && throwMarker in value,\n        serialize({ value }) {\n            let serialized;\n            if (value instanceof Error) {\n                serialized = {\n                    isError: true,\n                    value: {\n                        message: value.message,\n                        name: value.name,\n                        stack: value.stack,\n                    },\n                };\n            }\n            else {\n                serialized = { isError: false, value };\n            }\n            return [serialized, []];\n        },\n        deserialize(serialized) {\n            if (serialized.isError) {\n                throw Object.assign(new Error(serialized.value.message), serialized.value);\n            }\n            throw serialized.value;\n        },\n    };\n    /**\n     * Allows customizing the serialization of certain values.\n     */\n    const transferHandlers = new Map([\n        [\"proxy\", proxyTransferHandler],\n        [\"throw\", throwTransferHandler],\n    ]);\n    function isAllowedOrigin(allowedOrigins, origin) {\n        for (const allowedOrigin of allowedOrigins) {\n            if (origin === allowedOrigin || allowedOrigin === \"*\") {\n                return true;\n            }\n            if (allowedOrigin instanceof RegExp && allowedOrigin.test(origin)) {\n                return true;\n            }\n        }\n        return false;\n    }\n    function expose(obj, ep = globalThis, allowedOrigins = [\"*\"]) {\n        ep.addEventListener(\"message\", function callback(ev) {\n            if (!ev || !ev.data) {\n                return;\n            }\n            if (!isAllowedOrigin(allowedOrigins, ev.origin)) {\n                console.warn(`Invalid origin '${ev.origin}' for comlink proxy`);\n                return;\n            }\n            const { id, type, path } = Object.assign({ path: [] }, ev.data);\n            const argumentList = (ev.data.argumentList || []).map(fromWireValue);\n            let returnValue;\n            try {\n                const parent = path.slice(0, -1).reduce((obj, prop) => obj[prop], obj);\n                const rawValue = path.reduce((obj, prop) => obj[prop], obj);\n                switch (type) {\n                    case \"GET\" /* MessageType.GET */:\n                        {\n                            returnValue = rawValue;\n                        }\n                        break;\n                    case \"SET\" /* MessageType.SET */:\n                        {\n                            parent[path.slice(-1)[0]] = fromWireValue(ev.data.value);\n                            returnValue = true;\n                        }\n                        break;\n                    case \"APPLY\" /* MessageType.APPLY */:\n                        {\n                            returnValue = rawValue.apply(parent, argumentList);\n                        }\n                        break;\n                    case \"CONSTRUCT\" /* MessageType.CONSTRUCT */:\n                        {\n                            const value = new rawValue(...argumentList);\n                            returnValue = proxy(value);\n                        }\n                        break;\n                    case \"ENDPOINT\" /* MessageType.ENDPOINT */:\n                        {\n                            const { port1, port2 } = new MessageChannel();\n                            expose(obj, port2);\n                            returnValue = transfer(port1, [port1]);\n                        }\n                        break;\n                    case \"RELEASE\" /* MessageType.RELEASE */:\n                        {\n                            returnValue = undefined;\n                        }\n                        break;\n                    default:\n                        return;\n                }\n            }\n            catch (value) {\n                returnValue = { value, [throwMarker]: 0 };\n            }\n            Promise.resolve(returnValue)\n                .catch((value) => {\n                return { value, [throwMarker]: 0 };\n            })\n                .then((returnValue) => {\n                const [wireValue, transferables] = toWireValue(returnValue);\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n                if (type === \"RELEASE\" /* MessageType.RELEASE */) {\n                    // detach and deactive after sending release response above.\n                    ep.removeEventListener(\"message\", callback);\n                    closeEndPoint(ep);\n                    if (finalizer in obj && typeof obj[finalizer] === \"function\") {\n                        obj[finalizer]();\n                    }\n                }\n            })\n                .catch((error) => {\n                // Send Serialization Error To Caller\n                const [wireValue, transferables] = toWireValue({\n                    value: new TypeError(\"Unserializable return value\"),\n                    [throwMarker]: 0,\n                });\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n            });\n        });\n        if (ep.start) {\n            ep.start();\n        }\n    }\n    function isMessagePort(endpoint) {\n        return endpoint.constructor.name === \"MessagePort\";\n    }\n    function closeEndPoint(endpoint) {\n        if (isMessagePort(endpoint))\n            endpoint.close();\n    }\n    function wrap(ep, target) {\n        const pendingListeners = new Map();\n        ep.addEventListener(\"message\", function handleMessage(ev) {\n            const { data } = ev;\n            if (!data || !data.id) {\n                return;\n            }\n            const resolver = pendingListeners.get(data.id);\n            if (!resolver) {\n                return;\n            }\n            try {\n                resolver(data);\n            }\n            finally {\n                pendingListeners.delete(data.id);\n            }\n        });\n        return createProxy(ep, pendingListeners, [], target);\n    }\n    function throwIfProxyReleased(isReleased) {\n        if (isReleased) {\n            throw new Error(\"Proxy has been released and is not useable\");\n        }\n    }\n    function releaseEndpoint(ep) {\n        return requestResponseMessage(ep, new Map(), {\n            type: \"RELEASE\" /* MessageType.RELEASE */,\n        }).then(() => {\n            closeEndPoint(ep);\n        });\n    }\n    const proxyCounter = new WeakMap();\n    const proxyFinalizers = \"FinalizationRegistry\" in globalThis &&\n        new FinalizationRegistry((ep) => {\n            const newCount = (proxyCounter.get(ep) || 0) - 1;\n            proxyCounter.set(ep, newCount);\n            if (newCount === 0) {\n                releaseEndpoint(ep);\n            }\n        });\n    function registerProxy(proxy, ep) {\n        const newCount = (proxyCounter.get(ep) || 0) + 1;\n        proxyCounter.set(ep, newCount);\n        if (proxyFinalizers) {\n            proxyFinalizers.register(proxy, ep, proxy);\n        }\n    }\n    function unregisterProxy(proxy) {\n        if (proxyFinalizers) {\n            proxyFinalizers.unregister(proxy);\n        }\n    }\n    function createProxy(ep, pendingListeners, path = [], target = function () { }) {\n        let isProxyReleased = false;\n        const proxy = new Proxy(target, {\n            get(_target, prop) {\n                throwIfProxyReleased(isProxyReleased);\n                if (prop === releaseProxy) {\n                    return () => {\n                        unregisterProxy(proxy);\n                        releaseEndpoint(ep);\n                        pendingListeners.clear();\n                        isProxyReleased = true;\n                    };\n                }\n                if (prop === \"then\") {\n                    if (path.length === 0) {\n                        return { then: () => proxy };\n                    }\n                    const r = requestResponseMessage(ep, pendingListeners, {\n                        type: \"GET\" /* MessageType.GET */,\n                        path: path.map((p) => p.toString()),\n                    }).then(fromWireValue);\n                    return r.then.bind(r);\n                }\n                return createProxy(ep, pendingListeners, [...path, prop]);\n            },\n            set(_target, prop, rawValue) {\n                throwIfProxyReleased(isProxyReleased);\n                // FIXME: ES6 Proxy Handler `set` methods are supposed to return a\n                // boolean. To show good will, we return true asynchronously ¯\\_(ツ)_/¯\n                const [value, transferables] = toWireValue(rawValue);\n                return requestResponseMessage(ep, pendingListeners, {\n                    type: \"SET\" /* MessageType.SET */,\n                    path: [...path, prop].map((p) => p.toString()),\n                    value,\n                }, transferables).then(fromWireValue);\n            },\n            apply(_target, _thisArg, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const last = path[path.length - 1];\n                if (last === createEndpoint) {\n                    return requestResponseMessage(ep, pendingListeners, {\n                        type: \"ENDPOINT\" /* MessageType.ENDPOINT */,\n                    }).then(fromWireValue);\n                }\n                // We just pretend that `bind()` didn’t happen.\n                if (last === \"bind\") {\n                    return createProxy(ep, pendingListeners, path.slice(0, -1));\n                }\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, pendingListeners, {\n                    type: \"APPLY\" /* MessageType.APPLY */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n            construct(_target, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, pendingListeners, {\n                    type: \"CONSTRUCT\" /* MessageType.CONSTRUCT */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n        });\n        registerProxy(proxy, ep);\n        return proxy;\n    }\n    function myFlat(arr) {\n        return Array.prototype.concat.apply([], arr);\n    }\n    function processArguments(argumentList) {\n        const processed = argumentList.map(toWireValue);\n        return [processed.map((v) => v[0]), myFlat(processed.map((v) => v[1]))];\n    }\n    const transferCache = new WeakMap();\n    function transfer(obj, transfers) {\n        transferCache.set(obj, transfers);\n        return obj;\n    }\n    function proxy(obj) {\n        return Object.assign(obj, { [proxyMarker]: true });\n    }\n    function toWireValue(value) {\n        for (const [name, handler] of transferHandlers) {\n            if (handler.canHandle(value)) {\n                const [serializedValue, transferables] = handler.serialize(value);\n                return [\n                    {\n                        type: \"HANDLER\" /* WireValueType.HANDLER */,\n                        name,\n                        value: serializedValue,\n                    },\n                    transferables,\n                ];\n            }\n        }\n        return [\n            {\n                type: \"RAW\" /* WireValueType.RAW */,\n                value,\n            },\n            transferCache.get(value) || [],\n        ];\n    }\n    function fromWireValue(value) {\n        switch (value.type) {\n            case \"HANDLER\" /* WireValueType.HANDLER */:\n                return transferHandlers.get(value.name).deserialize(value.value);\n            case \"RAW\" /* WireValueType.RAW */:\n                return value.value;\n        }\n    }\n    function requestResponseMessage(ep, pendingListeners, msg, transfers) {\n        return new Promise((resolve) => {\n            const id = generateUUID();\n            pendingListeners.set(id, resolve);\n            if (ep.start) {\n                ep.start();\n            }\n            ep.postMessage(Object.assign({ id }, msg), transfers);\n        });\n    }\n    function generateUUID() {\n        return new Array(4)\n            .fill(0)\n            .map(() => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16))\n            .join(\"-\");\n    }\n\n    /**\n     * MatrixRenderer class is meant to be used within a Web Worker context,\n     * using Comlink to facilitate communication between the main thread and the worker.\n     * The MatrixRenderer class manages a matrix of dies, once an instance of MatrixRenderer is created,\n     * it is exposed to the main thread using Comlink's `expose` method.\n     * This setup is used in the wafer-map component to perform heavy computational duties\n     */\n    class MatrixRenderer {\n        constructor() {\n            this.values = Float64Array.from([]);\n            this.scaledColumnIndices = Float64Array.from([]);\n            this.scaledRowIndices = Float64Array.from([]);\n            this.columnIndicesPositions = Int32Array.from([]);\n            this.colorIndices = Int32Array.from([]);\n            this.colors = [];\n            this.colorValues = Float64Array.from([]);\n            this.outsideRangeDieColor = 'rgba(218,223,236,1)';\n            this.fontSizeFactor = 0.8;\n            this.renderConfig = {\n                dieDimensions: {\n                    width: 0,\n                    height: 0\n                },\n                margin: {\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                    left: 0\n                },\n                verticalCoefficient: 1,\n                horizontalCoefficient: 1,\n                horizontalConstant: 0,\n                verticalConstant: 0,\n                gridMinX: 0,\n                gridMaxX: 0,\n                gridMinY: 0,\n                gridMaxY: 0,\n                labelsFontSize: 0,\n                colorScale: [],\n                dieLabelsSuffix: '',\n                maxCharacters: 0\n            };\n            this.transformConfig = {\n                transform: {\n                    k: 1,\n                    x: 0,\n                    y: 0\n                },\n                topLeftCanvasCorner: {\n                    x: 0,\n                    y: 0\n                },\n                bottomRightCanvasCorner: {\n                    x: 0,\n                    y: 0\n                }\n            };\n        }\n        setMatrixData(columnIndices, rowIndices, valuesBuffer) {\n            const scaledColumnIndex = [];\n            const columnPositions = [];\n            const scaledRowIndices = [];\n            const values = [];\n            const colorIndices = [];\n            let prevXIndex;\n            let dieCount = 0;\n            for (let i = 0; i < columnIndices.length; i++) {\n                const xIndex = columnIndices[i];\n                const yIndex = rowIndices[i];\n                if (this.isDieInGrid(xIndex, yIndex)) {\n                    if (xIndex !== prevXIndex) {\n                        scaledColumnIndex.push(this.calculateHorizontalScaledIndices(xIndex));\n                        columnPositions.push(dieCount);\n                        prevXIndex = xIndex;\n                    }\n                    scaledRowIndices.push(this.calculateVerticalScaledIndices(yIndex));\n                    const value = valuesBuffer[i];\n                    values.push(value);\n                    colorIndices.push(this.findColorIndex(value));\n                    dieCount += 1;\n                }\n            }\n            this.scaledColumnIndices = Float64Array.from(scaledColumnIndex);\n            this.columnIndicesPositions = Int32Array.from(columnPositions);\n            this.scaledRowIndices = Float64Array.from(scaledRowIndices);\n            this.values = Float64Array.from(values);\n            this.colorIndices = Int32Array.from(colorIndices);\n        }\n        setRenderConfig(renderConfig) {\n            this.renderConfig = renderConfig;\n            this.colors = renderConfig.colorScale.map(marker => marker.color);\n            this.colorValues = Float64Array.from(renderConfig.colorScale.map(marker => marker.value));\n        }\n        setTransformConfig(transformData) {\n            this.transformConfig = transformData;\n        }\n        setCanvas(canvas) {\n            this.canvas = canvas;\n            this.context = canvas.getContext('2d');\n        }\n        scaleCanvas() {\n            this.context.translate(this.transformConfig.transform.x, this.transformConfig.transform.y);\n            this.context.scale(this.transformConfig.transform.k, this.transformConfig.transform.k);\n        }\n        setCanvasDimensions(data) {\n            this.canvas.width = data.width;\n            this.canvas.height = data.height;\n        }\n        getCanvasDimensions() {\n            return {\n                width: this.canvas.width,\n                height: this.canvas.height\n            };\n        }\n        clearCanvas() {\n            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n        }\n        drawWafer() {\n            this.context.restore();\n            this.context.save();\n            this.clearCanvas();\n            this.scaleCanvas();\n            for (let i = 0; i < this.scaledColumnIndices.length; i++) {\n                const scaledX = this.scaledColumnIndices[i];\n                if (!(scaledX >= this.transformConfig.topLeftCanvasCorner.x\n                    && scaledX < this.transformConfig.bottomRightCanvasCorner.x)) {\n                    continue;\n                }\n                // columnIndexPositions is used to get chunks to determine the start and end index of the column, it looks something like [0, 1, 4, 9, 12]\n                // This means that the first column has a start index of 0 and an end index of 1, the second column has a start index of 1 and an end index of 4, and so on\n                // scaledRowIndices is used when we reach the end of the columnIndexPositions, when columnIndexPositions is [0, 1, 4, 9, 12], scaledRowIndices is 13\n                const columnEndIndex = this.columnIndicesPositions[i + 1] !== undefined\n                    ? this.columnIndicesPositions[i + 1]\n                    : this.scaledRowIndices.length;\n                for (let columnStartIndex = this.columnIndicesPositions[i]; columnStartIndex < columnEndIndex; columnStartIndex++) {\n                    const scaledY = this.scaledRowIndices[columnStartIndex];\n                    if (!(scaledY >= this.transformConfig.topLeftCanvasCorner.y\n                        && scaledY < this.transformConfig.bottomRightCanvasCorner.y)) {\n                        continue;\n                    }\n                    // Fill style is temporary green for all dies, will be replaced with a color based on the value of the die in a future implementation\n                    this.context.fillStyle = this.colors[this.colorIndices[columnStartIndex]]\n                        ?? this.outsideRangeDieColor;\n                    this.context.fillRect(scaledX, scaledY, this.renderConfig.dieDimensions.width, this.renderConfig.dieDimensions.height);\n                }\n            }\n        }\n        drawText() {\n            this.context.font = `${this.renderConfig.labelsFontSize.toString()}px sans-serif`;\n            this.context.fillStyle = '#ffffff';\n            this.context.textAlign = 'center';\n            this.context.lineCap = 'butt';\n            const approximateTextHeight = this.context.measureText('M');\n            for (let i = 0; i < this.scaledColumnIndices.length; i++) {\n                const scaledX = this.scaledColumnIndices[i];\n                if (!(scaledX >= this.transformConfig.topLeftCanvasCorner.x\n                    && scaledX < this.transformConfig.bottomRightCanvasCorner.x)) {\n                    continue;\n                }\n                // columnIndexPositions is used to get chunks to determine the start and end index of the column, it looks something like [0, 1, 4, 9, 12]\n                // This means that the first column has a start index of 0 and an end index of 1, the second column has a start index of 1 and an end index of 4, and so on\n                // scaledRowIndices is used when we reach the end of the columnIndexPositions, when columnIndexPositions is [0, 1, 4, 9, 12], scaledRowIndices is 13\n                const columnEndIndex = this.columnIndicesPositions[i + 1] !== undefined\n                    ? this.columnIndicesPositions[i + 1]\n                    : this.scaledRowIndices.length;\n                for (let columnStartIndex = this.columnIndicesPositions[i]; columnStartIndex < columnEndIndex; columnStartIndex++) {\n                    const scaledY = this.scaledRowIndices[columnStartIndex];\n                    if (!(scaledY >= this.transformConfig.topLeftCanvasCorner.y\n                        && scaledY < this.transformConfig.bottomRightCanvasCorner.y)) {\n                        continue;\n                    }\n                    let label = `${this.values[columnStartIndex] || 'NaN'}${this.renderConfig.dieLabelsSuffix}`;\n                    if (label.length >= this.renderConfig.maxCharacters) {\n                        label = `${label.substring(0, this.renderConfig.maxCharacters)}…`;\n                    }\n                    this.context.fillText(label, scaledX + this.renderConfig.dieDimensions.width / 2, scaledY\n                        + this.renderConfig.dieDimensions.height / 2\n                        + approximateTextHeight.width / 2, this.renderConfig.dieDimensions.width * this.fontSizeFactor);\n                }\n            }\n        }\n        isDieInGrid(x, y) {\n            return (x >= this.renderConfig.gridMinX\n                && x <= this.renderConfig.gridMaxX\n                && y >= this.renderConfig.gridMinY\n                && y <= this.renderConfig.gridMaxY);\n        }\n        calculateHorizontalScaledIndices(columnIndex) {\n            return (this.renderConfig.horizontalCoefficient * columnIndex\n                + this.renderConfig.horizontalConstant\n                + this.renderConfig.margin.left);\n        }\n        calculateVerticalScaledIndices(rowIndex) {\n            return (this.renderConfig.verticalCoefficient * rowIndex\n                + this.renderConfig.verticalConstant\n                + this.renderConfig.margin.top);\n        }\n        findColorIndex(value) {\n            let index = -1;\n            if (this.colorValues.length === 0 || this.colorValues[0] >= value) {\n                return index;\n            }\n            for (let i = 0; i < this.colorValues.length; i++) {\n                if (value <= this.colorValues[i]) {\n                    index = i;\n                    break;\n                }\n            }\n            return index;\n        }\n    }\n    expose(MatrixRenderer);\n\n    exports.MatrixRenderer = MatrixRenderer;\n\n    return exports;\n\n})({});\n";
+  const workerCode = "var MatrixRenderer = (function (exports) {\n    'use strict';\n\n    /**\n     * @license\n     * Copyright 2019 Google LLC\n     * SPDX-License-Identifier: Apache-2.0\n     */\n    const proxyMarker = Symbol(\"Comlink.proxy\");\n    const createEndpoint = Symbol(\"Comlink.endpoint\");\n    const releaseProxy = Symbol(\"Comlink.releaseProxy\");\n    const finalizer = Symbol(\"Comlink.finalizer\");\n    const throwMarker = Symbol(\"Comlink.thrown\");\n    const isObject = (val) => (typeof val === \"object\" && val !== null) || typeof val === \"function\";\n    /**\n     * Internal transfer handle to handle objects marked to proxy.\n     */\n    const proxyTransferHandler = {\n        canHandle: (val) => isObject(val) && val[proxyMarker],\n        serialize(obj) {\n            const { port1, port2 } = new MessageChannel();\n            expose(obj, port1);\n            return [port2, [port2]];\n        },\n        deserialize(port) {\n            port.start();\n            return wrap(port);\n        },\n    };\n    /**\n     * Internal transfer handler to handle thrown exceptions.\n     */\n    const throwTransferHandler = {\n        canHandle: (value) => isObject(value) && throwMarker in value,\n        serialize({ value }) {\n            let serialized;\n            if (value instanceof Error) {\n                serialized = {\n                    isError: true,\n                    value: {\n                        message: value.message,\n                        name: value.name,\n                        stack: value.stack,\n                    },\n                };\n            }\n            else {\n                serialized = { isError: false, value };\n            }\n            return [serialized, []];\n        },\n        deserialize(serialized) {\n            if (serialized.isError) {\n                throw Object.assign(new Error(serialized.value.message), serialized.value);\n            }\n            throw serialized.value;\n        },\n    };\n    /**\n     * Allows customizing the serialization of certain values.\n     */\n    const transferHandlers = new Map([\n        [\"proxy\", proxyTransferHandler],\n        [\"throw\", throwTransferHandler],\n    ]);\n    function isAllowedOrigin(allowedOrigins, origin) {\n        for (const allowedOrigin of allowedOrigins) {\n            if (origin === allowedOrigin || allowedOrigin === \"*\") {\n                return true;\n            }\n            if (allowedOrigin instanceof RegExp && allowedOrigin.test(origin)) {\n                return true;\n            }\n        }\n        return false;\n    }\n    function expose(obj, ep = globalThis, allowedOrigins = [\"*\"]) {\n        ep.addEventListener(\"message\", function callback(ev) {\n            if (!ev || !ev.data) {\n                return;\n            }\n            if (!isAllowedOrigin(allowedOrigins, ev.origin)) {\n                console.warn(`Invalid origin '${ev.origin}' for comlink proxy`);\n                return;\n            }\n            const { id, type, path } = Object.assign({ path: [] }, ev.data);\n            const argumentList = (ev.data.argumentList || []).map(fromWireValue);\n            let returnValue;\n            try {\n                const parent = path.slice(0, -1).reduce((obj, prop) => obj[prop], obj);\n                const rawValue = path.reduce((obj, prop) => obj[prop], obj);\n                switch (type) {\n                    case \"GET\" /* MessageType.GET */:\n                        {\n                            returnValue = rawValue;\n                        }\n                        break;\n                    case \"SET\" /* MessageType.SET */:\n                        {\n                            parent[path.slice(-1)[0]] = fromWireValue(ev.data.value);\n                            returnValue = true;\n                        }\n                        break;\n                    case \"APPLY\" /* MessageType.APPLY */:\n                        {\n                            returnValue = rawValue.apply(parent, argumentList);\n                        }\n                        break;\n                    case \"CONSTRUCT\" /* MessageType.CONSTRUCT */:\n                        {\n                            const value = new rawValue(...argumentList);\n                            returnValue = proxy(value);\n                        }\n                        break;\n                    case \"ENDPOINT\" /* MessageType.ENDPOINT */:\n                        {\n                            const { port1, port2 } = new MessageChannel();\n                            expose(obj, port2);\n                            returnValue = transfer(port1, [port1]);\n                        }\n                        break;\n                    case \"RELEASE\" /* MessageType.RELEASE */:\n                        {\n                            returnValue = undefined;\n                        }\n                        break;\n                    default:\n                        return;\n                }\n            }\n            catch (value) {\n                returnValue = { value, [throwMarker]: 0 };\n            }\n            Promise.resolve(returnValue)\n                .catch((value) => {\n                return { value, [throwMarker]: 0 };\n            })\n                .then((returnValue) => {\n                const [wireValue, transferables] = toWireValue(returnValue);\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n                if (type === \"RELEASE\" /* MessageType.RELEASE */) {\n                    // detach and deactive after sending release response above.\n                    ep.removeEventListener(\"message\", callback);\n                    closeEndPoint(ep);\n                    if (finalizer in obj && typeof obj[finalizer] === \"function\") {\n                        obj[finalizer]();\n                    }\n                }\n            })\n                .catch((error) => {\n                // Send Serialization Error To Caller\n                const [wireValue, transferables] = toWireValue({\n                    value: new TypeError(\"Unserializable return value\"),\n                    [throwMarker]: 0,\n                });\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n            });\n        });\n        if (ep.start) {\n            ep.start();\n        }\n    }\n    function isMessagePort(endpoint) {\n        return endpoint.constructor.name === \"MessagePort\";\n    }\n    function closeEndPoint(endpoint) {\n        if (isMessagePort(endpoint))\n            endpoint.close();\n    }\n    function wrap(ep, target) {\n        const pendingListeners = new Map();\n        ep.addEventListener(\"message\", function handleMessage(ev) {\n            const { data } = ev;\n            if (!data || !data.id) {\n                return;\n            }\n            const resolver = pendingListeners.get(data.id);\n            if (!resolver) {\n                return;\n            }\n            try {\n                resolver(data);\n            }\n            finally {\n                pendingListeners.delete(data.id);\n            }\n        });\n        return createProxy(ep, pendingListeners, [], target);\n    }\n    function throwIfProxyReleased(isReleased) {\n        if (isReleased) {\n            throw new Error(\"Proxy has been released and is not useable\");\n        }\n    }\n    function releaseEndpoint(ep) {\n        return requestResponseMessage(ep, new Map(), {\n            type: \"RELEASE\" /* MessageType.RELEASE */,\n        }).then(() => {\n            closeEndPoint(ep);\n        });\n    }\n    const proxyCounter = new WeakMap();\n    const proxyFinalizers = \"FinalizationRegistry\" in globalThis &&\n        new FinalizationRegistry((ep) => {\n            const newCount = (proxyCounter.get(ep) || 0) - 1;\n            proxyCounter.set(ep, newCount);\n            if (newCount === 0) {\n                releaseEndpoint(ep);\n            }\n        });\n    function registerProxy(proxy, ep) {\n        const newCount = (proxyCounter.get(ep) || 0) + 1;\n        proxyCounter.set(ep, newCount);\n        if (proxyFinalizers) {\n            proxyFinalizers.register(proxy, ep, proxy);\n        }\n    }\n    function unregisterProxy(proxy) {\n        if (proxyFinalizers) {\n            proxyFinalizers.unregister(proxy);\n        }\n    }\n    function createProxy(ep, pendingListeners, path = [], target = function () { }) {\n        let isProxyReleased = false;\n        const proxy = new Proxy(target, {\n            get(_target, prop) {\n                throwIfProxyReleased(isProxyReleased);\n                if (prop === releaseProxy) {\n                    return () => {\n                        unregisterProxy(proxy);\n                        releaseEndpoint(ep);\n                        pendingListeners.clear();\n                        isProxyReleased = true;\n                    };\n                }\n                if (prop === \"then\") {\n                    if (path.length === 0) {\n                        return { then: () => proxy };\n                    }\n                    const r = requestResponseMessage(ep, pendingListeners, {\n                        type: \"GET\" /* MessageType.GET */,\n                        path: path.map((p) => p.toString()),\n                    }).then(fromWireValue);\n                    return r.then.bind(r);\n                }\n                return createProxy(ep, pendingListeners, [...path, prop]);\n            },\n            set(_target, prop, rawValue) {\n                throwIfProxyReleased(isProxyReleased);\n                // FIXME: ES6 Proxy Handler `set` methods are supposed to return a\n                // boolean. To show good will, we return true asynchronously ¯\\_(ツ)_/¯\n                const [value, transferables] = toWireValue(rawValue);\n                return requestResponseMessage(ep, pendingListeners, {\n                    type: \"SET\" /* MessageType.SET */,\n                    path: [...path, prop].map((p) => p.toString()),\n                    value,\n                }, transferables).then(fromWireValue);\n            },\n            apply(_target, _thisArg, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const last = path[path.length - 1];\n                if (last === createEndpoint) {\n                    return requestResponseMessage(ep, pendingListeners, {\n                        type: \"ENDPOINT\" /* MessageType.ENDPOINT */,\n                    }).then(fromWireValue);\n                }\n                // We just pretend that `bind()` didn’t happen.\n                if (last === \"bind\") {\n                    return createProxy(ep, pendingListeners, path.slice(0, -1));\n                }\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, pendingListeners, {\n                    type: \"APPLY\" /* MessageType.APPLY */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n            construct(_target, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, pendingListeners, {\n                    type: \"CONSTRUCT\" /* MessageType.CONSTRUCT */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n        });\n        registerProxy(proxy, ep);\n        return proxy;\n    }\n    function myFlat(arr) {\n        return Array.prototype.concat.apply([], arr);\n    }\n    function processArguments(argumentList) {\n        const processed = argumentList.map(toWireValue);\n        return [processed.map((v) => v[0]), myFlat(processed.map((v) => v[1]))];\n    }\n    const transferCache = new WeakMap();\n    function transfer(obj, transfers) {\n        transferCache.set(obj, transfers);\n        return obj;\n    }\n    function proxy(obj) {\n        return Object.assign(obj, { [proxyMarker]: true });\n    }\n    function toWireValue(value) {\n        for (const [name, handler] of transferHandlers) {\n            if (handler.canHandle(value)) {\n                const [serializedValue, transferables] = handler.serialize(value);\n                return [\n                    {\n                        type: \"HANDLER\" /* WireValueType.HANDLER */,\n                        name,\n                        value: serializedValue,\n                    },\n                    transferables,\n                ];\n            }\n        }\n        return [\n            {\n                type: \"RAW\" /* WireValueType.RAW */,\n                value,\n            },\n            transferCache.get(value) || [],\n        ];\n    }\n    function fromWireValue(value) {\n        switch (value.type) {\n            case \"HANDLER\" /* WireValueType.HANDLER */:\n                return transferHandlers.get(value.name).deserialize(value.value);\n            case \"RAW\" /* WireValueType.RAW */:\n                return value.value;\n        }\n    }\n    function requestResponseMessage(ep, pendingListeners, msg, transfers) {\n        return new Promise((resolve) => {\n            const id = generateUUID();\n            pendingListeners.set(id, resolve);\n            if (ep.start) {\n                ep.start();\n            }\n            ep.postMessage(Object.assign({ id }, msg), transfers);\n        });\n    }\n    function generateUUID() {\n        return new Array(4)\n            .fill(0)\n            .map(() => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16))\n            .join(\"-\");\n    }\n\n    /**\n     * MatrixRenderer class is meant to be used within a Web Worker context,\n     * using Comlink to facilitate communication between the main thread and the worker.\n     * The MatrixRenderer class manages a matrix of dies, once an instance of MatrixRenderer is created,\n     * it is exposed to the main thread using Comlink's `expose` method.\n     * This setup is used in the wafer-map component to perform heavy computational duties\n     */\n    class MatrixRenderer {\n        constructor() {\n            this.values = Float64Array.from([]);\n            this.scaledColumnIndices = Float64Array.from([]);\n            this.scaledRowIndices = Float64Array.from([]);\n            this.columnIndicesPositions = Int32Array.from([]);\n            this.colorIndices = Int32Array.from([]);\n            this.colors = [];\n            this.colorValues = Float64Array.from([]);\n            this.outsideRangeDieColor = 'rgba(218,223,236,1)';\n            this.fontSizeFactor = 0.8;\n            this.renderConfig = {\n                dieDimensions: {\n                    width: 0,\n                    height: 0\n                },\n                margin: {\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                    left: 0\n                },\n                verticalCoefficient: 1,\n                horizontalCoefficient: 1,\n                horizontalConstant: 0,\n                verticalConstant: 0,\n                gridMinX: 0,\n                gridMaxX: 0,\n                gridMinY: 0,\n                gridMaxY: 0,\n                labelsFontSize: 0,\n                colorScale: [],\n                dieLabelsSuffix: '',\n                maxCharacters: 0\n            };\n            this.transformConfig = {\n                transform: {\n                    k: 1,\n                    x: 0,\n                    y: 0\n                },\n                topLeftCanvasCorner: {\n                    x: 0,\n                    y: 0\n                },\n                bottomRightCanvasCorner: {\n                    x: 0,\n                    y: 0\n                }\n            };\n        }\n        setMatrixData(columnIndices, rowIndices, valuesBuffer) {\n            const scaledColumnIndex = [];\n            const columnPositions = [];\n            const scaledRowIndices = [];\n            const values = [];\n            const colorIndices = [];\n            let prevXIndex;\n            let dieCount = 0;\n            for (let i = 0; i < columnIndices.length; i++) {\n                const xIndex = columnIndices[i];\n                const yIndex = rowIndices[i];\n                if (this.isDieInGrid(xIndex, yIndex)) {\n                    if (xIndex !== prevXIndex) {\n                        scaledColumnIndex.push(this.calculateHorizontalScaledIndices(xIndex));\n                        columnPositions.push(dieCount);\n                        prevXIndex = xIndex;\n                    }\n                    scaledRowIndices.push(this.calculateVerticalScaledIndices(yIndex));\n                    const value = valuesBuffer[i];\n                    values.push(value);\n                    colorIndices.push(this.findColorIndex(value));\n                    dieCount += 1;\n                }\n            }\n            this.scaledColumnIndices = Float64Array.from(scaledColumnIndex);\n            this.columnIndicesPositions = Int32Array.from(columnPositions);\n            this.scaledRowIndices = Float64Array.from(scaledRowIndices);\n            this.values = Float64Array.from(values);\n            this.colorIndices = Int32Array.from(colorIndices);\n        }\n        setRenderConfig(renderConfig) {\n            this.renderConfig = renderConfig;\n            this.colors = renderConfig.colorScale.map(marker => marker.color);\n            this.colorValues = Float64Array.from(renderConfig.colorScale.map(marker => marker.value));\n        }\n        setTransformConfig(transformData) {\n            this.transformConfig = transformData;\n        }\n        setCanvas(canvas) {\n            this.canvas = canvas;\n            this.context = canvas.getContext('2d');\n        }\n        scaleCanvas() {\n            this.context.translate(this.transformConfig.transform.x, this.transformConfig.transform.y);\n            this.context.scale(this.transformConfig.transform.k, this.transformConfig.transform.k);\n        }\n        setCanvasDimensions(data) {\n            this.canvas.width = data.width;\n            this.canvas.height = data.height;\n        }\n        getCanvasDimensions() {\n            return {\n                width: this.canvas.width,\n                height: this.canvas.height\n            };\n        }\n        clearCanvas() {\n            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n        }\n        drawWafer() {\n            this.context.restore();\n            this.context.save();\n            this.clearCanvas();\n            this.scaleCanvas();\n            for (let i = 0; i < this.scaledColumnIndices.length; i++) {\n                const scaledX = this.scaledColumnIndices[i];\n                if (!(scaledX >= this.transformConfig.topLeftCanvasCorner.x\n                    && scaledX < this.transformConfig.bottomRightCanvasCorner.x)) {\n                    continue;\n                }\n                // columnIndexPositions is used to get chunks to determine the start and end index of the column, it looks something like [0, 1, 4, 9, 12]\n                // This means that the first column has a start index of 0 and an end index of 1, the second column has a start index of 1 and an end index of 4, and so on\n                // scaledRowIndices is used when we reach the end of the columnIndexPositions, when columnIndexPositions is [0, 1, 4, 9, 12], scaledRowIndices is 13\n                const columnEndIndex = this.columnIndicesPositions[i + 1] !== undefined\n                    ? this.columnIndicesPositions[i + 1]\n                    : this.scaledRowIndices.length;\n                for (let columnStartIndex = this.columnIndicesPositions[i]; columnStartIndex < columnEndIndex; columnStartIndex++) {\n                    const scaledY = this.scaledRowIndices[columnStartIndex];\n                    if (!(scaledY >= this.transformConfig.topLeftCanvasCorner.y\n                        && scaledY < this.transformConfig.bottomRightCanvasCorner.y)) {\n                        continue;\n                    }\n                    // Fill style is temporary green for all dies, will be replaced with a color based on the value of the die in a future implementation\n                    this.context.fillStyle = this.colors[this.colorIndices[columnStartIndex]]\n                        ?? this.outsideRangeDieColor;\n                    this.context.fillRect(scaledX, scaledY, this.renderConfig.dieDimensions.width, this.renderConfig.dieDimensions.height);\n                }\n            }\n        }\n        drawText() {\n            this.context.font = `${this.renderConfig.labelsFontSize.toString()}px sans-serif`;\n            this.context.fillStyle = '#ffffff';\n            this.context.textAlign = 'center';\n            this.context.lineCap = 'butt';\n            const approximateTextHeight = this.context.measureText('M');\n            for (let i = 0; i < this.scaledColumnIndices.length; i++) {\n                const scaledX = this.scaledColumnIndices[i];\n                if (!(scaledX >= this.transformConfig.topLeftCanvasCorner.x\n                    && scaledX < this.transformConfig.bottomRightCanvasCorner.x)) {\n                    continue;\n                }\n                // columnIndexPositions is used to get chunks to determine the start and end index of the column, it looks something like [0, 1, 4, 9, 12]\n                // This means that the first column has a start index of 0 and an end index of 1, the second column has a start index of 1 and an end index of 4, and so on\n                // scaledRowIndices is used when we reach the end of the columnIndexPositions, when columnIndexPositions is [0, 1, 4, 9, 12], scaledRowIndices is 13\n                const columnEndIndex = this.columnIndicesPositions[i + 1] !== undefined\n                    ? this.columnIndicesPositions[i + 1]\n                    : this.scaledRowIndices.length;\n                for (let columnStartIndex = this.columnIndicesPositions[i]; columnStartIndex < columnEndIndex; columnStartIndex++) {\n                    const scaledY = this.scaledRowIndices[columnStartIndex];\n                    if (!(scaledY >= this.transformConfig.topLeftCanvasCorner.y\n                        && scaledY < this.transformConfig.bottomRightCanvasCorner.y)) {\n                        continue;\n                    }\n                    let label = `${this.values[columnStartIndex] ?? 'NaN'}${this.renderConfig.dieLabelsSuffix}`;\n                    if (label.length >= this.renderConfig.maxCharacters) {\n                        label = `${label.substring(0, this.renderConfig.maxCharacters)}…`;\n                    }\n                    this.context.fillText(label, scaledX + this.renderConfig.dieDimensions.width / 2, scaledY\n                        + this.renderConfig.dieDimensions.height / 2\n                        + approximateTextHeight.width / 2, this.renderConfig.dieDimensions.width * this.fontSizeFactor);\n                }\n            }\n        }\n        isDieInGrid(x, y) {\n            return (x >= this.renderConfig.gridMinX\n                && x <= this.renderConfig.gridMaxX\n                && y >= this.renderConfig.gridMinY\n                && y <= this.renderConfig.gridMaxY);\n        }\n        calculateHorizontalScaledIndices(columnIndex) {\n            return (this.renderConfig.horizontalCoefficient * columnIndex\n                + this.renderConfig.horizontalConstant\n                + this.renderConfig.margin.left);\n        }\n        calculateVerticalScaledIndices(rowIndex) {\n            return (this.renderConfig.verticalCoefficient * rowIndex\n                + this.renderConfig.verticalConstant\n                + this.renderConfig.margin.top);\n        }\n        findColorIndex(value) {\n            let index = -1;\n            if (this.colorValues.length === 0 || this.colorValues[0] >= value) {\n                return index;\n            }\n            for (let i = 0; i < this.colorValues.length; i++) {\n                if (value <= this.colorValues[i]) {\n                    index = i;\n                    break;\n                }\n            }\n            return index;\n        }\n    }\n    expose(MatrixRenderer);\n\n    exports.MatrixRenderer = MatrixRenderer;\n\n    return exports;\n\n})({});\n";
 
   let url;
   /**
@@ -95767,10 +95821,9 @@ focus outline in that case.
           });
           await this.matrixRenderer.drawWafer();
           if (!snapshot.dieLabelsHidden
-              && snapshot.dieDimensions
               && snapshot.dieDimensions.width
                   * snapshot.dieDimensions.height
-                  * (snapshot.transform.k || 1)
+                  * (snapshot.transform.k !== 0 ? snapshot.transform.k : 1)
                   >= this.minDieDim) {
               await this.matrixRenderer.drawText();
           }
@@ -96728,7 +96781,7 @@ focus outline in that case.
           this.inputEmpty = true;
       }
       slottedInputElementsChanged(_prev, next) {
-          this.inputEmpty = !next?.length;
+          this.inputEmpty = next === undefined || next.length === 0;
       }
   }
   __decorate([
@@ -97068,7 +97121,7 @@ focus outline in that case.
           this.footerActionsIsEmpty = true;
       }
       slottedFooterActionsElementsChanged(_prev, next) {
-          this.footerActionsIsEmpty = !next?.length;
+          this.footerActionsIsEmpty = next === undefined || next.length === 0;
       }
   }
   __decorate([
@@ -97172,7 +97225,7 @@ focus outline in that case.
           this.footerActionsIsEmpty = true;
       }
       slottedFooterActionsElementsChanged(_prev, next) {
-          this.footerActionsIsEmpty = !next?.length;
+          this.footerActionsIsEmpty = next === undefined || next.length === 0;
       }
   }
   __decorate([