@decidables/detectable-elements 0.4.4 → 0.5.0

package/lib/detectableElements.esm.js

@@ -2376,13 +2376,13 @@ function define (constructor, factory, prototype) {
   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*",
@@ -2545,7 +2545,7 @@ var named = {
   yellow: 0xffff00,
   yellowgreen: 0x9acd32
 };
-define(Color, color, {
+define(Color$1, color, {
   copy(channels) {
     return Object.assign(new this.constructor(), this, channels);
   },
@@ -2597,7 +2597,7 @@ function rgba(r, g, b, a) {
   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);
@@ -2611,7 +2611,7 @@ function Rgb(r, g, b, opacity) {
   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);
@@ -2662,7 +2662,7 @@ function hsla(h, s, l, a) {
 }
 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();
@@ -2692,7 +2692,7 @@ function Hsl(h, s, l, opacity) {
   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);
@@ -4793,8 +4793,8 @@ function clipRejoin (segments, compareIntersection, startInside, interpolate, st
   });
   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;
   }
@@ -4833,7 +4833,7 @@ function clipRejoin (segments, compareIntersection, startInside, interpolate, st
     stream.lineEnd();
   }
 }
-function link(array) {
+function link$1(array) {
   if (!(n = array.length)) return;
   var n,
     i = 0,
@@ -6124,54 +6124,12 @@ class DecidablesElement extends i {
     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>
@@ -6203,11 +6161,9 @@ class DecidablesElement extends i {
         </filter>`;
     });
     return b`
-      <svg class="defs">
-        <defs>
-          ${filters}
-        </defs>
-      </svg>
+      <defs class="filtersUser">
+        ${filters}
+      </defs>
     `;
   }
   static get styles() {
@@ -13616,195 +13572,2649 @@ class RDKTask extends DecidablesMixinResizeable(DetectableElement) {
 }
 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;
@@ -13942,9 +16352,7 @@ class ROCSpace extends DecidablesMixinResizeable(DetectableElement) {
   }
   render() {
     /* eslint-disable-line class-methods-use-this */
-    return x$1`
-      ${DetectableElement.svgFilters}
-    `;
+    return x$1``;
   }
   willUpdate() {
     this.alignState();
@@ -14034,7 +16442,10 @@ class ROCSpace extends DecidablesMixinResizeable(DetectableElement) {
       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}`);
 
@@ -14081,7 +16492,7 @@ class ROCSpace extends DecidablesMixinResizeable(DetectableElement) {
         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]);
@@ -14097,10 +16508,17 @@ class ROCSpace extends DecidablesMixinResizeable(DetectableElement) {
         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();
 
@@ -14710,6 +17128,7 @@ class SDTModel extends DecidablesMixinResizeable(DetectableElement) {
           filter: url("#shadow-4");
 
           /* HACK: This gets Safari to correctly apply the filter! */
+          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
           transform: translateX(0);
         }
 
@@ -14899,9 +17318,7 @@ class SDTModel extends DecidablesMixinResizeable(DetectableElement) {
   }
   render() {
     /* eslint-disable-line class-methods-use-this */
-    return x$1`
-      ${DetectableElement.svgFilters}
-    `;
+    return x$1``;
   }
   sendEvent() {
     this.dispatchEvent(new CustomEvent('sdt-model-change', {
@@ -15071,7 +17488,10 @@ class SDTModel extends DecidablesMixinResizeable(DetectableElement) {
       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}`);