@ni/nimble-components 15.5.6 → 15.5.8

package/dist/all-components-bundle.js

@@ -26876,7 +26876,7 @@ Instead styling against the role which is more general and likely a better appro
       return x;
     }
 
-    function normalize(a, b) {
+    function normalize$1(a, b) {
       return (b -= (a = +a))
           ? function(x) { return (x - a) / b; }
           : constants(isNaN(b) ? NaN : 0.5);
@@ -26892,8 +26892,8 @@ Instead styling against the role which is more general and likely a better appro
     // interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
     function bimap(domain, range, interpolate) {
       var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
-      if (d1 < d0) d0 = normalize(d1, d0), r0 = interpolate(r1, r0);
-      else d0 = normalize(d0, d1), r0 = interpolate(r0, r1);
+      if (d1 < d0) d0 = normalize$1(d1, d0), r0 = interpolate(r1, r0);
+      else d0 = normalize$1(d0, d1), r0 = interpolate(r0, r1);
       return function(x) { return r0(d0(x)); };
     }
 
@@ -26910,7 +26910,7 @@ Instead styling against the role which is more general and likely a better appro
       }
 
       while (++i < j) {
-        d[i] = normalize(domain[i], domain[i + 1]);
+        d[i] = normalize$1(domain[i], domain[i + 1]);
         r[i] = interpolate(range[i], range[i + 1]);
       }
 
@@ -27526,6 +27526,1105 @@ Instead styling against the role which is more general and likely a better appro
         }
     }
 
+    /**
+     * Ensures that an input number does not exceed a max value and is not less than a min value.
+     * @param i - the number to clamp
+     * @param min - the maximum (inclusive) value
+     * @param max - the minimum (inclusive) value
+     * @public
+     */
+    function clamp(i, min, max) {
+        if (isNaN(i) || i <= min) {
+            return min;
+        }
+        else if (i >= max) {
+            return max;
+        }
+        return i;
+    }
+    /**
+     * Scales an input to a number between 0 and 1
+     * @param i - a number between min and max
+     * @param min - the max value
+     * @param max - the min value
+     * @public
+     */
+    function normalize(i, min, max) {
+        if (isNaN(i) || i <= min) {
+            return 0.0;
+        }
+        else if (i >= max) {
+            return 1.0;
+        }
+        return i / (max - min);
+    }
+    /**
+     * Scales a number between 0 and 1
+     * @param i - the number to denormalize
+     * @param min - the min value
+     * @param max - the max value
+     * @public
+     */
+    function denormalize(i, min, max) {
+        if (isNaN(i)) {
+            return min;
+        }
+        return min + i * (max - min);
+    }
+    /**
+     * Converts a number between 0 and 255 to a hex string.
+     * @param i - the number to convert to a hex string
+     * @public
+     */
+    function getHexStringForByte(i) {
+        const s = Math.round(clamp(i, 0.0, 255.0)).toString(16);
+        if (s.length === 1) {
+            return "0" + s;
+        }
+        return s;
+    }
+    /**
+     *
+     * Will return infinity if i*10^(precision) overflows number
+     * note that floating point rounding rules come into play here
+     * so values that end up rounding on a .5 round to the nearest
+     * even not always up so 2.5 rounds to 2
+     * @param i - the number to round
+     * @param precision - the precision to round to
+     *
+     * @public
+     */
+    function roundToPrecisionSmall(i, precision) {
+        const factor = Math.pow(10, precision);
+        return Math.round(i * factor) / factor;
+    }
+
+    /**
+     * A RGBA color with 64 bit channels.
+     *
+     * @example
+     * ```ts
+     * new ColorRGBA64(1, 0, 0, 1) // red
+     * ```
+     * @public
+     */
+    class ColorRGBA64 {
+        /**
+         *
+         * @param red - the red value
+         * @param green - the green value
+         * @param blue - the blue value
+         * @param alpha - the alpha value
+         */
+        constructor(red, green, blue, alpha) {
+            this.r = red;
+            this.g = green;
+            this.b = blue;
+            this.a = typeof alpha === "number" && !isNaN(alpha) ? alpha : 1;
+        }
+        /**
+         * Construct a {@link ColorRGBA64} from a {@link ColorRGBA64Config}
+         * @param data - the config object
+         */
+        static fromObject(data) {
+            return data && !isNaN(data.r) && !isNaN(data.g) && !isNaN(data.b)
+                ? new ColorRGBA64(data.r, data.g, data.b, data.a)
+                : null;
+        }
+        /**
+         * Determines if one color is equal to another.
+         * @param rhs - the color to compare
+         */
+        equalValue(rhs) {
+            return (this.r === rhs.r && this.g === rhs.g && this.b === rhs.b && this.a === rhs.a);
+        }
+        /**
+         * Returns the color formatted as a string; #RRGGBB
+         */
+        toStringHexRGB() {
+            return "#" + [this.r, this.g, this.b].map(this.formatHexValue).join("");
+        }
+        /**
+         * Returns the color formatted as a string; #RRGGBBAA
+         */
+        toStringHexRGBA() {
+            return this.toStringHexRGB() + this.formatHexValue(this.a);
+        }
+        /**
+         * Returns the color formatted as a string; #AARRGGBB
+         */
+        toStringHexARGB() {
+            return "#" + [this.a, this.r, this.g, this.b].map(this.formatHexValue).join("");
+        }
+        /**
+         * Returns the color formatted as a string; "rgb(0xRR, 0xGG, 0xBB)"
+         */
+        toStringWebRGB() {
+            return `rgb(${Math.round(denormalize(this.r, 0.0, 255.0))},${Math.round(denormalize(this.g, 0.0, 255.0))},${Math.round(denormalize(this.b, 0.0, 255.0))})`;
+        }
+        /**
+         * Returns the color formatted as a string; "rgba(0xRR, 0xGG, 0xBB, a)"
+         * @remarks
+         * Note that this follows the convention of putting alpha in the range [0.0,1.0] while the other three channels are [0,255]
+         */
+        toStringWebRGBA() {
+            return `rgba(${Math.round(denormalize(this.r, 0.0, 255.0))},${Math.round(denormalize(this.g, 0.0, 255.0))},${Math.round(denormalize(this.b, 0.0, 255.0))},${clamp(this.a, 0, 1)})`;
+        }
+        /**
+         * Returns a new {@link ColorRGBA64} rounded to the provided precision
+         * @param precision - the precision to round to
+         */
+        roundToPrecision(precision) {
+            return new ColorRGBA64(roundToPrecisionSmall(this.r, precision), roundToPrecisionSmall(this.g, precision), roundToPrecisionSmall(this.b, precision), roundToPrecisionSmall(this.a, precision));
+        }
+        /**
+         * Returns a new {@link ColorRGBA64} with channel values clamped between 0 and 1.
+         */
+        clamp() {
+            return new ColorRGBA64(clamp(this.r, 0, 1), clamp(this.g, 0, 1), clamp(this.b, 0, 1), clamp(this.a, 0, 1));
+        }
+        /**
+         * Converts the {@link ColorRGBA64} to a {@link ColorRGBA64Config}.
+         */
+        toObject() {
+            return { r: this.r, g: this.g, b: this.b, a: this.a };
+        }
+        formatHexValue(value) {
+            return getHexStringForByte(denormalize(value, 0.0, 255.0));
+        }
+    }
+
+    const namedColorsConfigs = {
+        aliceblue: {
+            r: 0.941176,
+            g: 0.972549,
+            b: 1,
+        },
+        antiquewhite: {
+            r: 0.980392,
+            g: 0.921569,
+            b: 0.843137,
+        },
+        aqua: {
+            r: 0,
+            g: 1,
+            b: 1,
+        },
+        aquamarine: {
+            r: 0.498039,
+            g: 1,
+            b: 0.831373,
+        },
+        azure: {
+            r: 0.941176,
+            g: 1,
+            b: 1,
+        },
+        beige: {
+            r: 0.960784,
+            g: 0.960784,
+            b: 0.862745,
+        },
+        bisque: {
+            r: 1,
+            g: 0.894118,
+            b: 0.768627,
+        },
+        black: {
+            r: 0,
+            g: 0,
+            b: 0,
+        },
+        blanchedalmond: {
+            r: 1,
+            g: 0.921569,
+            b: 0.803922,
+        },
+        blue: {
+            r: 0,
+            g: 0,
+            b: 1,
+        },
+        blueviolet: {
+            r: 0.541176,
+            g: 0.168627,
+            b: 0.886275,
+        },
+        brown: {
+            r: 0.647059,
+            g: 0.164706,
+            b: 0.164706,
+        },
+        burlywood: {
+            r: 0.870588,
+            g: 0.721569,
+            b: 0.529412,
+        },
+        cadetblue: {
+            r: 0.372549,
+            g: 0.619608,
+            b: 0.627451,
+        },
+        chartreuse: {
+            r: 0.498039,
+            g: 1,
+            b: 0,
+        },
+        chocolate: {
+            r: 0.823529,
+            g: 0.411765,
+            b: 0.117647,
+        },
+        coral: {
+            r: 1,
+            g: 0.498039,
+            b: 0.313725,
+        },
+        cornflowerblue: {
+            r: 0.392157,
+            g: 0.584314,
+            b: 0.929412,
+        },
+        cornsilk: {
+            r: 1,
+            g: 0.972549,
+            b: 0.862745,
+        },
+        crimson: {
+            r: 0.862745,
+            g: 0.078431,
+            b: 0.235294,
+        },
+        cyan: {
+            r: 0,
+            g: 1,
+            b: 1,
+        },
+        darkblue: {
+            r: 0,
+            g: 0,
+            b: 0.545098,
+        },
+        darkcyan: {
+            r: 0,
+            g: 0.545098,
+            b: 0.545098,
+        },
+        darkgoldenrod: {
+            r: 0.721569,
+            g: 0.52549,
+            b: 0.043137,
+        },
+        darkgray: {
+            r: 0.662745,
+            g: 0.662745,
+            b: 0.662745,
+        },
+        darkgreen: {
+            r: 0,
+            g: 0.392157,
+            b: 0,
+        },
+        darkgrey: {
+            r: 0.662745,
+            g: 0.662745,
+            b: 0.662745,
+        },
+        darkkhaki: {
+            r: 0.741176,
+            g: 0.717647,
+            b: 0.419608,
+        },
+        darkmagenta: {
+            r: 0.545098,
+            g: 0,
+            b: 0.545098,
+        },
+        darkolivegreen: {
+            r: 0.333333,
+            g: 0.419608,
+            b: 0.184314,
+        },
+        darkorange: {
+            r: 1,
+            g: 0.54902,
+            b: 0,
+        },
+        darkorchid: {
+            r: 0.6,
+            g: 0.196078,
+            b: 0.8,
+        },
+        darkred: {
+            r: 0.545098,
+            g: 0,
+            b: 0,
+        },
+        darksalmon: {
+            r: 0.913725,
+            g: 0.588235,
+            b: 0.478431,
+        },
+        darkseagreen: {
+            r: 0.560784,
+            g: 0.737255,
+            b: 0.560784,
+        },
+        darkslateblue: {
+            r: 0.282353,
+            g: 0.239216,
+            b: 0.545098,
+        },
+        darkslategray: {
+            r: 0.184314,
+            g: 0.309804,
+            b: 0.309804,
+        },
+        darkslategrey: {
+            r: 0.184314,
+            g: 0.309804,
+            b: 0.309804,
+        },
+        darkturquoise: {
+            r: 0,
+            g: 0.807843,
+            b: 0.819608,
+        },
+        darkviolet: {
+            r: 0.580392,
+            g: 0,
+            b: 0.827451,
+        },
+        deeppink: {
+            r: 1,
+            g: 0.078431,
+            b: 0.576471,
+        },
+        deepskyblue: {
+            r: 0,
+            g: 0.74902,
+            b: 1,
+        },
+        dimgray: {
+            r: 0.411765,
+            g: 0.411765,
+            b: 0.411765,
+        },
+        dimgrey: {
+            r: 0.411765,
+            g: 0.411765,
+            b: 0.411765,
+        },
+        dodgerblue: {
+            r: 0.117647,
+            g: 0.564706,
+            b: 1,
+        },
+        firebrick: {
+            r: 0.698039,
+            g: 0.133333,
+            b: 0.133333,
+        },
+        floralwhite: {
+            r: 1,
+            g: 0.980392,
+            b: 0.941176,
+        },
+        forestgreen: {
+            r: 0.133333,
+            g: 0.545098,
+            b: 0.133333,
+        },
+        fuchsia: {
+            r: 1,
+            g: 0,
+            b: 1,
+        },
+        gainsboro: {
+            r: 0.862745,
+            g: 0.862745,
+            b: 0.862745,
+        },
+        ghostwhite: {
+            r: 0.972549,
+            g: 0.972549,
+            b: 1,
+        },
+        gold: {
+            r: 1,
+            g: 0.843137,
+            b: 0,
+        },
+        goldenrod: {
+            r: 0.854902,
+            g: 0.647059,
+            b: 0.12549,
+        },
+        gray: {
+            r: 0.501961,
+            g: 0.501961,
+            b: 0.501961,
+        },
+        green: {
+            r: 0,
+            g: 0.501961,
+            b: 0,
+        },
+        greenyellow: {
+            r: 0.678431,
+            g: 1,
+            b: 0.184314,
+        },
+        grey: {
+            r: 0.501961,
+            g: 0.501961,
+            b: 0.501961,
+        },
+        honeydew: {
+            r: 0.941176,
+            g: 1,
+            b: 0.941176,
+        },
+        hotpink: {
+            r: 1,
+            g: 0.411765,
+            b: 0.705882,
+        },
+        indianred: {
+            r: 0.803922,
+            g: 0.360784,
+            b: 0.360784,
+        },
+        indigo: {
+            r: 0.294118,
+            g: 0,
+            b: 0.509804,
+        },
+        ivory: {
+            r: 1,
+            g: 1,
+            b: 0.941176,
+        },
+        khaki: {
+            r: 0.941176,
+            g: 0.901961,
+            b: 0.54902,
+        },
+        lavender: {
+            r: 0.901961,
+            g: 0.901961,
+            b: 0.980392,
+        },
+        lavenderblush: {
+            r: 1,
+            g: 0.941176,
+            b: 0.960784,
+        },
+        lawngreen: {
+            r: 0.486275,
+            g: 0.988235,
+            b: 0,
+        },
+        lemonchiffon: {
+            r: 1,
+            g: 0.980392,
+            b: 0.803922,
+        },
+        lightblue: {
+            r: 0.678431,
+            g: 0.847059,
+            b: 0.901961,
+        },
+        lightcoral: {
+            r: 0.941176,
+            g: 0.501961,
+            b: 0.501961,
+        },
+        lightcyan: {
+            r: 0.878431,
+            g: 1,
+            b: 1,
+        },
+        lightgoldenrodyellow: {
+            r: 0.980392,
+            g: 0.980392,
+            b: 0.823529,
+        },
+        lightgray: {
+            r: 0.827451,
+            g: 0.827451,
+            b: 0.827451,
+        },
+        lightgreen: {
+            r: 0.564706,
+            g: 0.933333,
+            b: 0.564706,
+        },
+        lightgrey: {
+            r: 0.827451,
+            g: 0.827451,
+            b: 0.827451,
+        },
+        lightpink: {
+            r: 1,
+            g: 0.713725,
+            b: 0.756863,
+        },
+        lightsalmon: {
+            r: 1,
+            g: 0.627451,
+            b: 0.478431,
+        },
+        lightseagreen: {
+            r: 0.12549,
+            g: 0.698039,
+            b: 0.666667,
+        },
+        lightskyblue: {
+            r: 0.529412,
+            g: 0.807843,
+            b: 0.980392,
+        },
+        lightslategray: {
+            r: 0.466667,
+            g: 0.533333,
+            b: 0.6,
+        },
+        lightslategrey: {
+            r: 0.466667,
+            g: 0.533333,
+            b: 0.6,
+        },
+        lightsteelblue: {
+            r: 0.690196,
+            g: 0.768627,
+            b: 0.870588,
+        },
+        lightyellow: {
+            r: 1,
+            g: 1,
+            b: 0.878431,
+        },
+        lime: {
+            r: 0,
+            g: 1,
+            b: 0,
+        },
+        limegreen: {
+            r: 0.196078,
+            g: 0.803922,
+            b: 0.196078,
+        },
+        linen: {
+            r: 0.980392,
+            g: 0.941176,
+            b: 0.901961,
+        },
+        magenta: {
+            r: 1,
+            g: 0,
+            b: 1,
+        },
+        maroon: {
+            r: 0.501961,
+            g: 0,
+            b: 0,
+        },
+        mediumaquamarine: {
+            r: 0.4,
+            g: 0.803922,
+            b: 0.666667,
+        },
+        mediumblue: {
+            r: 0,
+            g: 0,
+            b: 0.803922,
+        },
+        mediumorchid: {
+            r: 0.729412,
+            g: 0.333333,
+            b: 0.827451,
+        },
+        mediumpurple: {
+            r: 0.576471,
+            g: 0.439216,
+            b: 0.858824,
+        },
+        mediumseagreen: {
+            r: 0.235294,
+            g: 0.701961,
+            b: 0.443137,
+        },
+        mediumslateblue: {
+            r: 0.482353,
+            g: 0.407843,
+            b: 0.933333,
+        },
+        mediumspringgreen: {
+            r: 0,
+            g: 0.980392,
+            b: 0.603922,
+        },
+        mediumturquoise: {
+            r: 0.282353,
+            g: 0.819608,
+            b: 0.8,
+        },
+        mediumvioletred: {
+            r: 0.780392,
+            g: 0.082353,
+            b: 0.521569,
+        },
+        midnightblue: {
+            r: 0.098039,
+            g: 0.098039,
+            b: 0.439216,
+        },
+        mintcream: {
+            r: 0.960784,
+            g: 1,
+            b: 0.980392,
+        },
+        mistyrose: {
+            r: 1,
+            g: 0.894118,
+            b: 0.882353,
+        },
+        moccasin: {
+            r: 1,
+            g: 0.894118,
+            b: 0.709804,
+        },
+        navajowhite: {
+            r: 1,
+            g: 0.870588,
+            b: 0.678431,
+        },
+        navy: {
+            r: 0,
+            g: 0,
+            b: 0.501961,
+        },
+        oldlace: {
+            r: 0.992157,
+            g: 0.960784,
+            b: 0.901961,
+        },
+        olive: {
+            r: 0.501961,
+            g: 0.501961,
+            b: 0,
+        },
+        olivedrab: {
+            r: 0.419608,
+            g: 0.556863,
+            b: 0.137255,
+        },
+        orange: {
+            r: 1,
+            g: 0.647059,
+            b: 0,
+        },
+        orangered: {
+            r: 1,
+            g: 0.270588,
+            b: 0,
+        },
+        orchid: {
+            r: 0.854902,
+            g: 0.439216,
+            b: 0.839216,
+        },
+        palegoldenrod: {
+            r: 0.933333,
+            g: 0.909804,
+            b: 0.666667,
+        },
+        palegreen: {
+            r: 0.596078,
+            g: 0.984314,
+            b: 0.596078,
+        },
+        paleturquoise: {
+            r: 0.686275,
+            g: 0.933333,
+            b: 0.933333,
+        },
+        palevioletred: {
+            r: 0.858824,
+            g: 0.439216,
+            b: 0.576471,
+        },
+        papayawhip: {
+            r: 1,
+            g: 0.937255,
+            b: 0.835294,
+        },
+        peachpuff: {
+            r: 1,
+            g: 0.854902,
+            b: 0.72549,
+        },
+        peru: {
+            r: 0.803922,
+            g: 0.521569,
+            b: 0.247059,
+        },
+        pink: {
+            r: 1,
+            g: 0.752941,
+            b: 0.796078,
+        },
+        plum: {
+            r: 0.866667,
+            g: 0.627451,
+            b: 0.866667,
+        },
+        powderblue: {
+            r: 0.690196,
+            g: 0.878431,
+            b: 0.901961,
+        },
+        purple: {
+            r: 0.501961,
+            g: 0,
+            b: 0.501961,
+        },
+        red: {
+            r: 1,
+            g: 0,
+            b: 0,
+        },
+        rosybrown: {
+            r: 0.737255,
+            g: 0.560784,
+            b: 0.560784,
+        },
+        royalblue: {
+            r: 0.254902,
+            g: 0.411765,
+            b: 0.882353,
+        },
+        saddlebrown: {
+            r: 0.545098,
+            g: 0.270588,
+            b: 0.07451,
+        },
+        salmon: {
+            r: 0.980392,
+            g: 0.501961,
+            b: 0.447059,
+        },
+        sandybrown: {
+            r: 0.956863,
+            g: 0.643137,
+            b: 0.376471,
+        },
+        seagreen: {
+            r: 0.180392,
+            g: 0.545098,
+            b: 0.341176,
+        },
+        seashell: {
+            r: 1,
+            g: 0.960784,
+            b: 0.933333,
+        },
+        sienna: {
+            r: 0.627451,
+            g: 0.321569,
+            b: 0.176471,
+        },
+        silver: {
+            r: 0.752941,
+            g: 0.752941,
+            b: 0.752941,
+        },
+        skyblue: {
+            r: 0.529412,
+            g: 0.807843,
+            b: 0.921569,
+        },
+        slateblue: {
+            r: 0.415686,
+            g: 0.352941,
+            b: 0.803922,
+        },
+        slategray: {
+            r: 0.439216,
+            g: 0.501961,
+            b: 0.564706,
+        },
+        slategrey: {
+            r: 0.439216,
+            g: 0.501961,
+            b: 0.564706,
+        },
+        snow: {
+            r: 1,
+            g: 0.980392,
+            b: 0.980392,
+        },
+        springgreen: {
+            r: 0,
+            g: 1,
+            b: 0.498039,
+        },
+        steelblue: {
+            r: 0.27451,
+            g: 0.509804,
+            b: 0.705882,
+        },
+        tan: {
+            r: 0.823529,
+            g: 0.705882,
+            b: 0.54902,
+        },
+        teal: {
+            r: 0,
+            g: 0.501961,
+            b: 0.501961,
+        },
+        thistle: {
+            r: 0.847059,
+            g: 0.74902,
+            b: 0.847059,
+        },
+        tomato: {
+            r: 1,
+            g: 0.388235,
+            b: 0.278431,
+        },
+        transparent: {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 0,
+        },
+        turquoise: {
+            r: 0.25098,
+            g: 0.878431,
+            b: 0.815686,
+        },
+        violet: {
+            r: 0.933333,
+            g: 0.509804,
+            b: 0.933333,
+        },
+        wheat: {
+            r: 0.960784,
+            g: 0.870588,
+            b: 0.701961,
+        },
+        white: {
+            r: 1,
+            g: 1,
+            b: 1,
+        },
+        whitesmoke: {
+            r: 0.960784,
+            g: 0.960784,
+            b: 0.960784,
+        },
+        yellow: {
+            r: 1,
+            g: 1,
+            b: 0,
+        },
+        yellowgreen: {
+            r: 0.603922,
+            g: 0.803922,
+            b: 0.196078,
+        },
+    };
+
+    // Matches rgb(R, G, B) where R, G, and B are integers [0 - 255]
+    const webRGBRegex = /^rgb\(\s*((?:(?:25[0-5]|2[0-4]\d|1\d\d|\d{1,2})\s*,\s*){2}(?:25[0-5]|2[0-4]\d|1\d\d|\d{1,2})\s*)\)$/i;
+    // Matches rgb(R, G, B, A) where R, G, and B are integers [0 - 255] and A is [0-1] floating
+    const webRGBARegex = /^rgba\(\s*((?:(?:25[0-5]|2[0-4]\d|1\d\d|\d{1,2})\s*,\s*){3}(?:0|1|0?\.\d*)\s*)\)$/i;
+    // Matches #RGB and #RRGGBB, where R, G, and B are [0-9] or [A-F]
+    const hexRGBRegex = /^#((?:[0-9a-f]{6}|[0-9a-f]{3}))$/i;
+    // Matches #RGB and #RRGGBBAA, where R, G, B, and A are [0-9] or [A-F]
+    const hexRGBARegex = /^#((?:[0-9a-f]{8}|[0-9a-f]{4}))$/i;
+    /**
+     * Test if a color matches #RRGGBB or #RGB
+     * @public
+     */
+    function isColorStringHexRGB(raw) {
+        return hexRGBRegex.test(raw);
+    }
+    /**
+     * Test if a color matches #AARRGGBB or #ARGB
+     * @public
+     */
+    function isColorStringHexARGB(raw) {
+        return hexRGBARegex.test(raw);
+    }
+    /**
+     * Test if a color matches #RRGGBBAA or #RGBA
+     * @public
+     */
+    function isColorStringHexRGBA(raw) {
+        return isColorStringHexARGB(raw); // No way to differentiate these two formats, so just use the same test
+    }
+    /**
+     * Test if a color matches rgb(rr, gg, bb)
+     * @public
+     */
+    function isColorStringWebRGB(raw) {
+        return webRGBRegex.test(raw);
+    }
+    /**
+     * Test if a color matches rgba(rr, gg, bb, aa)
+     *
+     * @public
+     */
+    function isColorStringWebRGBA(raw) {
+        return webRGBARegex.test(raw);
+    }
+    /**
+     * Tests whether a color is in {@link @microsoft/fast-colors#NamedColors}.
+     * @param raw - the color name to test
+     * @public
+     */
+    function isColorNamed(raw) {
+        return namedColorsConfigs.hasOwnProperty(raw);
+    }
+    /**
+     * Converts a hexadecimal color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a color string in the form of "#RRGGBB" or "#RGB"
+     * @example
+     * ```ts
+     * parseColorHexRGBA("#FF0000");
+     * parseColorHexRGBA("#F00");
+     * ```
+     * @public
+     */
+    function parseColorHexRGB(raw) {
+        const result = hexRGBRegex.exec(raw);
+        if (result === null) {
+            return null;
+        }
+        let digits = result[1];
+        if (digits.length === 3) {
+            const r = digits.charAt(0);
+            const g = digits.charAt(1);
+            const b = digits.charAt(2);
+            digits = r.concat(r, g, g, b, b);
+        }
+        const rawInt = parseInt(digits, 16);
+        if (isNaN(rawInt)) {
+            return null;
+        }
+        // Note the use of >>> rather than >> as we want JS to manipulate these as unsigned numbers
+        return new ColorRGBA64(normalize((rawInt & 0xff0000) >>> 16, 0, 255), normalize((rawInt & 0x00ff00) >>> 8, 0, 255), normalize(rawInt & 0x0000ff, 0, 255), 1);
+    }
+    /**
+     * Converts a hexadecimal color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a color string in the form of "#AARRGGBB" or "#ARGB"
+     * @example
+     * ```ts
+     * parseColorHexRGBA("#AAFF0000");
+     * parseColorHexRGBA("#AF00");
+     * ```
+     * @public
+     */
+    function parseColorHexARGB(raw) {
+        const result = hexRGBARegex.exec(raw);
+        if (result === null) {
+            return null;
+        }
+        let digits = result[1];
+        if (digits.length === 4) {
+            const a = digits.charAt(0);
+            const r = digits.charAt(1);
+            const g = digits.charAt(2);
+            const b = digits.charAt(3);
+            digits = a.concat(a, r, r, g, g, b, b);
+        }
+        const rawInt = parseInt(digits, 16);
+        if (isNaN(rawInt)) {
+            return null;
+        }
+        // Note the use of >>> rather than >> as we want JS to manipulate these as unsigned numbers
+        return new ColorRGBA64(normalize((rawInt & 0x00ff0000) >>> 16, 0, 255), normalize((rawInt & 0x0000ff00) >>> 8, 0, 255), normalize(rawInt & 0x000000ff, 0, 255), normalize((rawInt & 0xff000000) >>> 24, 0, 255));
+    }
+    /**
+     * Converts a rgb color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a color string format "rgba(RR,GG,BB)" where RR,GG,BB are [0,255]
+     * @example
+     * ```ts
+     * parseColorWebRGB("rgba(255, 0, 0");
+     * ```
+     * @public
+     */
+    function parseColorWebRGB(raw) {
+        const result = webRGBRegex.exec(raw);
+        if (result === null) {
+            return null;
+        }
+        const split = result[1].split(",");
+        return new ColorRGBA64(normalize(Number(split[0]), 0, 255), normalize(Number(split[1]), 0, 255), normalize(Number(split[2]), 0, 255), 1);
+    }
+    /**
+     * Converts a rgba color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a color string format "rgba(RR,GG,BB,a)" where RR,GG,BB are [0,255] and a is [0,1]
+     * @example
+     * ```ts
+     * parseColorWebRGBA("rgba(255, 0, 0, 1");
+     * ```
+     * @public
+     */
+    function parseColorWebRGBA(raw) {
+        const result = webRGBARegex.exec(raw);
+        if (result === null) {
+            return null;
+        }
+        const split = result[1].split(",");
+        if (split.length === 4) {
+            return new ColorRGBA64(normalize(Number(split[0]), 0, 255), normalize(Number(split[1]), 0, 255), normalize(Number(split[2]), 0, 255), Number(split[3]));
+        }
+        return null;
+    }
+    /**
+     * Converts a named color to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a {@link https://www.w3schools.com/colors/colors_names.asp | CSS color name}.
+     * @example
+     * ```ts
+     * parseColorNamed("red");
+     * ```
+     * @public
+     */
+    function parseColorNamed(raw) {
+        // const rawLower: typeof raw =  raw.toLowerCase() : raw.toString();
+        const config = namedColorsConfigs[raw.toLowerCase()];
+        return config
+            ? new ColorRGBA64(config.r, config.g, config.b, config.hasOwnProperty("a") ? config.a : void 0)
+            : null;
+    }
+    /**
+     *
+      Expects any of the following and attempts to determine which is being used
+     * #RRGGBB, #AARRGGBB, rgb(RR,GG,BB) rgba(RR,GG,BB,a),
+     * or any of the {@link https://www.w3schools.com/colors/colors_names.asp | CSS color names}.
+     * @param raw - the color string to parse
+     * @public
+     */
+    function parseColor(raw) {
+        const rawLower = raw.toLowerCase();
+        return isColorStringHexRGB(rawLower)
+            ? parseColorHexRGB(rawLower)
+            : isColorStringHexRGBA(rawLower)
+                ? parseColorHexARGB(rawLower)
+                : isColorStringWebRGB(rawLower)
+                    ? parseColorWebRGB(rawLower)
+                    : isColorStringWebRGBA(rawLower)
+                        ? parseColorWebRGBA(rawLower)
+                        : isColorNamed(rawLower)
+                            ? parseColorNamed(rawLower)
+                            : null;
+    }
+
     /**
      * Prerendering prepares render-ready dies data to be used by the rendering module
      */
@@ -27533,8 +28632,8 @@ Instead styling against the role which is more general and likely a better appro
         constructor(dies, colorScale, highlightedValues, horizontalScale, verticalScale, colorScaleMode, dieLabelsHidden, dieLabelsSuffix, maxCharacters, dieDimensions, margin) {
             this.fontSizeFactor = 0.8;
             this.nonHighlightedOpacity = 0.3;
-            this.emptyDieColor = '#DADFEC';
-            this.nanDieColor = '#7a7a7a';
+            this.emptyDieColor = 'rgba(218,223,236,1)';
+            this.nanDieColor = 'rgba(122,122,122,1)';
             this.d3ColorScale = this.createD3ColorScale(colorScale, colorScaleMode);
             this.labelsFontSize = this.calculateLabelsFontSize(dieDimensions, maxCharacters);
             this.diesRenderInfo = [];
@@ -27542,8 +28641,7 @@ Instead styling against the role which is more general and likely a better appro
                 this.diesRenderInfo.push({
                     x: horizontalScale(die.x) + margin.right,
                     y: verticalScale(die.y) + margin.top,
-                    fillStyle: this.calculateFillStyle(die, colorScaleMode),
-                    opacity: this.calculateOpacity(die.value, highlightedValues),
+                    fillStyle: this.calculateFillStyle(die.value, colorScaleMode, highlightedValues),
                     text: this.buildLabel(die.value, maxCharacters, dieLabelsHidden, dieLabelsSuffix)
                 });
             }
@@ -27579,7 +28677,7 @@ Instead styling against the role which is more general and likely a better appro
             return highlightedValues.length > 0
                 && !highlightedValues.some(dieValue => dieValue === selectedValue)
                 ? this.nonHighlightedOpacity
-                : 0;
+                : 1;
         }
         isColorScaleLinear(colorScaleMode) {
             return colorScaleMode === WaferMapColorScaleMode.linear;
@@ -27587,20 +28685,28 @@ Instead styling against the role which is more general and likely a better appro
         isColorScaleOrdinal(colorScaleMode) {
             return colorScaleMode === WaferMapColorScaleMode.ordinal;
         }
-        calculateFillStyle(die, colorScaleMode) {
-            if (!this.dieHasData(die.value)) {
-                return this.emptyDieColor;
-            }
-            if (isNaN(+die.value)) {
-                return this.nanDieColor;
+        calculateFillStyle(value, colorScaleMode, highlightedValues) {
+            let colorValue = this.emptyDieColor;
+            if (this.dieHasData(value)) {
+                if (isNaN(+value)) {
+                    colorValue = this.nanDieColor;
+                }
+                else if (this.isColorScaleLinear(colorScaleMode)) {
+                    colorValue = this.d3ColorScale(+value);
+                }
+                else if (this.isColorScaleOrdinal(colorScaleMode)) {
+                    colorValue = this.d3ColorScale(value);
+                }
             }
-            if (this.isColorScaleLinear(colorScaleMode)) {
-                return this.d3ColorScale(+die.value);
+            if (colorValue === undefined) {
+                return this.emptyDieColor;
             }
-            if (this.isColorScaleOrdinal(colorScaleMode)) {
-                return this.d3ColorScale(die.value);
+            let rgbColor = parseColor(colorValue);
+            if (rgbColor === null) {
+                return this.emptyDieColor;
             }
-            return this.emptyDieColor;
+            rgbColor = new ColorRGBA64(rgbColor.r, rgbColor.g, rgbColor.b, this.calculateOpacity(value, highlightedValues));
+            return rgbColor.toStringWebRGBA();
         }
     }