@decidables/detectable-elements 0.1.1 → 0.2.0

package/lib/detectableElements.umd.js

@@ -378,7 +378,7 @@
         v = /-->/g,
         a = />/g,
         f = />|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,
-        _$n = /'/g,
+        _$p = /'/g,
         m = /"/g,
         g = /^(?:script|style|textarea|title)$/i,
         p = t => (i, ...s) => ({
@@ -418,7 +418,7 @@
           p = -1,
           $ = 0;
 
-      for (; $ < s.length && (d.lastIndex = $, u = d.exec(s), null !== u);) $ = d.lastIndex, d === c ? "!--" === u[1] ? d = v : void 0 !== u[1] ? d = a : void 0 !== u[2] ? (g.test(u[2]) && (h = RegExp("</" + u[2], "g")), d = f) : void 0 !== u[3] && (d = f) : d === f ? ">" === u[0] ? (d = null != h ? h : c, p = -1) : void 0 === u[1] ? p = -2 : (p = d.lastIndex - u[2].length, o = u[1], d = void 0 === u[3] ? f : '"' === u[3] ? m : _$n) : d === m || d === _$n ? d = f : d === v || d === a ? d = c : (d = f, h = void 0);
+      for (; $ < s.length && (d.lastIndex = $, u = d.exec(s), null !== u);) $ = d.lastIndex, d === c ? "!--" === u[1] ? d = v : void 0 !== u[1] ? d = a : void 0 !== u[2] ? (g.test(u[2]) && (h = RegExp("</" + u[2], "g")), d = f) : void 0 !== u[3] && (d = f) : d === f ? ">" === u[0] ? (d = null != h ? h : c, p = -1) : void 0 === u[1] ? p = -2 : (p = d.lastIndex - u[2].length, o = u[1], d = void 0 === u[3] ? f : '"' === u[3] ? m : _$p) : d === m || d === _$p ? d = f : d === v || d === a ? d = c : (d = f, h = void 0);
 
       const y = d === f && t[i + 1].startsWith("/>") ? " " : "";
       r += d === c ? s + n$1 : p >= 0 ? (l.push(o), s.slice(0, p) + "$lit$" + s.slice(p) + e + y) : s + e + (-2 === p ? (l.push(void 0), i) : y);
@@ -6468,14 +6468,14 @@
     return line;
   }
 
-  let _$m = t => t,
-      _t$m,
-      _t2$k,
-      _t3$a,
-      _t4$a,
-      _t5$a,
-      _t6$a,
-      _t7$a,
+  let _$o = t => t,
+      _t$o,
+      _t2$m,
+      _t3$c,
+      _t4$c,
+      _t5$c,
+      _t6$c,
+      _t7$c,
       _t8$8,
       _t9$8;
   /*
@@ -6484,28 +6484,8 @@
   */
 
   class DecidablesElement extends s {
-    // HACK: Create a unique ID for each DecidablesElement
-    // This is needed because Edge/IE11 don't have real Shadow DOM, so IDs leak
-    // out of elements and collide if there is more than one of an element on a
-    // page. Known issue for checkbox/switches and the id/for pattern on <input>
-    // and <label>
-    static get uniqueId() {
-      DecidablesElement.ID += 1;
-      return DecidablesElement.ID;
-    }
-
-    constructor() {
-      super();
-      this.uniqueId = `decidables-${DecidablesElement.uniqueId}`;
-    }
-
     getComputedStyleValue(property) {
-      // HACK: IE11 requires use of polyfill interface to get custom property value in Javascript
-      if (window.ShadyCSS) {
-        return window.ShadyCSS.getComputedStyleValue(this, property);
-      }
-
-      return getComputedStyle(this).getPropertyValue(property);
+      return getComputedStyle(this).getPropertyValue(property).trim();
     }
 
     firstUpdated(changedProperties) {
@@ -6675,11 +6655,11 @@
     }
 
     static get svgFilters() {
-      const shadows = DecidablesElement.shadows; // eslint-disable-line prefer-destructuring
+      const shadows = DecidablesElement.shadows;
+      /* eslint-disable-line prefer-destructuring */
 
-      const erodeRadius = 1;
       const filters = shadows.elevations.map(z => {
-        return y$1(_t$m || (_t$m = _$m`
+        return y$1(_t$o || (_t$o = _$o`
         <filter id=${0} x="-250%" y="-250%" width="600%" height="600%">
           <feComponentTransfer in="SourceAlpha" result="solid">
             <feFuncA  type="table" tableValues="0 1 1"/>
@@ -6699,8 +6679,7 @@
           <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" />
-          <!-- HACK Edge: Using a dynamic value for erode radius stops Edge from corrupting the "radius" value! -->
-          <feMorphology in="solid" result="smaller" operator="erode" radius=${0} />
+          <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" />
@@ -6710,9 +6689,9 @@
             <feMergeNode in="finalA" />
             <feMergeNode in="SourceGraphic" />
           </feMerge>
-        </filter>`), `shadow-${z}`, shadows.mapUmbra[z].y / 2, shadows.mapUmbra[z].y, shadows.mapPenumbra[z].y / 2, shadows.mapPenumbra[z].y, shadows.mapAmbient[z].y / 2, shadows.mapAmbient[z].y, shadows.mapUmbra[z].s === 0 ? y$1(_t2$k || (_t2$k = _$m``)) : y$1(_t3$a || (_t3$a = _$m`<feMorphology in="offU" result="spreadU" operator=${0} radius=${0} />`), shadows.mapUmbra[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapUmbra[z].s)), shadows.mapPenumbra[z].s === 0 ? y$1(_t4$a || (_t4$a = _$m``)) : y$1(_t5$a || (_t5$a = _$m`<feMorphology in="offP" result="spreadP" operator=${0} radius=${0} />`), shadows.mapPenumbra[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapPenumbra[z].s)), shadows.mapAmbient[z].s === 0 ? y$1(_t6$a || (_t6$a = _$m``)) : y$1(_t7$a || (_t7$a = _$m`<feMorphology in="offA" result="spreadA" operator=${0} radius=${0} />`), shadows.mapAmbient[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapAmbient[z].s)), shadows.mapUmbra[z].s === 0 ? 'offU' : 'spreadU', shadows.mapUmbra[z].b / 2, shadows.mapPenumbra[z].s === 0 ? 'offP' : 'spreadP', shadows.mapPenumbra[z].b / 2, shadows.mapAmbient[z].s === 0 ? 'offA' : 'spreadA', shadows.mapAmbient[z].b / 2, shadows.baselineColor, shadows.opacityUmbra + shadows.opacityBoost, shadows.baselineColor, shadows.opacityPenumbra + shadows.opacityBoost, shadows.baselineColor, shadows.opacityAmbient + shadows.opacityBoost, erodeRadius);
+        </filter>`), `shadow-${z}`, shadows.mapUmbra[z].y / 2, shadows.mapUmbra[z].y, shadows.mapPenumbra[z].y / 2, shadows.mapPenumbra[z].y, shadows.mapAmbient[z].y / 2, shadows.mapAmbient[z].y, shadows.mapUmbra[z].s === 0 ? y$1(_t2$m || (_t2$m = _$o``)) : y$1(_t3$c || (_t3$c = _$o`<feMorphology in="offU" result="spreadU" operator=${0} radius=${0} />`), shadows.mapUmbra[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapUmbra[z].s)), shadows.mapPenumbra[z].s === 0 ? y$1(_t4$c || (_t4$c = _$o``)) : y$1(_t5$c || (_t5$c = _$o`<feMorphology in="offP" result="spreadP" operator=${0} radius=${0} />`), shadows.mapPenumbra[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapPenumbra[z].s)), shadows.mapAmbient[z].s === 0 ? y$1(_t6$c || (_t6$c = _$o``)) : y$1(_t7$c || (_t7$c = _$o`<feMorphology in="offA" result="spreadA" operator=${0} radius=${0} />`), shadows.mapAmbient[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapAmbient[z].s)), shadows.mapUmbra[z].s === 0 ? 'offU' : 'spreadU', shadows.mapUmbra[z].b / 2, shadows.mapPenumbra[z].s === 0 ? 'offP' : 'spreadP', shadows.mapPenumbra[z].b / 2, shadows.mapAmbient[z].s === 0 ? 'offA' : 'spreadA', shadows.mapAmbient[z].b / 2, shadows.baselineColor, shadows.opacityUmbra + shadows.opacityBoost, shadows.baselineColor, shadows.opacityPenumbra + shadows.opacityBoost, shadows.baselineColor, shadows.opacityAmbient + shadows.opacityBoost);
       });
-      return y$1(_t8$8 || (_t8$8 = _$m`
+      return y$1(_t8$8 || (_t8$8 = _$o`
       <svg class="defs">
         <defs>
           ${0}
@@ -6722,7 +6701,7 @@
     }
 
     static get styles() {
-      return r$2(_t9$8 || (_t9$8 = _$m`
+      return r$2(_t9$8 || (_t9$8 = _$o`
       :host {
         ---shadow-0: var(--shadow-0, ${0});
         ---shadow-2: var(--shadow-2, ${0});
@@ -6744,6 +6723,8 @@
         ---font-family-base: var(--font-family-base, "Source Sans", sans-serif);
         ---font-family-math: var(--font-family-math, "Source Serif", serif);
 
+        ---border: var(--border, 1px solid var(---color-border));
+        ---border-radius: var(--border-radius, 0.25rem);
         ---transition-duration: var(--transition-duration, 500ms);
 
         font-family: var(---font-family-base);
@@ -6777,16 +6758,14 @@
         width: 0;
         height: 0;
       }
-    `), o$3(this.cssBoxShadow(0)), o$3(this.cssBoxShadow(2)), o$3(this.cssBoxShadow(4)), o$3(this.cssBoxShadow(8)), o$3(this.greys.white), o$3(this.greys.light75), o$3(this.greys.dark75), o$3(this.greys.white), o$3(this.greys.dark25), o$3(this.greys.light75), o$3(this.greys.light50), o$3(this.greys.grey), o$3(this.greys.dark25), o$3(this.greys.dark50), o$3(this.greys.dark75));
+    `), o$3(this.cssBoxShadow(0)), o$3(this.cssBoxShadow(2)), o$3(this.cssBoxShadow(4)), o$3(this.cssBoxShadow(8)), o$3(this.greys.white), o$3(this.greys.light75), o$3(this.greys.dark75), o$3(this.greys.white), o$3(this.greys.dark25), o$3(this.greys.light75), o$3(this.greys.light50), o$3(this.greys.dark25), o$3(this.greys.grey), o$3(this.greys.dark50), o$3(this.greys.dark75));
     }
 
-  } // Static property of DecidablesElement!
-
-  DecidablesElement.ID = 0;
+  }
 
-  let _$l = t => t,
-      _t$l,
-      _t2$j;
+  let _$n = t => t,
+      _t$n,
+      _t2$l;
   class DecidablesButton extends DecidablesElement {
     static get properties() {
       return {
@@ -6805,7 +6784,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$l || (_t$l = _$l`
+      return [super.styles, r$2(_t$n || (_t$n = _$n`
         :host {
           margin: 0.25rem;
         }
@@ -6821,7 +6800,7 @@
           color: var(---color-text-inverse);
 
           border: 0;
-          border-radius: 0.25rem;
+          border-radius: var(---border-radius);
           outline: none;
         }
 
@@ -6862,7 +6841,7 @@
     }
 
     render() {
-      return $(_t2$j || (_t2$j = _$l`
+      return $(_t2$l || (_t2$l = _$n`
       <button ?disabled=${0}>
         <slot></slot>
       </button>
@@ -6880,9 +6859,9 @@
 
   const l = l => null != l ? l : w;
 
-  let _$k = t => t,
-      _t$k,
-      _t2$i;
+  let _$m = t => t,
+      _t$m,
+      _t2$k;
   class DecidablesSlider extends DecidablesElement {
     static get properties() {
       return {
@@ -6939,7 +6918,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$k || (_t$k = _$k`
+      return [super.styles, r$2(_t$m || (_t$m = _$m`
         :host {
           ---shadow-2-rotate: var(--shadow-2-rotate, ${0});
           ---shadow-4-rotate: var(--shadow-4-rotate, ${0});
@@ -7193,23 +7172,23 @@
     }
 
     render() {
-      return $(_t2$i || (_t2$i = _$k`
-      <label for=${0}>
+      return $(_t2$k || (_t2$k = _$m`
+      <label for="slider">
         <slot></slot>
       </label>
       <div class="range">
-        <input type="range" id=${0} min=${0} max=${0} step=${0} .value=${0} @change=${0} @input=${0}>
+        <input type="range" id="slider" min=${0} max=${0} step=${0} .value=${0} @change=${0} @input=${0}>
       </div>
       <decidables-spinner min=${0} max=${0} step=${0} .value=${0} @input=${0}></decidables-spinner>
-    `), `${this.uniqueId}-slider`, `${this.uniqueId}-slider`, l(this.min), l(this.max), l(this.step), this.value, this.changed.bind(this), this.inputted.bind(this), l(this.min), l(this.max), l(this.step), this.value, this.inputted.bind(this));
+    `), l(this.min), l(this.max), l(this.step), this.value, this.changed.bind(this), this.inputted.bind(this), l(this.min), l(this.max), l(this.step), this.value, this.inputted.bind(this));
     }
 
   }
   customElements.define('decidables-slider', DecidablesSlider);
 
-  let _$j = t => t,
-      _t$j,
-      _t2$h;
+  let _$l = t => t,
+      _t$l,
+      _t2$j;
   class DecidablesSpinner extends DecidablesElement {
     static get properties() {
       return {
@@ -7256,7 +7235,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$j || (_t$j = _$j`
+      return [super.styles, r$2(_t$l || (_t$l = _$l`
         :host {
           ---decidables-spinner-font-size: var(--decidables-spinner-font-size, 1.125rem);
           ---decidables-spinner-input-width: var(--decidables-spinner-input-width, 4rem);
@@ -7339,7 +7318,7 @@
     }
 
     render() {
-      return $(_t2$h || (_t2$h = _$j`
+      return $(_t2$j || (_t2$j = _$l`
       <label>
         <slot></slot>
         <input ?disabled=${0} type="number" min=${0} max=${0} step=${0} .value=${0} @input=${0}>
@@ -7350,9 +7329,9 @@
   }
   customElements.define('decidables-spinner', DecidablesSpinner);
 
-  let _$i = t => t,
-      _t$i,
-      _t2$g;
+  let _$k = t => t,
+      _t$k,
+      _t2$i;
   class DecidablesSwitch extends DecidablesElement {
     static get properties() {
       return {
@@ -7387,7 +7366,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$i || (_t$i = _$i`
+      return [super.styles, r$2(_t$k || (_t$k = _$k`
         :host {
           display: flex;
 
@@ -7510,23 +7489,23 @@
     }
 
     render() {
-      return $(_t2$g || (_t2$g = _$i`
-      <input type="checkbox" id=${0} ?checked=${0} ?disabled=${0} @change=${0}>
-      <label for=${0}>
+      return $(_t2$i || (_t2$i = _$k`
+      <input type="checkbox" id="switch" ?checked=${0} ?disabled=${0} @change=${0}>
+      <label for="switch">
         <slot name="off-label"></slot>
       </label>
-      <label for=${0}>
+      <label for="switch">
         <slot></slot>
       </label>
-    `), `${this.uniqueId}-checkbox`, this.checked, this.disabled, this.changed.bind(this), `${this.uniqueId}-checkbox`, `${this.uniqueId}-checkbox`);
+    `), this.checked, this.disabled, this.changed.bind(this));
     }
 
   }
   customElements.define('decidables-switch', DecidablesSwitch);
 
-  let _$h = t => t,
-      _t$h,
-      _t2$f;
+  let _$j = t => t,
+      _t$j,
+      _t2$h;
   class DecidablesToggle extends DecidablesElement {
     static get properties() {
       return {
@@ -7545,7 +7524,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$h || (_t$h = _$h`
+      return [super.styles, r$2(_t$j || (_t$j = _$j`
         fieldset {
           display: flex;
 
@@ -7566,7 +7545,7 @@
     }
 
     render() {
-      return $(_t2$f || (_t2$f = _$h`
+      return $(_t2$h || (_t2$h = _$j`
       <fieldset ?disabled=${0}>
         <legend><slot name="label"></slot></legend>
         <slot></slot>
@@ -7577,9 +7556,9 @@
   }
   customElements.define('decidables-toggle', DecidablesToggle);
 
-  let _$g = t => t,
-      _t$g,
-      _t2$e;
+  let _$i = t => t,
+      _t$i,
+      _t2$g;
   class DecidablesToggleOption extends DecidablesElement {
     static get properties() {
       return {
@@ -7627,7 +7606,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$g || (_t$g = _$g`
+      return [super.styles, r$2(_t$i || (_t$i = _$i`
         :host {
           display: flex;
         }
@@ -7724,17 +7703,34 @@
     }
 
     render() {
-      return $(_t2$e || (_t2$e = _$g`
-      <input type="radio" id=${0} name=${0} value=${0} .checked=${0} @change=${0}>
-      <label for=${0}>
+      return $(_t2$g || (_t2$g = _$i`
+      <input type="radio" id="toggle-option" name=${0} value=${0} .checked=${0} @change=${0}>
+      <label for="toggle-option">
         <slot></slot>
       </label>
-    `), `${this.uniqueId}-radio`, this.name, this.value, this.checked, this.changed.bind(this), `${this.uniqueId}-radio`);
+    `), this.name, this.value, this.checked, this.changed.bind(this));
     }
 
   }
   customElements.define('decidables-toggle-option', DecidablesToggleOption);
 
+  /*
+    Attribute: Space-separated sequence of numbers
+    Property: Array of numbers
+  */
+  const DecidablesConverterArray = {
+    fromAttribute: value => {
+      return value.split(/\s+/).map(item => {
+        return Number.parseFloat(item);
+      });
+    },
+    toAttribute: value => {
+      return value.length ? value.map(item => {
+        return item.toFixed(3);
+      }).join(' ') : null;
+    }
+  };
+
   /*
     Attribute: Space-separated sequence of strings
     Property: Set of strings
@@ -7748,8 +7744,8 @@
     }
   };
 
-  let _$f = t => t,
-      _t$f;
+  let _$h = t => t,
+      _t$h;
   /*
     DetectableElement Base Class - Not intended for instantiation!
     <detectable-element>
@@ -7806,7 +7802,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$f || (_t$f = _$f`
+      return [super.styles, r$2(_t$h || (_t$h = _$h`
         :host {
           ---color-h: var(--color-h, ${0});
           ---color-m: var(--color-m, ${0});
@@ -7861,9 +7857,9 @@
 
   }
 
-  let _$e = t => t,
-      _t$e,
-      _t2$d;
+  let _$g = t => t,
+      _t$g,
+      _t2$f;
   /*
     RDKTask element
     <rdk-task>
@@ -8017,7 +8013,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$e || (_t$e = _$e`
+      return [super.styles, r$2(_t$g || (_t$g = _$g`
         :host {
           display: inline-block;
 
@@ -8042,7 +8038,7 @@
         }
 
         .dot {
-          /* r: 2px; HACK: Firefox does not support CSS SVG Geometry Properties */
+          r: 2px;
         }
 
         .dots.coherent {
@@ -8066,8 +8062,8 @@
     }
 
     render() {
-      // eslint-disable-line class-methods-use-this
-      return $(_t2$d || (_t2$d = _$e``));
+      /* eslint-disable-line class-methods-use-this */
+      return $(_t2$f || (_t2$f = _$g``));
     }
 
     getDimensions() {
@@ -8088,9 +8084,8 @@
 
     firstUpdated(changedProperties) {
       super.firstUpdated(changedProperties); // Get the width and height after initial render/update has occurred
-      // HACK Edge: Edge doesn't have width/height until after a 0ms timeout
 
-      window.setTimeout(this.getDimensions.bind(this), 0);
+      this.getDimensions();
     }
 
     update(changedProperties) {
@@ -8378,9 +8373,7 @@
         return datum;
       }); //  ENTER
 
-      const dotEnter = dotUpdate.enter().append('circle').classed('dot', true).attr('r', 2);
-      /* HACK: Firefox does not support CSS SVG Geometry Properties */
-      //  MERGE
+      const dotEnter = dotUpdate.enter().append('circle').classed('dot', true); //  MERGE
 
       dotEnter.merge(dotUpdate).attr('cx', datum => {
         return datum.x;
@@ -13258,9 +13251,9 @@
 
   }
 
-  let _$d = t => t,
-      _t$d,
-      _t2$c;
+  let _$f = t => t,
+      _t$f,
+      _t2$e;
   /*
     ROCSpace element
     <roc-space>
@@ -13480,7 +13473,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$d || (_t$d = _$d`
+      return [super.styles, r$2(_t$f || (_t$f = _$f`
         :host {
           display: inline-block;
 
@@ -13601,13 +13594,13 @@
         .point .circle {
           fill: var(---color-element-emphasis);
 
-          /* r: 6; HACK: Firefox does not support CSS SVG Geometry Properties */
+          r: 6px;
         }
 
         .point .label {
           font-size: 0.75rem;
 
-          dominant-baseline: middle;
+          dominant-baseline: central;
           text-anchor: middle;
 
           fill: var(---color-text-inverse);
@@ -13616,8 +13609,8 @@
     }
 
     render() {
-      // eslint-disable-line class-methods-use-this
-      return $(_t2$c || (_t2$c = _$d`
+      /* eslint-disable-line class-methods-use-this */
+      return $(_t2$e || (_t2$e = _$f`
       ${0}
     `), DetectableElement.svgFilters);
     }
@@ -13640,9 +13633,8 @@
 
     firstUpdated(changedProperties) {
       super.firstUpdated(changedProperties); // Get the width and height after initial render/update has occurred
-      // HACK Edge: Edge doesn't have width/height until after a 0ms timeout
 
-      window.setTimeout(this.getDimensions.bind(this), 0);
+      this.getDimensions();
     }
 
     update(changedProperties) {
@@ -14033,9 +14025,7 @@
       }); //  ENTER
 
       const pointEnter = pointUpdate.enter().append('g').classed('point', true);
-      pointEnter.append('circle').classed('circle', true).attr('r', 6);
-      /* HACK: Firefox does not support CSS SVG Geometry Properties */
-
+      pointEnter.append('circle').classed('circle', true);
       pointEnter.append('text').classed('label', true); //  MERGE
 
       const pointMerge = pointEnter.merge(pointUpdate);
@@ -14160,14 +14150,14 @@
   }
   customElements.define('roc-space', ROCSpace);
 
-  let _$c = t => t,
-      _t$c,
-      _t2$b,
-      _t3$9,
-      _t4$9,
-      _t5$9,
-      _t6$9,
-      _t7$9,
+  let _$e = t => t,
+      _t$e,
+      _t2$d,
+      _t3$b,
+      _t4$b,
+      _t5$b,
+      _t6$b,
+      _t7$b,
       _t8$7,
       _t9$7,
       _t10$7,
@@ -14254,7 +14244,7 @@
       this.duration = undefined;
       this.coherence = undefined;
       this.payoff = undefined;
-      this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome'];
+      this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome', 'all'];
       this.color = undefined;
       this.zRoc = undefined;
       this.run = false;
@@ -14354,7 +14344,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$c || (_t$c = _$c`
+      return [super.styles, r$2(_t$e || (_t$e = _$e`
         :host {
           display: inline-block;
         }
@@ -14385,7 +14375,7 @@
     }
 
     render() {
-      return $(_t2$b || (_t2$b = _$c`
+      return $(_t2$d || (_t2$d = _$e`
       <div class="holder">
         ${0}
         ${0}
@@ -14394,35 +14384,36 @@
         ${0}
         ${0}
         ${0}
-      </div>`), this.trials ? $(_t3$9 || (_t3$9 = _$c`<decidables-slider min="1" max="100" step="1" .value=${0} @change=${0} @input=${0}>Trials</decidables-slider>`), this.trials, this.setTrials.bind(this), this.setTrials.bind(this)) : $(_t4$9 || (_t4$9 = _$c``)), this.duration ? $(_t5$9 || (_t5$9 = _$c`<decidables-slider min="10" max="2000" step="10" .value=${0} @change=${0} @input=${0}>Duration</decidables-slider>`), this.duration, this.setDuration.bind(this), this.setDuration.bind(this)) : $(_t6$9 || (_t6$9 = _$c``)), this.coherence ? $(_t7$9 || (_t7$9 = _$c`<decidables-slider min="0" max="1" step=".01" .value=${0} @change=${0} @input=${0}>Coherence</decidables-slider>`), this.coherence, this.setCoherence.bind(this), this.setCoherence.bind(this)) : $(_t8$7 || (_t8$7 = _$c``)), this.payoff ? $(_t9$7 || (_t9$7 = _$c`<decidables-slider class="payoff" min="0" max="100" step="1" .value=${0} @change=${0} @input=${0}>Payoff</decidables-slider>`), this.payoff, this.setPayoff.bind(this), this.setPayoff.bind(this)) : $(_t10$7 || (_t10$7 = _$c``)), this.color !== undefined ? $(_t11$7 || (_t11$7 = _$c`
+      </div>`), this.trials ? $(_t3$b || (_t3$b = _$e`<decidables-slider min="1" max="100" step="1" .value=${0} @change=${0} @input=${0}>Trials</decidables-slider>`), this.trials, this.setTrials.bind(this), this.setTrials.bind(this)) : $(_t4$b || (_t4$b = _$e``)), this.duration ? $(_t5$b || (_t5$b = _$e`<decidables-slider min="10" max="2000" step="10" .value=${0} @change=${0} @input=${0}>Duration</decidables-slider>`), this.duration, this.setDuration.bind(this), this.setDuration.bind(this)) : $(_t6$b || (_t6$b = _$e``)), this.coherence ? $(_t7$b || (_t7$b = _$e`<decidables-slider min="0" max="1" step=".01" .value=${0} @change=${0} @input=${0}>Coherence</decidables-slider>`), this.coherence, this.setCoherence.bind(this), this.setCoherence.bind(this)) : $(_t8$7 || (_t8$7 = _$e``)), this.payoff ? $(_t9$7 || (_t9$7 = _$e`<decidables-slider class="payoff" min="0" max="100" step="1" .value=${0} @change=${0} @input=${0}>Payoff</decidables-slider>`), this.payoff, this.setPayoff.bind(this), this.setPayoff.bind(this)) : $(_t10$7 || (_t10$7 = _$e``)), this.color !== undefined ? $(_t11$7 || (_t11$7 = _$e`
             <decidables-toggle @change=${0}>
               <span slot="label">Emphasis</span>
-              <decidables-toggle-option name=${0} value="none" ?checked=${0}>None</decidables-toggle-option>
-              <decidables-toggle-option name=${0} value="accuracy" ?checked=${0}>Accuracy</decidables-toggle-option>
-              <decidables-toggle-option name=${0} value="stimulus" ?checked=${0}>Stimulus</decidables-toggle-option>
-              <decidables-toggle-option name=${0} value="response" ?checked=${0}>Response</decidables-toggle-option>
-              <decidables-toggle-option name=${0} value="outcome" ?checked=${0}>Outcome</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="none" ?checked=${0}>None</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="accuracy" ?checked=${0}>Accuracy</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="stimulus" ?checked=${0}>Stimulus</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="response" ?checked=${0}>Response</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="outcome" ?checked=${0}>Outcome</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="all" ?checked=${0}>All</decidables-toggle-option>
             </decidables-toggle>
-          `), this.chooseColor.bind(this), `${this.uniqueId}-color`, this.color === 'none', `${this.uniqueId}-color`, this.color === 'accuracy', `${this.uniqueId}-color`, this.color === 'stimulus', `${this.uniqueId}-color`, this.color === 'response', `${this.uniqueId}-color`, this.color === 'outcome') : $(_t12$2 || (_t12$2 = _$c``)), this.zRoc !== undefined ? $(_t13$2 || (_t13$2 = _$c`
+          `), this.chooseColor.bind(this), this.color === 'none', this.color === 'accuracy', this.color === 'stimulus', this.color === 'response', this.color === 'outcome', this.color === 'all') : $(_t12$2 || (_t12$2 = _$e``)), this.zRoc !== undefined ? $(_t13$2 || (_t13$2 = _$e`
             <decidables-switch ?checked=${0} @change=${0}>
               <span class="math-var">z</span>ROC
               <span slot="off-label">ROC</span>
             </decidables-switch>
-          `), this.zRoc, this.flipZRoc.bind(this)) : $(_t14$2 || (_t14$2 = _$c``)), this.run || this.pause || this.reset ? $(_t15$2 || (_t15$2 = _$c`
+          `), this.zRoc, this.flipZRoc.bind(this)) : $(_t14$2 || (_t14$2 = _$e``)), this.run || this.pause || this.reset ? $(_t15$2 || (_t15$2 = _$e`
             <div class="buttons">
               ${0}
               ${0}
               ${0}
             </div>
-          `), this.run ? $(_t16$2 || (_t16$2 = _$c`<decidables-button name="run" ?disabled=${0} @click=${0}>Run</decidables-button>`), this.state === 'running' || this.state === 'ended', this.doRun.bind(this)) : $(_t17$2 || (_t17$2 = _$c``)), this.pause ? $(_t18$2 || (_t18$2 = _$c`<decidables-button name="pause" ?disabled=${0} @click=${0}>Pause</decidables-button>`), this.state !== 'running', this.doPause.bind(this)) : $(_t19$2 || (_t19$2 = _$c``)), this.reset ? $(_t20$2 || (_t20$2 = _$c`<decidables-button name="reset" ?disabled=${0} @click=${0}>Reset</decidables-button>`), this.state === 'resetted', this.doReset.bind(this)) : $(_t21$1 || (_t21$1 = _$c``))) : $(_t22$1 || (_t22$1 = _$c``)));
+          `), this.run ? $(_t16$2 || (_t16$2 = _$e`<decidables-button name="run" ?disabled=${0} @click=${0}>Run</decidables-button>`), this.state === 'running' || this.state === 'ended', this.doRun.bind(this)) : $(_t17$2 || (_t17$2 = _$e``)), this.pause ? $(_t18$2 || (_t18$2 = _$e`<decidables-button name="pause" ?disabled=${0} @click=${0}>Pause</decidables-button>`), this.state !== 'running', this.doPause.bind(this)) : $(_t19$2 || (_t19$2 = _$e``)), this.reset ? $(_t20$2 || (_t20$2 = _$e`<decidables-button name="reset" ?disabled=${0} @click=${0}>Reset</decidables-button>`), this.state === 'resetted', this.doReset.bind(this)) : $(_t21$1 || (_t21$1 = _$e``))) : $(_t22$1 || (_t22$1 = _$e``)));
     }
 
   }
   customElements.define('detectable-control', DetectableControl);
 
-  let _$b = t => t,
-      _t$b,
-      _t2$a;
+  let _$d = t => t,
+      _t$d,
+      _t2$c;
   /*
     SDTModel element
     <sdt-model>
@@ -14659,7 +14650,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$b || (_t$b = _$b`
+      return [super.styles, r$2(_t$d || (_t$d = _$d`
         :host {
           display: inline-block;
 
@@ -14847,7 +14838,7 @@
         .threshold .handle {
           fill: var(---color-element-emphasis);
 
-          /* r: 6; HACK: Firefox does not support CSS SVG Geometry Properties */
+          r: 6px;
         }
 
         /* Make a larger target for touch users */
@@ -14905,8 +14896,8 @@
     }
 
     render() {
-      // eslint-disable-line class-methods-use-this
-      return $(_t2$a || (_t2$a = _$b`
+      /* eslint-disable-line class-methods-use-this */
+      return $(_t2$c || (_t2$c = _$d`
       ${0}
     `), DetectableElement.svgFilters);
     }
@@ -14946,9 +14937,8 @@
 
     firstUpdated(changedProperties) {
       super.firstUpdated(changedProperties); // Get the width and height after initial render/update has occurred
-      // HACK Edge: Edge doesn't have width/height until after a 0ms timeout
 
-      window.setTimeout(this.getDimensions.bind(this), 0);
+      this.getDimensions();
     }
 
     update(changedProperties) {
@@ -15052,7 +15042,8 @@
         datum.startMuS = this.muS;
       }).on('drag', (event, datum) => {
         this.drag = true;
-        let muS = this.muS; // eslint-disable-line prefer-destructuring
+        let muS = this.muS;
+        /* eslint-disable-line prefer-destructuring */
 
         if (this.interactive) {
           muS = xScale.invert(event.x); // Clamp Signal Curve to stay visible
@@ -15060,7 +15051,8 @@
           muS = muS < xScale.domain()[0] ? xScale.domain()[0] : muS > xScale.domain()[1] ? xScale.domain()[1] : muS;
         }
 
-        let hS = this.hS; // eslint-disable-line prefer-destructuring
+        let hS = this.hS;
+        /* eslint-disable-line prefer-destructuring */
 
         if (this.unequal) {
           hS = yScale.invert(event.y); // Clamp Signal Curve to stay visible
@@ -15191,7 +15183,8 @@
 
       const noiseMerge = signalNoiseMerge.selectAll('.noise').attr('tabindex', this.interactive ? 0 : null).classed('interactive', this.interactive).on('keydown', this.interactive ? event => {
         if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
-          let muN = this.muN; // eslint-disable-line prefer-destructuring
+          let muN = this.muN;
+          /* eslint-disable-line prefer-destructuring */
 
           switch (event.key) {
             case 'ArrowRight':
@@ -15322,7 +15315,8 @@
 
       const signalMerge = signalNoiseMerge.selectAll('.signal').attr('tabindex', this.interactive || this.unequal ? 0 : null).classed('interactive', this.interactive).classed('unequal', this.unequal).on('keydown.sensitivity', this.interactive ? event => {
         if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
-          let muS = this.muS; // eslint-disable-line prefer-destructuring
+          let muS = this.muS;
+          /* eslint-disable-line prefer-destructuring */
 
           switch (event.key) {
             case 'ArrowRight':
@@ -15347,7 +15341,8 @@
         }
       } : null).on('keydown.variance', this.unequal ? event => {
         if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
-          let hS = this.hS; // eslint-disable-line prefer-destructuring
+          let hS = this.hS;
+          /* eslint-disable-line prefer-destructuring */
 
           switch (event.key) {
             case 'ArrowUp':
@@ -15504,7 +15499,7 @@
         const interpolateD = interpolate$1(element.d !== undefined ? element.d : this.d, this.d);
         return time => {
           element.d = interpolateD(time);
-          select(element).text(+element.d.toFixed(3));
+          select(element).text(format('.3')(element.d));
         };
       }); //  EXIT
 
@@ -15535,7 +15530,7 @@
         const interpolateC = interpolate$1(element.c !== undefined ? element.c : this.c, this.c);
         return time => {
           element.c = interpolateC(time);
-          select(element).text(+element.c.toFixed(3));
+          select(element).text(format('.3')(element.c));
         };
       }); //  EXIT
 
@@ -15570,7 +15565,7 @@
         const interpolateS = interpolate$1(element.s !== undefined ? element.s : this.s, this.s);
         return time => {
           element.s = interpolateS(time);
-          select(element).text(+element.s.toFixed(3));
+          select(element).text(format('.3')(element.s));
         };
       }); //  EXIT
 
@@ -15581,9 +15576,7 @@
 
       const thresholdEnter = thresholdUpdate.enter().append('g').classed('threshold', true);
       thresholdEnter.append('line').classed('line', true);
-      thresholdEnter.append('circle').classed('handle', true).attr('r', 6);
-      /* HACK: Firefox does not support CSS SVG Geometry Properties */
-      //  MERGE
+      thresholdEnter.append('circle').classed('handle', true); //  MERGE
 
       const thresholdMerge = thresholdEnter.merge(thresholdUpdate).attr('tabindex', this.interactive ? 0 : null).classed('interactive', this.interactive);
 
@@ -15591,7 +15584,8 @@
         if (this.interactive) {
           thresholdMerge.call(dragThreshold).on('keydown', event => {
             if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
-              let l = this.l; // eslint-disable-line prefer-destructuring
+              let l = this.l;
+              /* eslint-disable-line prefer-destructuring */
 
               switch (event.key) {
                 case 'ArrowRight':
@@ -15841,14 +15835,14 @@
   }
   customElements.define('sdt-model', SDTModel);
 
-  let _$a = t => t,
-      _t$a,
-      _t2$9,
-      _t3$8,
-      _t4$8,
-      _t5$8,
-      _t6$8,
-      _t7$8,
+  let _$c = t => t,
+      _t$c,
+      _t2$b,
+      _t3$a,
+      _t4$a,
+      _t5$a,
+      _t6$a,
+      _t7$a,
       _t8$6,
       _t9$6,
       _t10$6,
@@ -16108,7 +16102,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$a || (_t$a = _$a`
+      return [super.styles, r$2(_t$c || (_t$c = _$c`
         :host {
           display: inline-block;
         }
@@ -16180,6 +16174,11 @@
           border: 1px solid var(---color-element-border);
         }
 
+        :host([payoff="trial"]) .feedback,
+        :host([payoff="total"]) .feedback {
+          height: 5rem;
+        }
+
         .feedback.h {
           background-color: var(---color-h-light);
         }
@@ -16215,59 +16214,76 @@
           line-height: 1.15;
         }
 
-        :host([payoff="trial"]) .feedback,
-        :host([payoff="total"]) .feedback {
-          height: 4rem;
-        }
-
         /* Payoff feedback */
-        .payoff {
+        .total {
           text-align: center;
         }
 
-        .payoff .label {
+        .total .label {
           font-weight: 600;
         }
       `))];
     }
 
     render() {
-      return $(_t2$9 || (_t2$9 = _$a`
+      const payoffFormatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      });
+
+      const payoffFormat = number => {
+        return payoffFormatter.formatToParts(number).map(({
+          type,
+          value
+        }) => {
+          if (type === 'minusSign') {
+            return '−';
+          }
+
+          return value;
+        }).reduce((string, part) => {
+          return string + part;
+        });
+      };
+
+      return $(_t2$b || (_t2$b = _$c`
       <div class="holder">
         <div class="responses">
           <decidables-button name="present" class=${0} ?disabled=${0} @click=${0}>Present</decidables-button>
           <decidables-button name="absent" class=${0} ?disabled=${0} @click=${0}>Absent</decidables-button>
         </div>
         ${0}
-      </div>`), this.state === 'feedback' && this.response === 'present' ? 'selected' : this.state === 'waiting' ? 'waiting' : '', this.state !== 'waiting' || this.interactive !== true, this.present.bind(this), this.state === 'feedback' && this.response === 'absent' ? 'selected' : this.state === 'waiting' ? 'waiting' : '', this.state !== 'waiting' || this.interactive !== true, this.absent.bind(this), this.trial || this.feedback !== 'none' || this.payoff === 'total' ? $(_t3$8 || (_t3$8 = _$a`
+      </div>`), this.state === 'feedback' && this.response === 'present' ? 'selected' : this.state === 'waiting' ? 'waiting' : '', this.state !== 'waiting' || this.interactive !== true, this.present.bind(this), this.state === 'feedback' && this.response === 'absent' ? 'selected' : this.state === 'waiting' ? 'waiting' : '', this.state !== 'waiting' || this.interactive !== true, this.absent.bind(this), this.trial || this.feedback !== 'none' || this.payoff === 'total' ? $(_t3$a || (_t3$a = _$c`
             <div class="feedbacks">
               ${0}
               ${0}
               ${0}
-            </div>`), this.trial ? $(_t4$8 || (_t4$8 = _$a`
+            </div>`), this.trial ? $(_t4$a || (_t4$a = _$c`
                   <div class="trial">
                     <span class="label">Trial: </span><span class="count">${0}</span><span class="of"> of </span><span class="total">${0}</span>
-                  </div>`), this.trialCount, this.trialTotal) : $(_t5$8 || (_t5$8 = _$a``)), this.feedback !== 'none' ? $(_t6$8 || (_t6$8 = _$a`
+                  </div>`), this.trialCount, this.trialTotal) : $(_t5$a || (_t5$a = _$c``)), this.feedback !== 'none' ? $(_t6$a || (_t6$a = _$c`
                   <div class=${0}>
                     ${0}
                     ${0}
-                  </div>`), `feedback ${this.state === 'feedback' ? this.feedback === 'outcome' ? this.outcome : this.accuracy : ''}`, this.state === 'feedback' ? this.feedback === 'outcome' ? this.outcome === 'h' ? $(_t7$8 || (_t7$8 = _$a`<span class="outcome">Hit</span>`)) : this.outcome === 'm' ? $(_t8$6 || (_t8$6 = _$a`<span class="outcome">Miss</span>`)) : this.outcome === 'fa' ? $(_t9$6 || (_t9$6 = _$a`<span class="outcome">False<br>Alarm</span>`)) : this.outcome === 'cr' ? $(_t10$6 || (_t10$6 = _$a`<span class="outcome">Correct<br>Rejection</span>`)) : $(_t11$6 || (_t11$6 = _$a`<span class="outcome">No<br>Response</span>`)) : this.accuracy === 'c' ? $(_t12$1 || (_t12$1 = _$a`<span class="outcome">Correct</span>`)) : this.accuracy === 'e' ? $(_t13$1 || (_t13$1 = _$a`<span class="outcome">Error</span>`)) : $(_t14$1 || (_t14$1 = _$a`<span class="outcome">No<br>Response</span>`)) : '', this.payoff === 'trial' || this.payoff === 'total' ? $(_t15$1 || (_t15$1 = _$a`<span class="payoff">${0}</span>`), this.trialPayoff) : $(_t16$1 || (_t16$1 = _$a``))) : $(_t17$1 || (_t17$1 = _$a``)), this.payoff === 'total' ? $(_t18$1 || (_t18$1 = _$a`
-                  <div class="payoff">
+                  </div>`), `feedback ${this.state === 'feedback' ? this.feedback === 'outcome' ? this.outcome : this.accuracy : ''}`, this.state === 'feedback' ? this.feedback === 'outcome' ? this.outcome === 'h' ? $(_t7$a || (_t7$a = _$c`<span class="outcome">Hit</span>`)) : this.outcome === 'm' ? $(_t8$6 || (_t8$6 = _$c`<span class="outcome">Miss</span>`)) : this.outcome === 'fa' ? $(_t9$6 || (_t9$6 = _$c`<span class="outcome">False<br>Alarm</span>`)) : this.outcome === 'cr' ? $(_t10$6 || (_t10$6 = _$c`<span class="outcome">Correct<br>Rejection</span>`)) : $(_t11$6 || (_t11$6 = _$c`<span class="outcome">No<br>Response</span>`)) : this.accuracy === 'c' ? $(_t12$1 || (_t12$1 = _$c`<span class="outcome">Correct</span>`)) : this.accuracy === 'e' ? $(_t13$1 || (_t13$1 = _$c`<span class="outcome">Error</span>`)) : $(_t14$1 || (_t14$1 = _$c`<span class="outcome">No<br>Response</span>`)) : '', this.state === 'feedback' && (this.payoff === 'trial' || this.payoff === 'total') ? $(_t15$1 || (_t15$1 = _$c`<span class="payoff">${0}</span>`), payoffFormat(this.trialPayoff)) : $(_t16$1 || (_t16$1 = _$c``))) : $(_t17$1 || (_t17$1 = _$c``)), this.payoff === 'total' ? $(_t18$1 || (_t18$1 = _$c`
+                  <div class="total">
                     <span class="label">Total: </span><span class="value">${0}</span>
-                  </div>`), this.totalPayoff) : $(_t19$1 || (_t19$1 = _$a``))) : $(_t20$1 || (_t20$1 = _$a``)));
+                  </div>`), payoffFormat(this.totalPayoff)) : $(_t19$1 || (_t19$1 = _$c``))) : $(_t20$1 || (_t20$1 = _$c``)));
     }
 
   }
   customElements.define('detectable-response', DetectableResponse);
 
-  let _$9 = t => t,
-      _t$9,
-      _t2$8,
-      _t3$7,
-      _t4$7,
-      _t5$7,
-      _t6$7,
-      _t7$7,
+  let _$b = t => t,
+      _t$b,
+      _t2$a,
+      _t3$9,
+      _t4$9,
+      _t5$9,
+      _t6$9,
+      _t7$9,
       _t8$5,
       _t9$5,
       _t10$5,
@@ -16414,8 +16430,8 @@
       this.numeric = false;
       this.summaries = ['stimulusRates', 'responseRates', 'accuracy'];
       this.summary = new Set();
-      this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome'];
-      this.color = 'outcome';
+      this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome', 'all'];
+      this.color = 'all';
       this.h = 40;
       this.m = 60;
       this.fa = 75;
@@ -16554,7 +16570,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$9 || (_t$9 = _$9`
+      return [super.styles, r$2(_t$b || (_t$b = _$b`
         :host {
           display: inline-block;
         }
@@ -16617,7 +16633,7 @@
 
         /* Color schemes & Table emphasis */
 
-        /* (Default) Outcome color scheme */
+        /* (Default) All color scheme */
         .h {
           background: var(---color-h-light);
           border-top: 2px solid var(---color-element-emphasis);
@@ -16716,6 +16732,15 @@
           background: var(---color-element-background);
         }
 
+        /* Outcome color scheme */
+        :host([color="outcome"]) .hr,
+        :host([color="outcome"]) .far,
+        :host([color="outcome"]) .ppv,
+        :host([color="outcome"]) .fomr,
+        :host([color="outcome"]) .acc {
+          background: var(---color-element-background);
+        }
+
         /* No color scheme */
         :host([color="none"]) .cr,
         :host([color="none"]) .fa,
@@ -16738,6 +16763,22 @@
         minimumFractionDigits: 0,
         maximumFractionDigits: 0
       });
+
+      const payoffFormat = number => {
+        return payoffFormatter.formatToParts(number).map(({
+          type,
+          value
+        }) => {
+          if (type === 'minusSign') {
+            return '−';
+          }
+
+          return value;
+        }).reduce((string, part) => {
+          return string + part;
+        });
+      };
+
       this.alignState();
       let h;
       let m;
@@ -16750,72 +16791,72 @@
       let fomr;
 
       if (this.numeric) {
-        h = $(_t2$8 || (_t2$8 = _$9`
+        h = $(_t2$a || (_t2$a = _$b`
         <decidables-spinner ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <span>Hits</span>
           ${0}
         </decidables-spinner>
-      `), !this.interactive, this.h, this.hInput.bind(this), this.payoff ? $(_t3$7 || (_t3$7 = _$9`<span class="payoff">${0}</span>`), payoffFormatter.format(this.hPayoff)) : $(_t4$7 || (_t4$7 = _$9``)));
-        m = $(_t5$7 || (_t5$7 = _$9`
+      `), !this.interactive, this.h, this.hInput.bind(this), this.payoff ? $(_t3$9 || (_t3$9 = _$b`<span class="payoff">${0}</span>`), payoffFormat(this.hPayoff)) : $(_t4$9 || (_t4$9 = _$b``)));
+        m = $(_t5$9 || (_t5$9 = _$b`
         <decidables-spinner ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <span>Misses</span>
           ${0}
         </decidables-spinner>
-      `), !this.interactive, this.m, this.mInput.bind(this), this.payoff ? $(_t6$7 || (_t6$7 = _$9`<span class="payoff">${0}</span>`), payoffFormatter.format(this.mPayoff)) : $(_t7$7 || (_t7$7 = _$9``)));
-        fa = $(_t8$5 || (_t8$5 = _$9`
+      `), !this.interactive, this.m, this.mInput.bind(this), this.payoff ? $(_t6$9 || (_t6$9 = _$b`<span class="payoff">${0}</span>`), payoffFormat(this.mPayoff)) : $(_t7$9 || (_t7$9 = _$b``)));
+        fa = $(_t8$5 || (_t8$5 = _$b`
         <decidables-spinner ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <span>False Alarms</span>
           ${0}
         </decidables-spinner>
-      `), !this.interactive, this.fa, this.faInput.bind(this), this.payoff ? $(_t9$5 || (_t9$5 = _$9`<span class="payoff">${0}</span>`), payoffFormatter.format(this.faPayoff)) : $(_t10$5 || (_t10$5 = _$9``)));
-        cr = $(_t11$5 || (_t11$5 = _$9`
+      `), !this.interactive, this.fa, this.faInput.bind(this), this.payoff ? $(_t9$5 || (_t9$5 = _$b`<span class="payoff">${0}</span>`), payoffFormat(this.faPayoff)) : $(_t10$5 || (_t10$5 = _$b``)));
+        cr = $(_t11$5 || (_t11$5 = _$b`
         <decidables-spinner ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <span>Correct Rejections</span>
           ${0}
         </decidables-spinner>
-      `), !this.interactive, this.cr, this.crInput.bind(this), this.payoff ? $(_t12 || (_t12 = _$9`<span class="payoff">${0}</span>`), payoffFormatter.format(this.crPayoff)) : $(_t13 || (_t13 = _$9``)));
-        hr = $(_t14 || (_t14 = _$9`
+      `), !this.interactive, this.cr, this.crInput.bind(this), this.payoff ? $(_t12 || (_t12 = _$b`<span class="payoff">${0}</span>`), payoffFormat(this.crPayoff)) : $(_t13 || (_t13 = _$b``)));
+        hr = $(_t14 || (_t14 = _$b`
         <decidables-spinner ?disabled=${0} min="0" max="1" step=".001" .value="${0}" @input=${0}>
           <span>Hit Rate</span>
         </decidables-spinner>
       `), !this.interactive, +this.hr.toFixed(3), this.hrInput.bind(this));
-        far = $(_t15 || (_t15 = _$9`
+        far = $(_t15 || (_t15 = _$b`
         <decidables-spinner ?disabled=${0} min="0" max="1" step=".001" .value="${0}" @input=${0}>
           <span>False Alarm Rate</span>
         </decidables-spinner>
       `), !this.interactive, +this.far.toFixed(3), this.farInput.bind(this));
-        acc = $(_t16 || (_t16 = _$9`
+        acc = $(_t16 || (_t16 = _$b`
         <decidables-spinner ?disabled=${0} min="0" max="1" step=".001" .value="${0}" @input=${0}>
           <span>Accuracy</span>
         </decidables-spinner>
       `), !this.interactive, +this.acc.toFixed(3), this.accInput.bind(this));
-        ppv = $(_t17 || (_t17 = _$9`
+        ppv = $(_t17 || (_t17 = _$b`
         <decidables-spinner ?disabled=${0} min="0" max="1" step=".001" .value="${0}" @input=${0}>
           <span>Positive Predictive Value</span>
         </decidables-spinner>
       `), !this.interactive, +this.ppv.toFixed(3), this.ppvInput.bind(this));
-        fomr = $(_t18 || (_t18 = _$9`
+        fomr = $(_t18 || (_t18 = _$b`
         <decidables-spinner ?disabled=${0} min="0" max="1" step=".001" .value="${0}" @input=${0}>
           <span>False Omission Rate</span>
         </decidables-spinner>
       `), !this.interactive, +this.fomr.toFixed(3), this.fomrInput.bind(this));
       } else {
-        h = $(_t19 || (_t19 = _$9`<span>Hits</span>
-        ${0}`), this.payoff ? $(_t20 || (_t20 = _$9`<span class="payoff">${0}</span>`), payoffFormatter.format(this.hPayoff)) : $(_t21 || (_t21 = _$9``)));
-        m = $(_t22 || (_t22 = _$9`<span>Misses</span>
-        ${0}`), this.payoff ? $(_t23 || (_t23 = _$9`<span class="payoff">${0}</span>`), payoffFormatter.format(this.mPayoff)) : $(_t24 || (_t24 = _$9``)));
-        fa = $(_t25 || (_t25 = _$9`<span>False Alarms</span>
-        ${0}`), this.payoff ? $(_t26 || (_t26 = _$9`<span class="payoff">${0}</span>`), payoffFormatter.format(this.faPayoff)) : $(_t27 || (_t27 = _$9``)));
-        cr = $(_t28 || (_t28 = _$9`<span>Correct Rejections</span>
-        ${0}`), this.payoff ? $(_t29 || (_t29 = _$9`<span class="payoff">${0}</span>`), payoffFormatter.format(this.crPayoff)) : $(_t30 || (_t30 = _$9``)));
-        hr = $(_t31 || (_t31 = _$9`<span>Hit Rate</span>`));
-        far = $(_t32 || (_t32 = _$9`<span>False Alarm Rate</span>`));
-        acc = $(_t33 || (_t33 = _$9`<span>Accuracy</span>`));
-        ppv = $(_t34 || (_t34 = _$9`<span>Positive Predictive Value</span>`));
-        fomr = $(_t35 || (_t35 = _$9`<span>False Omission Rate</span>`));
+        h = $(_t19 || (_t19 = _$b`<span>Hits</span>
+        ${0}`), this.payoff ? $(_t20 || (_t20 = _$b`<span class="payoff">${0}</span>`), payoffFormat(this.hPayoff)) : $(_t21 || (_t21 = _$b``)));
+        m = $(_t22 || (_t22 = _$b`<span>Misses</span>
+        ${0}`), this.payoff ? $(_t23 || (_t23 = _$b`<span class="payoff">${0}</span>`), payoffFormat(this.mPayoff)) : $(_t24 || (_t24 = _$b``)));
+        fa = $(_t25 || (_t25 = _$b`<span>False Alarms</span>
+        ${0}`), this.payoff ? $(_t26 || (_t26 = _$b`<span class="payoff">${0}</span>`), payoffFormat(this.faPayoff)) : $(_t27 || (_t27 = _$b``)));
+        cr = $(_t28 || (_t28 = _$b`<span>Correct Rejections</span>
+        ${0}`), this.payoff ? $(_t29 || (_t29 = _$b`<span class="payoff">${0}</span>`), payoffFormat(this.crPayoff)) : $(_t30 || (_t30 = _$b``)));
+        hr = $(_t31 || (_t31 = _$b`<span>Hit Rate</span>`));
+        far = $(_t32 || (_t32 = _$b`<span>False Alarm Rate</span>`));
+        acc = $(_t33 || (_t33 = _$b`<span>Accuracy</span>`));
+        ppv = $(_t34 || (_t34 = _$b`<span>Positive Predictive Value</span>`));
+        fomr = $(_t35 || (_t35 = _$b`<span>False Omission Rate</span>`));
       }
 
-      return $(_t36 || (_t36 = _$9`
+      return $(_t36 || (_t36 = _$b`
       <table class=${0}>
         <thead>
           <tr>
@@ -16826,10 +16867,10 @@
           </tr>
           <tr>
             <th class="th th-sub" scope="col">
-              "Present"
+              ‘Present’
             </th>
             <th class="th th-sub" scope="col">
-              "Absent"
+              ‘Absent’
             </th>
           </tr>
         </thead>
@@ -16863,35 +16904,35 @@
           </tr>
           ${0}
         </tbody>
-      </table>`), this.numeric ? 'numeric' : '', h, m, this.summary.has('stimulusRates') ? $(_t37 || (_t37 = _$9`
+      </table>`), this.numeric ? 'numeric' : '', h, m, this.summary.has('stimulusRates') ? $(_t37 || (_t37 = _$b`
                 <td class="td td-summary hr">
                   ${0}
-                </td>`), hr) : $(_t38 || (_t38 = _$9``)), fa, cr, this.summary.has('stimulusRates') ? $(_t39 || (_t39 = _$9`
+                </td>`), hr) : $(_t38 || (_t38 = _$b``)), fa, cr, this.summary.has('stimulusRates') ? $(_t39 || (_t39 = _$b`
                 <td class="td td-summary far">
                   ${0}
-                </td>`), far) : $(_t40 || (_t40 = _$9``)), this.summary.has('responseRates') || this.summary.has('accuracy') ? $(_t41 || (_t41 = _$9`
+                </td>`), far) : $(_t40 || (_t40 = _$b``)), this.summary.has('responseRates') || this.summary.has('accuracy') ? $(_t41 || (_t41 = _$b`
               <tr>
                 <td colspan="2"></td>
                 ${0}
                 ${0}
-              </tr>`), this.summary.has('responseRates') ? $(_t42 || (_t42 = _$9`
+              </tr>`), this.summary.has('responseRates') ? $(_t42 || (_t42 = _$b`
                     <td class="td td-summary ppv">
                       ${0}
                     </td>
                     <td class="td td-summary fomr">
                       ${0}
-                    </td>`), ppv, fomr) : $(_t43 || (_t43 = _$9`
-                    <td colspan="2"></td>`)), this.summary.has('accuracy') ? $(_t44 || (_t44 = _$9`
+                    </td>`), ppv, fomr) : $(_t43 || (_t43 = _$b`
+                    <td colspan="2"></td>`)), this.summary.has('accuracy') ? $(_t44 || (_t44 = _$b`
                     <td class="td td-summary acc" rowspan="2">
                       ${0}
-                    </td>`), acc) : $(_t45 || (_t45 = _$9``))) : $(_t46 || (_t46 = _$9``)));
+                    </td>`), acc) : $(_t45 || (_t45 = _$b``))) : $(_t46 || (_t46 = _$b``)));
     }
 
   }
   customElements.define('detectable-table', DetectableTable);
 
-  let _$8 = t => t,
-      _t$8;
+  let _$a = t => t,
+      _t$a;
   /*
     SDTEquation Base Class - Not intended for instantiation!
     <sdt-equation>
@@ -16914,7 +16955,7 @@
     }
 
     static get styles() {
-      return [super.styles, r$2(_t$8 || (_t$8 = _$8`
+      return [super.styles, r$2(_t$a || (_t$a = _$a`
         :host {
           display: block;
 
@@ -16933,6 +16974,7 @@
         /* Overall <table> */
         .equation {
           text-align: center;
+          white-space: nowrap;
 
           border-collapse: collapse;
 
@@ -16952,6 +16994,10 @@
           font-style: normal;
         }
 
+        var {
+          border-radius: var(---border-radius);
+        }
+
         .tight {
           padding: 0;
         }
@@ -16977,6 +17023,8 @@
           padding: 0.125rem 0.375rem 0.375rem;
 
           vertical-align: middle;
+
+          border-radius: var(---border-radius);
         }
 
         .bottom {
@@ -17000,6 +17048,14 @@
           background: var(---color-fa-light);
         }
 
+        .ppv {
+          background: var(---color-present-light);
+        }
+
+        .fomr {
+          background: var(---color-absent-light);
+        }
+
         .acc {
           background: var(---color-acc-light);
         }
@@ -17028,14 +17084,14 @@
 
   }
 
-  let _$7 = t => t,
-      _t$7,
-      _t2$7,
-      _t3$6,
-      _t4$6,
-      _t5$6,
-      _t6$6,
-      _t7$6,
+  let _$9 = t => t,
+      _t$9,
+      _t2$9,
+      _t3$8,
+      _t4$8,
+      _t5$8,
+      _t6$8,
+      _t7$8,
       _t8$4,
       _t9$4,
       _t10$4,
@@ -17130,37 +17186,37 @@
       let far;
 
       if (this.numeric) {
-        d = $(_t$7 || (_t$7 = _$7`
+        d = $(_t$9 || (_t$9 = _$9`
         <decidables-spinner class="d bottom" ?disabled=${0} step=".001" .value="${0}" @input=${0}>
           <var class="math-var">d′</var>
         </decidables-spinner>
       `), !this.interactive, this.d, this.dInput.bind(this));
-        c = $(_t2$7 || (_t2$7 = _$7`
+        c = $(_t2$9 || (_t2$9 = _$9`
         <decidables-spinner class="c bottom" ?disabled=${0} step=".001" .value="${0}" @input=${0}>
           <var class="math-var">c</var>
         </decidables-spinner>
       `), !this.interactive, this.c, this.cInput.bind(this));
-        s = $(_t3$6 || (_t3$6 = _$7`
+        s = $(_t3$8 || (_t3$8 = _$9`
         <decidables-spinner class="s bottom" ?disabled=${0} min="0" step=".001" .value="${0}" @input=${0}>
           <var class="math-var">σ</var>
         </decidables-spinner>
       `), !this.interactive, this.s, this.sInput.bind(this));
-        far = $(_t4$6 || (_t4$6 = _$7`
+        far = $(_t4$8 || (_t4$8 = _$9`
         <decidables-spinner class="far bottom" disabled min="0" max="1" step=".001" .value="${0}">
           <var>False Alarm Rate</var>
         </decidables-spinner>
       `), +this.far.toFixed(3));
       } else {
-        d = $(_t5$6 || (_t5$6 = _$7`<var class="math-var d">d′</var>`));
-        c = $(_t6$6 || (_t6$6 = _$7`<var class="math-var c">c</var>`));
-        s = $(_t7$6 || (_t7$6 = _$7`<var class="math-var s">σ</var>`));
-        far = $(_t8$4 || (_t8$4 = _$7`<var class="far">False Alarm Rate</var>`));
+        d = $(_t5$8 || (_t5$8 = _$9`<var class="math-var d">d′</var>`));
+        c = $(_t6$8 || (_t6$8 = _$9`<var class="math-var c">c</var>`));
+        s = $(_t7$8 || (_t7$8 = _$9`<var class="math-var s">σ</var>`));
+        far = $(_t8$4 || (_t8$4 = _$9`<var class="far">False Alarm Rate</var>`));
       }
 
       let equation;
 
       if (this.unequal) {
-        equation = $(_t9$4 || (_t9$4 = _$7`
+        equation = $(_t9$4 || (_t9$4 = _$9`
         <tr>
           <td rowspan="2">
             ${0}<span class="equals">=</span><var class="math-greek phi tight">Φ</var><span class="paren tight">(</span><span class="bracket tight">[</span>
@@ -17187,7 +17243,7 @@
           </td>
         </tr>`), far, s, d, c, s);
       } else {
-        equation = $(_t10$4 || (_t10$4 = _$7`
+        equation = $(_t10$4 || (_t10$4 = _$9`
         <tr>
           <td rowspan="2">
             ${0}<span class="equals">=</span><var class="math-greek phi tight">Φ</var><span class="paren tight">(</span><span class="minus tight">−</span>
@@ -17206,7 +17262,7 @@
         </tr>`), far, d, c);
       }
 
-      return $(_t11$4 || (_t11$4 = _$7`
+      return $(_t11$4 || (_t11$4 = _$9`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -17219,14 +17275,14 @@
   }
   customElements.define('sdt-equation-dc2far', SDTEquationDC2Far);
 
-  let _$6 = t => t,
-      _t$6,
-      _t2$6,
-      _t3$5,
-      _t4$5,
-      _t5$5,
-      _t6$5,
-      _t7$5,
+  let _$8 = t => t,
+      _t$8,
+      _t2$8,
+      _t3$7,
+      _t4$7,
+      _t5$7,
+      _t6$7,
+      _t7$7,
       _t8$3,
       _t9$3,
       _t10$3,
@@ -17321,37 +17377,37 @@
       let hr;
 
       if (this.numeric) {
-        d = $(_t$6 || (_t$6 = _$6`
+        d = $(_t$8 || (_t$8 = _$8`
         <decidables-spinner class="d bottom" ?disabled=${0} step=".001" .value="${0}" @input=${0}>
           <var class="math-var">d′</var>
         </decidables-spinner>
       `), !this.interactive, this.d, this.dInput.bind(this));
-        c = $(_t2$6 || (_t2$6 = _$6`
+        c = $(_t2$8 || (_t2$8 = _$8`
         <decidables-spinner class="c bottom" ?disabled=${0} step=".001" .value="${0}" @input=${0}>
           <var class="math-var">c</var>
         </decidables-spinner>
       `), !this.interactive, this.c, this.cInput.bind(this));
-        s = $(_t3$5 || (_t3$5 = _$6`
+        s = $(_t3$7 || (_t3$7 = _$8`
         <decidables-spinner class="s bottom" ?disabled=${0} min="0" step=".001" .value="${0}" @input=${0}>
           <var class="math-var">σ</var>
         </decidables-spinner>
       `), !this.interactive, this.s, this.sInput.bind(this));
-        hr = $(_t4$5 || (_t4$5 = _$6`
+        hr = $(_t4$7 || (_t4$7 = _$8`
         <decidables-spinner class="hr bottom" disabled min="0" max="1" step=".001" .value="${0}">
           <var>Hit Rate</var>
         </decidables-spinner>
       `), +this.hr.toFixed(3));
       } else {
-        d = $(_t5$5 || (_t5$5 = _$6`<var class="math-var d">d′</var>`));
-        c = $(_t6$5 || (_t6$5 = _$6`<var class="math-var c">c</var>`));
-        s = $(_t7$5 || (_t7$5 = _$6`<var class="math-var s">σ</var>`));
-        hr = $(_t8$3 || (_t8$3 = _$6`<var class="hr">Hit Rate</var>`));
+        d = $(_t5$7 || (_t5$7 = _$8`<var class="math-var d">d′</var>`));
+        c = $(_t6$7 || (_t6$7 = _$8`<var class="math-var c">c</var>`));
+        s = $(_t7$7 || (_t7$7 = _$8`<var class="math-var s">σ</var>`));
+        hr = $(_t8$3 || (_t8$3 = _$8`<var class="hr">Hit Rate</var>`));
       }
 
       let equation;
 
       if (this.unequal) {
-        equation = $(_t9$3 || (_t9$3 = _$6`
+        equation = $(_t9$3 || (_t9$3 = _$8`
         <tr>
           <td rowspan="2">
             ${0}<span class="equals">=</span><var class="math-greek phi tight">Φ</var><span class="paren tight">(</span><span class="bracket tight">[</span>
@@ -17387,7 +17443,7 @@
           </td>
         </tr>`), hr, s, d, c, s, s);
       } else {
-        equation = $(_t10$3 || (_t10$3 = _$6`
+        equation = $(_t10$3 || (_t10$3 = _$8`
         <tr>
           <td rowspan="2">
             ${0}<span class="equals">=</span><var class="math-greek phi tight">Φ</var><span class="paren tight">(</span>
@@ -17406,7 +17462,7 @@
         </tr>`), hr, d, c);
       }
 
-      return $(_t11$3 || (_t11$3 = _$6`
+      return $(_t11$3 || (_t11$3 = _$8`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -17419,14 +17475,14 @@
   }
   customElements.define('sdt-equation-dc2hr', SDTEquationDC2Hr);
 
-  let _$5 = t => t,
-      _t$5,
-      _t2$5,
-      _t3$4,
-      _t4$4,
-      _t5$4,
-      _t6$4,
-      _t7$4;
+  let _$7 = t => t,
+      _t$7,
+      _t2$7,
+      _t3$6,
+      _t4$6,
+      _t5$6,
+      _t6$6,
+      _t7$6;
   /*
     SDTEquationFaCr2Far element
     <sdt-equation-facr2far>
@@ -17497,28 +17553,28 @@
       let far;
 
       if (this.numeric) {
-        fa = $(_t$5 || (_t$5 = _$5`
+        fa = $(_t$7 || (_t$7 = _$7`
         <decidables-spinner class="fa" ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <var>False Alarms</var>
         </decidables-spinner>
       `), !this.interactive, this.fa, this.faInput.bind(this));
-        cr = $(_t2$5 || (_t2$5 = _$5`
+        cr = $(_t2$7 || (_t2$7 = _$7`
         <decidables-spinner class="cr" ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <var>Correct Rejections</var>
         </decidables-spinner>
       `), !this.interactive, this.cr, this.crInput.bind(this));
-        far = $(_t3$4 || (_t3$4 = _$5`
+        far = $(_t3$6 || (_t3$6 = _$7`
         <decidables-spinner class="far" disabled min="0" max="1" step=".001" .value="${0}">
           <var>False Alarm Rate</var>
         </decidables-spinner>
       `), +this.far.toFixed(3));
       } else {
-        fa = $(_t4$4 || (_t4$4 = _$5`<var class="fa">False Alarms</var>`));
-        cr = $(_t5$4 || (_t5$4 = _$5`<var class="cr">Correct Rejections</var>`));
-        far = $(_t6$4 || (_t6$4 = _$5`<var class="far">False Alarm Rate</var>`));
+        fa = $(_t4$6 || (_t4$6 = _$7`<var class="fa">False Alarms</var>`));
+        cr = $(_t5$6 || (_t5$6 = _$7`<var class="cr">Correct Rejections</var>`));
+        far = $(_t6$6 || (_t6$6 = _$7`<var class="far">False Alarm Rate</var>`));
       }
 
-      return $(_t7$4 || (_t7$4 = _$5`
+      return $(_t7$6 || (_t7$6 = _$7`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -17543,16 +17599,141 @@
   }
   customElements.define('sdt-equation-facr2far', SDTEquationFaCr2Far);
 
-  let _$4 = t => t,
-      _t$4,
-      _t2$4,
-      _t3$3,
-      _t4$3,
-      _t5$3,
-      _t6$3,
-      _t7$3;
+  let _$6 = t => t,
+      _t$6,
+      _t2$6,
+      _t3$5,
+      _t4$5,
+      _t5$5,
+      _t6$5,
+      _t7$5;
   /*
-    SDTEquationHM2Hr element
+    SDTEquationHFa2Ppv element
+    <sdt-equation-hm2hr>
+
+    Attributes:
+    Hits; Misses; Hit Rate;
+  */
+
+  class SDTEquationHFa2Ppv extends SDTEquation {
+    static get properties() {
+      return {
+        h: {
+          attribute: 'hits',
+          type: Number,
+          reflect: true
+        },
+        fa: {
+          attribute: 'false-alarms',
+          type: Number,
+          reflect: true
+        },
+        ppv: {
+          attribute: false,
+          type: Number,
+          reflect: false
+        }
+      };
+    }
+
+    constructor() {
+      super();
+      this.h = 0;
+      this.fa = 0;
+      this.alignState();
+    }
+
+    alignState() {
+      this.ppv = SDTMath.hFa2Ppv(this.h, this.fa);
+    }
+
+    sendEvent() {
+      this.dispatchEvent(new CustomEvent('sdt-equation-hfa2ppv-change', {
+        detail: {
+          h: this.h,
+          fa: this.fa,
+          ppv: this.ppv
+        },
+        bubbles: true
+      }));
+    }
+
+    hInput(event) {
+      this.h = parseInt(event.target.value, 10);
+      this.alignState();
+      this.sendEvent();
+    }
+
+    faInput(event) {
+      this.fa = parseInt(event.target.value, 10);
+      this.alignState();
+      this.sendEvent();
+    }
+
+    render() {
+      this.alignState();
+      let h;
+      let fa;
+      let ppv;
+
+      if (this.numeric) {
+        h = $(_t$6 || (_t$6 = _$6`
+        <decidables-spinner class="h" ?disabled=${0} min="0" .value="${0}" @input=${0}>
+          <var>Hits</var>
+        </decidables-spinner>
+      `), !this.interactive, this.h, this.hInput.bind(this));
+        fa = $(_t2$6 || (_t2$6 = _$6`
+        <decidables-spinner class="fa" ?disabled=${0} min="0" .value="${0}" @input=${0}>
+          <var>False Alarms</var>
+        </decidables-spinner>
+      `), !this.interactive, this.fa, this.faInput.bind(this));
+        ppv = $(_t3$5 || (_t3$5 = _$6`
+        <decidables-spinner class="ppv" disabled min="0" max="1" step=".001" .value="${0}">
+          <var>Positive Predictive Value</var>
+        </decidables-spinner>
+      `), +this.ppv.toFixed(3));
+      } else {
+        h = $(_t4$5 || (_t4$5 = _$6`<var class="h">Hits</var>`));
+        fa = $(_t5$5 || (_t5$5 = _$6`<var class="fa">False Alarms</var>`));
+        ppv = $(_t6$5 || (_t6$5 = _$6`<var class="ppv">Positive Predictive Value</var>`));
+      }
+
+      return $(_t7$5 || (_t7$5 = _$6`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            <tr>
+              <td rowspan="2">
+                ${0}<span class="equals">=</span>
+              </td>
+              <td class="underline">
+                ${0}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                ${0}<span class="plus">+</span>${0}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `), ppv, h, h, fa);
+    }
+
+  }
+  customElements.define('sdt-equation-hfa2ppv', SDTEquationHFa2Ppv);
+
+  let _$5 = t => t,
+      _t$5,
+      _t2$5,
+      _t3$4,
+      _t4$4,
+      _t5$4,
+      _t6$4,
+      _t7$4;
+  /*
+    SDTEquationHM2Hr element
     <sdt-equation-hm2hr>
 
     Attributes:
@@ -17621,28 +17802,28 @@
       let hr;
 
       if (this.numeric) {
-        h = $(_t$4 || (_t$4 = _$4`
+        h = $(_t$5 || (_t$5 = _$5`
         <decidables-spinner class="h" ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <var>Hits</var>
         </decidables-spinner>
       `), !this.interactive, this.h, this.hInput.bind(this));
-        m = $(_t2$4 || (_t2$4 = _$4`
+        m = $(_t2$5 || (_t2$5 = _$5`
         <decidables-spinner class="m" ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <var>Misses</var>
         </decidables-spinner>
       `), !this.interactive, this.m, this.mInput.bind(this));
-        hr = $(_t3$3 || (_t3$3 = _$4`
+        hr = $(_t3$4 || (_t3$4 = _$5`
         <decidables-spinner class="hr" disabled min="0" max="1" step=".001" .value="${0}">
           <var>Hit Rate</var>
         </decidables-spinner>
       `), +this.hr.toFixed(3));
       } else {
-        h = $(_t4$3 || (_t4$3 = _$4`<var class="h">Hits</var>`));
-        m = $(_t5$3 || (_t5$3 = _$4`<var class="m">Misses</var>`));
-        hr = $(_t6$3 || (_t6$3 = _$4`<var class="hr">Hit Rate</var>`));
+        h = $(_t4$4 || (_t4$4 = _$5`<var class="h">Hits</var>`));
+        m = $(_t5$4 || (_t5$4 = _$5`<var class="m">Misses</var>`));
+        hr = $(_t6$4 || (_t6$4 = _$5`<var class="hr">Hit Rate</var>`));
       }
 
-      return $(_t7$3 || (_t7$3 = _$4`
+      return $(_t7$4 || (_t7$4 = _$5`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -17668,14 +17849,14 @@
   }
   customElements.define('sdt-equation-hm2hr', SDTEquationHM2Hr);
 
-  let _$3 = t => t,
-      _t$3,
-      _t2$3,
-      _t3$2,
-      _t4$2,
-      _t5$2,
-      _t6$2,
-      _t7$2,
+  let _$4 = t => t,
+      _t$4,
+      _t2$4,
+      _t3$3,
+      _t4$3,
+      _t5$3,
+      _t6$3,
+      _t7$3,
       _t8$2,
       _t9$2,
       _t10$2,
@@ -17778,40 +17959,40 @@
       let acc;
 
       if (this.numeric) {
-        h = $(_t$3 || (_t$3 = _$3`
+        h = $(_t$4 || (_t$4 = _$4`
         <decidables-spinner class="h" ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <var>Hits</var>
         </decidables-spinner>
       `), !this.interactive, this.h, this.hInput.bind(this));
-        m = $(_t2$3 || (_t2$3 = _$3`
+        m = $(_t2$4 || (_t2$4 = _$4`
         <decidables-spinner class="m" ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <var>Misses</var>
         </decidables-spinner>
       `), !this.interactive, this.m, this.mInput.bind(this));
-        fa = $(_t3$2 || (_t3$2 = _$3`
+        fa = $(_t3$3 || (_t3$3 = _$4`
         <decidables-spinner class="fa" ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <var>False Alarms</var>
         </decidables-spinner>
       `), !this.interactive, this.fa, this.faInput.bind(this));
-        cr = $(_t4$2 || (_t4$2 = _$3`
+        cr = $(_t4$3 || (_t4$3 = _$4`
         <decidables-spinner class="cr" ?disabled=${0} min="0" .value="${0}" @input=${0}>
           <var>Correct Rejections</var>
         </decidables-spinner>
       `), !this.interactive, this.cr, this.crInput.bind(this));
-        acc = $(_t5$2 || (_t5$2 = _$3`
+        acc = $(_t5$3 || (_t5$3 = _$4`
         <decidables-spinner class="acc" disabled min="0" max="1" step=".001" .value="${0}">
           <var>Accuracy</var>
         </decidables-spinner>
       `), +this.acc.toFixed(3));
       } else {
-        h = $(_t6$2 || (_t6$2 = _$3`<var class="h">Hits</var>`));
-        m = $(_t7$2 || (_t7$2 = _$3`<var class="m">Misses</var>`));
-        fa = $(_t8$2 || (_t8$2 = _$3`<var class="fa">False Alarms</var>`));
-        cr = $(_t9$2 || (_t9$2 = _$3`<var class="cr">Correct Rejections</var>`));
-        acc = $(_t10$2 || (_t10$2 = _$3`<var class="acc">Accuracy</var>`));
+        h = $(_t6$3 || (_t6$3 = _$4`<var class="h">Hits</var>`));
+        m = $(_t7$3 || (_t7$3 = _$4`<var class="m">Misses</var>`));
+        fa = $(_t8$2 || (_t8$2 = _$4`<var class="fa">False Alarms</var>`));
+        cr = $(_t9$2 || (_t9$2 = _$4`<var class="cr">Correct Rejections</var>`));
+        acc = $(_t10$2 || (_t10$2 = _$4`<var class="acc">Accuracy</var>`));
       }
 
-      return $(_t11$2 || (_t11$2 = _$3`
+      return $(_t11$2 || (_t11$2 = _$4`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -17830,20 +18011,20 @@
             </tr>
           </tbody>
         </table>
-      </div>`), acc, h, cr, h, m, fa, cr);
+      </div>`), acc, h, cr, h, cr, m, fa);
     }
 
   }
   customElements.define('sdt-equation-hmfacr2acc', SDTEquationHMFaCr2Acc);
 
-  let _$2 = t => t,
-      _t$2,
-      _t2$2,
-      _t3$1,
-      _t4$1,
-      _t5$1,
-      _t6$1,
-      _t7$1,
+  let _$3 = t => t,
+      _t$3,
+      _t2$3,
+      _t3$2,
+      _t4$2,
+      _t5$2,
+      _t6$2,
+      _t7$2,
       _t8$1,
       _t9$1,
       _t10$1,
@@ -17938,37 +18119,37 @@
       let c;
 
       if (this.numeric) {
-        hr = $(_t$2 || (_t$2 = _$2`
+        hr = $(_t$3 || (_t$3 = _$3`
         <decidables-spinner class="hr bottom" ?disabled=${0} min="0" max="1" step=".001" .value="${0}" @input=${0}>
           <var>Hit Rate</var>
         </decidables-spinner>
       `), !this.interactive, this.hr, this.hrInput.bind(this));
-        far = $(_t2$2 || (_t2$2 = _$2`
+        far = $(_t2$3 || (_t2$3 = _$3`
         <decidables-spinner class="far bottom" ?disabled=${0} min="0" max="1" step=".001" .value="${0}" @input=${0}>
           <var>False Alarm Rate</var>
         </decidables-spinner>
       `), !this.interactive, this.far, this.farInput.bind(this));
-        s = $(_t3$1 || (_t3$1 = _$2`
+        s = $(_t3$2 || (_t3$2 = _$3`
         <decidables-spinner class="s bottom" ?disabled=${0} min="0" step=".001" .value="${0}" @input=${0}>
           <var class="math-var">σ</var>
         </decidables-spinner>
       `), !this.interactive, this.s, this.sInput.bind(this));
-        c = $(_t4$1 || (_t4$1 = _$2`
+        c = $(_t4$2 || (_t4$2 = _$3`
         <decidables-spinner class="c bottom" disabled step=".001" .value="${0}">
           <var class="math-var">c</var>
         </decidables-spinner>
       `), +this.c.toFixed(3));
       } else {
-        hr = $(_t5$1 || (_t5$1 = _$2`<var class="hr">Hit Rate</var>`));
-        far = $(_t6$1 || (_t6$1 = _$2`<var class="far">False Alarm Rate</var>`));
-        s = $(_t7$1 || (_t7$1 = _$2`<var class="math-var s">σ</var>`));
-        c = $(_t8$1 || (_t8$1 = _$2`<var class="math-var c">c</var>`));
+        hr = $(_t5$2 || (_t5$2 = _$3`<var class="hr">Hit Rate</var>`));
+        far = $(_t6$2 || (_t6$2 = _$3`<var class="far">False Alarm Rate</var>`));
+        s = $(_t7$2 || (_t7$2 = _$3`<var class="math-var s">σ</var>`));
+        c = $(_t8$1 || (_t8$1 = _$3`<var class="math-var c">c</var>`));
       }
 
       let equation;
 
       if (this.unequal) {
-        equation = $(_t9$1 || (_t9$1 = _$2`
+        equation = $(_t9$1 || (_t9$1 = _$3`
         <tr>
           <td rowspan="2">
             ${0}<span class="equals">=</span><span class="bracket tight">(</span>
@@ -17995,7 +18176,7 @@
           </td>
         </tr>`), c, s, s, hr, far, s);
       } else {
-        equation = $(_t10$1 || (_t10$1 = _$2`
+        equation = $(_t10$1 || (_t10$1 = _$3`
         <tr>
           <td rowspan="2">
             ${0}<span class="equals">=</span>
@@ -18011,7 +18192,7 @@
         </tr>`), c, hr, far);
       }
 
-      return $(_t11$1 || (_t11$1 = _$2`
+      return $(_t11$1 || (_t11$1 = _$3`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -18024,14 +18205,14 @@
   }
   customElements.define('sdt-equation-hrfar2c', SDTEquationHrFar2C);
 
-  let _$1 = t => t,
-      _t$1,
-      _t2$1,
-      _t3,
-      _t4,
-      _t5,
-      _t6,
-      _t7,
+  let _$2 = t => t,
+      _t$2,
+      _t2$2,
+      _t3$1,
+      _t4$1,
+      _t5$1,
+      _t6$1,
+      _t7$1,
       _t8,
       _t9,
       _t10,
@@ -18126,37 +18307,37 @@
       let d;
 
       if (this.numeric) {
-        hr = $(_t$1 || (_t$1 = _$1`
+        hr = $(_t$2 || (_t$2 = _$2`
         <decidables-spinner class="hr bottom" ?disabled=${0} min="0" max="1" step=".001" .value="${0}" @input=${0}>
           <var>Hit Rate</var>
         </decidables-spinner>
       `), !this.interactive, this.hr, this.hrInput.bind(this));
-        far = $(_t2$1 || (_t2$1 = _$1`
+        far = $(_t2$2 || (_t2$2 = _$2`
         <decidables-spinner class="far bottom" ?disabled=${0} min="0" max="1" step=".001" .value="${0}" @input=${0}>
           <var>False Alarm Rate</var>
         </decidables-spinner>
       `), !this.interactive, this.far, this.farInput.bind(this));
-        s = $(_t3 || (_t3 = _$1`
+        s = $(_t3$1 || (_t3$1 = _$2`
         <decidables-spinner class="s bottom" ?disabled=${0} min="0" step=".001" .value="${0}" @input=${0}>
           <var class="math-var">σ</var>
         </decidables-spinner>
       `), !this.interactive, this.s, this.sInput.bind(this));
-        d = $(_t4 || (_t4 = _$1`
+        d = $(_t4$1 || (_t4$1 = _$2`
         <decidables-spinner class="d bottom" disabled step=".001" .value="${0}">
           <var class="math-var">d′</var>
         </decidables-spinner>
       `), +this.d.toFixed(3));
       } else {
-        hr = $(_t5 || (_t5 = _$1`<var class="hr">Hit Rate</var>`));
-        far = $(_t6 || (_t6 = _$1`<var class="far">False Alarm Rate</var>`));
-        s = $(_t7 || (_t7 = _$1`<var class="math-var s">σ</var>`));
-        d = $(_t8 || (_t8 = _$1`<var class="math-var d">d′</var>`));
+        hr = $(_t5$1 || (_t5$1 = _$2`<var class="hr">Hit Rate</var>`));
+        far = $(_t6$1 || (_t6$1 = _$2`<var class="far">False Alarm Rate</var>`));
+        s = $(_t7$1 || (_t7$1 = _$2`<var class="math-var s">σ</var>`));
+        d = $(_t8 || (_t8 = _$2`<var class="math-var d">d′</var>`));
       }
 
       let equation;
 
       if (this.unequal) {
-        equation = $(_t9 || (_t9 = _$1`
+        equation = $(_t9 || (_t9 = _$2`
         <tr>
           <td rowspan="2">
             ${0}<span class="equals">=</span><span class="bracket tight">(</span>
@@ -18174,7 +18355,7 @@
           </td>
         </tr>`), d, s, s, hr, far);
       } else {
-        equation = $(_t10 || (_t10 = _$1`
+        equation = $(_t10 || (_t10 = _$2`
         <tr>
           <td>
               ${0}<span class="equals">=</span><span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${0}<span class="paren tight">)</span><span class="minus">−</span><span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${0}<span class="paren tight">)</span>
@@ -18182,7 +18363,7 @@
         </tr>`), d, hr, far);
       }
 
-      return $(_t11 || (_t11 = _$1`
+      return $(_t11 || (_t11 = _$2`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -18195,6 +18376,131 @@
   }
   customElements.define('sdt-equation-hrfar2d', SDTEquationHrFar2D);
 
+  let _$1 = t => t,
+      _t$1,
+      _t2$1,
+      _t3,
+      _t4,
+      _t5,
+      _t6,
+      _t7;
+  /*
+    SDTEquationMCr2Fomr element
+    <sdt-equation-mcr2fomr>
+
+    Attributes:
+    Hits; Misses; Hit Rate;
+  */
+
+  class SDTEquationMCr2Fomr extends SDTEquation {
+    static get properties() {
+      return {
+        m: {
+          attribute: 'misses',
+          type: Number,
+          reflect: true
+        },
+        cr: {
+          attribute: 'correct-rejections',
+          type: Number,
+          reflect: true
+        },
+        fomr: {
+          attribute: false,
+          type: Number,
+          reflect: false
+        }
+      };
+    }
+
+    constructor() {
+      super();
+      this.m = 0;
+      this.cr = 0;
+      this.alignState();
+    }
+
+    alignState() {
+      this.fomr = SDTMath.mCr2Fomr(this.m, this.cr);
+    }
+
+    sendEvent() {
+      this.dispatchEvent(new CustomEvent('sdt-equation-mcr2fomr-change', {
+        detail: {
+          m: this.m,
+          cr: this.cr,
+          fomr: this.fomr
+        },
+        bubbles: true
+      }));
+    }
+
+    mInput(event) {
+      this.m = parseInt(event.target.value, 10);
+      this.alignState();
+      this.sendEvent();
+    }
+
+    crInput(event) {
+      this.cr = parseInt(event.target.value, 10);
+      this.alignState();
+      this.sendEvent();
+    }
+
+    render() {
+      this.alignState();
+      let m;
+      let cr;
+      let fomr;
+
+      if (this.numeric) {
+        m = $(_t$1 || (_t$1 = _$1`
+        <decidables-spinner class="m" ?disabled=${0} min="0" .value="${0}" @input=${0}>
+          <var>Misses</var>
+        </decidables-spinner>
+      `), !this.interactive, this.m, this.mInput.bind(this));
+        cr = $(_t2$1 || (_t2$1 = _$1`
+        <decidables-spinner class="cr" ?disabled=${0} min="0" .value="${0}" @input=${0}>
+          <var>Correct Rejections</var>
+        </decidables-spinner>
+      `), !this.interactive, this.cr, this.crInput.bind(this));
+        fomr = $(_t3 || (_t3 = _$1`
+        <decidables-spinner class="fomr" disabled min="0" max="1" step=".001" .value="${0}">
+          <var>False Omission Rate</var>
+        </decidables-spinner>
+      `), +this.fomr.toFixed(3));
+      } else {
+        m = $(_t4 || (_t4 = _$1`<var class="m">Misses</var>`));
+        cr = $(_t5 || (_t5 = _$1`<var class="cr">Correct Rejections</var>`));
+        fomr = $(_t6 || (_t6 = _$1`<var class="fomr">False Omission Rate</var>`));
+      }
+
+      return $(_t7 || (_t7 = _$1`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            <tr>
+              <td rowspan="2">
+                ${0}<span class="equals">=</span>
+              </td>
+              <td class="underline">
+                ${0}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                ${0}<span class="plus">+</span>${0}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `), fomr, m, m, cr);
+    }
+
+  }
+  customElements.define('sdt-equation-mcr2fomr', SDTEquationMCr2Fomr);
+
   let _ = t => t,
       _t,
       _t2;
@@ -18207,12 +18513,8 @@
     static get styles() {
       return [super.styles, r$2(_t || (_t = _`
         :host {
-          ---border: var(--border, 1px solid var(---color-border));
           display: inline-block;
 
-          /* This makes IE11 happy */
-          width: 100%;
-
           margin-bottom: 1rem;
         }
 
@@ -18231,7 +18533,7 @@
           padding: 0.625rem;
 
           border: var(---border);
-          border-radius: 0.25rem;
+          border-radius: var(---border-radius);
         }
 
         .body ::slotted(*) {
@@ -18257,7 +18559,7 @@
     }
 
     render() {
-      // eslint-disable-line class-methods-use-this
+      /* eslint-disable-line class-methods-use-this */
       return $(_t2 || (_t2 = _`
       <div class="holder">
         <div class="body">
@@ -18905,6 +19207,81 @@
   }
   customElements.define('sdt-example-model', SDTExampleModel);
 
+  /*
+    SDTExampleMulti element
+    <sdt-example-multi>
+  */
+
+  class SDTExampleMultiple extends SDTExample {
+    static get properties() {
+      return {
+        variable: {
+          attribute: 'variable',
+          type: String,
+          reflect: true
+        },
+        values: {
+          attribute: 'values',
+          converter: DecidablesConverterArray,
+          reflect: true
+        }
+      };
+    }
+
+    constructor() {
+      super();
+      this.variables = ['d', 'c'];
+      this.variable = 'd';
+      this.values = [0, 1];
+    }
+
+    firstUpdated() {
+      this.detectableControl = this.querySelector('detectable-control');
+      this.rocSpace = this.querySelector('roc-space');
+      this.sdtModel = this.querySelector('sdt-model');
+
+      if (this.detectableControl) {
+        this.detectableControl.addEventListener('detectable-control-z-roc', event => {
+          this.rocSpace.zRoc = event.detail.zRoc;
+        });
+      }
+
+      if (this.rocSpace) {
+        this.rocSpace.setWithSDT(1, 0, 'default', '', 1);
+
+        if (this.variable === 'd') {
+          this.values.forEach((d, index) => {
+            this.rocSpace.setWithSDT(d, this.sdtModel.c, `point${index}`, index + 1, this.sdtModel.s);
+          });
+        } else if (this.variable === 'c') {
+          this.values.forEach((c, index) => {
+            this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, index + 1, this.sdtModel.s);
+          });
+        }
+      }
+
+      if (this.sdtModel) {
+        this.sdtModel.addEventListener('sdt-model-change', event => {
+          if (this.rocSpace) {
+            this.rocSpace.setWithSDT(event.detail.d, event.detail.c, 'default', '', event.detail.s);
+
+            if (this.variable === 'd') {
+              this.values.forEach((d, index) => {
+                this.rocSpace.setWithSDT(d, event.detail.c, `point${index}`, index + 1, event.detail.s);
+              });
+            } else if (this.variable === 'c') {
+              this.values.forEach((c, index) => {
+                this.rocSpace.setWithSDT(event.detail.d, c, `point${index}`, index + 1, event.detail.s);
+              });
+            }
+          }
+        });
+      }
+    }
+
+  }
+  customElements.define('sdt-example-multiple', SDTExampleMultiple);
+
   /*
     SDTExampleUnequal element
     <sdt-example-unequal>
@@ -18924,15 +19301,13 @@
 
       if (this.rocSpace) {
         this.rocSpace.setWithSDT(1, 0, 'default', '', 1); // Set 'default' to equal variance for contours
+
+        range(-1.5, 1.6, 0.5).forEach((c, index) => {
+          this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, '', this.sdtModel.s);
+        });
       }
 
       if (this.sdtModel) {
-        if (this.rocSpace) {
-          range(-1.5, 1.6, 0.5).forEach((c, index) => {
-            this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, '', this.sdtModel.s);
-          });
-        }
-
         this.sdtModel.addEventListener('sdt-model-change', event => {
           if (this.rocSpace) {
             range(-1.5, 1.6, 0.5).forEach((c, index) => {
@@ -18955,14 +19330,17 @@
   exports.SDTEquationDC2Far = SDTEquationDC2Far;
   exports.SDTEquationDC2Hr = SDTEquationDC2Hr;
   exports.SDTEquationFaCr2Far = SDTEquationFaCr2Far;
+  exports.SDTEquationHFa2Ppv = SDTEquationHFa2Ppv;
   exports.SDTEquationHM2Hr = SDTEquationHM2Hr;
   exports.SDTEquationHMFaCr2Acc = SDTEquationHMFaCr2Acc;
   exports.SDTEquationHrFar2C = SDTEquationHrFar2C;
   exports.SDTEquationHrFar2D = SDTEquationHrFar2D;
+  exports.SDTEquationMCr2Fomr = SDTEquationMCr2Fomr;
   exports.SDTExampleDoubleInteractive = SDTExampleDoubleInteractive;
   exports.SDTExampleHuman = SDTExampleHuman;
   exports.SDTExampleInteractive = SDTExampleInteractive;
   exports.SDTExampleModel = SDTExampleModel;
+  exports.SDTExampleMultiple = SDTExampleMultiple;
   exports.SDTExampleUnequal = SDTExampleUnequal;
   exports.SDTModel = SDTModel;