@ni/nimble-components 23.0.0 → 24.0.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 21 Mar 2024 16:56:48 GMT
+   * Generated on Tue, 26 Mar 2024 20:29:30 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16324,9 +16324,8 @@
   const DigitalGreenLight = "#009b65";
   const BannerFail100DarkUi = "#d63434";
   const Warning100LightUi = "#ff4b00";
-  const DigitalGreenDark = "#006b46";
+  const DigitalGreenDark = "#008557";
   const DigitalGreenDark105 = "#00734b";
-  const DigitalGreenDark110 = "#00613f";
   const PowerGreen = "#32eb96";
   const Title2Family = "Source Sans Pro";
   const Title2Weight = "400";
@@ -16447,12 +16446,10 @@
       sectionBackgroundColor: 'section-background-color',
       buttonFillPrimaryColor: 'button-fill-primary-color',
       buttonPrimaryFontColor: 'button-primary-font-color',
-      buttonFillActivePrimaryColor: 'button-fill-active-primary-color',
       buttonFillAccentColor: 'button-fill-accent-color',
       buttonAccentBlockFontColor: 'button-accent-block-font-color',
       buttonAccentOutlineFontColor: 'button-accent-outline-font-color',
       buttonBorderAccentOutlineColor: 'button-border-accent-outline-color',
-      buttonFillAccentActiveColor: 'button-fill-accent-active-color',
       fillSelectedColor: 'fill-selected-color',
       fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
       fillHoverSelectedColor: 'fill-hover-selected-color',
@@ -16905,12 +16902,10 @@
   const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
   const buttonFillPrimaryColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillPrimaryColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.75), hexToRgbaCssColor(Black15, 0.3), hexToRgbaCssColor(White, 0.3)));
   const buttonPrimaryFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonPrimaryFontColor)).withDefault((element) => getColorForTheme(element, Black15, Black15, White));
-  const buttonFillActivePrimaryColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillActivePrimaryColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.85), hexToRgbaCssColor(Black15, 0.2), hexToRgbaCssColor(White, 0.2)));
   const buttonFillAccentColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillAccentColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark, DigitalGreenLight, hexToRgbaCssColor(White, 0.1)));
   const buttonAccentBlockFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentBlockFontColor)).withDefault((element) => getColorForTheme(element, White, Black15, White));
   const buttonAccentOutlineFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentOutlineFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White));
   const buttonBorderAccentOutlineColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonBorderAccentOutlineColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, hexToRgbaCssColor(White, 0.3)));
-  const buttonFillAccentActiveColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillAccentActiveColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark, hexToRgbaCssColor(White, 0.2)));
   // Component Sizing Tokens
   const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
   const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
@@ -16946,9 +16941,9 @@
   const [subtitlePlus1Font, subtitlePlus1FontColor, subtitlePlus1DisabledFontColor, subtitlePlus1FontFamily, subtitlePlus1FontWeight, subtitlePlus1FontSize, subtitlePlus1FontLineHeight, subtitlePlus1FallbackFontFamily] = createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight, Subtitle2FallbackFontFamily);
   const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight, subtitleFallbackFontFamily] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight, Subtitle1FallbackFontFamily);
   const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight, linkFallbackFontFamily] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
-  const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight, linkActiveFallbackFontFamily] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
-  const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight, linkProminentFallbackFontFamily] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
-  const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+  const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight, linkActiveFallbackFontFamily] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+  const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight, linkProminentFallbackFontFamily] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+  const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
   const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight, placeholderFallbackFontFamily] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight, PlaceholderFallbackFontFamily);
   const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight, bodyFallbackFontFamily] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight, BodyFallbackFontFamily);
   const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, BodyEmphasizedFallbackFontFamily);
@@ -17352,7 +17347,7 @@
 `;
 
   const styles$V = css `
-    @layer base, hover, focusVisible, active, disabled, top;
+    @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display('inline-flex')}
@@ -17425,15 +17420,15 @@
             display: contents;
         }
 
-        :host([content-hidden]) .content {
-            ${accessiblyHidden}
-        }
-
         [part='start'] {
             display: contents;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
 
+        :host([content-hidden]) .content {
+            ${accessiblyHidden}
+        }
+
         [part='end'] {
             display: contents;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
@@ -17462,6 +17457,8 @@
     @layer active {
         .control:active {
             box-shadow: none;
+            color: ${buttonLabelFontColor};
+            border-color: ${borderHoverColor};
             background-image: linear-gradient(
                 ${fillSelectedColor},
                 ${fillSelectedColor}
@@ -17472,29 +17469,30 @@
         .control:active::before {
             outline: none;
         }
+
+        .control:active [part='start'],
+        .control:active [part='end'] {
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
     }
 
     @layer disabled {
         :host([disabled]) {
-            color: ${buttonLabelDisabledFontColor};
             cursor: default;
         }
 
         :host([disabled]) .control {
+            color: ${buttonLabelDisabledFontColor};
             box-shadow: none;
             background-image: none;
-            color: rgba(${actionRgbPartialColor}, 0.3);
+            background-size: 100% 100%;
         }
 
         :host([disabled]) .control::before {
             box-shadow: none;
         }
 
-        :host([disabled]) slot[name='start']::slotted(*) {
-            opacity: 0.3;
-            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
-        }
-
+        :host([disabled]) slot[name='start']::slotted(*),
         :host([disabled]) slot[name='end']::slotted(*) {
             opacity: 0.3;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
@@ -17559,7 +17557,6 @@
                         rgba(${borderRgbPartialColor}, 0.1),
                         rgba(${borderRgbPartialColor}, 0.1)
                     );
-                    background-size: 100% 100%;
                     border-color: rgba(${borderRgbPartialColor}, 0.1);
                 }
             }
@@ -17574,13 +17571,29 @@
                     border-color: ${buttonBorderAccentOutlineColor};
                     color: ${buttonAccentOutlineFontColor};
                 }
+
+                :host([appearance-variant='accent']) [part='start'],
+                :host([appearance-variant='accent']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};
+                }
             }
-        `), appearanceBehavior(ButtonAppearance.block, css `
-            @layer base {
-                :host([appearance-variant='primary']) [part='start'] {
-                    ${iconColor.cssCustomProperty}: white;
+
+            @layer active {
+                :host([appearance-variant='accent']) .control:active {
+                    color: ${buttonAccentOutlineFontColor};
                 }
 
+                :host([appearance-variant='accent'])
+                    .control:active
+                    [part='start'],
+                :host([appearance-variant='accent'])
+                    .control:active
+                    [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};
+                }
+            }
+        `), appearanceBehavior(ButtonAppearance.block, css `
+            @layer base {
                 :host([appearance-variant='primary']) .control {
                     background-image: linear-gradient(
                         ${buttonFillPrimaryColor},
@@ -17590,14 +17603,6 @@
                     border-color: ${buttonFillPrimaryColor};
                 }
 
-                :host([appearance-variant='primary']) [part='end'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-
-                :host([appearance-variant='accent']) [part='start'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-
                 :host([appearance-variant='accent']) .control {
                     background-image: linear-gradient(
                         ${buttonFillAccentColor},
@@ -17607,24 +17612,14 @@
                     border-color: ${buttonFillAccentColor};
                 }
 
-                :host([appearance-variant='accent']) [part='end'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-            }
-
-            @layer active {
-                :host([appearance-variant='primary']) .control:active {
-                    background-image: linear-gradient(
-                        ${buttonFillActivePrimaryColor},
-                        ${buttonFillActivePrimaryColor}
-                    );
+                :host([appearance-variant='primary']) [part='start'],
+                :host([appearance-variant='primary']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};
                 }
 
-                :host([appearance-variant='accent']) .control:active {
-                    background-image: linear-gradient(
-                        ${buttonFillAccentActiveColor},
-                        ${buttonFillAccentActiveColor}
-                    );
+                :host([appearance-variant='accent']) [part='start'],
+                :host([appearance-variant='accent']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};
                 }
             }
         `));
@@ -20442,60 +20437,22 @@
 
   const styles$G = css `
     ${styles$V}
+    ${buttonAppearanceVariantStyles}
 
-    @layer base {
+    @layer checked {
         .control[aria-pressed='true'] {
             background-color: transparent;
+            color: ${buttonLabelFontColor};
             background-image: linear-gradient(
                 ${fillSelectedColor},
                 ${fillSelectedColor}
             );
             border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
         }
-    }
 
-    @layer hover {
-        .control[aria-pressed='true']:hover {
-            border-color: ${borderHoverColor};
-            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            background-image: linear-gradient(
-                ${fillSelectedColor},
-                ${fillSelectedColor}
-            );
-            background-size: calc(100% - 4px) calc(100% - 4px);
-        }
-    }
-
-    @layer focusVisible {
-        .control[aria-pressed='true']${focusVisible} {
-            border-color: ${borderHoverColor};
-            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            background-image: linear-gradient(
-                ${fillSelectedColor},
-                ${fillSelectedColor}
-            );
-            background-size: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        .control[aria-pressed='true']${focusVisible}::before {
-            outline: ${borderWidth} solid ${borderHoverColor};
-            outline-offset: -3px;
-            color: transparent;
-        }
-    }
-
-    @layer active {
-        .control[aria-pressed='true']:active {
-            box-shadow: none;
-            background-image: linear-gradient(
-                ${fillSelectedColor},
-                ${fillSelectedColor}
-            );
-            background-size: calc(100% - 2px) calc(100% - 2px);
-        }
-
-        .control[aria-pressed='true']:active::before {
-            outline: none;
+        .control[aria-pressed='true'] [part='start'],
+        .control[aria-pressed='true'] [part='end'] {
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
     }
 
@@ -20507,18 +20464,24 @@
             );
             border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
         }
-
-        :host([disabled]) .control[aria-pressed='true']:hover {
-            background-image: linear-gradient(
-                ${fillSelectedColor},
-                ${fillSelectedColor}
-            );
-            background-size: 100% 100%;
-            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
-            box-shadow: none;
-        }
     }
-`;
+`.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+            @layer checked {
+                :host([appearance-variant='accent'])
+                    .control[aria-pressed='true'] {
+                    color: ${buttonAccentOutlineFontColor};
+                }
+
+                :host([appearance-variant='accent'])
+                    .control[aria-pressed='true']
+                    [part='start'],
+                :host([appearance-variant='accent'])
+                    .control[aria-pressed='true']
+                    [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};
+                }
+            }
+        `));
 
   const template$v = (context, definition) => html `
     <div
@@ -20589,6 +20552,9 @@
   __decorate$1([
       attr
   ], ToggleButton.prototype, "appearance", void 0);
+  __decorate$1([
+      attr({ attribute: 'appearance-variant' })
+  ], ToggleButton.prototype, "appearanceVariant", void 0);
   __decorate$1([
       attr({ attribute: 'content-hidden', mode: 'boolean' })
   ], ToggleButton.prototype, "contentHidden", void 0);
@@ -24706,6 +24672,19 @@
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
+  /**
+   * Types of menu button appearance.
+   * @public
+   */
+  /**
+   * The options of where to position the menu relative to the menu button.
+   */
+  const MenuButtonPosition = {
+      above: 'above',
+      below: 'below',
+      auto: 'auto'
+  };
+
   const styles$y = css `
     ${display('inline-block')}
 
@@ -24733,6 +24712,7 @@
         <${toggleButtonTag}
             part="button"
             appearance="${x => x.appearance}"
+            appearance-variant="${x => x.appearanceVariant}"
             ?content-hidden="${x => x.contentHidden}"
             ?checked="${x => x.open}"
             ?disabled="${x => x.disabled}"
@@ -24768,19 +24748,6 @@
     </template>
 `;
 
-  /**
-   * Types of menu button appearance.
-   * @public
-   */
-  /**
-   * The options of where to position the menu relative to the menu button.
-   */
-  const MenuButtonPosition = {
-      above: 'above',
-      below: 'below',
-      auto: 'auto'
-  };
-
   /**
    * A nimble-styled menu button control.
    */
@@ -24957,6 +24924,9 @@
   __decorate$1([
       attr
   ], MenuButton.prototype, "appearance", void 0);
+  __decorate$1([
+      attr({ attribute: 'appearance-variant' })
+  ], MenuButton.prototype, "appearanceVariant", void 0);
   __decorate$1([
       attr({ mode: 'boolean' })
   ], MenuButton.prototype, "disabled", void 0);
@@ -73588,12 +73558,7 @@ img.ProseMirror-separator {
 
   var identity$2 = new Transform(1, 0, 0);
 
-  transform.prototype = Transform.prototype;
-
-  function transform(node) {
-    while (!node.__zoom) if (!(node = node.parentNode)) return identity$2;
-    return node.__zoom;
-  }
+  Transform.prototype;
 
   function nopropagation(event) {
     event.stopImmediatePropagation();
@@ -75312,16 +75277,15 @@ img.ProseMirror-separator {
       get diesRenderInfo() {
           return this._diesRenderInfo;
       }
-      constructor(wafermap, dataManager) {
+      constructor(wafermap) {
           this.wafermap = wafermap;
-          this.dataManager = dataManager;
           this.fontSizeFactor = 0.8;
           this.nonHighlightedOpacity = 0.3;
           this.emptyDieColor = 'rgba(218,223,236,1)';
           this.nanDieColor = 'rgba(122,122,122,1)';
       }
       updateLabelsFontSize() {
-          this._labelsFontSize = this.calculateLabelsFontSize(this.dataManager.dieDimensions, this.wafermap.maxCharacters);
+          this._labelsFontSize = this.calculateLabelsFontSize(this.wafermap.dataManager.dieDimensions, this.wafermap.maxCharacters);
           this.updateDiesRenderInfo();
       }
       updateDiesRenderInfo() {
@@ -75332,9 +75296,9 @@ img.ProseMirror-separator {
               .filter(isDieRenderInfo);
       }
       computeDieRenderInfo(die) {
-          const margin = this.dataManager.margin;
-          const scaledX = this.dataManager.horizontalScale(die.x);
-          const scaledY = this.dataManager.verticalScale(die.y);
+          const margin = this.wafermap.dataManager.margin;
+          const scaledX = this.wafermap.dataManager.horizontalScale(die.x);
+          const scaledY = this.wafermap.dataManager.verticalScale(die.y);
           if (scaledX === undefined || scaledY === undefined) {
               return null;
           }
@@ -75453,7 +75417,7 @@ img.ProseMirror-separator {
       constructor(wafermap) {
           this.wafermap = wafermap;
           this.computations = new Computations(wafermap);
-          this.prerendering = new Prerendering(wafermap, this);
+          this.prerendering = new Prerendering(wafermap);
       }
       updateContainerDimensions() {
           this.computations.updateContainerDimensions();
@@ -75602,147 +75566,6 @@ img.ProseMirror-separator {
       }
   }
 
-  /**
-   * ZoomHandler deals with user interactions and events like zooming
-   */
-  class ZoomHandler {
-      constructor(wafermap) {
-          this.wafermap = wafermap;
-          this.zoomTransform = identity$2;
-          this.minScale = 1.1;
-          this.minExtentPoint = [-100, -100];
-          this.extentPadding = 100;
-      }
-      createZoomBehavior() {
-          this.zoomBehavior = zoom()
-              .scaleExtent([
-              1.1,
-              this.getZoomMax(this.wafermap.canvasWidth * this.wafermap.canvasHeight, this.wafermap.dataManager.containerDimensions.width
-                  * this.wafermap.dataManager.containerDimensions.height)
-          ])
-              .translateExtent([
-              this.minExtentPoint,
-              [
-                  this.wafermap.canvasWidth + this.extentPadding,
-                  this.wafermap.canvasHeight + this.extentPadding
-              ]
-          ])
-              .filter((event) => {
-              const transform$1 = transform(this.wafermap.canvas);
-              const filterEval = transform$1.k >= this.minScale || event.type === 'wheel';
-              return filterEval;
-          })
-              .on('zoom', (event) => {
-              // D3 will automatically remove existing handlers when adding new ones
-              // See: https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_on
-              this.rescale(event);
-          });
-          this.zoomBehavior(select(this.wafermap.canvas));
-      }
-      rescale(event) {
-          const transform = event.transform;
-          if (transform.k === this.minScale) {
-              this.zoomTransform = identity$2;
-              this.zoomBehavior.transform(select(this.wafermap.canvas), identity$2);
-          }
-          else {
-              this.zoomTransform = transform;
-          }
-          this.wafermap.transform = this.zoomTransform;
-      }
-      getZoomMax(canvasArea, dataArea) {
-          return Math.ceil((dataArea / canvasArea) * 100);
-      }
-  }
-
-  /**
-   * HoverHandler deals with user interactions and events like hovering
-   */
-  class HoverHandler {
-      constructor(wafermap) {
-          this.wafermap = wafermap;
-      }
-      mousemove(event) {
-          const mousePosition = {
-              x: event.offsetX,
-              y: event.offsetY
-          };
-          if (!this.hoversOverDie(this.wafermap, mousePosition)) {
-              this.wafermap.hoverDie = undefined;
-              return;
-          }
-          // get original mouse position in case we are in zoom.
-          const invertedPoint = this.wafermap.transform.invert([
-              mousePosition.x,
-              mousePosition.y
-          ]);
-          const dieCoordinates = this.calculateDieCoordinates(this.wafermap, {
-              x: invertedPoint[0],
-              y: invertedPoint[1]
-          });
-          this.wafermap.hoverDie = this.wafermap.dataManager.getWaferMapDie(dieCoordinates);
-      }
-      mouseout() {
-          this.wafermap.hoverDie = undefined;
-      }
-      calculateDieCoordinates(wafermap, mousePosition) {
-          const originLocation = wafermap.originLocation;
-          const xRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
-              || originLocation === WaferMapOriginLocation.topLeft
-              ? Math.floor
-              : Math.ceil;
-          const yRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
-              || originLocation === WaferMapOriginLocation.bottomRight
-              ? Math.floor
-              : Math.ceil;
-          // go to x and y scale to get the x,y values of the die.
-          const x = xRoundFunction(wafermap.dataManager.invertedHorizontalScale(mousePosition.x - wafermap.dataManager.margin.left));
-          const y = yRoundFunction(wafermap.dataManager.invertedVerticalScale(mousePosition.y - wafermap.dataManager.margin.top));
-          return { x, y };
-      }
-      hoversOverDie(wafermap, mousePosition) {
-          const rgba = wafermap.canvasContext.getImageData(mousePosition.x, mousePosition.y, 1, 1).data;
-          let rgbaSum = 0;
-          for (const color of rgba) {
-              rgbaSum += color;
-          }
-          return rgbaSum > 0;
-      }
-  }
-
-  /**
-   * EventCoordinator deals with user interactions and events
-   */
-  class EventCoordinator {
-      constructor(wafermap) {
-          this.wafermap = wafermap;
-          this.onWheelMove = (event) => {
-              event.preventDefault();
-          };
-          this.onMouseMove = (event) => {
-              this.hoverHandler.mousemove(event);
-          };
-          this.onMouseOut = () => {
-              this.hoverHandler.mouseout();
-          };
-          this.zoomHandler = new ZoomHandler(wafermap);
-          this.hoverHandler = new HoverHandler(wafermap);
-      }
-      attachEvents() {
-          this.zoomHandler.createZoomBehavior();
-          this.wafermap.addEventListener('mousemove', this.onMouseMove);
-          this.wafermap.addEventListener('mouseout', this.onMouseOut);
-          this.wafermap.canvas.addEventListener('wheel', this.onWheelMove, {
-              passive: false
-          });
-      }
-      detachEvents() {
-          this.wafermap.removeEventListener('mousemove', this.onMouseMove);
-          this.wafermap.removeEventListener('mouseout', this.onMouseOut);
-          this.wafermap.canvas.removeEventListener('wheel', this.onWheelMove);
-      }
-  }
-
   const trackedItems = [
       'highlightedTags',
       'canvasWidth',
@@ -76448,10 +76271,10 @@ img.ProseMirror-separator {
       }
       validateGridDimensions() {
           this.invalidGridDimensions = false;
-          if (typeof this.wafermap.gridMinX === 'undefined'
-              && typeof this.wafermap.gridMaxX === 'undefined'
-              && typeof this.wafermap.gridMinY === 'undefined'
-              && typeof this.wafermap.gridMaxY === 'undefined') {
+          if (this.wafermap.gridMinX === undefined
+              && this.wafermap.gridMaxX === undefined
+              && this.wafermap.gridMinY === undefined
+              && this.wafermap.gridMaxY === undefined) {
               this.invalidGridDimensions = false;
           }
           else if (typeof this.wafermap.gridMinX !== 'number'
@@ -76470,25 +76293,19 @@ img.ProseMirror-separator {
               this.invalidDiesTableSchema = false;
           }
           else {
-              const colIndexField = this.wafermap.diesTable.schema.fields.findIndex(f => f.name === 'colIndex');
-              const rowIndexField = this.wafermap.diesTable.schema.fields.findIndex(f => f.name === 'rowIndex');
-              const valueField = this.wafermap.diesTable.schema.fields.findIndex(f => f.name === 'value');
-              if (this.wafermap.diesTable.numCols < 3
-                  || colIndexField === -1
-                  || rowIndexField === -1
-                  || valueField === -1
-                  || !DataType.isInt(this.wafermap.diesTable.schema.fields[colIndexField].type)
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                  || this.wafermap.diesTable.schema.fields[colIndexField].type
-                      .bitWidth !== 32
-                  || !DataType.isInt(this.wafermap.diesTable.schema.fields[rowIndexField].type)
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                  || this.wafermap.diesTable.schema.fields[rowIndexField].type
-                      .bitWidth !== 32
-                  || !DataType.isFloat(this.wafermap.diesTable.schema.fields[valueField].type)
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                  || this.wafermap.diesTable.schema.fields[valueField].type
-                      .precision !== Precision.DOUBLE) {
+              const fields = this.wafermap.diesTable.schema.fields;
+              const colField = fields.find(field => field.name === 'colIndex');
+              const rowField = fields.find(field => field.name === 'rowIndex');
+              const valueField = fields.find(field => field.name === 'value');
+              if (!colField
+                  || !rowField
+                  || !valueField
+                  || !DataType.isInt(colField.type)
+                  || colField.type.bitWidth !== 32
+                  || !DataType.isInt(rowField.type)
+                  || rowField.type.bitWidth !== 32
+                  || !DataType.isFloat(valueField.type)
+                  || valueField.type.precision !== Precision.DOUBLE) {
                   this.invalidDiesTableSchema = true;
               }
           }
@@ -76541,6 +76358,200 @@ img.ProseMirror-separator {
       }
   }
 
+  /**
+   * HoverHandler deals with user interactions and events like hovering
+   */
+  let HoverHandler$1 = class HoverHandler {
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          this.onMouseMove = (event) => {
+              if (this.wafermap.isExperimentalRenderer()) {
+                  return;
+              }
+              const mousePosition = {
+                  x: event.offsetX,
+                  y: event.offsetY
+              };
+              if (!this.hoversOverDie(mousePosition)) {
+                  this.wafermap.hoverDie = undefined;
+                  return;
+              }
+              // get original mouse position in case we are in zoom.
+              const invertedPoint = this.wafermap.transform.invert([
+                  mousePosition.x,
+                  mousePosition.y
+              ]);
+              const dieCoordinates = this.calculateDieCoordinates({
+                  x: invertedPoint[0],
+                  y: invertedPoint[1]
+              });
+              this.wafermap.hoverDie = this.wafermap.dataManager.getWaferMapDie(dieCoordinates);
+          };
+          this.onMouseOut = (_event) => {
+              this.wafermap.hoverDie = undefined;
+          };
+      }
+      /**
+       * @internal
+       */
+      connect() {
+          this.wafermap.addEventListener('mousemove', this.onMouseMove);
+          this.wafermap.addEventListener('mouseout', this.onMouseOut);
+      }
+      /**
+       * @internal
+       */
+      disconnect() {
+          this.wafermap.removeEventListener('mousemove', this.onMouseMove);
+          this.wafermap.removeEventListener('mouseout', this.onMouseOut);
+      }
+      calculateDieCoordinates(mousePosition) {
+          const originLocation = this.wafermap.originLocation;
+          const xRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.topLeft
+              ? Math.floor
+              : Math.ceil;
+          const yRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.bottomRight
+              ? Math.floor
+              : Math.ceil;
+          // go to x and y scale to get the x,y values of the die.
+          const x = xRoundFunction(this.wafermap.dataManager.invertedHorizontalScale(mousePosition.x - this.wafermap.dataManager.margin.left));
+          const y = yRoundFunction(this.wafermap.dataManager.invertedVerticalScale(mousePosition.y - this.wafermap.dataManager.margin.top));
+          return { x, y };
+      }
+      hoversOverDie(mousePosition) {
+          const rgba = this.wafermap.canvasContext.getImageData(mousePosition.x, mousePosition.y, 1, 1).data;
+          let rgbaSum = 0;
+          for (const color of rgba) {
+              rgbaSum += color;
+          }
+          return rgbaSum > 0;
+      }
+  };
+
+  /**
+   * HoverHandler deals with user interactions and events like hovering
+   */
+  class HoverHandler {
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          /**
+           * @internal
+           * keep public for testing until data manager refactor
+           */
+          this.onMouseMove = (event) => {
+              if (!this.wafermap.isExperimentalRenderer()) {
+                  return;
+              }
+              // get original mouse position in case we are in zoom.
+              const invertedPoint = this.wafermap.transform.invert([
+                  event.offsetX,
+                  event.offsetY
+              ]);
+              // does not work yet until data manager will parse diesTable
+              const dieCoordinates = this.calculateDieCoordinates({
+                  x: invertedPoint[0],
+                  y: invertedPoint[1]
+              });
+              const colIndex = this.wafermap
+                  .diesTable.getChild('colIndex')
+                  .toArray();
+              const rowIndex = this.wafermap
+                  .diesTable.getChild('rowIndex')
+                  .toArray();
+              // will replace iterating with arquero filtering after fixing errors
+              for (let i = 0; i < colIndex.length; i++) {
+                  if (colIndex[i] === dieCoordinates.x
+                      && rowIndex[i] === dieCoordinates.y) {
+                      this.wafermap.hoverDie = {
+                          index: i,
+                          x: dieCoordinates.x,
+                          y: dieCoordinates.y
+                      };
+                      return;
+                  }
+              }
+              this.wafermap.hoverDie = undefined;
+          };
+          this.onMouseOut = (_event) => {
+              this.wafermap.hoverDie = undefined;
+          };
+      }
+      /**
+       * @internal
+       */
+      connect() {
+          this.wafermap.addEventListener('mousemove', this.onMouseMove);
+          this.wafermap.addEventListener('mouseout', this.onMouseOut);
+      }
+      /**
+       * @internal
+       */
+      disconnect() {
+          this.wafermap.removeEventListener('mousemove', this.onMouseMove);
+          this.wafermap.removeEventListener('mouseout', this.onMouseOut);
+      }
+      calculateDieCoordinates(mousePosition) {
+          const originLocation = this.wafermap.originLocation;
+          const xRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.topLeft
+              ? Math.floor
+              : Math.ceil;
+          const yRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.bottomRight
+              ? Math.floor
+              : Math.ceil;
+          // go to x and y scale to get the x,y values of the die.
+          const x = xRoundFunction(this.wafermap.dataManager.invertedHorizontalScale(mousePosition.x - this.wafermap.dataManager.margin.left));
+          const y = yRoundFunction(this.wafermap.dataManager.invertedVerticalScale(mousePosition.y - this.wafermap.dataManager.margin.top));
+          return { x, y };
+      }
+  }
+
+  /**
+   * ZoomHandler deals with user interactions and events like zooming
+   */
+  class ZoomHandler {
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          this.scaleExtent = [1, 100];
+          this.minExtentPoint = [0, 0];
+          this.onWheelMove = (event) => {
+              event.preventDefault();
+          };
+      }
+      /**
+       * @internal
+       */
+      connect() {
+          this.createZoomBehavior();
+          this.wafermap.addEventListener('wheel', this.onWheelMove, {
+              passive: false
+          });
+      }
+      /**
+       * @internal
+       */
+      disconnect() {
+          zoom().on('zoom', null)(select(this.wafermap));
+          this.wafermap.removeEventListener('wheel', this.onWheelMove);
+      }
+      createZoomBehavior() {
+          zoom()
+              .scaleExtent(this.scaleExtent)
+              .translateExtent([
+              this.minExtentPoint,
+              [this.wafermap.canvasWidth, this.wafermap.canvasHeight]
+          ])
+              .on('zoom', (event) => {
+              // D3 will automatically remove existing handlers when adding new ones
+              // See: https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_on
+              this.wafermap.transform = event.transform;
+          })(select(this.wafermap));
+      }
+  }
+
   /**
    * A nimble-styled WaferMap
    */
@@ -76551,7 +76562,7 @@ img.ProseMirror-separator {
            * @internal
            * needs to be initialized before the properties trigger changes
            */
-          this.waferMapUpdateTracker = new WaferMapUpdateTracker(this);
+          this.waferMapUpdateTracker = new WaferMapUpdateTracker(this.asRequiredFieldsWaferMap);
           this.originLocation = WaferMapOriginLocation.bottomLeft;
           this.gridMinX = undefined;
           this.gridMaxX = undefined;
@@ -76565,15 +76576,15 @@ img.ProseMirror-separator {
           /**
            * @internal
            */
-          this.dataManager = new DataManager(this);
+          this.dataManager = new DataManager(this.asRequiredFieldsWaferMap);
           /**
            * @internal
            */
-          this.mainRenderer = new RenderingModule(this);
+          this.mainRenderer = new RenderingModule(this.asRequiredFieldsWaferMap);
           /**
            * @internal
            */
-          this.workerRenderer = new WorkerRenderer(this);
+          this.workerRenderer = new WorkerRenderer(this.asRequiredFieldsWaferMap);
           this.renderer = this.mainRenderer;
           /**
            * @internal
@@ -76605,9 +76616,11 @@ img.ProseMirror-separator {
               colors: [],
               values: []
           };
-          this.eventCoordinator = new EventCoordinator(this);
+          this.hoverHandler = new HoverHandler$1(this.asRequiredFieldsWaferMap);
+          this.experimentalHoverHandler = new HoverHandler(this.asRequiredFieldsWaferMap);
+          this.zoomHandler = new ZoomHandler(this.asRequiredFieldsWaferMap);
           this.resizeObserver = this.createResizeObserver();
-          this.waferMapValidator = new WaferMapValidator(this);
+          this.waferMapValidator = new WaferMapValidator(this.asRequiredFieldsWaferMap);
       }
       get validity() {
           return this.waferMapValidator.getValidity();
@@ -76617,11 +76630,17 @@ img.ProseMirror-separator {
           this.canvasContext = this.canvas.getContext('2d', {
               willReadFrequently: true
           });
+          this.hoverHandler.connect();
+          this.experimentalHoverHandler.connect();
+          this.zoomHandler.connect();
           this.resizeObserver.observe(this);
           this.waferMapUpdateTracker.trackAll();
       }
       disconnectedCallback() {
           super.disconnectedCallback();
+          this.hoverHandler.disconnect();
+          this.experimentalHoverHandler.disconnect();
+          this.zoomHandler.disconnect();
           this.resizeObserver.unobserve(this);
       }
       /**
@@ -76637,8 +76656,12 @@ img.ProseMirror-separator {
           if (this.validity.invalidDiesTableSchema) {
               return;
           }
+          this.renderer = this.isExperimentalRenderer()
+              ? this.workerRenderer
+              : this.mainRenderer;
           if (this.waferMapUpdateTracker.requiresEventsUpdate) {
-              this.eventCoordinator.detachEvents();
+              // zoom translateExtent needs to be recalculated when canvas size changes
+              this.zoomHandler.disconnect();
               if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) {
                   this.dataManager.updateContainerDimensions();
                   this.renderer.updateSortedDiesAndDrawWafer();
@@ -76658,12 +76681,18 @@ img.ProseMirror-separator {
               else if (this.waferMapUpdateTracker.requiresDrawnWaferUpdate) {
                   this.renderer.drawWafer();
               }
-              this.eventCoordinator.attachEvents();
+              this.zoomHandler.connect();
           }
           else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) {
               this.renderer.renderHover();
           }
       }
+      /**
+       * @internal
+       */
+      isExperimentalRenderer() {
+          return this.diesTable !== undefined;
+      }
       validate() {
           this.waferMapValidator.validateGridDimensions();
           this.waferMapValidator.validateDiesTableSchema();
@@ -76726,16 +76755,10 @@ img.ProseMirror-separator {
       }
       diesChanged() {
           this.waferMapUpdateTracker.track('dies');
-          this.renderer = this.diesTable === undefined
-              ? this.mainRenderer
-              : this.workerRenderer;
           this.waferMapUpdateTracker.queueUpdate();
       }
       diesTableChanged() {
           this.waferMapUpdateTracker.track('dies');
-          this.renderer = this.diesTable === undefined
-              ? this.mainRenderer
-              : this.workerRenderer;
           this.waferMapUpdateTracker.queueUpdate();
       }
       colorScaleChanged() {
@@ -76759,6 +76782,9 @@ img.ProseMirror-separator {
           this.waferMapUpdateTracker.track('hoverDie');
           this.waferMapUpdateTracker.queueUpdate();
       }
+      get asRequiredFieldsWaferMap() {
+          return this;
+      }
   }
   __decorate$1([
       attr({ attribute: 'origin-location' })