@decidables/detectable-elements 0.4.4 → 0.5.0

package/lib/detectableElements.umd.js

@@ -2382,13 +2382,13 @@
     constructor.prototype = factory.prototype = prototype;
     prototype.constructor = constructor;
   }
-  function extend(parent, definition) {
+  function extend$1(parent, definition) {
     var prototype = Object.create(parent.prototype);
     for (var key in definition) prototype[key] = definition[key];
     return prototype;
   }
 
-  function Color() {}
+  function Color$1() {}
   var darker = 0.7;
   var brighter = 1 / darker;
   var reI = "\\s*([+-]?\\d+)\\s*",
@@ -2551,7 +2551,7 @@
     yellow: 0xffff00,
     yellowgreen: 0x9acd32
   };
-  define(Color, color, {
+  define(Color$1, color, {
     copy(channels) {
       return Object.assign(new this.constructor(), this, channels);
     },
@@ -2603,7 +2603,7 @@
     return new Rgb(r, g, b, a);
   }
   function rgbConvert(o) {
-    if (!(o instanceof Color)) o = color(o);
+    if (!(o instanceof Color$1)) o = color(o);
     if (!o) return new Rgb();
     o = o.rgb();
     return new Rgb(o.r, o.g, o.b, o.opacity);
@@ -2617,7 +2617,7 @@
     this.b = +b;
     this.opacity = +opacity;
   }
-  define(Rgb, rgb, extend(Color, {
+  define(Rgb, rgb, extend$1(Color$1, {
     brighter(k) {
       k = k == null ? brighter : Math.pow(brighter, k);
       return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
@@ -2668,7 +2668,7 @@
   }
   function hslConvert(o) {
     if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-    if (!(o instanceof Color)) o = color(o);
+    if (!(o instanceof Color$1)) o = color(o);
     if (!o) return new Hsl();
     if (o instanceof Hsl) return o;
     o = o.rgb();
@@ -2698,7 +2698,7 @@
     this.l = +l;
     this.opacity = +opacity;
   }
-  define(Hsl, hsl, extend(Color, {
+  define(Hsl, hsl, extend$1(Color$1, {
     brighter(k) {
       k = k == null ? brighter : Math.pow(brighter, k);
       return new Hsl(this.h, this.s, this.l * k, this.opacity);
@@ -4799,8 +4799,8 @@
     });
     if (!subject.length) return;
     clip.sort(compareIntersection);
-    link(subject);
-    link(clip);
+    link$1(subject);
+    link$1(clip);
     for (i = 0, n = clip.length; i < n; ++i) {
       clip[i].e = startInside = !startInside;
     }
@@ -4839,7 +4839,7 @@
       stream.lineEnd();
     }
   }
-  function link(array) {
+  function link$1(array) {
     if (!(n = array.length)) return;
     var n,
       i = 0,
@@ -6130,54 +6130,12 @@
       const ambientS = rotate ? `${-ambientM.y}px ${ambientM.y / 2}px ${ambientM.b}px ${ambientM.s}px` : `${ambientM.y / 2}px ${ambientM.y}px ${ambientM.b}px ${ambientM.s}px`;
       return `${umbraS} ${umbraC}, ${penumbraS} ${penumbraC}, ${ambientS} ${ambientC}`;
     }
-    static get svgDefs() {
-      const shadows = DecidablesElement.shadows; /* eslint-disable-line prefer-destructuring */
-
-      const filters = shadows.elevations.map(z => {
-        return `
-        <filter id=${`shadow-${z}`} filterUnits="userSpaceOnUse" x="-100%" y="-100%" width="200%" height="200%">
-          <feComponentTransfer in="SourceAlpha" result="solid">
-            <feFuncA type="table" tableValues="0 1 1"/>
-          </feComponentTransfer>
-          <feOffset in="solid" result="offU" dx=${shadows.mapUmbra[z].y / 2} dy=${shadows.mapUmbra[z].y} />
-          <feOffset in="solid" result="offP" dx=${shadows.mapPenumbra[z].y / 2} dy=${shadows.mapPenumbra[z].y} />
-          <feOffset in="solid" result="offA" dx=${shadows.mapAmbient[z].y / 2} dy=${shadows.mapAmbient[z].y} />
-          ${shadows.mapUmbra[z].s === 0 ? '' : `<feMorphology in="offU" result="spreadU" operator=${shadows.mapUmbra[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapUmbra[z].s)} />`}
-          ${shadows.mapPenumbra[z].s === 0 ? '' : `<feMorphology in="offP" result="spreadP" operator=${shadows.mapPenumbra[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapPenumbra[z].s)} />`}
-          ${shadows.mapAmbient[z].s === 0 ? '' : `<feMorphology in="offA" result="spreadA" operator=${shadows.mapAmbient[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapAmbient[z].s)} />`}
-          <feGaussianBlur in=${shadows.mapUmbra[z].s === 0 ? 'offU' : 'spreadU'} result="blurU" stdDeviation=${shadows.mapUmbra[z].b / 2} />
-          <feGaussianBlur in=${shadows.mapPenumbra[z].s === 0 ? 'offP' : 'spreadP'} result="blurP" stdDeviation=${shadows.mapPenumbra[z].b / 2} />
-          <feGaussianBlur in=${shadows.mapAmbient[z].s === 0 ? 'offA' : 'spreadA'} result="blurA" stdDeviation=${shadows.mapAmbient[z].b / 2} />
-          <feFlood in="SourceGraphic" result="opU" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityUmbra + shadows.opacityBoost} />
-          <feFlood in="SourceGraphic" result="opP" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityPenumbra + shadows.opacityBoost} />
-          <feFlood in="SourceGraphic" result="opA" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityAmbient + shadows.opacityBoost} />
-          <feComposite in="opU" in2="blurU" result="shU" operator="in" />
-          <feComposite in="opP" in2="blurP" result="shP" operator="in" />
-          <feComposite in="opA" in2="blurA" result="shA" operator="in" />
-          <feMorphology in="solid" result="smaller" operator="erode" radius="1" />
-          <feComposite in="shU" in2="smaller" result="finalU" operator="out" />
-          <feComposite in="shP" in2="smaller" result="finalP" operator="out" />
-          <feComposite in="shA" in2="smaller" result="finalA" operator="out" />
-          <feMerge>
-            <feMergeNode in="finalU" />
-            <feMergeNode in="finalP" />
-            <feMergeNode in="finalA" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>`;
-      });
-      return `
-      <defs>
-        ${filters}
-      </defs>
-    `;
-    }
     static get svgFilters() {
       const shadows = DecidablesElement.shadows; /* eslint-disable-line prefer-destructuring */
 
       const filters = shadows.elevations.map(z => {
         return b`
-        <filter id=${`shadow-${z}`} x="-250%" y="-250%" width="600%" height="600%">
+        <filter id=${`shadow-${z}`} filterUnits="userSpaceOnUse" x="-100%" y="-100%" width="200%" height="200%">
           <feComponentTransfer in="SourceAlpha" result="solid">
             <feFuncA type="table" tableValues="0 1 1"/>
           </feComponentTransfer>
@@ -6209,11 +6167,9 @@
         </filter>`;
       });
       return b`
-      <svg class="defs">
-        <defs>
-          ${filters}
-        </defs>
-      </svg>
+      <defs class="filtersUser">
+        ${filters}
+      </defs>
     `;
     }
     static get styles() {
@@ -13622,195 +13578,2649 @@
   }
   customElements.define('rdk-task', RDKTask);
 
-  /*
-    ROCSpace element
-    <roc-space>
-
-    Attributes:
-      FAR; HR;
-      d'; C; zFAR; zHR
-
-      draggable: yes/no
-
-      scale: FAR/HR; zFAR/zHR; d'/C
-      grid: FAR/HR; zFAR/zHR; d'/C
-      isos: d'; C; FAR; HR
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) {
+        symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+      keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+    return target;
+  }
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
 
-    Styles:
-      ??
-  */
-  class ROCSpace extends DecidablesMixinResizeable(DetectableElement) {
-    static get properties() {
-      return {
-        contour: {
-          attribute: 'contour',
-          type: String,
-          reflect: true
-        },
-        point: {
-          attribute: 'point',
-          type: String,
-          reflect: true
-        },
-        isoD: {
-          attribute: 'iso-d',
-          type: String,
-          reflect: true
-        },
-        isoC: {
-          attribute: 'iso-c',
-          type: String,
-          reflect: true
-        },
-        zRoc: {
-          attribute: 'z-roc',
-          type: Boolean,
-          reflect: true
-        },
-        far: {
-          attribute: 'far',
-          type: Number,
-          reflect: true
-        },
-        hr: {
-          attribute: 'hr',
-          type: Number,
-          reflect: true
-        },
-        d: {
-          attribute: false,
-          type: Number,
-          reflect: false
-        },
-        c: {
-          attribute: false,
-          type: Number,
-          reflect: false
-        },
-        s: {
-          attribute: false,
-          type: Number,
-          reflect: false
-        }
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function (obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function (obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
       };
     }
-    constructor() {
-      super();
-      this.firstUpdate = true;
-      this.drag = false;
-      this.sdt = false;
-      this.contours = ['sensitivity', 'bias', 'accuracy'];
-      this.contour = undefined;
-      this.points = ['all', 'first', 'rest', 'none'];
-      this.point = 'all';
-      this.isoDs = ['all', 'first', 'rest', 'none'];
-      this.isoD = 'first';
-      this.isoCs = ['all', 'first', 'rest', 'none'];
-      this.isoC = 'first';
-      this.zRoc = false;
-      this.far = 0.25;
-      this.hr = 0.75;
-      this.s = SDTMath.s.DEFAULT;
-      this.label = '';
-      this.locations = [{
-        name: 'default',
-        far: this.far,
-        hr: this.hr,
-        s: this.s,
-        label: ''
-      }];
-      this.pointArray = [];
-      this.isoDArray = [];
-      this.isoCArray = [];
-      this.alignState();
-    }
-    alignState() {
-      this.locations[0].hr = this.hr;
-      this.locations[0].far = this.far;
-      this.locations[0].s = this.s;
-      this.locations[0].label = this.label;
-      this.d = SDTMath.hrFar2D(this.hr, this.far, this.s);
-      this.c = SDTMath.hrFar2C(this.hr, this.far, this.s);
-      this.pointArray = [];
-      this.isoDArray = [];
-      this.isoCArray = [];
-      this.locations.forEach((item, index) => {
-        item.d = SDTMath.hrFar2D(item.hr, item.far, item.s);
-        item.c = SDTMath.hrFar2C(item.hr, item.far, item.s);
-        if (index === 0 && (this.point === 'first' || this.point === 'all')) {
-          this.pointArray.push(item);
-        } else if (index > 0 && (this.point === 'rest' || this.point === 'all')) {
-          this.pointArray.push(item);
-        }
-        if (index === 0 && (this.isoD === 'first' || this.isoD === 'all')) {
-          this.isoDArray.push(item);
-        } else if (index > 0 && (this.isoD === 'rest' || this.isoD === 'all')) {
-          this.isoDArray.push(item);
-        }
-        if (index === 0 && (this.isoC === 'first' || this.isoC === 'all')) {
-          this.isoCArray.push(item);
-        } else if (index > 0 && (this.isoC === 'rest' || this.isoC === 'all')) {
-          this.isoCArray.push(item);
-        }
+    return _typeof(obj);
+  }
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
       });
+    } else {
+      obj[key] = value;
     }
-    set(hr, far, name = 'default', label = '', s = 1) {
-      if (name === 'default') {
-        this.hr = hr;
-        this.far = far;
-        this.s = s;
-        this.label = label;
+    return obj;
+  }
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
       }
-      const location = this.locations.find(item => {
-        return item.name === name;
-      });
-      if (location === undefined) {
-        this.locations.push({
-          name: name,
-          far: far,
-          hr: hr,
-          s: s,
-          label: label
-        });
-      } else {
-        location.hr = hr;
-        location.far = far;
-        location.s = s;
-        location.label = label;
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+    return arr2;
+  }
+  function _createForOfIteratorHelper(o, allowArrayLike) {
+    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+    if (!it) {
+      if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
+        if (it) o = it;
+        var i = 0;
+        var F = function () {};
+        return {
+          s: F,
+          n: function () {
+            if (i >= o.length) return {
+              done: true
+            };
+            return {
+              done: false,
+              value: o[i++]
+            };
+          },
+          e: function (e) {
+            throw e;
+          },
+          f: F
+        };
       }
-      this.requestUpdate();
+      throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    setWithSDT(d, c, name = 'default', label = '', s = 1) {
-      if (name === 'default') {
-        this.hr = SDTMath.dC2Hr(d, c, s);
-        this.far = SDTMath.dC2Far(d, c, s);
-        this.s = s;
-        this.label = label;
+    var normalCompletion = true,
+      didErr = false,
+      err;
+    return {
+      s: function () {
+        it = it.call(o);
+      },
+      n: function () {
+        var step = it.next();
+        normalCompletion = step.done;
+        return step;
+      },
+      e: function (e) {
+        didErr = true;
+        err = e;
+      },
+      f: function () {
+        try {
+          if (!normalCompletion && it.return != null) it.return();
+        } finally {
+          if (didErr) throw err;
+        }
       }
-      const location = this.locations.find(item => {
-        return item.name === name;
-      });
-      if (location === undefined) {
-        this.locations.push({
-          name: name,
-          far: SDTMath.dC2Far(d, c, s),
-          hr: SDTMath.dC2Hr(d, c, s),
-          s: s,
-          label: label
-        });
+    };
+  }
+
+  /**
+   * de Casteljau's algorithm for drawing and splitting bezier curves.
+   * Inspired by https://pomax.github.io/bezierinfo/
+   *
+   * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+   *   The original segment to split.
+   * @param {Number} t Where to split the curve (value between [0, 1])
+   * @return {Object} An object { left, right } where left is the segment from 0..t and
+   *   right is the segment from t..1.
+   */
+  function decasteljau(points, t) {
+    var left = [];
+    var right = [];
+    function decasteljauRecurse(points, t) {
+      if (points.length === 1) {
+        left.push(points[0]);
+        right.push(points[0]);
       } else {
-        location.hr = SDTMath.dC2Hr(d, c, s);
-        location.far = SDTMath.dC2Far(d, c, s);
-        location.s = s;
-        location.label = label;
+        var newPoints = Array(points.length - 1);
+        for (var i = 0; i < newPoints.length; i++) {
+          if (i === 0) {
+            left.push(points[0]);
+          }
+          if (i === newPoints.length - 1) {
+            right.push(points[i + 1]);
+          }
+          newPoints[i] = [(1 - t) * points[i][0] + t * points[i + 1][0], (1 - t) * points[i][1] + t * points[i + 1][1]];
+        }
+        decasteljauRecurse(newPoints, t);
       }
-      this.sdt = true;
-      this.requestUpdate();
     }
-    static get styles() {
-      return [super.styles, i$3`
-        :host {
-          display: inline-block;
+    if (points.length) {
+      decasteljauRecurse(points, t);
+    }
+    return {
+      left: left,
+      right: right.reverse()
+    };
+  }
+  /**
+   * Convert segments represented as points back into a command object
+   *
+   * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+   *   Represents a segment
+   * @return {Object} A command object representing the segment.
+   */
+
+  function pointsToCommand(points) {
+    var command = {};
+    if (points.length === 4) {
+      command.x2 = points[2][0];
+      command.y2 = points[2][1];
+    }
+    if (points.length >= 3) {
+      command.x1 = points[1][0];
+      command.y1 = points[1][1];
+    }
+    command.x = points[points.length - 1][0];
+    command.y = points[points.length - 1][1];
+    if (points.length === 4) {
+      // start, control1, control2, end
+      command.type = 'C';
+    } else if (points.length === 3) {
+      // start, control, end
+      command.type = 'Q';
+    } else {
+      // start, end
+      command.type = 'L';
+    }
+    return command;
+  }
+  /**
+   * Runs de Casteljau's algorithm enough times to produce the desired number of segments.
+   *
+   * @param {Number[][]} points Array of [x,y] points for de Casteljau (the initial segment to split)
+   * @param {Number} segmentCount Number of segments to split the original into
+   * @return {Number[][][]} Array of segments
+   */
+
+  function splitCurveAsPoints(points, segmentCount) {
+    segmentCount = segmentCount || 2;
+    var segments = [];
+    var remainingCurve = points;
+    var tIncrement = 1 / segmentCount; // x-----x-----x-----x
+    // t=  0.33   0.66   1
+    // x-----o-----------x
+    // r=  0.33
+    //       x-----o-----x
+    // r=         0.5  (0.33 / (1 - 0.33))  === tIncrement / (1 - (tIncrement * (i - 1))
+    // x-----x-----x-----x----x
+    // t=  0.25   0.5   0.75  1
+    // x-----o----------------x
+    // r=  0.25
+    //       x-----o----------x
+    // r=         0.33  (0.25 / (1 - 0.25))
+    //             x-----o----x
+    // r=         0.5  (0.25 / (1 - 0.5))
+
+    for (var i = 0; i < segmentCount - 1; i++) {
+      var tRelative = tIncrement / (1 - tIncrement * i);
+      var split = decasteljau(remainingCurve, tRelative);
+      segments.push(split.left);
+      remainingCurve = split.right;
+    } // last segment is just to the end from the last point
+
+    segments.push(remainingCurve);
+    return segments;
+  }
+  /**
+   * Convert command objects to arrays of points, run de Casteljau's algorithm on it
+   * to split into to the desired number of segments.
+   *
+   * @param {Object} commandStart The start command object
+   * @param {Object} commandEnd The end command object
+   * @param {Number} segmentCount The number of segments to create
+   * @return {Object[]} An array of commands representing the segments in sequence
+   */
+
+  function splitCurve(commandStart, commandEnd, segmentCount) {
+    var points = [[commandStart.x, commandStart.y]];
+    if (commandEnd.x1 != null) {
+      points.push([commandEnd.x1, commandEnd.y1]);
+    }
+    if (commandEnd.x2 != null) {
+      points.push([commandEnd.x2, commandEnd.y2]);
+    }
+    points.push([commandEnd.x, commandEnd.y]);
+    return splitCurveAsPoints(points, segmentCount).map(pointsToCommand);
+  }
+  var commandTokenRegex = /[MLCSTQAHVZmlcstqahv]|-?[\d.e+-]+/g;
+  /**
+   * List of params for each command type in a path `d` attribute
+   */
+
+  var typeMap = {
+    M: ['x', 'y'],
+    L: ['x', 'y'],
+    H: ['x'],
+    V: ['y'],
+    C: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
+    S: ['x2', 'y2', 'x', 'y'],
+    Q: ['x1', 'y1', 'x', 'y'],
+    T: ['x', 'y'],
+    A: ['rx', 'ry', 'xAxisRotation', 'largeArcFlag', 'sweepFlag', 'x', 'y'],
+    Z: []
+  }; // Add lower case entries too matching uppercase (e.g. 'm' == 'M')
+
+  Object.keys(typeMap).forEach(function (key) {
+    typeMap[key.toLowerCase()] = typeMap[key];
+  });
+  function arrayOfLength(length, value) {
+    var array = Array(length);
+    for (var i = 0; i < length; i++) {
+      array[i] = value;
+    }
+    return array;
+  }
+  /**
+   * Converts a command object to a string to be used in a `d` attribute
+   * @param {Object} command A command object
+   * @return {String} The string for the `d` attribute
+   */
+
+  function commandToString(command) {
+    return "".concat(command.type).concat(typeMap[command.type].map(function (p) {
+      return command[p];
+    }).join(','));
+  }
+  /**
+   * Converts command A to have the same type as command B.
+   *
+   * e.g., L0,5 -> C0,5,0,5,0,5
+   *
+   * Uses these rules:
+   * x1 <- x
+   * x2 <- x
+   * y1 <- y
+   * y2 <- y
+   * rx <- 0
+   * ry <- 0
+   * xAxisRotation <- read from B
+   * largeArcFlag <- read from B
+   * sweepflag <- read from B
+   *
+   * @param {Object} aCommand Command object from path `d` attribute
+   * @param {Object} bCommand Command object from path `d` attribute to match against
+   * @return {Object} aCommand converted to type of bCommand
+   */
+
+  function convertToSameType(aCommand, bCommand) {
+    var conversionMap = {
+      x1: 'x',
+      y1: 'y',
+      x2: 'x',
+      y2: 'y'
+    };
+    var readFromBKeys = ['xAxisRotation', 'largeArcFlag', 'sweepFlag']; // convert (but ignore M types)
+
+    if (aCommand.type !== bCommand.type && bCommand.type.toUpperCase() !== 'M') {
+      var aConverted = {};
+      Object.keys(bCommand).forEach(function (bKey) {
+        var bValue = bCommand[bKey]; // first read from the A command
+
+        var aValue = aCommand[bKey]; // if it is one of these values, read from B no matter what
+
+        if (aValue === undefined) {
+          if (readFromBKeys.includes(bKey)) {
+            aValue = bValue;
+          } else {
+            // if it wasn't in the A command, see if an equivalent was
+            if (aValue === undefined && conversionMap[bKey]) {
+              aValue = aCommand[conversionMap[bKey]];
+            } // if it doesn't have a converted value, use 0
+
+            if (aValue === undefined) {
+              aValue = 0;
+            }
+          }
+        }
+        aConverted[bKey] = aValue;
+      }); // update the type to match B
+
+      aConverted.type = bCommand.type;
+      aCommand = aConverted;
+    }
+    return aCommand;
+  }
+  /**
+   * Interpolate between command objects commandStart and commandEnd segmentCount times.
+   * If the types are L, Q, or C then the curves are split as per de Casteljau's algorithm.
+   * Otherwise we just copy commandStart segmentCount - 1 times, finally ending with commandEnd.
+   *
+   * @param {Object} commandStart Command object at the beginning of the segment
+   * @param {Object} commandEnd Command object at the end of the segment
+   * @param {Number} segmentCount The number of segments to split this into. If only 1
+   *   Then [commandEnd] is returned.
+   * @return {Object[]} Array of ~segmentCount command objects between commandStart and
+   *   commandEnd. (Can be segmentCount+1 objects if commandStart is type M).
+   */
+
+  function splitSegment(commandStart, commandEnd, segmentCount) {
+    var segments = []; // line, quadratic bezier, or cubic bezier
+
+    if (commandEnd.type === 'L' || commandEnd.type === 'Q' || commandEnd.type === 'C') {
+      segments = segments.concat(splitCurve(commandStart, commandEnd, segmentCount)); // general case - just copy the same point
+    } else {
+      var copyCommand = _extends({}, commandStart); // convert M to L
+
+      if (copyCommand.type === 'M') {
+        copyCommand.type = 'L';
+      }
+      segments = segments.concat(arrayOfLength(segmentCount - 1).map(function () {
+        return copyCommand;
+      }));
+      segments.push(commandEnd);
+    }
+    return segments;
+  }
+  /**
+   * Extends an array of commandsToExtend to the length of the referenceCommands by
+   * splitting segments until the number of commands match. Ensures all the actual
+   * points of commandsToExtend are in the extended array.
+   *
+   * @param {Object[]} commandsToExtend The command object array to extend
+   * @param {Object[]} referenceCommands The command object array to match in length
+   * @param {Function} excludeSegment a function that takes a start command object and
+   *   end command object and returns true if the segment should be excluded from splitting.
+   * @return {Object[]} The extended commandsToExtend array
+   */
+
+  function extend(commandsToExtend, referenceCommands, excludeSegment) {
+    // compute insertion points:
+    // number of segments in the path to extend
+    var numSegmentsToExtend = commandsToExtend.length - 1; // number of segments in the reference path.
+
+    var numReferenceSegments = referenceCommands.length - 1; // this value is always between [0, 1].
+
+    var segmentRatio = numSegmentsToExtend / numReferenceSegments; // create a map, mapping segments in referenceCommands to how many points
+    // should be added in that segment (should always be >= 1 since we need each
+    // point itself).
+    // 0 = segment 0-1, 1 = segment 1-2, n-1 = last vertex
+
+    var countPointsPerSegment = arrayOfLength(numReferenceSegments).reduce(function (accum, d, i) {
+      var insertIndex = Math.floor(segmentRatio * i); // handle excluding segments
+
+      if (excludeSegment && insertIndex < commandsToExtend.length - 1 && excludeSegment(commandsToExtend[insertIndex], commandsToExtend[insertIndex + 1])) {
+        // set the insertIndex to the segment that this point should be added to:
+        // round the insertIndex essentially so we split half and half on
+        // neighbouring segments. hence the segmentRatio * i < 0.5
+        var addToPriorSegment = segmentRatio * i % 1 < 0.5; // only skip segment if we already have 1 point in it (can't entirely remove a segment)
+
+        if (accum[insertIndex]) {
+          // TODO - Note this is a naive algorithm that should work for most d3-area use cases
+          // but if two adjacent segments are supposed to be skipped, this will not perform as
+          // expected. Could be updated to search for nearest segment to place the point in, but
+          // will only do that if necessary.
+          // add to the prior segment
+          if (addToPriorSegment) {
+            if (insertIndex > 0) {
+              insertIndex -= 1; // not possible to add to previous so adding to next
+            } else if (insertIndex < commandsToExtend.length - 1) {
+              insertIndex += 1;
+            } // add to next segment
+          } else if (insertIndex < commandsToExtend.length - 1) {
+            insertIndex += 1; // not possible to add to next so adding to previous
+          } else if (insertIndex > 0) {
+            insertIndex -= 1;
+          }
+        }
+      }
+      accum[insertIndex] = (accum[insertIndex] || 0) + 1;
+      return accum;
+    }, []); // extend each segment to have the correct number of points for a smooth interpolation
+
+    var extended = countPointsPerSegment.reduce(function (extended, segmentCount, i) {
+      // if last command, just add `segmentCount` number of times
+      if (i === commandsToExtend.length - 1) {
+        var lastCommandCopies = arrayOfLength(segmentCount, _extends({}, commandsToExtend[commandsToExtend.length - 1])); // convert M to L
+
+        if (lastCommandCopies[0].type === 'M') {
+          lastCommandCopies.forEach(function (d) {
+            d.type = 'L';
+          });
+        }
+        return extended.concat(lastCommandCopies);
+      } // otherwise, split the segment segmentCount times.
+
+      return extended.concat(splitSegment(commandsToExtend[i], commandsToExtend[i + 1], segmentCount));
+    }, []); // add in the very first point since splitSegment only adds in the ones after it
+
+    extended.unshift(commandsToExtend[0]);
+    return extended;
+  }
+  /**
+   * Takes a path `d` string and converts it into an array of command
+   * objects. Drops the `Z` character.
+   *
+   * @param {String|null} d A path `d` string
+   */
+
+  function pathCommandsFromString(d) {
+    // split into valid tokens
+    var tokens = (d || '').match(commandTokenRegex) || [];
+    var commands = [];
+    var commandArgs;
+    var command; // iterate over each token, checking if we are at a new command
+    // by presence in the typeMap
+
+    for (var i = 0; i < tokens.length; ++i) {
+      commandArgs = typeMap[tokens[i]]; // new command found:
+
+      if (commandArgs) {
+        command = {
+          type: tokens[i]
+        }; // add each of the expected args for this command:
+
+        for (var a = 0; a < commandArgs.length; ++a) {
+          command[commandArgs[a]] = +tokens[i + a + 1];
+        } // need to increment our token index appropriately since
+        // we consumed token args
+
+        i += commandArgs.length;
+        commands.push(command);
+      }
+    }
+    return commands;
+  }
+  /**
+   * Interpolate from A to B by extending A and B during interpolation to have
+   * the same number of points. This allows for a smooth transition when they
+   * have a different number of points.
+   *
+   * Ignores the `Z` command in paths unless both A and B end with it.
+   *
+   * This function works directly with arrays of command objects instead of with
+   * path `d` strings (see interpolatePath for working with `d` strings).
+   *
+   * @param {Object[]} aCommandsInput Array of path commands
+   * @param {Object[]} bCommandsInput Array of path commands
+   * @param {(Function|Object)} interpolateOptions
+   * @param {Function} interpolateOptions.excludeSegment a function that takes a start command object and
+   *   end command object and returns true if the segment should be excluded from splitting.
+   * @param {Boolean} interpolateOptions.snapEndsToInput a boolean indicating whether end of input should
+   *   be sourced from input argument or computed.
+   * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
+   */
+
+  function interpolatePathCommands(aCommandsInput, bCommandsInput, interpolateOptions) {
+    // make a copy so we don't mess with the input arrays
+    var aCommands = aCommandsInput == null ? [] : aCommandsInput.slice();
+    var bCommands = bCommandsInput == null ? [] : bCommandsInput.slice();
+    var _ref = _typeof(interpolateOptions) === 'object' ? interpolateOptions : {
+        excludeSegment: interpolateOptions,
+        snapEndsToInput: true
+      },
+      excludeSegment = _ref.excludeSegment,
+      snapEndsToInput = _ref.snapEndsToInput; // both input sets are empty, so we don't interpolate
+
+    if (!aCommands.length && !bCommands.length) {
+      return function nullInterpolator() {
+        return [];
+      };
+    } // do we add Z during interpolation? yes if both have it. (we'd expect both to have it or not)
+
+    var addZ = (aCommands.length === 0 || aCommands[aCommands.length - 1].type === 'Z') && (bCommands.length === 0 || bCommands[bCommands.length - 1].type === 'Z'); // we temporarily remove Z
+
+    if (aCommands.length > 0 && aCommands[aCommands.length - 1].type === 'Z') {
+      aCommands.pop();
+    }
+    if (bCommands.length > 0 && bCommands[bCommands.length - 1].type === 'Z') {
+      bCommands.pop();
+    } // if A is empty, treat it as if it used to contain just the first point
+    // of B. This makes it so the line extends out of from that first point.
+
+    if (!aCommands.length) {
+      aCommands.push(bCommands[0]); // otherwise if B is empty, treat it as if it contains the first point
+      // of A. This makes it so the line retracts into the first point.
+    } else if (!bCommands.length) {
+      bCommands.push(aCommands[0]);
+    } // extend to match equal size
+
+    var numPointsToExtend = Math.abs(bCommands.length - aCommands.length);
+    if (numPointsToExtend !== 0) {
+      // B has more points than A, so add points to A before interpolating
+      if (bCommands.length > aCommands.length) {
+        aCommands = extend(aCommands, bCommands, excludeSegment); // else if A has more points than B, add more points to B
+      } else if (bCommands.length < aCommands.length) {
+        bCommands = extend(bCommands, aCommands, excludeSegment);
+      }
+    } // commands have same length now.
+    // convert commands in A to the same type as those in B
+
+    aCommands = aCommands.map(function (aCommand, i) {
+      return convertToSameType(aCommand, bCommands[i]);
+    }); // create mutable interpolated command objects
+
+    var interpolatedCommands = aCommands.map(function (aCommand) {
+      return _objectSpread2({}, aCommand);
+    });
+    if (addZ) {
+      interpolatedCommands.push({
+        type: 'Z'
+      });
+      aCommands.push({
+        type: 'Z'
+      }); // required for when returning at t == 0
+    }
+    return function pathCommandInterpolator(t) {
+      // at 1 return the final value without the extensions used during interpolation
+      if (t === 1 && snapEndsToInput) {
+        return bCommandsInput == null ? [] : bCommandsInput;
+      } // work with aCommands directly since interpolatedCommands are mutated
+
+      if (t === 0) {
+        return aCommands;
+      } // interpolate the commands using the mutable interpolated command objs
+
+      for (var i = 0; i < interpolatedCommands.length; ++i) {
+        // if (interpolatedCommands[i].type === 'Z') continue;
+        var aCommand = aCommands[i];
+        var bCommand = bCommands[i];
+        var interpolatedCommand = interpolatedCommands[i];
+        var _iterator = _createForOfIteratorHelper(typeMap[interpolatedCommand.type]),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var arg = _step.value;
+            interpolatedCommand[arg] = (1 - t) * aCommand[arg] + t * bCommand[arg]; // do not use floats for flags (#27), round to integer
+
+            if (arg === 'largeArcFlag' || arg === 'sweepFlag') {
+              interpolatedCommand[arg] = Math.round(interpolatedCommand[arg]);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+      return interpolatedCommands;
+    };
+  }
+  /** @typedef InterpolateOptions  */
+
+  /**
+   * Interpolate from A to B by extending A and B during interpolation to have
+   * the same number of points. This allows for a smooth transition when they
+   * have a different number of points.
+   *
+   * Ignores the `Z` character in paths unless both A and B end with it.
+   *
+   * @param {String} a The `d` attribute for a path
+   * @param {String} b The `d` attribute for a path
+   * @param {((command1, command2) => boolean|{
+   *   excludeSegment?: (command1, command2) => boolean;
+   *   snapEndsToInput?: boolean
+   * })} interpolateOptions The excludeSegment function or an options object
+   *    - interpolateOptions.excludeSegment a function that takes a start command object and
+   *      end command object and returns true if the segment should be excluded from splitting.
+   *    - interpolateOptions.snapEndsToInput a boolean indicating whether end of input should
+   *      be sourced from input argument or computed.
+   * @returns {Function} Interpolation function that maps t ([0, 1]) to a path `d` string.
+   */
+
+  function interpolatePath(a, b, interpolateOptions) {
+    var aCommands = pathCommandsFromString(a);
+    var bCommands = pathCommandsFromString(b);
+    var _ref2 = _typeof(interpolateOptions) === 'object' ? interpolateOptions : {
+        excludeSegment: interpolateOptions,
+        snapEndsToInput: true
+      },
+      excludeSegment = _ref2.excludeSegment,
+      snapEndsToInput = _ref2.snapEndsToInput;
+    if (!aCommands.length && !bCommands.length) {
+      return function nullInterpolator() {
+        return '';
+      };
+    }
+    var commandInterpolator = interpolatePathCommands(aCommands, bCommands, {
+      excludeSegment: excludeSegment,
+      snapEndsToInput: snapEndsToInput
+    });
+    return function pathStringInterpolator(t) {
+      // at 1 return the final value without the extensions used during interpolation
+      if (t === 1 && snapEndsToInput) {
+        return b == null ? '' : b;
+      }
+      var interpolatedCommands = commandInterpolator(t); // convert to a string (fastest concat: https://jsperf.com/join-concat/150)
+
+      var interpolatedString = '';
+      var _iterator2 = _createForOfIteratorHelper(interpolatedCommands),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var interpolatedCommand = _step2.value;
+          interpolatedString += commandToString(interpolatedCommand);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      return interpolatedString;
+    };
+  }
+
+  var cssKeywords = {
+    aliceblue: [240, 248, 255],
+    antiquewhite: [250, 235, 215],
+    aqua: [0, 255, 255],
+    aquamarine: [127, 255, 212],
+    azure: [240, 255, 255],
+    beige: [245, 245, 220],
+    bisque: [255, 228, 196],
+    black: [0, 0, 0],
+    blanchedalmond: [255, 235, 205],
+    blue: [0, 0, 255],
+    blueviolet: [138, 43, 226],
+    brown: [165, 42, 42],
+    burlywood: [222, 184, 135],
+    cadetblue: [95, 158, 160],
+    chartreuse: [127, 255, 0],
+    chocolate: [210, 105, 30],
+    coral: [255, 127, 80],
+    cornflowerblue: [100, 149, 237],
+    cornsilk: [255, 248, 220],
+    crimson: [220, 20, 60],
+    cyan: [0, 255, 255],
+    darkblue: [0, 0, 139],
+    darkcyan: [0, 139, 139],
+    darkgoldenrod: [184, 134, 11],
+    darkgray: [169, 169, 169],
+    darkgreen: [0, 100, 0],
+    darkgrey: [169, 169, 169],
+    darkkhaki: [189, 183, 107],
+    darkmagenta: [139, 0, 139],
+    darkolivegreen: [85, 107, 47],
+    darkorange: [255, 140, 0],
+    darkorchid: [153, 50, 204],
+    darkred: [139, 0, 0],
+    darksalmon: [233, 150, 122],
+    darkseagreen: [143, 188, 143],
+    darkslateblue: [72, 61, 139],
+    darkslategray: [47, 79, 79],
+    darkslategrey: [47, 79, 79],
+    darkturquoise: [0, 206, 209],
+    darkviolet: [148, 0, 211],
+    deeppink: [255, 20, 147],
+    deepskyblue: [0, 191, 255],
+    dimgray: [105, 105, 105],
+    dimgrey: [105, 105, 105],
+    dodgerblue: [30, 144, 255],
+    firebrick: [178, 34, 34],
+    floralwhite: [255, 250, 240],
+    forestgreen: [34, 139, 34],
+    fuchsia: [255, 0, 255],
+    gainsboro: [220, 220, 220],
+    ghostwhite: [248, 248, 255],
+    gold: [255, 215, 0],
+    goldenrod: [218, 165, 32],
+    gray: [128, 128, 128],
+    green: [0, 128, 0],
+    greenyellow: [173, 255, 47],
+    grey: [128, 128, 128],
+    honeydew: [240, 255, 240],
+    hotpink: [255, 105, 180],
+    indianred: [205, 92, 92],
+    indigo: [75, 0, 130],
+    ivory: [255, 255, 240],
+    khaki: [240, 230, 140],
+    lavender: [230, 230, 250],
+    lavenderblush: [255, 240, 245],
+    lawngreen: [124, 252, 0],
+    lemonchiffon: [255, 250, 205],
+    lightblue: [173, 216, 230],
+    lightcoral: [240, 128, 128],
+    lightcyan: [224, 255, 255],
+    lightgoldenrodyellow: [250, 250, 210],
+    lightgray: [211, 211, 211],
+    lightgreen: [144, 238, 144],
+    lightgrey: [211, 211, 211],
+    lightpink: [255, 182, 193],
+    lightsalmon: [255, 160, 122],
+    lightseagreen: [32, 178, 170],
+    lightskyblue: [135, 206, 250],
+    lightslategray: [119, 136, 153],
+    lightslategrey: [119, 136, 153],
+    lightsteelblue: [176, 196, 222],
+    lightyellow: [255, 255, 224],
+    lime: [0, 255, 0],
+    limegreen: [50, 205, 50],
+    linen: [250, 240, 230],
+    magenta: [255, 0, 255],
+    maroon: [128, 0, 0],
+    mediumaquamarine: [102, 205, 170],
+    mediumblue: [0, 0, 205],
+    mediumorchid: [186, 85, 211],
+    mediumpurple: [147, 112, 219],
+    mediumseagreen: [60, 179, 113],
+    mediumslateblue: [123, 104, 238],
+    mediumspringgreen: [0, 250, 154],
+    mediumturquoise: [72, 209, 204],
+    mediumvioletred: [199, 21, 133],
+    midnightblue: [25, 25, 112],
+    mintcream: [245, 255, 250],
+    mistyrose: [255, 228, 225],
+    moccasin: [255, 228, 181],
+    navajowhite: [255, 222, 173],
+    navy: [0, 0, 128],
+    oldlace: [253, 245, 230],
+    olive: [128, 128, 0],
+    olivedrab: [107, 142, 35],
+    orange: [255, 165, 0],
+    orangered: [255, 69, 0],
+    orchid: [218, 112, 214],
+    palegoldenrod: [238, 232, 170],
+    palegreen: [152, 251, 152],
+    paleturquoise: [175, 238, 238],
+    palevioletred: [219, 112, 147],
+    papayawhip: [255, 239, 213],
+    peachpuff: [255, 218, 185],
+    peru: [205, 133, 63],
+    pink: [255, 192, 203],
+    plum: [221, 160, 221],
+    powderblue: [176, 224, 230],
+    purple: [128, 0, 128],
+    rebeccapurple: [102, 51, 153],
+    red: [255, 0, 0],
+    rosybrown: [188, 143, 143],
+    royalblue: [65, 105, 225],
+    saddlebrown: [139, 69, 19],
+    salmon: [250, 128, 114],
+    sandybrown: [244, 164, 96],
+    seagreen: [46, 139, 87],
+    seashell: [255, 245, 238],
+    sienna: [160, 82, 45],
+    silver: [192, 192, 192],
+    skyblue: [135, 206, 235],
+    slateblue: [106, 90, 205],
+    slategray: [112, 128, 144],
+    slategrey: [112, 128, 144],
+    snow: [255, 250, 250],
+    springgreen: [0, 255, 127],
+    steelblue: [70, 130, 180],
+    tan: [210, 180, 140],
+    teal: [0, 128, 128],
+    thistle: [216, 191, 216],
+    tomato: [255, 99, 71],
+    turquoise: [64, 224, 208],
+    violet: [238, 130, 238],
+    wheat: [245, 222, 179],
+    white: [255, 255, 255],
+    whitesmoke: [245, 245, 245],
+    yellow: [255, 255, 0],
+    yellowgreen: [154, 205, 50]
+  };
+
+  const reverseNames = Object.create(null);
+
+  // Create a list of reverse color names
+  for (const name in cssKeywords) {
+    if (Object.hasOwn(cssKeywords, name)) {
+      reverseNames[cssKeywords[name]] = name;
+    }
+  }
+  const cs = {
+    to: {},
+    get: {}
+  };
+  cs.get = function (string) {
+    const prefix = string.slice(0, 3).toLowerCase();
+    let value;
+    let model;
+    switch (prefix) {
+      case 'hsl':
+        {
+          value = cs.get.hsl(string);
+          model = 'hsl';
+          break;
+        }
+      case 'hwb':
+        {
+          value = cs.get.hwb(string);
+          model = 'hwb';
+          break;
+        }
+      default:
+        {
+          value = cs.get.rgb(string);
+          model = 'rgb';
+          break;
+        }
+    }
+    if (!value) {
+      return null;
+    }
+    return {
+      model,
+      value
+    };
+  };
+  cs.get.rgb = function (string) {
+    if (!string) {
+      return null;
+    }
+    const abbr = /^#([a-f\d]{3,4})$/i;
+    const hex = /^#([a-f\d]{6})([a-f\d]{2})?$/i;
+    const rgba = /^rgba?\(\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)\s*(?:[\s,|/]\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(%?)\s*)?\)$/i;
+    const per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[\s,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/i;
+    const keyword = /^(\w+)$/;
+    let rgb = [0, 0, 0, 1];
+    let match;
+    let i;
+    let hexAlpha;
+    if (match = string.match(hex)) {
+      hexAlpha = match[2];
+      match = match[1];
+      for (i = 0; i < 3; i++) {
+        // https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
+        const i2 = i * 2;
+        rgb[i] = Number.parseInt(match.slice(i2, i2 + 2), 16);
+      }
+      if (hexAlpha) {
+        rgb[3] = Number.parseInt(hexAlpha, 16) / 255;
+      }
+    } else if (match = string.match(abbr)) {
+      match = match[1];
+      hexAlpha = match[3];
+      for (i = 0; i < 3; i++) {
+        rgb[i] = Number.parseInt(match[i] + match[i], 16);
+      }
+      if (hexAlpha) {
+        rgb[3] = Number.parseInt(hexAlpha + hexAlpha, 16) / 255;
+      }
+    } else if (match = string.match(rgba)) {
+      for (i = 0; i < 3; i++) {
+        rgb[i] = Number.parseFloat(match[i + 1]);
+      }
+      if (match[4]) {
+        rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
+      }
+    } else if (match = string.match(per)) {
+      for (i = 0; i < 3; i++) {
+        rgb[i] = Math.round(Number.parseFloat(match[i + 1]) * 2.55);
+      }
+      if (match[4]) {
+        rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
+      }
+    } else if (match = string.toLowerCase().match(keyword)) {
+      if (match[1] === 'transparent') {
+        return [0, 0, 0, 0];
+      }
+      if (!Object.hasOwn(cssKeywords, match[1])) {
+        return null;
+      }
+
+      // eslint-disable-next-line unicorn/prefer-spread
+      rgb = cssKeywords[match[1]].slice();
+      rgb[3] = 1;
+      return rgb;
+    } else {
+      return null;
+    }
+    for (i = 0; i < 3; i++) {
+      rgb[i] = clamp(rgb[i], 0, 255);
+    }
+    rgb[3] = clamp(rgb[3], 0, 1);
+    return rgb;
+  };
+  cs.get.hsl = function (string) {
+    if (!string) {
+      return null;
+    }
+    const hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
+    const match = string.match(hsl);
+    if (match) {
+      const alpha = Number.parseFloat(match[4]);
+      const h = (Number.parseFloat(match[1]) % 360 + 360) % 360;
+      const s = clamp(Number.parseFloat(match[2]), 0, 100);
+      const l = clamp(Number.parseFloat(match[3]), 0, 100);
+      const a = clamp(Number.isNaN(alpha) ? 1 : alpha, 0, 1);
+      return [h, s, l, a];
+    }
+    return null;
+  };
+  cs.get.hwb = function (string) {
+    if (!string) {
+      return null;
+    }
+    const hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*[\s,]\s*([+-]?[\d.]+)%\s*[\s,]\s*([+-]?[\d.]+)%\s*(?:[\s,]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
+    const match = string.match(hwb);
+    if (match) {
+      const alpha = Number.parseFloat(match[4]);
+      const h = (Number.parseFloat(match[1]) % 360 + 360) % 360;
+      const w = clamp(Number.parseFloat(match[2]), 0, 100);
+      const b = clamp(Number.parseFloat(match[3]), 0, 100);
+      const a = clamp(Number.isNaN(alpha) ? 1 : alpha, 0, 1);
+      return [h, w, b, a];
+    }
+    return null;
+  };
+  cs.to.hex = function (...rgba) {
+    return '#' + hexDouble(rgba[0]) + hexDouble(rgba[1]) + hexDouble(rgba[2]) + (rgba[3] < 1 ? hexDouble(Math.round(rgba[3] * 255)) : '');
+  };
+  cs.to.rgb = function (...rgba) {
+    return rgba.length < 4 || rgba[3] === 1 ? 'rgb(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ')' : 'rgba(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ', ' + rgba[3] + ')';
+  };
+  cs.to.rgb.percent = function (...rgba) {
+    const r = Math.round(rgba[0] / 255 * 100);
+    const g = Math.round(rgba[1] / 255 * 100);
+    const b = Math.round(rgba[2] / 255 * 100);
+    return rgba.length < 4 || rgba[3] === 1 ? 'rgb(' + r + '%, ' + g + '%, ' + b + '%)' : 'rgba(' + r + '%, ' + g + '%, ' + b + '%, ' + rgba[3] + ')';
+  };
+  cs.to.hsl = function (...hsla) {
+    return hsla.length < 4 || hsla[3] === 1 ? 'hsl(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%)' : 'hsla(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%, ' + hsla[3] + ')';
+  };
+
+  // Hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
+  // (hwb have alpha optional & 1 is default value)
+  cs.to.hwb = function (...hwba) {
+    let a = '';
+    if (hwba.length >= 4 && hwba[3] !== 1) {
+      a = ', ' + hwba[3];
+    }
+    return 'hwb(' + hwba[0] + ', ' + hwba[1] + '%, ' + hwba[2] + '%' + a + ')';
+  };
+  cs.to.keyword = function (...rgb) {
+    return reverseNames[rgb.slice(0, 3)];
+  };
+
+  // Helpers
+  function clamp(number_, min, max) {
+    return Math.min(Math.max(min, number_), max);
+  }
+  function hexDouble(number_) {
+    const string_ = Math.round(number_).toString(16).toUpperCase();
+    return string_.length < 2 ? '0' + string_ : string_;
+  }
+
+  /* MIT license */
+  /* eslint-disable no-mixed-operators */
+
+  // NOTE: conversions should only return primitive values (i.e. arrays, or
+  //       values that give correct `typeof` results).
+  //       do not use box values types (i.e. Number(), String(), etc.)
+
+  const reverseKeywords = {};
+  for (const key of Object.keys(cssKeywords)) {
+    reverseKeywords[cssKeywords[key]] = key;
+  }
+  const convert$1 = {
+    rgb: {
+      channels: 3,
+      labels: 'rgb'
+    },
+    hsl: {
+      channels: 3,
+      labels: 'hsl'
+    },
+    hsv: {
+      channels: 3,
+      labels: 'hsv'
+    },
+    hwb: {
+      channels: 3,
+      labels: 'hwb'
+    },
+    cmyk: {
+      channels: 4,
+      labels: 'cmyk'
+    },
+    xyz: {
+      channels: 3,
+      labels: 'xyz'
+    },
+    lab: {
+      channels: 3,
+      labels: 'lab'
+    },
+    oklab: {
+      channels: 3,
+      labels: ['okl', 'oka', 'okb']
+    },
+    lch: {
+      channels: 3,
+      labels: 'lch'
+    },
+    oklch: {
+      channels: 3,
+      labels: ['okl', 'okc', 'okh']
+    },
+    hex: {
+      channels: 1,
+      labels: ['hex']
+    },
+    keyword: {
+      channels: 1,
+      labels: ['keyword']
+    },
+    ansi16: {
+      channels: 1,
+      labels: ['ansi16']
+    },
+    ansi256: {
+      channels: 1,
+      labels: ['ansi256']
+    },
+    hcg: {
+      channels: 3,
+      labels: ['h', 'c', 'g']
+    },
+    apple: {
+      channels: 3,
+      labels: ['r16', 'g16', 'b16']
+    },
+    gray: {
+      channels: 1,
+      labels: ['gray']
+    }
+  };
+
+  // LAB f(t) constant
+  const LAB_FT = (6 / 29) ** 3;
+
+  // SRGB non-linear transform functions
+  function srgbNonlinearTransform(c) {
+    const cc = c > 0.003_130_8 ? 1.055 * c ** (1 / 2.4) - 0.055 : c * 12.92;
+    return Math.min(Math.max(0, cc), 1);
+  }
+  function srgbNonlinearTransformInv(c) {
+    return c > 0.040_45 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92;
+  }
+
+  // Hide .channels and .labels properties
+  for (const model of Object.keys(convert$1)) {
+    if (!('channels' in convert$1[model])) {
+      throw new Error('missing channels property: ' + model);
+    }
+    if (!('labels' in convert$1[model])) {
+      throw new Error('missing channel labels property: ' + model);
+    }
+    if (convert$1[model].labels.length !== convert$1[model].channels) {
+      throw new Error('channel and label counts mismatch: ' + model);
+    }
+    const {
+      channels,
+      labels
+    } = convert$1[model];
+    delete convert$1[model].channels;
+    delete convert$1[model].labels;
+    Object.defineProperty(convert$1[model], 'channels', {
+      value: channels
+    });
+    Object.defineProperty(convert$1[model], 'labels', {
+      value: labels
+    });
+  }
+  convert$1.rgb.hsl = function (rgb) {
+    const r = rgb[0] / 255;
+    const g = rgb[1] / 255;
+    const b = rgb[2] / 255;
+    const min = Math.min(r, g, b);
+    const max = Math.max(r, g, b);
+    const delta = max - min;
+    let h;
+    let s;
+    switch (max) {
+      case min:
+        {
+          h = 0;
+          break;
+        }
+      case r:
+        {
+          h = (g - b) / delta;
+          break;
+        }
+      case g:
+        {
+          h = 2 + (b - r) / delta;
+          break;
+        }
+      case b:
+        {
+          h = 4 + (r - g) / delta;
+          break;
+        }
+      // No default
+    }
+    h = Math.min(h * 60, 360);
+    if (h < 0) {
+      h += 360;
+    }
+    const l = (min + max) / 2;
+    if (max === min) {
+      s = 0;
+    } else if (l <= 0.5) {
+      s = delta / (max + min);
+    } else {
+      s = delta / (2 - max - min);
+    }
+    return [h, s * 100, l * 100];
+  };
+  convert$1.rgb.hsv = function (rgb) {
+    let rdif;
+    let gdif;
+    let bdif;
+    let h;
+    let s;
+    const r = rgb[0] / 255;
+    const g = rgb[1] / 255;
+    const b = rgb[2] / 255;
+    const v = Math.max(r, g, b);
+    const diff = v - Math.min(r, g, b);
+    const diffc = function (c) {
+      return (v - c) / 6 / diff + 1 / 2;
+    };
+    if (diff === 0) {
+      h = 0;
+      s = 0;
+    } else {
+      s = diff / v;
+      rdif = diffc(r);
+      gdif = diffc(g);
+      bdif = diffc(b);
+      switch (v) {
+        case r:
+          {
+            h = bdif - gdif;
+            break;
+          }
+        case g:
+          {
+            h = 1 / 3 + rdif - bdif;
+            break;
+          }
+        case b:
+          {
+            h = 2 / 3 + gdif - rdif;
+            break;
+          }
+        // No default
+      }
+      if (h < 0) {
+        h += 1;
+      } else if (h > 1) {
+        h -= 1;
+      }
+    }
+    return [h * 360, s * 100, v * 100];
+  };
+  convert$1.rgb.hwb = function (rgb) {
+    const r = rgb[0];
+    const g = rgb[1];
+    let b = rgb[2];
+    const h = convert$1.rgb.hsl(rgb)[0];
+    const w = 1 / 255 * Math.min(r, Math.min(g, b));
+    b = 1 - 1 / 255 * Math.max(r, Math.max(g, b));
+    return [h, w * 100, b * 100];
+  };
+  convert$1.rgb.oklab = function (rgb) {
+    // Assume sRGB
+    const r = srgbNonlinearTransformInv(rgb[0] / 255);
+    const g = srgbNonlinearTransformInv(rgb[1] / 255);
+    const b = srgbNonlinearTransformInv(rgb[2] / 255);
+    const lp = Math.cbrt(0.412_221_470_8 * r + 0.536_332_536_3 * g + 0.051_445_992_9 * b);
+    const mp = Math.cbrt(0.211_903_498_2 * r + 0.680_699_545_1 * g + 0.107_396_956_6 * b);
+    const sp = Math.cbrt(0.088_302_461_9 * r + 0.281_718_837_6 * g + 0.629_978_700_5 * b);
+    const l = 0.210_454_255_3 * lp + 0.793_617_785 * mp - 0.004_072_046_8 * sp;
+    const aa = 1.977_998_495_1 * lp - 2.428_592_205 * mp + 0.450_593_709_9 * sp;
+    const bb = 0.025_904_037_1 * lp + 0.782_771_766_2 * mp - 0.808_675_766 * sp;
+    return [l * 100, aa * 100, bb * 100];
+  };
+  convert$1.rgb.cmyk = function (rgb) {
+    const r = rgb[0] / 255;
+    const g = rgb[1] / 255;
+    const b = rgb[2] / 255;
+    const k = Math.min(1 - r, 1 - g, 1 - b);
+    const c = (1 - r - k) / (1 - k) || 0;
+    const m = (1 - g - k) / (1 - k) || 0;
+    const y = (1 - b - k) / (1 - k) || 0;
+    return [c * 100, m * 100, y * 100, k * 100];
+  };
+  function comparativeDistance(x, y) {
+    /*
+    	See https://en.m.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance
+    */
+    return (x[0] - y[0]) ** 2 + (x[1] - y[1]) ** 2 + (x[2] - y[2]) ** 2;
+  }
+  convert$1.rgb.keyword = function (rgb) {
+    const reversed = reverseKeywords[rgb];
+    if (reversed) {
+      return reversed;
+    }
+    let currentClosestDistance = Number.POSITIVE_INFINITY;
+    let currentClosestKeyword;
+    for (const keyword of Object.keys(cssKeywords)) {
+      const value = cssKeywords[keyword];
+
+      // Compute comparative distance
+      const distance = comparativeDistance(rgb, value);
+
+      // Check if its less, if so set as closest
+      if (distance < currentClosestDistance) {
+        currentClosestDistance = distance;
+        currentClosestKeyword = keyword;
+      }
+    }
+    return currentClosestKeyword;
+  };
+  convert$1.keyword.rgb = function (keyword) {
+    return [...cssKeywords[keyword]];
+  };
+  convert$1.rgb.xyz = function (rgb) {
+    // Assume sRGB
+    const r = srgbNonlinearTransformInv(rgb[0] / 255);
+    const g = srgbNonlinearTransformInv(rgb[1] / 255);
+    const b = srgbNonlinearTransformInv(rgb[2] / 255);
+    const x = r * 0.412_456_4 + g * 0.357_576_1 + b * 0.180_437_5;
+    const y = r * 0.212_672_9 + g * 0.715_152_2 + b * 0.072_175;
+    const z = r * 0.019_333_9 + g * 0.119_192 + b * 0.950_304_1;
+    return [x * 100, y * 100, z * 100];
+  };
+  convert$1.rgb.lab = function (rgb) {
+    const xyz = convert$1.rgb.xyz(rgb);
+    let x = xyz[0];
+    let y = xyz[1];
+    let z = xyz[2];
+    x /= 95.047;
+    y /= 100;
+    z /= 108.883;
+    x = x > LAB_FT ? x ** (1 / 3) : 7.787 * x + 16 / 116;
+    y = y > LAB_FT ? y ** (1 / 3) : 7.787 * y + 16 / 116;
+    z = z > LAB_FT ? z ** (1 / 3) : 7.787 * z + 16 / 116;
+    const l = 116 * y - 16;
+    const a = 500 * (x - y);
+    const b = 200 * (y - z);
+    return [l, a, b];
+  };
+  convert$1.hsl.rgb = function (hsl) {
+    const h = hsl[0] / 360;
+    const s = hsl[1] / 100;
+    const l = hsl[2] / 100;
+    let t3;
+    let value;
+    if (s === 0) {
+      value = l * 255;
+      return [value, value, value];
+    }
+    const t2 = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const t1 = 2 * l - t2;
+    const rgb = [0, 0, 0];
+    for (let i = 0; i < 3; i++) {
+      t3 = h + 1 / 3 * -(i - 1);
+      if (t3 < 0) {
+        t3++;
+      }
+      if (t3 > 1) {
+        t3--;
+      }
+      if (6 * t3 < 1) {
+        value = t1 + (t2 - t1) * 6 * t3;
+      } else if (2 * t3 < 1) {
+        value = t2;
+      } else if (3 * t3 < 2) {
+        value = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+      } else {
+        value = t1;
+      }
+      rgb[i] = value * 255;
+    }
+    return rgb;
+  };
+  convert$1.hsl.hsv = function (hsl) {
+    const h = hsl[0];
+    let s = hsl[1] / 100;
+    let l = hsl[2] / 100;
+    let smin = s;
+    const lmin = Math.max(l, 0.01);
+    l *= 2;
+    s *= l <= 1 ? l : 2 - l;
+    smin *= lmin <= 1 ? lmin : 2 - lmin;
+    const v = (l + s) / 2;
+    const sv = l === 0 ? 2 * smin / (lmin + smin) : 2 * s / (l + s);
+    return [h, sv * 100, v * 100];
+  };
+  convert$1.hsv.rgb = function (hsv) {
+    const h = hsv[0] / 60;
+    const s = hsv[1] / 100;
+    let v = hsv[2] / 100;
+    const hi = Math.floor(h) % 6;
+    const f = h - Math.floor(h);
+    const p = 255 * v * (1 - s);
+    const q = 255 * v * (1 - s * f);
+    const t = 255 * v * (1 - s * (1 - f));
+    v *= 255;
+    switch (hi) {
+      case 0:
+        {
+          return [v, t, p];
+        }
+      case 1:
+        {
+          return [q, v, p];
+        }
+      case 2:
+        {
+          return [p, v, t];
+        }
+      case 3:
+        {
+          return [p, q, v];
+        }
+      case 4:
+        {
+          return [t, p, v];
+        }
+      case 5:
+        {
+          return [v, p, q];
+        }
+    }
+  };
+  convert$1.hsv.hsl = function (hsv) {
+    const h = hsv[0];
+    const s = hsv[1] / 100;
+    const v = hsv[2] / 100;
+    const vmin = Math.max(v, 0.01);
+    let sl;
+    let l;
+    l = (2 - s) * v;
+    const lmin = (2 - s) * vmin;
+    sl = s * vmin;
+    sl /= lmin <= 1 ? lmin : 2 - lmin;
+    sl = sl || 0;
+    l /= 2;
+    return [h, sl * 100, l * 100];
+  };
+
+  // http://dev.w3.org/csswg/css-color/#hwb-to-rgb
+  convert$1.hwb.rgb = function (hwb) {
+    const h = hwb[0] / 360;
+    let wh = hwb[1] / 100;
+    let bl = hwb[2] / 100;
+    const ratio = wh + bl;
+    let f;
+
+    // Wh + bl cant be > 1
+    if (ratio > 1) {
+      wh /= ratio;
+      bl /= ratio;
+    }
+    const i = Math.floor(6 * h);
+    const v = 1 - bl;
+    f = 6 * h - i;
+
+    // eslint-disable-next-line no-bitwise
+    if ((i & 0x01) !== 0) {
+      f = 1 - f;
+    }
+    const n = wh + f * (v - wh); // Linear interpolation
+
+    let r;
+    let g;
+    let b;
+    /* eslint-disable max-statements-per-line,no-multi-spaces, default-case-last */
+    switch (i) {
+      default:
+      case 6:
+      case 0:
+        {
+          r = v;
+          g = n;
+          b = wh;
+          break;
+        }
+      case 1:
+        {
+          r = n;
+          g = v;
+          b = wh;
+          break;
+        }
+      case 2:
+        {
+          r = wh;
+          g = v;
+          b = n;
+          break;
+        }
+      case 3:
+        {
+          r = wh;
+          g = n;
+          b = v;
+          break;
+        }
+      case 4:
+        {
+          r = n;
+          g = wh;
+          b = v;
+          break;
+        }
+      case 5:
+        {
+          r = v;
+          g = wh;
+          b = n;
+          break;
+        }
+    }
+    /* eslint-enable max-statements-per-line,no-multi-spaces, default-case-last */
+
+    return [r * 255, g * 255, b * 255];
+  };
+  convert$1.cmyk.rgb = function (cmyk) {
+    const c = cmyk[0] / 100;
+    const m = cmyk[1] / 100;
+    const y = cmyk[2] / 100;
+    const k = cmyk[3] / 100;
+    const r = 1 - Math.min(1, c * (1 - k) + k);
+    const g = 1 - Math.min(1, m * (1 - k) + k);
+    const b = 1 - Math.min(1, y * (1 - k) + k);
+    return [r * 255, g * 255, b * 255];
+  };
+  convert$1.xyz.rgb = function (xyz) {
+    const x = xyz[0] / 100;
+    const y = xyz[1] / 100;
+    const z = xyz[2] / 100;
+    let r;
+    let g;
+    let b;
+    r = x * 3.240_454_2 + y * -1.5371385 + z * -0.4985314;
+    g = x * -0.969266 + y * 1.876_010_8 + z * 0.041_556;
+    b = x * 0.055_643_4 + y * -0.2040259 + z * 1.057_225_2;
+
+    // Assume sRGB
+    r = srgbNonlinearTransform(r);
+    g = srgbNonlinearTransform(g);
+    b = srgbNonlinearTransform(b);
+    return [r * 255, g * 255, b * 255];
+  };
+  convert$1.xyz.lab = function (xyz) {
+    let x = xyz[0];
+    let y = xyz[1];
+    let z = xyz[2];
+    x /= 95.047;
+    y /= 100;
+    z /= 108.883;
+    x = x > LAB_FT ? x ** (1 / 3) : 7.787 * x + 16 / 116;
+    y = y > LAB_FT ? y ** (1 / 3) : 7.787 * y + 16 / 116;
+    z = z > LAB_FT ? z ** (1 / 3) : 7.787 * z + 16 / 116;
+    const l = 116 * y - 16;
+    const a = 500 * (x - y);
+    const b = 200 * (y - z);
+    return [l, a, b];
+  };
+  convert$1.xyz.oklab = function (xyz) {
+    const x = xyz[0] / 100;
+    const y = xyz[1] / 100;
+    const z = xyz[2] / 100;
+    const lp = Math.cbrt(0.818_933_010_1 * x + 0.361_866_742_4 * y - 0.128_859_713_7 * z);
+    const mp = Math.cbrt(0.032_984_543_6 * x + 0.929_311_871_5 * y + 0.036_145_638_7 * z);
+    const sp = Math.cbrt(0.048_200_301_8 * x + 0.264_366_269_1 * y + 0.633_851_707 * z);
+    const l = 0.210_454_255_3 * lp + 0.793_617_785 * mp - 0.004_072_046_8 * sp;
+    const a = 1.977_998_495_1 * lp - 2.428_592_205 * mp + 0.450_593_709_9 * sp;
+    const b = 0.025_904_037_1 * lp + 0.782_771_766_2 * mp - 0.808_675_766 * sp;
+    return [l * 100, a * 100, b * 100];
+  };
+  convert$1.oklab.oklch = function (oklab) {
+    return convert$1.lab.lch(oklab);
+  };
+  convert$1.oklab.xyz = function (oklab) {
+    const ll = oklab[0] / 100;
+    const a = oklab[1] / 100;
+    const b = oklab[2] / 100;
+    const l = (0.999_999_998 * ll + 0.396_337_792 * a + 0.215_803_758 * b) ** 3;
+    const m = (1.000_000_008 * ll - 0.105_561_342 * a - 0.063_854_175 * b) ** 3;
+    const s = (1.000_000_055 * ll - 0.089_484_182 * a - 1.291_485_538 * b) ** 3;
+    const x = 1.227_013_851 * l - 0.557_799_98 * m + 0.281_256_149 * s;
+    const y = -0.040580178 * l + 1.112_256_87 * m - 0.071_676_679 * s;
+    const z = -0.076381285 * l - 0.421_481_978 * m + 1.586_163_22 * s;
+    return [x * 100, y * 100, z * 100];
+  };
+  convert$1.oklab.rgb = function (oklab) {
+    const ll = oklab[0] / 100;
+    const aa = oklab[1] / 100;
+    const bb = oklab[2] / 100;
+    const l = (ll + 0.396_337_777_4 * aa + 0.215_803_757_3 * bb) ** 3;
+    const m = (ll - 0.105_561_345_8 * aa - 0.063_854_172_8 * bb) ** 3;
+    const s = (ll - 0.089_484_177_5 * aa - 1.291_485_548 * bb) ** 3;
+
+    // Assume sRGB
+    const r = srgbNonlinearTransform(4.076_741_662_1 * l - 3.307_711_591_3 * m + 0.230_969_929_2 * s);
+    const g = srgbNonlinearTransform(-1.2684380046 * l + 2.609_757_401_1 * m - 0.341_319_396_5 * s);
+    const b = srgbNonlinearTransform(-0.0041960863 * l - 0.703_418_614_7 * m + 1.707_614_701 * s);
+    return [r * 255, g * 255, b * 255];
+  };
+  convert$1.oklch.oklab = function (oklch) {
+    return convert$1.lch.lab(oklch);
+  };
+  convert$1.lab.xyz = function (lab) {
+    const l = lab[0];
+    const a = lab[1];
+    const b = lab[2];
+    let x;
+    let y;
+    let z;
+    y = (l + 16) / 116;
+    x = a / 500 + y;
+    z = y - b / 200;
+    const y2 = y ** 3;
+    const x2 = x ** 3;
+    const z2 = z ** 3;
+    y = y2 > LAB_FT ? y2 : (y - 16 / 116) / 7.787;
+    x = x2 > LAB_FT ? x2 : (x - 16 / 116) / 7.787;
+    z = z2 > LAB_FT ? z2 : (z - 16 / 116) / 7.787;
+
+    // Illuminant D65 XYZ Tristrimulus Values
+    // https://en.wikipedia.org/wiki/CIE_1931_color_space
+    x *= 95.047;
+    y *= 100;
+    z *= 108.883;
+    return [x, y, z];
+  };
+  convert$1.lab.lch = function (lab) {
+    const l = lab[0];
+    const a = lab[1];
+    const b = lab[2];
+    let h;
+    const hr = Math.atan2(b, a);
+    h = hr * 360 / 2 / Math.PI;
+    if (h < 0) {
+      h += 360;
+    }
+    const c = Math.sqrt(a * a + b * b);
+    return [l, c, h];
+  };
+  convert$1.lch.lab = function (lch) {
+    const l = lch[0];
+    const c = lch[1];
+    const h = lch[2];
+    const hr = h / 360 * 2 * Math.PI;
+    const a = c * Math.cos(hr);
+    const b = c * Math.sin(hr);
+    return [l, a, b];
+  };
+  convert$1.rgb.ansi16 = function (args, saturation = null) {
+    const [r, g, b] = args;
+    let value = saturation === null ? convert$1.rgb.hsv(args)[2] : saturation; // Hsv -> ansi16 optimization
+
+    value = Math.round(value / 50);
+    if (value === 0) {
+      return 30;
+    }
+    let ansi = 30
+    /* eslint-disable no-bitwise */ + (Math.round(b / 255) << 2 | Math.round(g / 255) << 1 | Math.round(r / 255));
+    /* eslint-enable no-bitwise */
+
+    if (value === 2) {
+      ansi += 60;
+    }
+    return ansi;
+  };
+  convert$1.hsv.ansi16 = function (args) {
+    // Optimization here; we already know the value and don't need to get
+    // it converted for us.
+    return convert$1.rgb.ansi16(convert$1.hsv.rgb(args), args[2]);
+  };
+  convert$1.rgb.ansi256 = function (args) {
+    const r = args[0];
+    const g = args[1];
+    const b = args[2];
+
+    // We use the extended greyscale palette here, with the exception of
+    // black and white. normal palette only has 4 greyscale shades.
+    // eslint-disable-next-line no-bitwise
+    if (r >> 4 === g >> 4 && g >> 4 === b >> 4) {
+      if (r < 8) {
+        return 16;
+      }
+      if (r > 248) {
+        return 231;
+      }
+      return Math.round((r - 8) / 247 * 24) + 232;
+    }
+    const ansi = 16 + 36 * Math.round(r / 255 * 5) + 6 * Math.round(g / 255 * 5) + Math.round(b / 255 * 5);
+    return ansi;
+  };
+  convert$1.ansi16.rgb = function (args) {
+    args = args[0];
+    let color = args % 10;
+
+    // Handle greyscale
+    if (color === 0 || color === 7) {
+      if (args > 50) {
+        color += 3.5;
+      }
+      color = color / 10.5 * 255;
+      return [color, color, color];
+    }
+    const mult = (Math.trunc(args > 50) + 1) * 0.5;
+    /* eslint-disable no-bitwise */
+    const r = (color & 1) * mult * 255;
+    const g = (color >> 1 & 1) * mult * 255;
+    const b = (color >> 2 & 1) * mult * 255;
+    /* eslint-enable no-bitwise */
+
+    return [r, g, b];
+  };
+  convert$1.ansi256.rgb = function (args) {
+    args = args[0];
+
+    // Handle greyscale
+    if (args >= 232) {
+      const c = (args - 232) * 10 + 8;
+      return [c, c, c];
+    }
+    args -= 16;
+    let rem;
+    const r = Math.floor(args / 36) / 5 * 255;
+    const g = Math.floor((rem = args % 36) / 6) / 5 * 255;
+    const b = rem % 6 / 5 * 255;
+    return [r, g, b];
+  };
+  convert$1.rgb.hex = function (args) {
+    /* eslint-disable no-bitwise */
+    const integer = ((Math.round(args[0]) & 0xFF) << 16) + ((Math.round(args[1]) & 0xFF) << 8) + (Math.round(args[2]) & 0xFF);
+    /* eslint-enable no-bitwise */
+
+    const string = integer.toString(16).toUpperCase();
+    return '000000'.slice(string.length) + string;
+  };
+  convert$1.hex.rgb = function (args) {
+    const match = args.toString(16).match(/[a-f\d]{6}|[a-f\d]{3}/i);
+    if (!match) {
+      return [0, 0, 0];
+    }
+    let colorString = match[0];
+    if (match[0].length === 3) {
+      colorString = [...colorString].map(char => char + char).join('');
+    }
+    const integer = Number.parseInt(colorString, 16);
+    /* eslint-disable no-bitwise */
+    const r = integer >> 16 & 0xFF;
+    const g = integer >> 8 & 0xFF;
+    const b = integer & 0xFF;
+    /* eslint-enable no-bitwise */
+
+    return [r, g, b];
+  };
+  convert$1.rgb.hcg = function (rgb) {
+    const r = rgb[0] / 255;
+    const g = rgb[1] / 255;
+    const b = rgb[2] / 255;
+    const max = Math.max(Math.max(r, g), b);
+    const min = Math.min(Math.min(r, g), b);
+    const chroma = max - min;
+    let hue;
+    const grayscale = chroma < 1 ? min / (1 - chroma) : 0;
+    if (chroma <= 0) {
+      hue = 0;
+    } else if (max === r) {
+      hue = (g - b) / chroma % 6;
+    } else if (max === g) {
+      hue = 2 + (b - r) / chroma;
+    } else {
+      hue = 4 + (r - g) / chroma;
+    }
+    hue /= 6;
+    hue %= 1;
+    return [hue * 360, chroma * 100, grayscale * 100];
+  };
+  convert$1.hsl.hcg = function (hsl) {
+    const s = hsl[1] / 100;
+    const l = hsl[2] / 100;
+    const c = l < 0.5 ? 2 * s * l : 2 * s * (1 - l);
+    let f = 0;
+    if (c < 1) {
+      f = (l - 0.5 * c) / (1 - c);
+    }
+    return [hsl[0], c * 100, f * 100];
+  };
+  convert$1.hsv.hcg = function (hsv) {
+    const s = hsv[1] / 100;
+    const v = hsv[2] / 100;
+    const c = s * v;
+    let f = 0;
+    if (c < 1) {
+      f = (v - c) / (1 - c);
+    }
+    return [hsv[0], c * 100, f * 100];
+  };
+  convert$1.hcg.rgb = function (hcg) {
+    const h = hcg[0] / 360;
+    const c = hcg[1] / 100;
+    const g = hcg[2] / 100;
+    if (c === 0) {
+      return [g * 255, g * 255, g * 255];
+    }
+    const pure = [0, 0, 0];
+    const hi = h % 1 * 6;
+    const v = hi % 1;
+    const w = 1 - v;
+    let mg = 0;
+
+    /* eslint-disable max-statements-per-line */
+    switch (Math.floor(hi)) {
+      case 0:
+        {
+          pure[0] = 1;
+          pure[1] = v;
+          pure[2] = 0;
+          break;
+        }
+      case 1:
+        {
+          pure[0] = w;
+          pure[1] = 1;
+          pure[2] = 0;
+          break;
+        }
+      case 2:
+        {
+          pure[0] = 0;
+          pure[1] = 1;
+          pure[2] = v;
+          break;
+        }
+      case 3:
+        {
+          pure[0] = 0;
+          pure[1] = w;
+          pure[2] = 1;
+          break;
+        }
+      case 4:
+        {
+          pure[0] = v;
+          pure[1] = 0;
+          pure[2] = 1;
+          break;
+        }
+      default:
+        {
+          pure[0] = 1;
+          pure[1] = 0;
+          pure[2] = w;
+        }
+    }
+    /* eslint-enable max-statements-per-line */
+
+    mg = (1 - c) * g;
+    return [(c * pure[0] + mg) * 255, (c * pure[1] + mg) * 255, (c * pure[2] + mg) * 255];
+  };
+  convert$1.hcg.hsv = function (hcg) {
+    const c = hcg[1] / 100;
+    const g = hcg[2] / 100;
+    const v = c + g * (1 - c);
+    let f = 0;
+    if (v > 0) {
+      f = c / v;
+    }
+    return [hcg[0], f * 100, v * 100];
+  };
+  convert$1.hcg.hsl = function (hcg) {
+    const c = hcg[1] / 100;
+    const g = hcg[2] / 100;
+    const l = g * (1 - c) + 0.5 * c;
+    let s = 0;
+    if (l > 0 && l < 0.5) {
+      s = c / (2 * l);
+    } else if (l >= 0.5 && l < 1) {
+      s = c / (2 * (1 - l));
+    }
+    return [hcg[0], s * 100, l * 100];
+  };
+  convert$1.hcg.hwb = function (hcg) {
+    const c = hcg[1] / 100;
+    const g = hcg[2] / 100;
+    const v = c + g * (1 - c);
+    return [hcg[0], (v - c) * 100, (1 - v) * 100];
+  };
+  convert$1.hwb.hcg = function (hwb) {
+    const w = hwb[1] / 100;
+    const b = hwb[2] / 100;
+    const v = 1 - b;
+    const c = v - w;
+    let g = 0;
+    if (c < 1) {
+      g = (v - c) / (1 - c);
+    }
+    return [hwb[0], c * 100, g * 100];
+  };
+  convert$1.apple.rgb = function (apple) {
+    return [apple[0] / 65_535 * 255, apple[1] / 65_535 * 255, apple[2] / 65_535 * 255];
+  };
+  convert$1.rgb.apple = function (rgb) {
+    return [rgb[0] / 255 * 65_535, rgb[1] / 255 * 65_535, rgb[2] / 255 * 65_535];
+  };
+  convert$1.gray.rgb = function (args) {
+    return [args[0] / 100 * 255, args[0] / 100 * 255, args[0] / 100 * 255];
+  };
+  convert$1.gray.hsl = function (args) {
+    return [0, 0, args[0]];
+  };
+  convert$1.gray.hsv = convert$1.gray.hsl;
+  convert$1.gray.hwb = function (gray) {
+    return [0, 100, gray[0]];
+  };
+  convert$1.gray.cmyk = function (gray) {
+    return [0, 0, 0, gray[0]];
+  };
+  convert$1.gray.lab = function (gray) {
+    return [gray[0], 0, 0];
+  };
+  convert$1.gray.hex = function (gray) {
+    /* eslint-disable no-bitwise */
+    const value = Math.round(gray[0] / 100 * 255) & 0xFF;
+    const integer = (value << 16) + (value << 8) + value;
+    /* eslint-enable no-bitwise */
+
+    const string = integer.toString(16).toUpperCase();
+    return '000000'.slice(string.length) + string;
+  };
+  convert$1.rgb.gray = function (rgb) {
+    const value = (rgb[0] + rgb[1] + rgb[2]) / 3;
+    return [value / 255 * 100];
+  };
+
+  /*
+  	This function routes a model to all other models.
+
+  	all functions that are routed have a property `.conversion` attached
+  	to the returned synthetic function. This property is an array
+  	of strings, each with the steps in between the 'from' and 'to'
+  	color models (inclusive).
+
+  	conversions that are not possible simply are not included.
+  */
+
+  function buildGraph() {
+    const graph = {};
+    // https://jsperf.com/object-keys-vs-for-in-with-closure/3
+    const models = Object.keys(convert$1);
+    for (let {
+        length
+      } = models, i = 0; i < length; i++) {
+      graph[models[i]] = {
+        // http://jsperf.com/1-vs-infinity
+        // micro-opt, but this is simple.
+        distance: -1,
+        parent: null
+      };
+    }
+    return graph;
+  }
+
+  // https://en.wikipedia.org/wiki/Breadth-first_search
+  function deriveBFS(fromModel) {
+    const graph = buildGraph();
+    const queue = [fromModel]; // Unshift -> queue -> pop
+
+    graph[fromModel].distance = 0;
+    while (queue.length > 0) {
+      const current = queue.pop();
+      const adjacents = Object.keys(convert$1[current]);
+      for (let {
+          length
+        } = adjacents, i = 0; i < length; i++) {
+        const adjacent = adjacents[i];
+        const node = graph[adjacent];
+        if (node.distance === -1) {
+          node.distance = graph[current].distance + 1;
+          node.parent = current;
+          queue.unshift(adjacent);
+        }
+      }
+    }
+    return graph;
+  }
+  function link(from, to) {
+    return function (args) {
+      return to(from(args));
+    };
+  }
+  function wrapConversion(toModel, graph) {
+    const path = [graph[toModel].parent, toModel];
+    let fn = convert$1[graph[toModel].parent][toModel];
+    let cur = graph[toModel].parent;
+    while (graph[cur].parent) {
+      path.unshift(graph[cur].parent);
+      fn = link(convert$1[graph[cur].parent][cur], fn);
+      cur = graph[cur].parent;
+    }
+    fn.conversion = path;
+    return fn;
+  }
+  function route(fromModel) {
+    const graph = deriveBFS(fromModel);
+    const conversion = {};
+    const models = Object.keys(graph);
+    for (let {
+        length
+      } = models, i = 0; i < length; i++) {
+      const toModel = models[i];
+      const node = graph[toModel];
+      if (node.parent === null) {
+        // No possible conversion, or this node is the source model.
+        continue;
+      }
+      conversion[toModel] = wrapConversion(toModel, graph);
+    }
+    return conversion;
+  }
+
+  const convert = {};
+  const models = Object.keys(convert$1);
+  function wrapRaw(fn) {
+    const wrappedFn = function (...args) {
+      const arg0 = args[0];
+      if (arg0 === undefined || arg0 === null) {
+        return arg0;
+      }
+      if (arg0.length > 1) {
+        args = arg0;
+      }
+      return fn(args);
+    };
+
+    // Preserve .conversion property if there is one
+    if ('conversion' in fn) {
+      wrappedFn.conversion = fn.conversion;
+    }
+    return wrappedFn;
+  }
+  function wrapRounded(fn) {
+    const wrappedFn = function (...args) {
+      const arg0 = args[0];
+      if (arg0 === undefined || arg0 === null) {
+        return arg0;
+      }
+      if (arg0.length > 1) {
+        args = arg0;
+      }
+      const result = fn(args);
+
+      // We're assuming the result is an array here.
+      // see notice in conversions.js; don't use box types
+      // in conversion functions.
+      if (typeof result === 'object') {
+        for (let {
+            length
+          } = result, i = 0; i < length; i++) {
+          result[i] = Math.round(result[i]);
+        }
+      }
+      return result;
+    };
+
+    // Preserve .conversion property if there is one
+    if ('conversion' in fn) {
+      wrappedFn.conversion = fn.conversion;
+    }
+    return wrappedFn;
+  }
+  for (const fromModel of models) {
+    convert[fromModel] = {};
+    Object.defineProperty(convert[fromModel], 'channels', {
+      value: convert$1[fromModel].channels
+    });
+    Object.defineProperty(convert[fromModel], 'labels', {
+      value: convert$1[fromModel].labels
+    });
+    const routes = route(fromModel);
+    const routeModels = Object.keys(routes);
+    for (const toModel of routeModels) {
+      const fn = routes[toModel];
+      convert[fromModel][toModel] = wrapRounded(fn);
+      convert[fromModel][toModel].raw = wrapRaw(fn);
+    }
+  }
+
+  const skippedModels = [
+  // To be honest, I don't really feel like keyword belongs in color convert, but eh.
+  'keyword',
+  // Gray conflicts with some method names, and has its own method defined.
+  'gray',
+  // Shouldn't really be in color-convert either...
+  'hex'];
+  const hashedModelKeys = {};
+  for (const model of Object.keys(convert)) {
+    hashedModelKeys[[...convert[model].labels].sort().join('')] = model;
+  }
+  const limiters = {};
+  function Color(object, model) {
+    if (!(this instanceof Color)) {
+      return new Color(object, model);
+    }
+    if (model && model in skippedModels) {
+      model = null;
+    }
+    if (model && !(model in convert)) {
+      throw new Error('Unknown model: ' + model);
+    }
+    let i;
+    let channels;
+    if (object == null) {
+      // eslint-disable-line no-eq-null,eqeqeq
+      this.model = 'rgb';
+      this.color = [0, 0, 0];
+      this.valpha = 1;
+    } else if (object instanceof Color) {
+      this.model = object.model;
+      this.color = [...object.color];
+      this.valpha = object.valpha;
+    } else if (typeof object === 'string') {
+      const result = cs.get(object);
+      if (result === null) {
+        throw new Error('Unable to parse color from string: ' + object);
+      }
+      this.model = result.model;
+      channels = convert[this.model].channels;
+      this.color = result.value.slice(0, channels);
+      this.valpha = typeof result.value[channels] === 'number' ? result.value[channels] : 1;
+    } else if (object.length > 0) {
+      this.model = model || 'rgb';
+      channels = convert[this.model].channels;
+      const newArray = Array.prototype.slice.call(object, 0, channels);
+      this.color = zeroArray(newArray, channels);
+      this.valpha = typeof object[channels] === 'number' ? object[channels] : 1;
+    } else if (typeof object === 'number') {
+      // This is always RGB - can be converted later on.
+      this.model = 'rgb';
+      this.color = [object >> 16 & 0xFF, object >> 8 & 0xFF, object & 0xFF];
+      this.valpha = 1;
+    } else {
+      this.valpha = 1;
+      const keys = Object.keys(object);
+      if ('alpha' in object) {
+        keys.splice(keys.indexOf('alpha'), 1);
+        this.valpha = typeof object.alpha === 'number' ? object.alpha : 0;
+      }
+      const hashedKeys = keys.sort().join('');
+      if (!(hashedKeys in hashedModelKeys)) {
+        throw new Error('Unable to parse color from object: ' + JSON.stringify(object));
+      }
+      this.model = hashedModelKeys[hashedKeys];
+      const {
+        labels
+      } = convert[this.model];
+      const color = [];
+      for (i = 0; i < labels.length; i++) {
+        color.push(object[labels[i]]);
+      }
+      this.color = zeroArray(color);
+    }
+
+    // Perform limitations (clamping, etc.)
+    if (limiters[this.model]) {
+      channels = convert[this.model].channels;
+      for (i = 0; i < channels; i++) {
+        const limit = limiters[this.model][i];
+        if (limit) {
+          this.color[i] = limit(this.color[i]);
+        }
+      }
+    }
+    this.valpha = Math.max(0, Math.min(1, this.valpha));
+    if (Object.freeze) {
+      Object.freeze(this);
+    }
+  }
+  Color.prototype = {
+    toString() {
+      return this.string();
+    },
+    toJSON() {
+      return this[this.model]();
+    },
+    string(places) {
+      let self = this.model in cs.to ? this : this.rgb();
+      self = self.round(typeof places === 'number' ? places : 1);
+      const arguments_ = self.valpha === 1 ? self.color : [...self.color, this.valpha];
+      return cs.to[self.model](...arguments_);
+    },
+    percentString(places) {
+      const self = this.rgb().round(typeof places === 'number' ? places : 1);
+      const arguments_ = self.valpha === 1 ? self.color : [...self.color, this.valpha];
+      return cs.to.rgb.percent(...arguments_);
+    },
+    array() {
+      return this.valpha === 1 ? [...this.color] : [...this.color, this.valpha];
+    },
+    object() {
+      const result = {};
+      const {
+        channels
+      } = convert[this.model];
+      const {
+        labels
+      } = convert[this.model];
+      for (let i = 0; i < channels; i++) {
+        result[labels[i]] = this.color[i];
+      }
+      if (this.valpha !== 1) {
+        result.alpha = this.valpha;
+      }
+      return result;
+    },
+    unitArray() {
+      const rgb = this.rgb().color;
+      rgb[0] /= 255;
+      rgb[1] /= 255;
+      rgb[2] /= 255;
+      if (this.valpha !== 1) {
+        rgb.push(this.valpha);
+      }
+      return rgb;
+    },
+    unitObject() {
+      const rgb = this.rgb().object();
+      rgb.r /= 255;
+      rgb.g /= 255;
+      rgb.b /= 255;
+      if (this.valpha !== 1) {
+        rgb.alpha = this.valpha;
+      }
+      return rgb;
+    },
+    round(places) {
+      places = Math.max(places || 0, 0);
+      return new Color([...this.color.map(roundToPlace(places)), this.valpha], this.model);
+    },
+    alpha(value) {
+      if (value !== undefined) {
+        return new Color([...this.color, Math.max(0, Math.min(1, value))], this.model);
+      }
+      return this.valpha;
+    },
+    // Rgb
+    red: getset('rgb', 0, maxfn(255)),
+    green: getset('rgb', 1, maxfn(255)),
+    blue: getset('rgb', 2, maxfn(255)),
+    hue: getset(['hsl', 'hsv', 'hsl', 'hwb', 'hcg'], 0, value => (value % 360 + 360) % 360),
+    saturationl: getset('hsl', 1, maxfn(100)),
+    lightness: getset('hsl', 2, maxfn(100)),
+    saturationv: getset('hsv', 1, maxfn(100)),
+    value: getset('hsv', 2, maxfn(100)),
+    chroma: getset('hcg', 1, maxfn(100)),
+    gray: getset('hcg', 2, maxfn(100)),
+    white: getset('hwb', 1, maxfn(100)),
+    wblack: getset('hwb', 2, maxfn(100)),
+    cyan: getset('cmyk', 0, maxfn(100)),
+    magenta: getset('cmyk', 1, maxfn(100)),
+    yellow: getset('cmyk', 2, maxfn(100)),
+    black: getset('cmyk', 3, maxfn(100)),
+    x: getset('xyz', 0, maxfn(95.047)),
+    y: getset('xyz', 1, maxfn(100)),
+    z: getset('xyz', 2, maxfn(108.833)),
+    l: getset('lab', 0, maxfn(100)),
+    a: getset('lab', 1),
+    b: getset('lab', 2),
+    keyword(value) {
+      if (value !== undefined) {
+        return new Color(value);
+      }
+      return convert[this.model].keyword(this.color);
+    },
+    hex(value) {
+      if (value !== undefined) {
+        return new Color(value);
+      }
+      return cs.to.hex(...this.rgb().round().color);
+    },
+    hexa(value) {
+      if (value !== undefined) {
+        return new Color(value);
+      }
+      const rgbArray = this.rgb().round().color;
+      let alphaHex = Math.round(this.valpha * 255).toString(16).toUpperCase();
+      if (alphaHex.length === 1) {
+        alphaHex = '0' + alphaHex;
+      }
+      return cs.to.hex(...rgbArray) + alphaHex;
+    },
+    rgbNumber() {
+      const rgb = this.rgb().color;
+      return (rgb[0] & 0xFF) << 16 | (rgb[1] & 0xFF) << 8 | rgb[2] & 0xFF;
+    },
+    luminosity() {
+      // http://www.w3.org/TR/WCAG20/#relativeluminancedef
+      const rgb = this.rgb().color;
+      const lum = [];
+      for (const [i, element] of rgb.entries()) {
+        const chan = element / 255;
+        lum[i] = chan <= 0.04045 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
+      }
+      return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
+    },
+    contrast(color2) {
+      // http://www.w3.org/TR/WCAG20/#contrast-ratiodef
+      const lum1 = this.luminosity();
+      const lum2 = color2.luminosity();
+      if (lum1 > lum2) {
+        return (lum1 + 0.05) / (lum2 + 0.05);
+      }
+      return (lum2 + 0.05) / (lum1 + 0.05);
+    },
+    level(color2) {
+      // https://www.w3.org/TR/WCAG/#contrast-enhanced
+      const contrastRatio = this.contrast(color2);
+      if (contrastRatio >= 7) {
+        return 'AAA';
+      }
+      return contrastRatio >= 4.5 ? 'AA' : '';
+    },
+    isDark() {
+      // YIQ equation from http://24ways.org/2010/calculating-color-contrast
+      const rgb = this.rgb().color;
+      const yiq = (rgb[0] * 2126 + rgb[1] * 7152 + rgb[2] * 722) / 10000;
+      return yiq < 128;
+    },
+    isLight() {
+      return !this.isDark();
+    },
+    negate() {
+      const rgb = this.rgb();
+      for (let i = 0; i < 3; i++) {
+        rgb.color[i] = 255 - rgb.color[i];
+      }
+      return rgb;
+    },
+    lighten(ratio) {
+      const hsl = this.hsl();
+      hsl.color[2] += hsl.color[2] * ratio;
+      return hsl;
+    },
+    darken(ratio) {
+      const hsl = this.hsl();
+      hsl.color[2] -= hsl.color[2] * ratio;
+      return hsl;
+    },
+    saturate(ratio) {
+      const hsl = this.hsl();
+      hsl.color[1] += hsl.color[1] * ratio;
+      return hsl;
+    },
+    desaturate(ratio) {
+      const hsl = this.hsl();
+      hsl.color[1] -= hsl.color[1] * ratio;
+      return hsl;
+    },
+    whiten(ratio) {
+      const hwb = this.hwb();
+      hwb.color[1] += hwb.color[1] * ratio;
+      return hwb;
+    },
+    blacken(ratio) {
+      const hwb = this.hwb();
+      hwb.color[2] += hwb.color[2] * ratio;
+      return hwb;
+    },
+    grayscale() {
+      // http://en.wikipedia.org/wiki/Grayscale#Converting_colour_to_grayscale
+      const rgb = this.rgb().color;
+      const value = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
+      return Color.rgb(value, value, value);
+    },
+    fade(ratio) {
+      return this.alpha(this.valpha - this.valpha * ratio);
+    },
+    opaquer(ratio) {
+      return this.alpha(this.valpha + this.valpha * ratio);
+    },
+    rotate(degrees) {
+      const hsl = this.hsl();
+      let hue = hsl.color[0];
+      hue = (hue + degrees) % 360;
+      hue = hue < 0 ? 360 + hue : hue;
+      hsl.color[0] = hue;
+      return hsl;
+    },
+    mix(mixinColor, weight) {
+      // Ported from sass implementation in C
+      // https://github.com/sass/libsass/blob/0e6b4a2850092356aa3ece07c6b249f0221caced/functions.cpp#L209
+      if (!mixinColor || !mixinColor.rgb) {
+        throw new Error('Argument to "mix" was not a Color instance, but rather an instance of ' + typeof mixinColor);
+      }
+      const color1 = mixinColor.rgb();
+      const color2 = this.rgb();
+      const p = weight === undefined ? 0.5 : weight;
+      const w = 2 * p - 1;
+      const a = color1.alpha() - color2.alpha();
+      const w1 = ((w * a === -1 ? w : (w + a) / (1 + w * a)) + 1) / 2;
+      const w2 = 1 - w1;
+      return Color.rgb(w1 * color1.red() + w2 * color2.red(), w1 * color1.green() + w2 * color2.green(), w1 * color1.blue() + w2 * color2.blue(), color1.alpha() * p + color2.alpha() * (1 - p));
+    }
+  };
+
+  // Model conversion methods and static constructors
+  for (const model of Object.keys(convert)) {
+    if (skippedModels.includes(model)) {
+      continue;
+    }
+    const {
+      channels
+    } = convert[model];
+
+    // Conversion methods
+    Color.prototype[model] = function (...arguments_) {
+      if (this.model === model) {
+        return new Color(this);
+      }
+      if (arguments_.length > 0) {
+        return new Color(arguments_, model);
+      }
+      return new Color([...assertArray(convert[this.model][model].raw(this.color)), this.valpha], model);
+    };
+
+    // 'static' construction methods
+    Color[model] = function (...arguments_) {
+      let color = arguments_[0];
+      if (typeof color === 'number') {
+        color = zeroArray(arguments_, channels);
+      }
+      return new Color(color, model);
+    };
+  }
+  function roundTo(number, places) {
+    return Number(number.toFixed(places));
+  }
+  function roundToPlace(places) {
+    return function (number) {
+      return roundTo(number, places);
+    };
+  }
+  function getset(model, channel, modifier) {
+    model = Array.isArray(model) ? model : [model];
+    for (const m of model) {
+      (limiters[m] ||= [])[channel] = modifier;
+    }
+    model = model[0];
+    return function (value) {
+      let result;
+      if (value !== undefined) {
+        if (modifier) {
+          value = modifier(value);
+        }
+        result = this[model]();
+        result.color[channel] = value;
+        return result;
+      }
+      result = this[model]().color[channel];
+      if (modifier) {
+        result = modifier(result);
+      }
+      return result;
+    };
+  }
+  function maxfn(max) {
+    return function (v) {
+      return Math.max(0, Math.min(max, v));
+    };
+  }
+  function assertArray(value) {
+    return Array.isArray(value) ? value : [value];
+  }
+  function zeroArray(array, length) {
+    for (let i = 0; i < length; i++) {
+      if (typeof array[i] !== 'number') {
+        array[i] = 0;
+      }
+    }
+    return array;
+  }
+
+  /*
+    ROCSpace element
+    <roc-space>
+
+    Attributes:
+      FAR; HR;
+      d'; C; zFAR; zHR
+
+      draggable: yes/no
+
+      scale: FAR/HR; zFAR/zHR; d'/C
+      grid: FAR/HR; zFAR/zHR; d'/C
+      isos: d'; C; FAR; HR
+
+    Styles:
+      ??
+  */
+  class ROCSpace extends DecidablesMixinResizeable(DetectableElement) {
+    static get properties() {
+      return {
+        contour: {
+          attribute: 'contour',
+          type: String,
+          reflect: true
+        },
+        point: {
+          attribute: 'point',
+          type: String,
+          reflect: true
+        },
+        isoD: {
+          attribute: 'iso-d',
+          type: String,
+          reflect: true
+        },
+        isoC: {
+          attribute: 'iso-c',
+          type: String,
+          reflect: true
+        },
+        zRoc: {
+          attribute: 'z-roc',
+          type: Boolean,
+          reflect: true
+        },
+        far: {
+          attribute: 'far',
+          type: Number,
+          reflect: true
+        },
+        hr: {
+          attribute: 'hr',
+          type: Number,
+          reflect: true
+        },
+        d: {
+          attribute: false,
+          type: Number,
+          reflect: false
+        },
+        c: {
+          attribute: false,
+          type: Number,
+          reflect: false
+        },
+        s: {
+          attribute: false,
+          type: Number,
+          reflect: false
+        }
+      };
+    }
+    constructor() {
+      super();
+      this.firstUpdate = true;
+      this.drag = false;
+      this.sdt = false;
+      this.contours = ['sensitivity', 'bias', 'accuracy'];
+      this.contour = undefined;
+      this.points = ['all', 'first', 'rest', 'none'];
+      this.point = 'all';
+      this.isoDs = ['all', 'first', 'rest', 'none'];
+      this.isoD = 'first';
+      this.isoCs = ['all', 'first', 'rest', 'none'];
+      this.isoC = 'first';
+      this.zRoc = false;
+      this.far = 0.25;
+      this.hr = 0.75;
+      this.s = SDTMath.s.DEFAULT;
+      this.label = '';
+      this.locations = [{
+        name: 'default',
+        far: this.far,
+        hr: this.hr,
+        s: this.s,
+        label: ''
+      }];
+      this.pointArray = [];
+      this.isoDArray = [];
+      this.isoCArray = [];
+      this.alignState();
+    }
+    alignState() {
+      this.locations[0].hr = this.hr;
+      this.locations[0].far = this.far;
+      this.locations[0].s = this.s;
+      this.locations[0].label = this.label;
+      this.d = SDTMath.hrFar2D(this.hr, this.far, this.s);
+      this.c = SDTMath.hrFar2C(this.hr, this.far, this.s);
+      this.pointArray = [];
+      this.isoDArray = [];
+      this.isoCArray = [];
+      this.locations.forEach((item, index) => {
+        item.d = SDTMath.hrFar2D(item.hr, item.far, item.s);
+        item.c = SDTMath.hrFar2C(item.hr, item.far, item.s);
+        if (index === 0 && (this.point === 'first' || this.point === 'all')) {
+          this.pointArray.push(item);
+        } else if (index > 0 && (this.point === 'rest' || this.point === 'all')) {
+          this.pointArray.push(item);
+        }
+        if (index === 0 && (this.isoD === 'first' || this.isoD === 'all')) {
+          this.isoDArray.push(item);
+        } else if (index > 0 && (this.isoD === 'rest' || this.isoD === 'all')) {
+          this.isoDArray.push(item);
+        }
+        if (index === 0 && (this.isoC === 'first' || this.isoC === 'all')) {
+          this.isoCArray.push(item);
+        } else if (index > 0 && (this.isoC === 'rest' || this.isoC === 'all')) {
+          this.isoCArray.push(item);
+        }
+      });
+    }
+    set(hr, far, name = 'default', label = '', s = 1) {
+      if (name === 'default') {
+        this.hr = hr;
+        this.far = far;
+        this.s = s;
+        this.label = label;
+      }
+      const location = this.locations.find(item => {
+        return item.name === name;
+      });
+      if (location === undefined) {
+        this.locations.push({
+          name: name,
+          far: far,
+          hr: hr,
+          s: s,
+          label: label
+        });
+      } else {
+        location.hr = hr;
+        location.far = far;
+        location.s = s;
+        location.label = label;
+      }
+      this.requestUpdate();
+    }
+    setWithSDT(d, c, name = 'default', label = '', s = 1) {
+      if (name === 'default') {
+        this.hr = SDTMath.dC2Hr(d, c, s);
+        this.far = SDTMath.dC2Far(d, c, s);
+        this.s = s;
+        this.label = label;
+      }
+      const location = this.locations.find(item => {
+        return item.name === name;
+      });
+      if (location === undefined) {
+        this.locations.push({
+          name: name,
+          far: SDTMath.dC2Far(d, c, s),
+          hr: SDTMath.dC2Hr(d, c, s),
+          s: s,
+          label: label
+        });
+      } else {
+        location.hr = SDTMath.dC2Hr(d, c, s);
+        location.far = SDTMath.dC2Far(d, c, s);
+        location.s = s;
+        location.label = label;
+      }
+      this.sdt = true;
+      this.requestUpdate();
+    }
+    static get styles() {
+      return [super.styles, i$3`
+        :host {
+          display: inline-block;
 
           width: 20rem;
           height: 20rem;
@@ -13948,9 +16358,7 @@
     }
     render() {
       /* eslint-disable-line class-methods-use-this */
-      return x$1`
-      ${DetectableElement.svgFilters}
-    `;
+      return x$1``;
     }
     willUpdate() {
       this.alignState();
@@ -14040,7 +16448,10 @@
         rem: this.rem
       }]);
       //  ENTER
-      const svgEnter = svgUpdate.enter().append('svg').classed('main', true);
+      const svgEnter = svgUpdate.enter().append('svg').classed('main', true).each((datum, index, nodes) => {
+        // Filters for shadows
+        B(DetectableElement.svgFilters, nodes[index]);
+      });
       //  MERGE
       const svgMerge = svgEnter.merge(svgUpdate).attr('viewBox', `0 0 ${elementSize} ${elementSize}`);
 
@@ -14087,7 +16498,7 @@
           const contourColorStart = this.getComputedStyleValue(this.contour === 'bias' ? '---color-element-background' : this.contour === 'sensitivity' ? '---color-d' : this.contour === 'accuracy' ? '---color-acc-dark' : null);
           const contourColorEnd = this.getComputedStyleValue(this.contour === 'bias' ? '---color-c' : this.contour === 'sensitivity' ? '---color-element-background' : this.contour === 'accuracy' ? '---color-element-background' : null);
           const contourColor = linear().domain(extent(contourThresholds)).interpolate(() => {
-            return interpolateRgb(contourColorStart, contourColorEnd);
+            return interpolateRgb(Color(contourColorStart).hex(), Color(contourColorEnd).hex());
           });
           //  DATA-JOIN
           const contourPlotUpdate = underlayerMerge.selectAll('.plot-contour').data([this.contour]);
@@ -14103,10 +16514,17 @@
           const contoursEnter = contoursUpdate.enter().append('path').classed('contour', true);
           //  MERGE
           contoursEnter.merge(contoursUpdate).transition().duration(transitionDuration * 2) // Extra long transition!
-          .ease(cubicOut).attr('d', index(identity$1().scale(width / n))) // ????
-          .attr('fill', datum => {
+          .ease(cubicOut)
+          // .attr('d', d3.geoPath(d3.geoIdentity().scale(width / n))) // ????
+          .attrTween('d', (datum, index$1, elements) => {
+            const element = elements[index$1];
+            const previous = select(element).attr('d');
+            const current = index(identity$1().scale(width / n))(datum);
+            return interpolatePath(previous, current);
+          }).attr('fill', datum => {
             return contourColor(datum.value);
           });
+
           //  EXIT
           contoursUpdate.exit().remove();
 
@@ -14716,6 +17134,7 @@
           filter: url("#shadow-4");
 
           /* HACK: This gets Safari to correctly apply the filter! */
+          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
           transform: translateX(0);
         }
 
@@ -14905,9 +17324,7 @@
     }
     render() {
       /* eslint-disable-line class-methods-use-this */
-      return x$1`
-      ${DetectableElement.svgFilters}
-    `;
+      return x$1``;
     }
     sendEvent() {
       this.dispatchEvent(new CustomEvent('sdt-model-change', {
@@ -15077,7 +17494,10 @@
         rem: this.rem
       }]);
       // ENTER
-      const svgEnter = svgUpdate.enter().append('svg').classed('main', true);
+      const svgEnter = svgUpdate.enter().append('svg').classed('main', true).each((datum, index, nodes) => {
+        // Filters for shadows
+        B(DetectableElement.svgFilters, nodes[index]);
+      });
       // MERGE
       const svgMerge = svgEnter.merge(svgUpdate).attr('viewBox', `0 0 ${elementWidth} ${elementHeight}`);