@ni/nimble-components 23.0.1 → 24.0.1

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 25 Mar 2024 16:47:43 GMT
+   * Generated on Wed, 27 Mar 2024 11:47:50 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};
+                }
+            }
+
+            @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']) [part='start'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-
                 :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);
@@ -75118,7 +75088,7 @@ img.ProseMirror-separator {
   /**
    * Computations calculates and stores different measures which are used in the Wafermap
    */
-  class Computations {
+  let Computations$1 = class Computations {
       get containerDimensions() {
           return this._containerDimensions;
       }
@@ -75295,7 +75265,7 @@ img.ProseMirror-separator {
               left: baseMargin.left + addedMargin.left
           };
       }
-  }
+  };
 
   /**
    * Prerendering prepares render-ready dies data to be used by the rendering module
@@ -75361,7 +75331,7 @@ img.ProseMirror-separator {
               return '';
           }
           const label = `${value}${dieLabelsSuffix}`;
-          if (label.length > maxCharacters) {
+          if (label.length >= maxCharacters) {
               return `${label.substring(0, maxCharacters)}…`;
           }
           return label;
@@ -75410,7 +75380,7 @@ img.ProseMirror-separator {
   /**
    * Data Manager uses Computations and Prerendering modules in order and exposes the results
    */
-  class DataManager {
+  let DataManager$1 = class DataManager {
       get containerDimensions() {
           return this.computations.containerDimensions;
       }
@@ -75444,6 +75414,219 @@ img.ProseMirror-separator {
       get data() {
           return this.dataMap;
       }
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          this.computations = new Computations$1(wafermap);
+          this.prerendering = new Prerendering(wafermap);
+      }
+      updateContainerDimensions() {
+          this.computations.updateContainerDimensions();
+          this.updateDataMap();
+          this.updateLabelsFontSize();
+      }
+      updateScales() {
+          this.computations.updateScales();
+          this.updateDataMap();
+          this.updateLabelsFontSize();
+      }
+      updateLabelsFontSize() {
+          this.prerendering.updateLabelsFontSize();
+      }
+      updateDiesRenderInfo() {
+          this.prerendering.updateDiesRenderInfo();
+      }
+      getWaferMapDie(point) {
+          return this.dataMap.get(`${point.x}_${point.y}`);
+      }
+      updateDataMap() {
+          this.dataMap = new Map(this.wafermap.dies.map(die => [`${die.x}_${die.y}`, die]));
+      }
+  };
+
+  /**
+   * Computations calculates and stores different measures which are used in the Wafermap
+   */
+  class Computations {
+      get containerDimensions() {
+          return this._containerDimensions;
+      }
+      get dieDimensions() {
+          return this._dieDimensions;
+      }
+      get margin() {
+          return this._margin;
+      }
+      get horizontalScale() {
+          return this._horizontalScale;
+      }
+      get verticalScale() {
+          return this._verticalScale;
+      }
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          this.defaultPadding = 0;
+          this.baseMarginPercentage = 0.04;
+      }
+      updateContainerDimensions() {
+          const canvasDimensions = {
+              width: this.wafermap.canvasWidth,
+              height: this.wafermap.canvasHeight
+          };
+          const canvasDiameter = Math.min(canvasDimensions.width, canvasDimensions.height);
+          const canvasMargin = {
+              top: (canvasDimensions.height - canvasDiameter) / 2,
+              right: (canvasDimensions.width - canvasDiameter) / 2,
+              bottom: (canvasDimensions.height - canvasDiameter) / 2,
+              left: (canvasDimensions.width - canvasDiameter) / 2
+          };
+          const baseMargin = {
+              top: canvasDiameter * this.baseMarginPercentage,
+              right: canvasDiameter * this.baseMarginPercentage,
+              bottom: canvasDiameter * this.baseMarginPercentage,
+              left: canvasDiameter * this.baseMarginPercentage
+          };
+          this._margin = this.calculateMarginAddition(baseMargin, canvasMargin);
+          this._containerDimensions = this.calculateContainerDimensions(canvasDimensions, this._margin);
+          this.updateScales();
+      }
+      updateScales() {
+          const containerDiameter = Math.min(this._containerDimensions.width, this._containerDimensions.height);
+          const gridDimensions = this.gridDimensionsValidAndDefined()
+              ? this.calculateGridDimensionsFromBoundingBox()
+              : this.calculateGridDimensionsFromDies();
+          // this scale is used for positioning the dies on the canvas
+          const originLocation = this.wafermap.originLocation;
+          this._horizontalScale = this.createHorizontalScale(originLocation, gridDimensions, containerDiameter);
+          // this scale is used for positioning the dies on the canvas
+          this._verticalScale = this.createVerticalScale(originLocation, gridDimensions, containerDiameter);
+          this._dieDimensions = {
+              width: Math.abs(this._horizontalScale(0) - this._horizontalScale(1)),
+              height: Math.abs(this._verticalScale(0) - this._verticalScale(1))
+          };
+      }
+      gridDimensionsValidAndDefined() {
+          return (!this.wafermap.validity.invalidGridDimensions
+              && typeof this.wafermap.gridMinX === 'number'
+              && typeof this.wafermap.gridMinY === 'number'
+              && typeof this.wafermap.gridMaxX === 'number'
+              && typeof this.wafermap.gridMinX === 'number');
+      }
+      calculateGridDimensionsFromBoundingBox() {
+          const gridDimensions = { origin: { x: 0, y: 0 }, rows: 0, cols: 0 };
+          if (typeof this.wafermap.gridMaxY === 'number'
+              && typeof this.wafermap.gridMinY === 'number'
+              && typeof this.wafermap.gridMaxX === 'number'
+              && typeof this.wafermap.gridMinX === 'number') {
+              gridDimensions.origin.x = this.wafermap.gridMinX;
+              gridDimensions.origin.y = this.wafermap.gridMinY;
+              gridDimensions.rows = this.wafermap.gridMaxY - this.wafermap.gridMinY + 1;
+              gridDimensions.cols = this.wafermap.gridMaxX - this.wafermap.gridMinX + 1;
+          }
+          return gridDimensions;
+      }
+      calculateGridDimensionsFromDies() {
+          if (this.wafermap.diesTable === undefined) {
+              return { origin: { x: 0, y: 0 }, rows: 0, cols: 0 };
+          }
+          const colIndex = this.wafermap.diesTable
+              .getChild('colIndex')
+              .toArray();
+          const rowIndex = this.wafermap.diesTable
+              .getChild('rowIndex')
+              .toArray();
+          const minPoint = { x: colIndex[0], y: rowIndex[0] };
+          const maxPoint = { x: colIndex[0], y: rowIndex[0] };
+          // will replace iterating with arquero after fixing issues: https://github.com/uwdata/arquero/pull/346
+          for (let i = 0; i < colIndex.length; i++) {
+              if (colIndex[i] < minPoint.x) {
+                  minPoint.x = colIndex[i];
+              }
+              if (colIndex[i] > maxPoint.x) {
+                  maxPoint.x = colIndex[i];
+              }
+              if (rowIndex[i] < minPoint.y) {
+                  minPoint.y = rowIndex[i];
+              }
+              if (rowIndex[i] > maxPoint.y) {
+                  maxPoint.y = rowIndex[i];
+              }
+          }
+          return {
+              origin: minPoint,
+              rows: maxPoint.y - minPoint.y + 1,
+              cols: maxPoint.x - minPoint.x + 1
+          };
+      }
+      calculateContainerDimensions(canvasDimensions, margin) {
+          return {
+              width: canvasDimensions.width - margin.left - margin.right,
+              height: canvasDimensions.height - margin.top - margin.bottom
+          };
+      }
+      createHorizontalScale(originLocation, grid, containerWidth) {
+          const scale = linear();
+          if (originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.topLeft) {
+              return scale
+                  .domain([grid.origin.x, grid.origin.x + grid.cols])
+                  .range([0, containerWidth]);
+          }
+          return scale
+              .domain([grid.origin.x - 1, grid.origin.x + grid.cols - 1])
+              .range([containerWidth, 0]);
+      }
+      createVerticalScale(originLocation, grid, containerHeight) {
+          const scale = linear();
+          // html canvas has top-left origin https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#the_grid
+          // we need to flip the vertical scale
+          if (originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.bottomRight) {
+              return scale
+                  .domain([grid.origin.y - 1, grid.origin.y + grid.rows - 1])
+                  .range([containerHeight, 0]);
+          }
+          return scale
+              .domain([grid.origin.y, grid.origin.y + grid.rows])
+              .range([0, containerHeight]);
+      }
+      calculateMarginAddition(baseMargin, addedMargin) {
+          return {
+              top: baseMargin.top + addedMargin.top,
+              right: baseMargin.right + addedMargin.right,
+              bottom: baseMargin.bottom + addedMargin.bottom,
+              left: baseMargin.left + addedMargin.left
+          };
+      }
+  }
+
+  /**
+   * Data Manager uses Computations and Prerendering modules in order and exposes the results
+   */
+  class DataManager {
+      get containerDimensions() {
+          return this.computations.containerDimensions;
+      }
+      get dieDimensions() {
+          return this.computations.dieDimensions;
+      }
+      get margin() {
+          return this.computations.margin;
+      }
+      get horizontalScale() {
+          return this.computations.horizontalScale;
+      }
+      get verticalScale() {
+          return this.computations.verticalScale;
+      }
+      get labelsFontSize() {
+          return this.prerendering.labelsFontSize;
+      }
+      get diesRenderInfo() {
+          return this.prerendering.diesRenderInfo;
+      }
+      get data() {
+          return this.dataMap;
+      }
       constructor(wafermap) {
           this.wafermap = wafermap;
           this.computations = new Computations(wafermap);
@@ -76415,6 +76598,10 @@ img.ProseMirror-separator {
                   x: invertedPoint[0],
                   y: invertedPoint[1]
               });
+              if (dieCoordinates === undefined) {
+                  this.wafermap.hoverDie = undefined;
+                  return;
+              }
               this.wafermap.hoverDie = this.wafermap.dataManager.getWaferMapDie(dieCoordinates);
           };
           this.onMouseOut = (_event) => {
@@ -76436,19 +76623,23 @@ img.ProseMirror-separator {
           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 };
+          if (!this.wafermap.isExperimentalRenderer()
+              && this.wafermap.dataManager instanceof DataManager$1) {
+              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 };
+          }
+          return undefined;
       }
       hoversOverDie(mousePosition) {
           const rgba = this.wafermap.canvasContext.getImageData(mousePosition.x, mousePosition.y, 1, 1).data;
@@ -76479,11 +76670,14 @@ img.ProseMirror-separator {
                   event.offsetX,
                   event.offsetY
               ]);
-              // does not work yet until data manager will parse diesTable
               const dieCoordinates = this.calculateDieCoordinates({
                   x: invertedPoint[0],
                   y: invertedPoint[1]
               });
+              if (dieCoordinates === undefined) {
+                  this.wafermap.hoverDie = undefined;
+                  return;
+              }
               const colIndex = this.wafermap
                   .diesTable.getChild('colIndex')
                   .toArray();
@@ -76523,19 +76717,23 @@ img.ProseMirror-separator {
           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 };
+          if (this.wafermap.isExperimentalRenderer()
+              && this.wafermap.dataManager instanceof DataManager) {
+              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.ceil
+                  : Math.floor;
+              // go to x and y scale to get the x,y values of the die.
+              const x = xRoundFunction(this.wafermap.dataManager.horizontalScale.invert(mousePosition.x - this.wafermap.dataManager.margin.left));
+              const y = yRoundFunction(this.wafermap.dataManager.verticalScale.invert(mousePosition.y - this.wafermap.dataManager.margin.top));
+              return { x, y };
+          }
+          return undefined;
       }
   }
 
@@ -76606,7 +76804,12 @@ img.ProseMirror-separator {
           /**
            * @internal
            */
-          this.dataManager = new DataManager(this.asRequiredFieldsWaferMap);
+          this.stableDataManager = new DataManager$1(this.asRequiredFieldsWaferMap);
+          /**
+           * @internal
+           */
+          this.experimentalDataManager = new DataManager(this.asRequiredFieldsWaferMap);
+          this.dataManager = this.stableDataManager;
           /**
            * @internal
            */
@@ -76692,6 +76895,9 @@ img.ProseMirror-separator {
           if (this.waferMapUpdateTracker.requiresEventsUpdate) {
               // zoom translateExtent needs to be recalculated when canvas size changes
               this.zoomHandler.disconnect();
+              this.dataManager = this.isExperimentalRenderer()
+                  ? this.experimentalDataManager
+                  : this.stableDataManager;
               if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) {
                   this.dataManager.updateContainerDimensions();
                   this.renderer.updateSortedDiesAndDrawWafer();