@decidables/prospectable-elements 0.5.1 → 0.6.0

package/lib/prospectableElements.esm.js

@@ -107,7 +107,7 @@ const {
     hasChanged: f$3
   };
 Symbol.metadata ??= Symbol("metadata"), a$3.litPropertyMetadata ??= new WeakMap();
-let y$3 = class y extends HTMLElement {
+let y$2 = class y extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
   }
@@ -311,10 +311,10 @@ let y$3 = class y extends HTMLElement {
   updated(t) {}
   firstUpdated(t) {}
 };
-y$3.elementStyles = [], y$3.shadowRootOptions = {
+y$2.elementStyles = [], y$2.shadowRootOptions = {
   mode: "open"
-}, y$3[d$2("elementProperties")] = new Map(), y$3[d$2("finalized")] = new Map(), p$1?.({
-  ReactiveElement: y$3
+}, y$2[d$2("elementProperties")] = new Map(), y$2[d$2("finalized")] = new Map(), p$1?.({
+  ReactiveElement: y$2
 }), (a$3.reactiveElementVersions ??= []).push("2.1.1");
 
 /**
@@ -344,13 +344,13 @@ const t$1 = globalThis,
   p = /'/g,
   g$1 = /"/g,
   $ = /^(?:script|style|textarea|title)$/i,
-  y$2 = t => (i, ...s) => ({
+  y$1 = t => (i, ...s) => ({
     _$litType$: t,
     strings: i,
     values: s
   }),
-  x$3 = y$2(1),
-  b$1 = y$2(2),
+  x$2 = y$1(1),
+  b$1 = y$1(2),
   T = Symbol.for("lit-noChange"),
   E$1 = Symbol.for("lit-nothing"),
   A$2 = new WeakMap(),
@@ -472,7 +472,7 @@ let M$1 = class M {
     for (; void 0 !== l;) {
       if (o === l.index) {
         let i;
-        2 === l.type ? i = new R(h, h.nextSibling, this, t) : 1 === l.type ? i = new l.ctor(h, l.name, l.strings, this, t) : 6 === l.type && (i = new z$1(h, this, t)), this._$AV.push(i), l = s[++n];
+        2 === l.type ? i = new R(h, h.nextSibling, this, t) : 1 === l.type ? i = new l.ctor(h, l.name, l.strings, this, t) : 6 === l.type && (i = new z(h, this, t)), this._$AV.push(i), l = s[++n];
       }
       o !== l?.index && (h = C$1.nextNode(), o++);
     }
@@ -602,7 +602,7 @@ class L extends k$1 {
     "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
   }
 }
-let z$1 = class z {
+class z {
   constructor(t, i, s) {
     this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
   }
@@ -612,7 +612,7 @@ let z$1 = class z {
   _$AI(t) {
     S(this, t);
   }
-};
+}
 const j$1 = t$1.litHtmlPolyfillSupport;
 j$1?.(N$1, R), (t$1.litHtmlVersions ??= []).push("3.3.1");
 const B$1 = (t, i, s) => {
@@ -631,7 +631,7 @@ const B$1 = (t, i, s) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const s$2 = globalThis;
-let i$2 = class i extends y$3 {
+let i$2 = class i extends y$2 {
   constructor() {
     super(...arguments), this.renderOptions = {
       host: this
@@ -1016,7 +1016,7 @@ function permute(source, keys) {
   return Array.from(keys, key => source[key]);
 }
 
-function sort$2(values, ...F) {
+function sort$1(values, ...F) {
   if (typeof values[Symbol.iterator] !== "function") throw new TypeError("values is not iterable");
   values = Array.from(values);
   let [f] = F;
@@ -1052,7 +1052,7 @@ function ascendingDefined$1(a, b) {
 }
 
 function groupSort(values, reduce, key) {
-  return (reduce.length !== 2 ? sort$2(rollup(values, reduce, key), ([ak, av], [bk, bv]) => ascending$1(av, bv) || ascending$1(ak, bk)) : sort$2(group(values, key), ([ak, av], [bk, bv]) => reduce(av, bv) || ascending$1(ak, bk))).map(([key]) => key);
+  return (reduce.length !== 2 ? sort$1(rollup(values, reduce, key), ([ak, av], [bk, bv]) => ascending$1(av, bv) || ascending$1(ak, bk)) : sort$1(group(values, key), ([ak, av], [bk, bv]) => reduce(av, bv) || ascending$1(ak, bk))).map(([key]) => key);
 }
 
 const e10 = Math.sqrt(50),
@@ -7240,7 +7240,7 @@ function pointish(scale) {
   };
   return scale;
 }
-function point$5() {
+function point$4() {
   return pointish(band.apply(null, arguments).paddingInner(1));
 }
 
@@ -9246,21 +9246,21 @@ function curveLinear (context) {
   return new Linear(context);
 }
 
-function x$2(p) {
+function x$1(p) {
   return p[0];
 }
-function y$1(p) {
+function y(p) {
   return p[1];
 }
 
-function shapeLine (x, y) {
+function shapeLine (x, y$1) {
   var defined = constant$1(true),
     context = null,
     curve = curveLinear,
     output = null,
     path = withPath(line);
-  x = typeof x === "function" ? x : x === undefined ? x$2 : constant$1(x);
-  y = typeof y === "function" ? y : y === undefined ? y$1 : constant$1(y);
+  x = typeof x === "function" ? x : x === undefined ? x$1 : constant$1(x);
+  y$1 = typeof y$1 === "function" ? y$1 : y$1 === undefined ? y : constant$1(y$1);
   function line(data) {
     var i,
       n = (data = array(data)).length,
@@ -9272,7 +9272,7 @@ function shapeLine (x, y) {
       if (!(i < n && defined(d = data[i], i, data)) === defined0) {
         if (defined0 = !defined0) output.lineStart();else output.lineEnd();
       }
-      if (defined0) output.point(+x(d, i, data), +y(d, i, data));
+      if (defined0) output.point(+x(d, i, data), +y$1(d, i, data));
     }
     if (buffer) return output = null, buffer + "" || null;
   }
@@ -9280,7 +9280,7 @@ function shapeLine (x, y) {
     return arguments.length ? (x = typeof _ === "function" ? _ : constant$1(+_), line) : x;
   };
   line.y = function (_) {
-    return arguments.length ? (y = typeof _ === "function" ? _ : constant$1(+_), line) : y;
+    return arguments.length ? (y$1 = typeof _ === "function" ? _ : constant$1(+_), line) : y$1;
   };
   line.defined = function (_) {
     return arguments.length ? (defined = typeof _ === "function" ? _ : constant$1(!!_), line) : defined;
@@ -9602,7 +9602,7 @@ const symbolsStroke = [symbolCircle, symbolPlus, symbolTimes, symbolTriangle2, s
 
 function noop () {}
 
-function point$4(that, x, y) {
+function point$3(that, x, y) {
   that._context.bezierCurveTo((2 * that._x0 + that._x1) / 3, (2 * that._y0 + that._y1) / 3, (that._x0 + 2 * that._x1) / 3, (that._y0 + 2 * that._y1) / 3, (that._x0 + 4 * that._x1 + x) / 6, (that._y0 + 4 * that._y1 + y) / 6);
 }
 function Basis(context) {
@@ -9622,7 +9622,7 @@ Basis.prototype = {
   lineEnd: function () {
     switch (this._point) {
       case 3:
-        point$4(this, this._x1, this._y1);
+        point$3(this, this._x1, this._y1);
       // falls through
       case 2:
         this._context.lineTo(this._x1, this._y1);
@@ -9646,7 +9646,7 @@ Basis.prototype = {
         this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6);
       // falls through
       default:
-        point$4(this, x, y);
+        point$3(this, x, y);
         break;
     }
     this._x0 = this._x1, this._x1 = x;
@@ -9708,7 +9708,7 @@ BasisClosed.prototype = {
         this._context.moveTo((this._x0 + 4 * this._x1 + x) / 6, (this._y0 + 4 * this._y1 + y) / 6);
         break;
       default:
-        point$4(this, x, y);
+        point$3(this, x, y);
         break;
     }
     this._x0 = this._x1, this._x1 = x;
@@ -9756,7 +9756,7 @@ BasisOpen.prototype = {
         this._point = 4;
       // falls through
       default:
-        point$4(this, x, y);
+        point$3(this, x, y);
         break;
     }
     this._x0 = this._x1, this._x1 = x;
@@ -9811,7 +9811,7 @@ var curveBundle = (function custom(beta) {
   return bundle;
 })(0.85);
 
-function point$3(that, x, y) {
+function point$2(that, x, y) {
   that._context.bezierCurveTo(that._x1 + that._k * (that._x2 - that._x0), that._y1 + that._k * (that._y2 - that._y0), that._x2 + that._k * (that._x1 - x), that._y2 + that._k * (that._y1 - y), that._x2, that._y2);
 }
 function Cardinal(context, tension) {
@@ -9835,7 +9835,7 @@ Cardinal.prototype = {
         this._context.lineTo(this._x2, this._y2);
         break;
       case 3:
-        point$3(this, this._x1, this._y1);
+        point$2(this, this._x1, this._y1);
         break;
     }
     if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
@@ -9856,7 +9856,7 @@ Cardinal.prototype = {
         this._point = 3;
       // falls through
       default:
-        point$3(this, x, y);
+        point$2(this, x, y);
         break;
     }
     this._x0 = this._x1, this._x1 = this._x2, this._x2 = x;
@@ -9923,7 +9923,7 @@ CardinalClosed.prototype = {
         this._x5 = x, this._y5 = y;
         break;
       default:
-        point$3(this, x, y);
+        point$2(this, x, y);
         break;
     }
     this._x0 = this._x1, this._x1 = this._x2, this._x2 = x;
@@ -9976,7 +9976,7 @@ CardinalOpen.prototype = {
         this._point = 4;
       // falls through
       default:
-        point$3(this, x, y);
+        point$2(this, x, y);
         break;
     }
     this._x0 = this._x1, this._x1 = this._x2, this._x2 = x;
@@ -9993,7 +9993,7 @@ var curveCardinalOpen = (function custom(tension) {
   return cardinal;
 })(0);
 
-function point$2(that, x, y) {
+function point$1(that, x, y) {
   var x1 = that._x1,
     y1 = that._y1,
     x2 = that._x2,
@@ -10058,7 +10058,7 @@ CatmullRom.prototype = {
         this._point = 3;
       // falls through
       default:
-        point$2(this, x, y);
+        point$1(this, x, y);
         break;
     }
     this._l01_a = this._l12_a, this._l12_a = this._l23_a;
@@ -10132,7 +10132,7 @@ CatmullRomClosed.prototype = {
         this._x5 = x, this._y5 = y;
         break;
       default:
-        point$2(this, x, y);
+        point$1(this, x, y);
         break;
     }
     this._l01_a = this._l12_a, this._l12_a = this._l23_a;
@@ -10192,7 +10192,7 @@ CatmullRomOpen.prototype = {
         this._point = 4;
       // falls through
       default:
-        point$2(this, x, y);
+        point$1(this, x, y);
         break;
     }
     this._l01_a = this._l12_a, this._l12_a = this._l23_a;
@@ -10258,7 +10258,7 @@ function slope2(that, t) {
 // According to https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Representations
 // "you can express cubic Hermite interpolation in terms of cubic Bézier curves
 // with respect to the four values p0, p0 + m0 / 3, p1 - m1 / 3, p1".
-function point$1(that, t0, t1) {
+function point(that, t0, t1) {
   var x0 = that._x0,
     y0 = that._y0,
     x1 = that._x1,
@@ -10286,7 +10286,7 @@ MonotoneX.prototype = {
         this._context.lineTo(this._x1, this._y1);
         break;
       case 3:
-        point$1(this, this._t0, slope2(this, this._t0));
+        point(this, this._t0, slope2(this, this._t0));
         break;
     }
     if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
@@ -10306,10 +10306,10 @@ MonotoneX.prototype = {
         break;
       case 2:
         this._point = 3;
-        point$1(this, slope2(this, t1 = slope3(this, x, y)), t1);
+        point(this, slope2(this, t1 = slope3(this, x, y)), t1);
         break;
       default:
-        point$1(this, this._t0, t1 = slope3(this, x, y));
+        point(this, this._t0, t1 = slope3(this, x, y));
         break;
     }
     this._x0 = this._x1, this._x1 = x;
@@ -10516,18 +10516,6 @@ class DecidablesElement extends i$2 {
   getComputedStyleValue(property) {
     return getComputedStyle(this).getPropertyValue(property).trim();
   }
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    // Use focus highlighting if keyboard is used at all
-    select(this.renderRoot.host).classed('keyboard', true).on('mousemove.keyboard touchstart.keyboard', event => {
-      const element = event.currentTarget;
-      select(element.renderRoot.host).classed('keyboard', false).on('mousemove.keyboard touchstart.keyboard', null);
-    }).on('keydown.keyboard', event => {
-      const element = event.currentTarget;
-      select(element.renderRoot.host).classed('keyboard', true).on('keydown.keyboard mousemove.keyboard touchstart.keyboard', null);
-    });
-  }
   static get greys() {
     const grey = '#999999';
     const greys = {};
@@ -10663,7 +10651,7 @@ class DecidablesElement extends i$2 {
     };
     /* eslint-enable key-spacing, object-curly-newline */
   }
-  static cssBoxShadow(elevation, rotate = false, inverse = false) {
+  static cssBoxShadow(elevation, inverse = false) {
     const umbraO = this.shadows.opacityUmbra + this.shadows.opacityBoost;
     const penumbraO = this.shadows.opacityPenumbra + this.shadows.opacityBoost;
     const ambientO = this.shadows.opacityAmbient + this.shadows.opacityBoost;
@@ -10673,9 +10661,9 @@ class DecidablesElement extends i$2 {
     const umbraM = this.shadows.mapUmbra[elevation];
     const penumbraM = this.shadows.mapPenumbra[elevation];
     const ambientM = this.shadows.mapAmbient[elevation];
-    const umbraS = rotate ? `${-umbraM.y}px ${umbraM.y / 2}px ${umbraM.b}px ${umbraM.s}px` : `${umbraM.y / 2}px ${umbraM.y}px ${umbraM.b}px ${umbraM.s}px`;
-    const penumbraS = rotate ? `${-penumbraM.y}px ${penumbraM.y / 2}px ${penumbraM.b}px ${penumbraM.s}px` : `${penumbraM.y / 2}px ${penumbraM.y}px ${penumbraM.b}px ${penumbraM.s}px`;
-    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`;
+    const umbraS = `${umbraM.y / 2}px ${umbraM.y}px ${umbraM.b}px ${umbraM.s}px`;
+    const penumbraS = `${penumbraM.y / 2}px ${penumbraM.y}px ${penumbraM.b}px ${penumbraM.s}px`;
+    const ambientS = `${ambientM.y / 2}px ${ambientM.y}px ${ambientM.b}px ${ambientM.s}px`;
     return `${umbraS} ${umbraC}, ${penumbraS} ${penumbraC}, ${ambientS} ${ambientC}`;
   }
   static get svgFilters() {
@@ -10811,55 +10799,64 @@ class DecidablesButton extends DecidablesElement {
         button {
           width: 100%;
           height: 100%;
+
           padding: 0.375rem 0.75rem;
 
           font-family: var(---font-family-base);
           font-size: 1.125rem;
+
           line-height: 1.5;
+
           color: var(---color-text-inverse);
 
+          outline: none;
+
           border: 0;
           border-radius: var(---border-radius);
-          outline: none;
         }
 
         button:disabled {
-          background-color: var(---decidables-button-background-color-disabled);
           outline: none;
+
+          background-color: var(---decidables-button-background-color-disabled);
           box-shadow: none;
         }
 
         button:enabled {
           cursor: pointer;
+          outline: none;
 
           background-color: var(---decidables-button-background-color-enabled);
-          outline: none;
           box-shadow: var(---shadow-2);
         }
 
         button:enabled:hover {
           outline: none;
+
           box-shadow: var(---shadow-4);
         }
 
         button:enabled:active {
           outline: none;
+
           box-shadow: var(---shadow-8);
         }
 
-        :host(.keyboard) button:enabled:focus {
+        button:enabled:focus-visible {
           outline: none;
+
           box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) button:enabled:focus:active {
+        button:enabled:focus-visible:active {
           outline: none;
+
           box-shadow: var(---shadow-8);
         }
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <button ?disabled=${this.disabled}>
         <slot></slot>
       </button>
@@ -10970,10 +10967,6 @@ class DecidablesSlider extends DecidablesElement {
           ---decidables-slider-color: var(--decidables-slider-color, var(---color-element-enabled));
           ---decidables-spinner-background-color: var(--decidables-slider-background-color, none);
 
-          ---shadow-2-rotate: var(--shadow-2-rotate, ${r$4(this.cssBoxShadow(2, true, false))});
-          ---shadow-4-rotate: var(--shadow-4-rotate, ${r$4(this.cssBoxShadow(4, true, false))});
-          ---shadow-8-rotate: var(--shadow-8-rotate, ${r$4(this.cssBoxShadow(8, true, false))});
-
           display: flex;
 
           flex-direction: column;
@@ -10988,12 +10981,14 @@ class DecidablesSlider extends DecidablesElement {
 
         .range {
           position: relative;
+
           display: flex;
 
           flex-direction: row;
 
           width: 3.5rem;
           height: 4.75rem;
+
           margin: 0 0.25rem 0.25rem;
         }
 
@@ -11005,21 +11000,20 @@ class DecidablesSlider extends DecidablesElement {
           background: var(---decidables-spinner-background-color);
         }
 
-        /* Adapted from http://danielstern.ca/range.css/#/ */
         /* Overall */
         input[type=range] {
-          width: 4.75rem;
-          height: 3.5rem;
+          width: 3.5rem;
+          height: 4.75rem;
+
           padding: 0;
           margin: 0;
+          
+          appearance: none;
 
           background-color: unset;
 
-          transform: rotate(-90deg);
-          transform-origin: 2.375rem 2.375rem;
-
-          /* stylelint-disable-next-line property-no-vendor-prefix */
-          -webkit-appearance: none;
+          direction: rtl;
+          writing-mode: vertical-lr;
         }
 
         input[type=range]:enabled {
@@ -11030,16 +11024,10 @@ class DecidablesSlider extends DecidablesElement {
           outline: none;
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-tooltip {
-          display: none;
-        }
-
         /* Track */
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-webkit-slider-runnable-track {
-          width: 100%;
-          height: 4px;
+          width: 4px;
+          height: 100%;
 
           background: var(---decidables-slider-background-color);
           border: 0;
@@ -11051,10 +11039,9 @@ class DecidablesSlider extends DecidablesElement {
           background: var(---decidables-slider-background-color);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-moz-range-track {
-          width: 100%;
-          height: 4px;
+          width: 4px;
+          height: 100%;
 
           background: var(---decidables-slider-background-color);
           border: 0;
@@ -11062,57 +11049,17 @@ class DecidablesSlider extends DecidablesElement {
           box-shadow: none;
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-track {
-          width: 100%;
-          height: 4px;
-
-          color: transparent;
-
-          background: transparent;
-          border-color: transparent;
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-fill-lower {
-          background: #cccccc;
-          /* background: var(---decidables-slider-background-color); */
-          border: 0;
-          border-radius: 2px;
-          box-shadow: none;
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-fill-upper {
-          background: #cccccc;
-          /* background: var(---decidables-slider-background-color); */
-          border: 0;
-          border-radius: 2px;
-          box-shadow: none;
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:focus::-ms-fill-lower {
-          background: var(---decidables-slider-background-color);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:focus::-ms-fill-upper {
-          background: var(---decidables-slider-background-color);
-        }
-
         /* Thumb */
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-webkit-slider-thumb {
-          width: 10px;
-          height: 20px;
-          margin-top: -8px;
+          width: 20px;
+          height: 10px;
+
+          margin-left: -8px;
+
+          appearance: none;
 
           border: 0;
           border-radius: 4px;
-
-          /* stylelint-disable-next-line property-no-vendor-prefix */
-          -webkit-appearance: none;
         }
 
         input[type=range]:disabled::-webkit-slider-thumb {
@@ -11122,112 +11069,65 @@ class DecidablesSlider extends DecidablesElement {
 
         input[type=range]:enabled::-webkit-slider-thumb {
           background: var(---decidables-slider-color);
-          box-shadow: var(---shadow-2-rotate);
+          box-shadow: var(---shadow-2);
         }
 
         input[type=range]:enabled:hover::-webkit-slider-thumb {
-          box-shadow: var(---shadow-4-rotate);
+          box-shadow: var(---shadow-4);
         }
 
         input[type=range]:enabled:active::-webkit-slider-thumb {
-          box-shadow: var(---shadow-8-rotate);
+          box-shadow: var(---shadow-8);
         }
 
-        :host(.keyboard) input[type=range]:enabled:focus::-webkit-slider-thumb {
-          box-shadow: var(---shadow-4-rotate);
+        input[type=range]:enabled:focus-visible::-webkit-slider-thumb {
+          box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) input[type=range]:focus:active::-webkit-slider-thumb {
-          box-shadow: var(---shadow-8-rotate);
+        input[type=range]:enabled:focus-visible:active::-webkit-slider-thumb {
+          box-shadow: var(---shadow-8);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-moz-range-thumb {
-          width: 10px;
-          height: 20px;
+          width: 20px;
+          height: 10px;
 
           border: 0;
           border-radius: 4px;
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:disabled::-moz-range-thumb {
           background: var(---decidables-slider-background-color);
           box-shadow: none;
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:enabled::-moz-range-thumb {
           background: var(---decidables-slider-color);
-          box-shadow: var(---shadow-2-rotate);
+          box-shadow: var(---shadow-2);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:enabled:hover::-moz-range-thumb {
-          box-shadow: var(---shadow-4-rotate);
+          box-shadow: var(---shadow-4);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:enabled:active::-moz-range-thumb {
-          box-shadow: var(---shadow-8-rotate);
-        }
-
-        :host(.keyboard) input[type=range]:enabled:focus::-moz-range-thumb {
-          box-shadow: var(---shadow-4-rotate);
-        }
-
-        :host(.keyboard) input[type=range]:enabled:focus:active::-moz-range-thumb {
-          box-shadow: var(---shadow-8-rotate);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-thumb {
-          width: 10px;
-          height: 20px;
-          margin-top: 0;
-
-          background: #999999;
-          /* background: var(---color-element-enabled); */
-          border: 0;
-          border-radius: 4px;
-          box-shadow: var(---shadow-2-rotate);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:disabled::-ms-thumb {
-          background: var(---decidables-slider-background-color);
-          box-shadow: none;
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:enabled::-ms-thumb {
-          background: var(---decidables-slider-color);
-          box-shadow: var(---shadow-2-rotate);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:enabled:hover::-ms-thumb {
-          box-shadow: var(---shadow-4-rotate);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:enabled:active::-ms-thumb {
-          box-shadow: var(---shadow-8-rotate);
+          box-shadow: var(---shadow-8);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        :host(.keyboard) input[type=range]:enabled:focus::-ms-thumb {
-          box-shadow: var(---shadow-4-rotate);
+        input[type=range]:enabled:focus-visible::-moz-range-thumb {
+          box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) input[type=range]:enabled:focus:active::-ms-thumb {
-          box-shadow: var(---shadow-8-rotate);
+        input[type=range]:enabled:focus-visible:active::-moz-range-thumb {
+          box-shadow: var(---shadow-8);
         }
 
-        datalist {
+        /* Tick marks */
+        .datalist {
           position: absolute;
           left: 2rem;
           z-index: -1;
+
           display: flex;
 
           flex-direction: column;
@@ -11240,31 +11140,30 @@ class DecidablesSlider extends DecidablesElement {
           font-size: 0.75rem;
         }
 
-        option {
-          padding: 0;
-
+        .option {
           line-height: 0.8;
-          min-block-size: 0;
+
+          white-space: nowrap;
         }
 
-        option::before {
+        .option::before {
           content: "– ";
         }
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <label for="slider">
         <slot></slot>
       </label>
       <div class="range">
         <input ?disabled=${this.disabled} type="range" id="slider" min=${o$2(this.rangeMin)} max=${o$2(this.rangeMax)} step=${o$2(this.rangeStep)} .value=${this.rangeValue} @change=${this.rangeChanged.bind(this)} @input=${this.rangeInputted.bind(this)}>
-        ${this.scale ? x$3`
-            <datalist id="ticks">
-              <option value=${o$2(this.rangeMax)} label=${o$2(this.max)}></option>
-              <option value=${o$2(this.rangeMin)} label=${o$2(this.min)}></option>
-            </datalist>
-          ` : x$3``}
+        ${this.scale ? x$2`
+            <div class="datalist">
+              <div class="option">${o$2(this.max)}</div>
+              <div class="option">${o$2(this.min)}</div>
+            </div>
+          ` : x$2``}
       </div>
       <decidables-spinner ?disabled=${this.disabled} min=${o$2(this.min)} max=${o$2(this.max)} step=${o$2(this.step)} .value=${this.value} @input=${this.spinnerInputted.bind(this)}></decidables-spinner>
     `;
@@ -11323,13 +11222,14 @@ class DecidablesSpinner extends DecidablesElement {
           ---decidables-spinner-prefix: var(--decidables-spinner-prefix, "");
 
           ---decidables-spinner-postfix: var(--decidables-spinner-postfix, "");
-          ---decidables-spinner-postfix-padding: var(--decidables-spinner-postfix-padding, 0);
+          ---decidables-spinner-postfix-padding: var(--decidables-spinner-postfix-padding, 0rem);
 
           display: block;
         }
 
         label {
           position: relative;
+
           display: flex;
 
           flex-direction: column;
@@ -11347,6 +11247,7 @@ class DecidablesSpinner extends DecidablesElement {
           left: calc(50% - var(---decidables-spinner-input-width) / 2 + 0.25rem);
 
           font-size: var(---decidables-spinner-font-size);
+
           line-height: normal;
 
           content: var(---decidables-spinner-prefix);
@@ -11358,6 +11259,7 @@ class DecidablesSpinner extends DecidablesElement {
           bottom: 1px;
 
           font-size: var(---decidables-spinner-font-size);
+
           line-height: normal;
 
           content: var(---decidables-spinner-postfix);
@@ -11365,20 +11267,24 @@ class DecidablesSpinner extends DecidablesElement {
 
         input[type=number] {
           width: var(---decidables-spinner-input-width);
-          padding-right: var(---decidables-spinner-postfix-padding);
+
+          padding: 1px var(---decidables-spinner-postfix-padding) 1px 2px;
+          margin: 0;
 
           font-family: var(---font-family-base);
           font-size: var(---decidables-spinner-font-size);
+
           color: inherit;
+
           text-align: right;
 
+          appearance: none;
+          outline: none;
+
           background: none;
           border: 0;
           border-radius: 0;
-          outline: none;
           box-shadow: var(---shadow-2);
-
-          -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
         }
 
         input[type=number]:hover {
@@ -11395,25 +11301,59 @@ class DecidablesSpinner extends DecidablesElement {
 
           border: 0;
           box-shadow: none;
+        }
+
+        /* HACK: Manage spinners in Firefox */
+        @supports (-moz-appearance: textfield) {
+          input[type=number] {
+            padding-right: calc(18px + var(---decidables-spinner-postfix-padding));
+
+            appearance: textfield;
+          }
+
+          input[type=number]:hover,
+          input[type=number]:focus,
+          input[type=number]:active {
+            padding-right: var(---decidables-spinner-postfix-padding);
+
+            appearance: none;
+          }
+
+          input[type=number]:disabled {
+            padding-right: calc(18px + var(---decidables-spinner-postfix-padding));
+
+            appearance: textfield;
+          }
+        }
+
+        /* HACK: Manage spinners in Chrome/Edge/Safari */
+        input[type=number]::-webkit-inner-spin-button {
+          /* Avoid oversized spinners in Safari */
+          font-size: 1.125rem;
+
+          opacity: 0;
+        }
 
-          /* HACK: Use correct text color in Safari */
-          -webkit-opacity: 1;
-          /* HACK: Hide spinners in disabled input for Firefox and Safari */
-          -moz-appearance: textfield; /* stylelint-disable-line property-no-vendor-prefix */
-          /* HACK: Use correct text color in Safari */
-          -webkit-text-fill-color: var(---color-text);
+        input[type=number]:hover::-webkit-inner-spin-button,
+        input[type=number]:focus::-webkit-inner-spin-button,
+        input[type=number]:active::-webkit-inner-spin-button {
+          opacity: 1;
         }
 
-        /* HACK: Hide spinners in disabled input for Firefox and Safari */
-        input[type=number]:disabled::-webkit-outer-spin-button,
         input[type=number]:disabled::-webkit-inner-spin-button {
-          margin: 0;
-          -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+          opacity: 0;
+        }
+
+        /* HACK: Adjust padding on mobile w/o spinners */
+        @media only screen and (hover: none) and (pointer: coarse) {
+          input[type=number] {
+            padding-right: calc(1.125rem + var(---decidables-spinner-postfix-padding));
+          }
         }
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <label>
         <slot></slot>
         <input ?disabled=${this.disabled} type="number" min=${o$2(this.min)} max=${o$2(this.max)} step=${o$2(this.step)} .value=${this.value} @input=${this.inputted.bind(this)}>
@@ -11472,13 +11412,16 @@ class DecidablesSwitch extends DecidablesElement {
 
           width: 1px;
           height: 1px;
+
           padding: 0;
           margin: -1px;
+
           overflow: hidden;
 
           white-space: nowrap;
 
           border: 0;
+
           clip-path: inset(100%); /* May cause a performance issue: https://github.com/h5bp/html5-boilerplate/issues/2021 */
         }
 
@@ -11494,6 +11437,7 @@ class DecidablesSwitch extends DecidablesElement {
           position: relative;
 
           min-width: 24px;
+
           padding: 0 0 36px;
           margin: 0.25rem 0.25rem 0;
 
@@ -11505,17 +11449,17 @@ class DecidablesSwitch extends DecidablesElement {
         input[type=checkbox] + label + label::before,
         input[type=checkbox] + label + label::after {
           position: absolute;
-
           left: 50%;
 
           margin: 0;
 
-          content: "";
-
           outline: 0;
 
-          transition: all var(---transition-duration) ease;
+          content: "";
+          
           transform: translate(-50%, 0);
+
+          transition: all var(---transition-duration) ease;
         }
 
         input[type=checkbox] + label + label::before {
@@ -11563,21 +11507,18 @@ class DecidablesSwitch extends DecidablesElement {
           box-shadow: var(---shadow-8);
         }
 
-        /* stylelint-disable-next-line selector-max-compound-selectors */
-        :host(.keyboard) input[type=checkbox]:enabled:focus + label + label::after {
+        input[type=checkbox]:enabled:focus-visible + label + label::after {
           box-shadow: var(---shadow-4);
         }
 
-        /* stylelint-disable selector-max-compound-selectors */
-        :host(.keyboard) input[type=checkbox]:enabled:focus + label + label:active::after,
-        :host(.keyboard) input[type=checkbox]:enabled:focus:active + label + label::after {
+        input[type=checkbox]:enabled:focus-visible + label + label:active::after,
+        input[type=checkbox]:enabled:focus-visible:active + label + label::after {
           box-shadow: var(---shadow-8);
         }
-        /* stylelint-enable selector-max-compound-selectors */
         `];
   }
   render() {
-    return x$3`
+    return x$2`
       <input type="checkbox" id="switch" ?checked=${this.checked} ?disabled=${this.disabled} @change=${this.changed.bind(this)}>
       <label for="switch">
         <slot name="off-label"></slot>
@@ -11627,7 +11568,7 @@ class DecidablesToggle extends DecidablesElement {
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <fieldset ?disabled=${this.disabled}>
         <legend><slot name="label"></slot></legend>
         <slot></slot>
@@ -11693,39 +11634,46 @@ class DecidablesToggleOption extends DecidablesElement {
 
           width: 1px;
           height: 1px;
+
           padding: 0;
           margin: -1px;
+
           overflow: hidden;
 
           white-space: nowrap;
 
           border: 0;
+
           clip-path: inset(100%); /* May cause a performance issue: https://github.com/h5bp/html5-boilerplate/issues/2021 */
         }
 
         input[type=radio] + label {
           width: 100%;
+
           padding: 0.375rem 0.75rem;
 
           font-family: var(---font-family-base);
           font-size: 1.125rem;
+
           line-height: 1.5;
+
           color: var(---color-text-inverse);
+
           text-align: center;
 
           cursor: pointer;
+          outline: none;
 
           background-color: var(---color-element-enabled);
           border: 0;
           border-radius: 0;
-          outline: none;
-
           box-shadow: var(---shadow-2);
         }
 
         input[type=radio]:checked + label {
-          background-color: var(---color-element-selected);
           outline: none;
+
+          background-color: var(---color-element-selected);
           box-shadow: var(---shadow-2);
         }
 
@@ -11733,6 +11681,7 @@ class DecidablesToggleOption extends DecidablesElement {
           z-index: 1;
 
           outline: none;
+
           box-shadow: var(---shadow-4);
         }
 
@@ -11740,6 +11689,7 @@ class DecidablesToggleOption extends DecidablesElement {
           z-index: 2;
 
           outline: none;
+
           box-shadow: var(---shadow-8);
         }
 
@@ -11753,31 +11703,34 @@ class DecidablesToggleOption extends DecidablesElement {
           border-bottom-left-radius: 0.25rem;
         }
 
-        :host(.keyboard) input[type=radio]:focus + label {
+        input[type=radio]:focus-visible + label {
           z-index: 1;
 
           outline: none;
+
           box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) input[type=radio]:focus:checked + label {
+        input[type=radio]:focus-visible:checked + label {
           z-index: 1;
 
-          background-color: var(---color-element-selected);
           outline: none;
+
+          background-color: var(---color-element-selected);
           box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) input[type=radio]:focus + label:active {
+        input[type=radio]:focus-visible + label:active {
           z-index: 2;
 
           outline: none;
+
           box-shadow: var(---shadow-8);
         }
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <input type="radio" id="toggle-option" name=${this.name} value=${this.value} .checked=${this.checked} @change=${this.changed.bind(this)}>
       <label for="toggle-option">
         <slot></slot>
@@ -12114,7 +12067,7 @@ const r = new Map(),
   },
   b = ["left", "top", "width", "height", "opacity", "color", "background"],
   j = new WeakMap();
-let x$1 = class x extends f {
+class x extends f {
   constructor(t$1) {
     if (super(t$1), this.t = false, this.i = null, this.o = null, this.h = true, this.shouldLog = false, t$1.type === t.CHILD) throw Error("The `animate` directive must be used in attribute position.");
     this.createFinished();
@@ -12138,9 +12091,9 @@ let x$1 = class x extends f {
   }
   update(t, [i]) {
     const s = void 0 === this.u;
-    return s && (this.u = t.options?.host, this.u.addController(this), this.u.updateComplete.then(t => this.t = true), this.element = t.element, j.set(this.element, this)), this.optionsOrCallback = i, (s || "function" != typeof i) && this.p(i), this.render(i);
+    return s && (this.u = t.options?.host, this.u.addController(this), this.u.updateComplete.then(t => this.t = true), this.element = t.element, j.set(this.element, this)), this.optionsOrCallback = i, (s || "function" != typeof i) && this.m(i), this.render(i);
   }
-  p(t) {
+  m(t) {
     t = t ?? {};
     const i = this.getController();
     void 0 !== i && ((t = {
@@ -12151,7 +12104,7 @@ let x$1 = class x extends f {
       ...t.keyframeOptions
     }), t.properties ??= b, this.options = t;
   }
-  m() {
+  p() {
     const t = {},
       i = this.element.getBoundingClientRect(),
       s = getComputedStyle(this.element);
@@ -12172,20 +12125,20 @@ let x$1 = class x extends f {
     })(t, this._)), this.h = this.t && !this.isDisabled() && !this.isAnimating() && i && this.element.isConnected, this.h && (this._ = Array.isArray(t) ? Array.from(t) : t), this.h;
   }
   hostUpdate() {
-    "function" == typeof this.optionsOrCallback && this.p(this.optionsOrCallback()), this.v() && (this.A = this.m(), this.i = this.i ?? this.element.parentNode, this.o = this.element.nextSibling);
+    "function" == typeof this.optionsOrCallback && this.m(this.optionsOrCallback()), this.v() && (this.A = this.p(), this.i = this.i ?? this.element.parentNode, this.o = this.element.nextSibling);
   }
   async hostUpdated() {
     if (!this.h || !this.element.isConnected || this.options.skipInitial && !this.isHostRendered) return;
     let t;
     this.prepare(), await a;
-    const i = this.O(),
-      s = this.j(this.options.keyframeOptions, i),
-      e = this.m();
+    const i = this.P(),
+      s = this.V(this.options.keyframeOptions, i),
+      e = this.p();
     if (void 0 !== this.A) {
       const {
         from: s,
         to: h
-      } = this.N(this.A, e, i);
+      } = this.O(this.A, e, i);
       this.log("measured", [this.A, e, s, h]), t = this.calculateKeyframes(s, h);
     } else {
       const s = r.get(this.options.inId);
@@ -12194,7 +12147,7 @@ let x$1 = class x extends f {
         const {
           from: h,
           to: n
-        } = this.N(s, e, i);
+        } = this.O(s, e, i);
         t = this.calculateKeyframes(h, n), t = this.options.in ? [{
           ...this.options.in[0],
           ...t[0]
@@ -12204,10 +12157,10 @@ let x$1 = class x extends f {
     this.animate(t, s);
   }
   resetStyles() {
-    void 0 !== this.P && (this.element.setAttribute("style", this.P ?? ""), this.P = void 0);
+    void 0 !== this.j && (this.element.setAttribute("style", this.j ?? ""), this.j = void 0);
   }
   commitStyles() {
-    this.P = this.element.getAttribute("style"), this.webAnimation?.commitStyles(), this.webAnimation?.cancel();
+    this.j = this.element.getAttribute("style"), this.webAnimation?.commitStyles(), this.webAnimation?.cancel();
   }
   reconnected() {}
   async disconnected() {
@@ -12216,14 +12169,14 @@ let x$1 = class x extends f {
     if (this.prepare(), await a(), this.i?.isConnected) {
       const t = this.o && this.o.parentNode === this.i ? this.o : null;
       if (this.i.insertBefore(this.element, t), this.options.stabilizeOut) {
-        const t = this.m();
+        const t = this.p();
         this.log("stabilizing out");
         const i = this.A.left - t.left,
           s = this.A.top - t.top;
         !("static" === getComputedStyle(this.element).position) || 0 === i && 0 === s || (this.element.style.position = "relative"), 0 !== i && (this.element.style.left = i + "px"), 0 !== s && (this.element.style.top = s + "px");
       }
     }
-    const t = this.j(this.options.keyframeOptions);
+    const t = this.V(this.options.keyframeOptions);
     await this.animate(this.options.out, t), this.element.remove();
   }
   prepare() {
@@ -12235,7 +12188,7 @@ let x$1 = class x extends f {
   didFinish(t) {
     t && this.options.onComplete?.(this), this.A = void 0, this.animatingProperties = void 0, this.frames = void 0, this.resolveFinished();
   }
-  O() {
+  P() {
     const t = [];
     for (let i = this.element.parentNode; i; i = i?.parentNode) {
       const s = j.get(i);
@@ -12249,13 +12202,13 @@ let x$1 = class x extends f {
       n.add(this.u);
     }), t;
   }
-  j(t, i = this.O()) {
+  V(t, i = this.P()) {
     const s = {
       ...A
     };
     return i.forEach(t => Object.assign(s, t.options.keyframeOptions)), Object.assign(s, t), s;
   }
-  N(t, i, s) {
+  O(t, i, s) {
     t = {
       ...t
     }, i = {
@@ -12308,8 +12261,8 @@ let x$1 = class x extends f {
   log(t, i) {
     this.shouldLog && !this.isDisabled() && console.log(t, this.options.id, i);
   }
-};
-const F = e(x$1);
+}
+const F = e(x);
 
 /*
   CPTMath Static Class - Not intended for instantiation!
@@ -12479,11 +12432,13 @@ class CPTEquation extends ProspectableElement {
 
         .addend {
           position: relative;
+
           display: inline-block;
         }
 
         .comparison {
           position: relative;
+
           display: inline-block;
 
           font-size: 125%;
@@ -12765,20 +12720,20 @@ class CPTCalculation extends CPTEquation {
     let us;
     let uDiff;
     if (this.numeric) {
-      xw = x$3`<decidables-spinner class="x xw"
+      xw = x$2`<decidables-spinner class="x xw"
           ?disabled=${!this.interactive}
           .value=${this.xw}
           @input=${this.xwInput.bind(this)}
         >
           <var class="math-var">x<sub class="subscript win">win</sub></var>
         </decidables-spinner>`;
-      xl = x$3`<decidables-spinner class="x xl"
+      xl = x$2`<decidables-spinner class="x xl"
           disabled
           .value=${this.xl}
         >
           <var class="math-var">x<sub class="subscript loss">loss</sub></var>
         </decidables-spinner>`;
-      pw = x$3`<decidables-spinner class="p pw"
+      pw = x$2`<decidables-spinner class="p pw"
           ?disabled=${!this.interactive}
           min="0"
           max="1"
@@ -12788,7 +12743,7 @@ class CPTCalculation extends CPTEquation {
         >
           <var class="math-var">p<sub class="subscript win">win</sub></var>
         </decidables-spinner>`;
-      xs = x$3`<decidables-spinner class="x xs"
+      xs = x$2`<decidables-spinner class="x xs"
           ?disabled=${!this.interactive}
           .value=${this.xs}
           @input=${this.xsInput.bind(this)}
@@ -12825,73 +12780,73 @@ class CPTCalculation extends CPTEquation {
       //   >
       //     <var class="math-var">γ</var>
       //   </decidables-spinner>`;
-      vw = x$3`<decidables-spinner class="v vw"
+      vw = x$2`<decidables-spinner class="v vw"
           disabled
           .value=${+this.vw.toFixed(1)}
         >
           <var class="math-var">v<sub class="subscript win">win</sub></var>
         </decidables-spinner>`;
-      vl = x$3`<decidables-spinner class="v vl"
+      vl = x$2`<decidables-spinner class="v vl"
           disabled
           .value=${+this.vl.toFixed(1)}
         >
           <var class="math-var">v<sub class="subscript loss">loss</sub></var>
         </decidables-spinner>`;
-      ww = x$3`<decidables-spinner class="w ww"
+      ww = x$2`<decidables-spinner class="w ww"
           disabled
           .value=${+this.ww.toFixed(2)}
         >
           <var class="math-var">w<sub class="subscript win">win</sub></var>
         </decidables-spinner>`;
-      wl = x$3`<decidables-spinner class="w wl"
+      wl = x$2`<decidables-spinner class="w wl"
           disabled
           .value=${+this.wl.toFixed(2)}
         >
           <var class="math-var">w<sub class="subscript loss">loss</sub></var>
         </decidables-spinner>`;
-      vs = x$3`<decidables-spinner class="v vs"
+      vs = x$2`<decidables-spinner class="v vs"
           disabled
           .value=${+this.vs.toFixed(1)}
         >
           <var class="math-var">v<sub class="subscript sure">sure</sub></var>
         </decidables-spinner>`;
-      ug = x$3`<decidables-spinner class="u ug"
+      ug = x$2`<decidables-spinner class="u ug"
           disabled
           .value=${+this.ug.toFixed(1)}
         >
           <var class="math-var">U<sub class="subscript gamble">gamble</sub></var>
         </decidables-spinner>`;
-      us = x$3`<decidables-spinner class="u us"
+      us = x$2`<decidables-spinner class="u us"
           disabled
           .value=${+this.us.toFixed(1)}
         >
           <var class="math-var">U<sub class="subscript sure">sure</sub></var>
         </decidables-spinner>`;
-      uDiff = x$3`${this.uDiff > 0 ? x$3`<span class="comparison" ${F({
+      uDiff = x$2`${this.uDiff > 0 ? x$2`<span class="comparison" ${F({
         in: v
-      })}>&gt;</span>` : this.uDiff < 0 ? x$3`<span class="comparison" ${F({
+      })}>&gt;</span>` : this.uDiff < 0 ? x$2`<span class="comparison" ${F({
         in: v
-      })}>&lt;</span>` : x$3`<span class="comparison" ${F({
+      })}>&lt;</span>` : x$2`<span class="comparison" ${F({
         in: v
       })}>=</span>`}`;
     } else {
-      xw = x$3`<var class="math-var x xw">x<sub class="subscript win">win</sub></var>`;
-      xl = x$3`<var class="math-var x xl">x<sub class="subscript loss">loss</sub></var>`;
-      pw = x$3`<var class="math-var p pw">p<sub class="subscript win">win</sub></var>`;
-      xs = x$3`<var class="math-var x xs">x<sub class="subscript sure">sure</sub></var>`;
+      xw = x$2`<var class="math-var x xw">x<sub class="subscript win">win</sub></var>`;
+      xl = x$2`<var class="math-var x xl">x<sub class="subscript loss">loss</sub></var>`;
+      pw = x$2`<var class="math-var p pw">p<sub class="subscript win">win</sub></var>`;
+      xs = x$2`<var class="math-var x xs">x<sub class="subscript sure">sure</sub></var>`;
       // a = html`<var class="math-var a">α</var>`;
       // l = html`<var class="math-var l">λ</var>`;
       // g = html`<var class="math-var g">γ</var>`;
-      vw = x$3`<var class="math-var v vw">v<sub class="subscript win">win</sub></var>`;
-      vl = x$3`<var class="math-var v vl">v<sub class="subscript loss">loss</sub></var>`;
-      ww = x$3`<var class="math-var w ww">w<sub class="subscript win">win</sub></var>`;
-      wl = x$3`<var class="math-var w wl">w<sub class="subscript loss">loss</sub></var>`;
-      vs = x$3`<var class="math-var v vs">v<sub class="subscript sure">sure</sub></var>`;
-      ug = x$3`<var class="math-var u ug">U<sub class="subscript gamble">gamble</sub></var>`;
-      us = x$3`<var class="math-var u us">U<sub class="subscript sure">sure</sub></var>`;
-      uDiff = x$3`<span class="comparison">≟</span>`;
-    }
-    const equation = x$3`
+      vw = x$2`<var class="math-var v vw">v<sub class="subscript win">win</sub></var>`;
+      vl = x$2`<var class="math-var v vl">v<sub class="subscript loss">loss</sub></var>`;
+      ww = x$2`<var class="math-var w ww">w<sub class="subscript win">win</sub></var>`;
+      wl = x$2`<var class="math-var w wl">w<sub class="subscript loss">loss</sub></var>`;
+      vs = x$2`<var class="math-var v vs">v<sub class="subscript sure">sure</sub></var>`;
+      ug = x$2`<var class="math-var u ug">U<sub class="subscript gamble">gamble</sub></var>`;
+      us = x$2`<var class="math-var u us">U<sub class="subscript sure">sure</sub></var>`;
+      uDiff = x$2`<span class="comparison">≟</span>`;
+    }
+    const equation = x$2`
       <tr>
         <td class="right">
           <span class="function v"><var class="math-var v tight">v</var><span class="paren tight">(</span>${xw}<span class="paren tight">)</span></span>&nbsp;<span class="function w"><var class="math-var w tight">w</var><span class="paren tight">(</span>${pw}<span class="paren tight">)</span></span><span class="plus">+</span><span class="function v"><var class="math-var v tight">v</var><span class="paren tight">(</span>${xl}<span class="paren tight">)</span></span>&nbsp;<span class="bracket tight">[</span><span class="tight">1</span><span class="minus">−</span><span class="function w"><var class="math-var w">w</var><span class="paren tight">(</span>${pw}<span class="paren tight">)</span></span><span class="bracket tight">]</span>
@@ -12925,7 +12880,7 @@ class CPTCalculation extends CPTEquation {
           ${us}
         </td>
       </tr>`;
-    return x$3`
+    return x$2`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -13906,7 +13861,7 @@ function reverseTransform(data, facets) {
     facets: facets.map(I => I.slice().reverse())
   };
 }
-function sort$1(order, {
+function sort(order, {
   sort,
   ...options
 } = {}) {
@@ -14150,7 +14105,7 @@ const reduceFirst = {
 const reduceTitle = {
   reduceIndex(I, X) {
     const n = 5;
-    const groups = sort$2(rollup(I, V => V.length, i => X[i]), second);
+    const groups = sort$1(rollup(I, V => V.length, i => X[i]), second);
     const top = groups.slice(-n).reverse();
     if (top.length < groups.length) {
       const bottom = groups.slice(0, 1 - n);
@@ -15014,7 +14969,7 @@ function createScalePoint(key, channels, {
   padding = 0.5,
   ...options
 }) {
-  return maybeRound(point$5().align(align).padding(padding), channels, options, key);
+  return maybeRound(point$4().align(align).padding(padding), channels, options, key);
 }
 function createScaleBand(key, channels, {
   align = 0.5,
@@ -15051,7 +15006,7 @@ function inferDomain(channels, interval, key) {
   if (values.size > 10e3 && registry.get(key) === position) {
     throw new Error(`implicit ordinal domain of ${key} scale has more than 10,000 values`);
   }
-  return sort$2(values, ascendingDefined);
+  return sort$1(values, ascendingDefined);
 }
 
 // If all channels provide a consistent hint, propagate it to the scale.
@@ -21774,7 +21729,7 @@ const defaults$1 = {
   strokeWidth: 1.5
 };
 function withDefaultSort(options) {
-  return options.sort === undefined && options.reverse === undefined ? sort$1({
+  return options.sort === undefined && options.reverse === undefined ? sort({
     channel: "-r"
   }, options) : options;
 }
@@ -22138,7 +22093,7 @@ class CPTFit extends ProspectableElement {
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <div>
         <div>After ${this.choices.length} trials:</div>
         <div>Current:
@@ -22299,6 +22254,7 @@ class CPTParameters extends ProspectableElement {
 
         decidables-slider {
           line-height: 1;
+
           text-align: center;
         }
 
@@ -22323,9 +22279,9 @@ class CPTParameters extends ProspectableElement {
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <div class="holder">
-        ${this.a != null ? x$3`<decidables-slider class="a"
+        ${this.a != null ? x$2`<decidables-slider class="a"
             ?disabled=${!this.interactive}
             scale
             min=${CPTMath.a.MIN}
@@ -22334,8 +22290,8 @@ class CPTParameters extends ProspectableElement {
             .value=${+this.a.toFixed(2)}
             @change=${this.setAlpha.bind(this)}
             @input=${this.setAlpha.bind(this)}
-          ><div>Alpha<br><span class="math-var">α</span></div></decidables-slider>` : x$3``}
-        ${this.l != null ? x$3`<decidables-slider class="l"
+          ><div>Alpha<br><span class="math-var">α</span></div></decidables-slider>` : x$2``}
+        ${this.l != null ? x$2`<decidables-slider class="l"
             ?disabled=${!this.interactive}
             scale
             min=${CPTMath.l.MIN}
@@ -22344,8 +22300,8 @@ class CPTParameters extends ProspectableElement {
             .value=${+this.l.toFixed(2)}
             @change=${this.setLambda.bind(this)}
             @input=${this.setLambda.bind(this)}
-          ><div>Lambda<br><span class="math-var">λ</span></div></decidables-slider>` : x$3``}
-        ${this.g != null ? x$3`<decidables-slider class="g"
+          ><div>Lambda<br><span class="math-var">λ</span></div></decidables-slider>` : x$2``}
+        ${this.g != null ? x$2`<decidables-slider class="g"
             ?disabled=${!this.interactive}
             scale
             min=${CPTMath.g.MIN}
@@ -22354,7 +22310,7 @@ class CPTParameters extends ProspectableElement {
             .value=${+this.g.toFixed(2)}
             @change=${this.setGamma.bind(this)}
             @input=${this.setGamma.bind(this)}
-          ><div>Gamma<br><span class="math-var">γ</span></div></decidables-slider>` : x$3``}
+          ><div>Gamma<br><span class="math-var">γ</span></div></decidables-slider>` : x$2``}
       </div>`;
   }
 }
@@ -22592,9 +22548,9 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
 
         .curve.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve.interactive:hover {
@@ -22612,7 +22568,7 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
           transform: translateY(0);
         }
 
-        :host(.keyboard) .curve.interactive:focus {
+        .curve.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -22621,9 +22577,9 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -22645,7 +22601,7 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -22679,8 +22635,8 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve {
@@ -22713,8 +22669,8 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -22726,15 +22682,15 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `];
   }
   render() {
     /* eslint-disable-line class-methods-use-this */
-    return x$3``;
+    return x$2``;
   }
   willUpdate() {
     this.alignState();
@@ -23252,476 +23208,417 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
 }
 customElements.define('cpt-probability', CPTProbability);
 
-/**
- * Converts a point from 3D space to 2D space using orthographic projection.
- *
- * @param {Object} d - The 3D point to be projected.
- * @param {Object} options - Options for the projection.
- * @param {Array} options.origin - The origin point for the projection.
- * @param {number} options.scale - The scale factor for the projection.
- * @returns {Object} The projected point in 2D space.
- */
-function orthographic(d, options) {
-  /**
-   * @typedef {Object} Point2D
-   * @property {number} x - The x-coordinate in 2D space.
-   * @property {number} y - The y-coordinate in 2D space.
-   */
-
-  /**
-   * @type {Point2D}
-   */
-  return {
-    x: options.origin.x + options.scale * d.x,
-    y: options.origin.y + options.scale * d.y
-  };
-}
-
-/**
- * Returns the x-coordinate of a point in 3D space.
- *
- * @param {Object} p - The point in 3D space represented as an object e.g {x: 0, y: 1, z: 0}
- * @returns {number} The x-coordinate of the point.
- */
-function x(p) {
-  return p.x;
-}
-
-/**
- * Returns the y-coordinate of a point in 3D space.
- *
- * @param {Object} p - The point in 3D space represented as an object e.g x: 0, y: 1, z: 0}
- * @returns {number} The y-coordinate of the point.
- */
-function y(p) {
-  return p.y;
-}
-
-/**
- * Returns the z-coordinate of a point in 3D space.
- *
- * @param {Object} p - The point in 3D space represented as an object e.g {x: 0, y: 1, z: 0}
- * @returns {number} The z-coordinate of the point.
- */
-function z(p) {
-  return p.z;
-}
-
-/**
- * Comparator function to sort objects based on their centroid z-values.
- *
- * This function compares the z-values of the centroid property of two objects (a and b).
- * It returns a negative number if a should come before b, a positive number if a should come after b,
- * and 0 if a and b are considered equal in terms of sorting.
- *
- * @param {Object} a - The first object to compare.
- * @param {Object} b - The second object to compare.
- * @returns {number} - A negative, zero, or positive number indicating the sorting order.
- *
- * @example
- * // Sorting an array of objects based on centroid z-values
- * const sortedArray = unsortedArray.sort(sort);
- */
-function sort(a, b) {
-  // Extract z-values from objects
-  const pa = a.centroid.z;
-  const pb = b.centroid.z;
+var d33d$1 = {exports: {}};
 
-  // Compare z-values for sorting
-  return pa < pb ? -1 : pa > pb ? 1 : pa >= pb ? 0 : NaN;
-}
+var d33d = d33d$1.exports;
+(function (module, exports$1) {
+  (function (i, h) {
+    h(exports$1) ;
+  })(d33d, function (i) {
 
-/**
- * Generates 3D shapes based on specified parameters and transformations.
- *
- * @param {Function} transform - The transformation function for generating 3D shapes.
- * @param {Function|undefined} draw - The drawing function for rendering the generated 3D shapes.
- * @returns {Function} - A function that, when called with data, generates and returns an array of 3D shapes.
- */
-function generator3D(transform, draw) {
-  let angleX = 0;
-  let angleY = 0;
-  let angleZ = 0;
-  let origin = {
-    x: 0,
-    y: 0
-  };
-  let rotateCenter = {
-    x: 0,
-    y: 0,
-    z: 0
-  };
-  let scale = 1;
-  let x$1 = x;
-  let y$1 = y;
-  let z$1 = z;
-  let rows = 0;
-
-  /**
-   * Generates 3D shapes based on specified parameters and transformations.
-   *
-   * @param {Object} data - The data representing the 3D shapes.
-   * @returns {Object[]} - An array of 3D shapes generated with the specified parameters and transformations.
-   *
-   */
-  function fn(data) {
-    return transform(data, {
-      scale: scale,
-      origin: origin,
-      project: orthographic,
-      row: rows
-    }, {
-      x: x$1,
-      y: y$1,
-      z: z$1
-    }, {
-      x: angleX,
-      y: angleY,
-      z: angleZ,
-      rotateCenter: rotateCenter
+    function h(r) {
+      return `M${r[0].projected.x},${r[0].projected.y}L${r[1].projected.x},${r[1].projected.y}L${r[2].projected.x},${r[2].projected.y}L${r[3].projected.x},${r[3].projected.y}Z`;
+    }
+    function j(r) {
+      return r.x;
+    }
+    function C(r) {
+      return r.y;
+    }
+    function Z(r) {
+      return r.z;
+    }
+    class c {
+      constructor() {
+        this._scale = 1, this._origin = {
+          x: 0,
+          y: 0
+        }, this._rotateX = 0, this._rotateY = 0, this._rotateZ = 0, this._x = j, this._y = C, this._z = Z, this._rotationCenter = {
+          x: 0,
+          y: 0,
+          z: 0
+        };
+      }
+      scale(t) {
+        return t ? (this._scale = t, this) : this._scale;
+      }
+      origin(t) {
+        return t ? (this._origin = t, this) : this._origin;
+      }
+      rotationCenter(t) {
+        return t ? (this._rotationCenter = t, this) : this._rotationCenter;
+      }
+      rotateX(t) {
+        return t ? (this._rotateX = t, this) : this._rotateX;
+      }
+      rotateY(t) {
+        return t ? (this._rotateY = t, this) : this._rotateY;
+      }
+      rotateZ(t) {
+        return t ? (this._rotateZ = t, this) : this._rotateZ;
+      }
+      x(t) {
+        return typeof t == "function" ? (this._x = t, this) : this._x;
+      }
+      y(t) {
+        return typeof t == "function" ? (this._y = t, this) : this._y;
+      }
+      z(t) {
+        return typeof t == "function" ? (this._z = t, this) : this._z;
+      }
+    }
+    function z(r) {
+      const t = [...r, r[0]];
+      let n = 0;
+      for (let e = 0; e < r.length; e += 1) {
+        const o = t[e].rotated,
+          s = t[e + 1].rotated;
+        n += (s.x - o.x) * (s.y + o.y);
+      }
+      return n > 0;
+    }
+    function u(r) {
+      let t = 0,
+        n = 0,
+        e = 0;
+      for (let o = r.length - 1; o >= 0; o -= 1) {
+        const s = r[o].rotated;
+        t += s.x, n += s.y, e += s.z;
+      }
+      return {
+        x: t / r.length,
+        y: n / r.length,
+        z: e / r.length
+      };
+    }
+    function _(r, t) {
+      const n = t.rotateCenter,
+        e = {
+          x: r.x - n.x,
+          y: r.y - n.y,
+          z: r.z - n.z
+        },
+        o = X(e, t.z),
+        s = $(o, t.y),
+        a = D(s, t.x);
+      return {
+        x: a.x + n.x,
+        y: a.y + n.y,
+        z: a.z + n.z
+      };
+    }
+    function D(r, t) {
+      const n = Math.sin(t),
+        e = Math.cos(t);
+      return {
+        x: r.x,
+        y: r.y * e - r.z * n,
+        z: r.y * n + r.z * e
+      };
+    }
+    function $(r, t) {
+      const n = Math.sin(t),
+        e = Math.cos(t);
+      return {
+        x: r.z * n + r.x * e,
+        y: r.y,
+        z: r.z * e - r.x * n
+      };
+    }
+    function X(r, t) {
+      const n = Math.sin(t),
+        e = Math.cos(t);
+      return {
+        x: r.x * e - r.y * n,
+        y: r.x * n + r.y * e,
+        z: r.z
+      };
+    }
+    function w(r, t) {
+      return {
+        x: t.origin.x + t.scale * r.x,
+        y: t.origin.y + t.scale * r.y
+      };
+    }
+    const d = (r, t) => r.map(n => {
+      const e = {
+          x: t.x(n),
+          y: t.y(n),
+          z: t.z(n)
+        },
+        o = _(e, {
+          x: t.rotateX,
+          y: t.rotateY,
+          z: t.rotateZ,
+          rotateCenter: t.rotateCenter
+        }),
+        s = w(o, {
+          scale: t.scale,
+          origin: t.origin
+        });
+      return {
+        ...n,
+        rotated: o,
+        projected: s
+      };
     });
-  }
-
-  /**
-   * Sets or retrieves the origin for rendering the 3D shapes.
-   *
-   * @param {number[]} [o] - The origin point for rendering the 3D shapes.
-   * @returns {Function|number[]} - If no argument is provided, returns the current origin. Otherwise, sets the origin and returns the function.
-   */
-  fn.origin = function (o) {
-    return arguments.length ? (origin = o, fn) : origin;
-  };
-
-  /**
-   * Sets or retrieves the scale factor for the 3D shapes.
-   *
-   * @param {number} [s] - The scale factor for the 3D shapes.
-   * @returns {Function|number} - If no argument is provided, returns the current scale factor. Otherwise, sets the scale factor and returns the function.
-   */
-  fn.scale = function (s) {
-    return arguments.length ? (scale = s, fn) : scale;
-  };
-
-  /**
-   * Sets or retrieves the rotation angle around the x-axis.
-   *
-   * @param {number} [ax] - The rotation angle around the x-axis.
-   * @returns {Function|number} - If no argument is provided, returns the current rotation angle around the x-axis. Otherwise, sets the rotation angle and returns the function.
-   */
-  fn.rotateX = function (ax) {
-    return arguments.length ? (angleX = ax, fn) : angleX;
-  };
-
-  /**
-   * Sets or retrieves the rotation angle around the y-axis.
-   *
-   * @param {number} [ay] - The rotation angle around the y-axis.
-   * @returns {Function|number} - If no argument is provided, returns the current rotation angle around the y-axis. Otherwise, sets the rotation angle and returns the function.
-   */
-  fn.rotateY = function (ay) {
-    return arguments.length ? (angleY = ay, fn) : angleY;
-  };
-
-  /**
-   * Sets or retrieves the rotation angle around the z-axis.
-   *
-   * @param {number} [az] - The rotation angle around the z-axis.
-   * @returns {Function|number} - If no argument is provided, returns the current rotation angle around the z-axis. Otherwise, sets the rotation angle and returns the function.
-   */
-  fn.rotateZ = function (az) {
-    return arguments.length ? (angleZ = az, fn) : angleZ;
-  };
-
-  /**
-   * Sets or retrieves the rotation center for the 3D shapes.
-   *
-   * @param {number[]} [rc] - The rotation center for the 3D shapes.
-   * @returns {Function|number[]} - If no argument is provided, returns the current rotation center. Otherwise, sets the rotation center and returns the function.
-   */
-  fn.rotationCenter = function (rc) {
-    return arguments.length ? (rotateCenter = rc, fn) : rotateCenter;
-  };
-
-  /**
-   * Sets or retrieves the x-coordinate for the 3D shapes.
-   *
-   * @param {number} [px] - The x-coordinate for the 3D shapes.
-   * @returns {Function|number} - If no argument is provided, returns the current x-coordinate. Otherwise, sets the x-coordinate and returns the function.
-   */
-  fn.x = function (px) {
-    return arguments.length ? (x$1 = typeof px === 'function' ? px : +px, fn) : x$1;
-  };
-
-  /**
-   * Sets or retrieves the y-coordinate for the 3D shapes.
-   *
-   * @param {number} [py] - The y-coordinate for the 3D shapes.
-   * @returns {Function|number} - If no argument is provided, returns the current y-coordinate. Otherwise, sets the y-coordinate and returns the function.
-   */
-  fn.y = function (py) {
-    return arguments.length ? (y$1 = typeof py === 'function' ? py : +py, fn) : y$1;
-  };
-
-  /**
-   * Sets or retrieves the z-coordinate for the 3D shapes.
-   *
-   * @param {number} [pz] - The z-coordinate for the 3D shapes.
-   * @returns {Function|number} - If no argument is provided, returns the current z-coordinate. Otherwise, sets the z-coordinate and returns the function.
-   */
-  fn.z = function (pz) {
-    return arguments.length ? (z$1 = typeof pz === 'function' ? pz : +pz, fn) : z$1;
-  };
-
-  /**
-   * !IMPORT! ONLY FOR gridplanes
-   * Sets or retrieves the rows for 3d gridplanes.
-   *
-   * @param {number} [pz] - The z-coordinate for the 3D shapes.
-   * @returns {Function|number} - If no argument is provided, returns the current rowse. Otherwise, sets the rows and returns the function.
-   */
-  fn.rows = function (r) {
-    return arguments.length ? (rows = typeof r === 'function' ? r : +r, fn) : rows;
-  };
-
-  // Attach the draw function to the generator
-  fn.draw = draw;
-
-  // Attach the sort function to the generator
-  fn.sort = sort;
-
-  // Return the generator function
-  return fn;
-}
-
-/**
- * Determines if a polygon is oriented in a counter-clockwise direction.
- *
- * @param {Array} polygon - An array of vertices representing the polygon.
- * @returns {boolean} True if the polygon is counter-clockwise, false otherwise.
- */
-function ccw(polygon) {
-  /**
-   * Calculate the signed area of the polygon.
-   * Positive area indicates a counter-clockwise orientation.
-   */
-  const poly = [...polygon, polygon[0]];
-  let sum = 0;
-  for (let i = 0; i < polygon.length; i++) {
-    const j = i + 1;
-    const p1 = poly[i].rotated;
-    const p2 = poly[j].rotated;
-
-    // Update the sum with the cross product of consecutive vertices
-    sum += (p2.x - p1.x) * (p2.y + p1.y);
-  }
-
-  // If the area is positive, the polygon is counter-clockwise
-  // This is due to the flipped y-axis in the browser
-  return sum > 0;
-}
-
-/**
- * Calculates the centroid of a polygon.
- *
- * The centroid is the average position of all the points in the polygon.
- *
- * @param {Object[]} polygon - The polygon represented as an array of objects with x, y, and z properties.
- * @param {number} polygon[].rotated.x - The x-coordinate of the rotated point.
- * @param {number} polygon[].rotated.y - The y-coordinate of the rotated point.
- * @param {number} polygon[].rotated.z - The z-coordinate of the rotated point.
- * @returns {Object} - The centroid of the polygon with x, y, and z properties.
- *
- * @throws {Error} Will throw an error if the polygon is empty or if any point in the polygon is missing rotated coordinates.
- *
- * @example
- * // Calculate the centroid of a polygon
- * const polygon = [
- *   { rotated: { x: 1, y: 2, z: 3 } },
- *   { rotated: { x: 4, y: 5, z: 6 } },
- *   { rotated: { x: 7, y: 8, z: 9 } },
- * ];
- * const centroidPoint = centroid(polygon);
- * console.log(centroidPoint); // Outputs: { x: 4, y: 5, z: 6 }
- */
-function centroid(polygon) {
-  let _x = 0;
-  let _y = 0;
-  let _z = 0;
-  let _n = polygon.length;
-
-  // Calculate the sum of rotated coordinates
-  for (let i = _n - 1; i >= 0; i--) {
-    const point = polygon[i].rotated;
-    _x += point.x;
-    _y += point.y;
-    _z += point.z;
-  }
-
-  // Calculate the average of rotated coordinates to get the centroid
-  return {
-    x: _x / _n,
-    y: _y / _n,
-    z: _z / _n
-  };
-}
-
-/**
- * Rotates a point in 3D space around the X, Y, and Z axes.
- *
- * @param {Object} po - The 3D point to be rotated.
- * @param {Object} angles - The angles of rotation around the X, Y, and Z axes.
- * @param {number} angles.x - The angle of rotation around the X axis in radians.
- * @param {number} angles.y - The angle of rotation around the Y axis in radians.
- * @param {number} angles.z - The angle of rotation around the Z axis in radians.
- * @param {Array<number>} angles.rotateCenter - The center of rotation.
- * @returns {Object} The rotated 3D point.
- */
-function rotateRzRyRx(po, angles) {
-  const rc = angles.rotateCenter;
-  po.x -= rc.x;
-  po.y -= rc.y;
-  po.z -= rc.z;
-  const rz = rotateZ(po, angles.z);
-  const ry = rotateY(rz, angles.y);
-  const rx = rotateX(ry, angles.x);
-  rx.x += rc.x;
-  rx.y += rc.y;
-  rx.z += rc.z;
-  return rx;
-}
-
-/**
- * Rotates a 3D point around the X axis.
- *
- * @param {Object} p - The 3D point to be rotated.
- * @param {number} a - The angle of rotation in radians.
- * @returns {Object} The rotated 3D point.
- */
-function rotateX(p, a) {
-  const sa = Math.sin(a);
-  const ca = Math.cos(a);
-  return {
-    x: p.x,
-    y: p.y * ca - p.z * sa,
-    z: p.y * sa + p.z * ca
-  };
-}
-
-/**
- * Rotates a 3D point around the Y axis.
- *
- * @param {Object} p - The 3D point to be rotated.
- * @param {number} a - The angle of rotation in radians.
- * @returns {Object} The rotated 3D point.
- */
-function rotateY(p, a) {
-  const sa = Math.sin(a);
-  const ca = Math.cos(a);
-  return {
-    x: p.z * sa + p.x * ca,
-    y: p.y,
-    z: p.z * ca - p.x * sa
-  };
-}
-
-/**
- * Rotates a 3D point around the Z axis.
- *
- * @param {Object} p - The 3D point to be rotated.
- * @param {number} a - The angle of rotation in radians.
- * @returns {Object} The rotated 3D point.
- */
-function rotateZ(p, a) {
-  const sa = Math.sin(a);
-  const ca = Math.cos(a);
-  return {
-    x: p.x * ca - p.y * sa,
-    y: p.x * sa + p.y * ca,
-    z: p.z
-  };
-}
-
-function point(points, options, point, angles) {
-  for (let i = points.length - 1; i >= 0; i--) {
-    const p = points[i];
-    p.rotated = rotateRzRyRx({
-      x: point.x(p),
-      y: point.y(p),
-      z: point.z(p)
-    }, angles);
-    p.centroid = p.rotated;
-    p.projected = options.project(p.rotated, options);
-  }
-  return points;
-}
-function points3D() {
-  return generator3D(point, undefined);
-}
-
-function drawPlane(d) {
-  return `M${d[0].projected.x},${d[0].projected.y}L${d[1].projected.x},${d[1].projected.y}L${d[2].projected.x},${d[2].projected.y}L${d[3].projected.x},${d[3].projected.y}Z`;
-}
-
-function gridPlane(grid, options, point$1, angles) {
-  const points = point(grid, options, point$1, angles);
-  const planes = [];
-  const numPts = options.row;
-  const numRow = points.length / numPts;
-  let cnt = 0;
-  for (var i = numRow - 1; i > 0; i--) {
-    for (var j = numPts - 1; j > 0; j--) {
-      var p1 = j + i * numPts,
-        p4 = p1 - 1,
-        p2 = p4 - numPts + 1,
-        p3 = p2 - 1;
-      var pl = [points[p1], points[p2], points[p3], points[p4]];
-      pl.plane = `plane-${cnt++}`;
-      pl.ccw = ccw(pl);
-      pl.centroid = centroid(pl);
-      planes.push(pl);
-    }
-  }
-  return planes;
-}
-function gridPlanes3D() {
-  return generator3D(gridPlane, drawPlane);
-}
-
-function drawLineStrip(lineStrip) {
-  const lastPoint = lineStrip[lineStrip.length - 1];
-  let path = `M${lastPoint.projected.x},${lastPoint.projected.y}`;
-  for (var i = lineStrip.length - 2; i >= 0; i--) {
-    const p = lineStrip[i].projected;
-    path += `L${p.x},${p.y}`;
-  }
-  return path;
-}
-
-function lineStrip(lineStrip, options, point, angles) {
-  for (let i = lineStrip.length - 1; i >= 0; i--) {
-    const l = lineStrip[i];
-    const m = l.length / 2;
-    const t = parseInt(m);
-    for (let j = l.length - 1; j >= 0; j--) {
-      const p = l[j];
-      p.rotated = rotateRzRyRx({
-        x: point.x(p),
-        y: point.y(p),
-        z: point.z(p)
-      }, angles);
-      p.projected = options.project(p.rotated, options);
-    }
-    l.centroid = t === m ? centroid([l[m - 1], l[m]]) : {
-      x: l[t].rotated.x,
-      y: l[t].rotated.y,
-      z: l[t].rotated.z
-    };
-  }
-  return lineStrip;
-}
-function lineStrips3D() {
-  return generator3D(lineStrip, drawLineStrip);
-}
+    function l(r, t) {
+      const n = r;
+      return n.centroid = u(n), n.ccw = z(n), n.face = t, n;
+    }
+    class Y extends c {
+      data(t) {
+        return t.map(n => {
+          const e = d(n, {
+              origin: this.origin(),
+              rotateCenter: this.rotationCenter(),
+              rotateX: this.rotateX(),
+              rotateY: this.rotateY(),
+              rotateZ: this.rotateZ(),
+              scale: this.scale(),
+              x: this.x(),
+              y: this.y(),
+              z: this.z()
+            }),
+            o = l([e[0], e[1], e[2], e[3]], "front"),
+            s = l([e[7], e[6], e[5], e[4]], "back"),
+            a = l([e[4], e[5], e[1], e[0]], "left"),
+            y = l([e[3], e[2], e[6], e[7]], "right"),
+            x = l([e[4], e[0], e[3], e[7]], "top"),
+            g = l([e[1], e[5], e[6], e[2]], "bottom");
+          return e.faces = [o, s, a, y, x, g], e.centroid = {
+            x: (a.centroid.x + y.centroid.x) / 2,
+            y: (x.centroid.y + g.centroid.y) / 2,
+            z: (o.centroid.z + s.centroid.z) / 2
+          }, e;
+        });
+      }
+      draw(t) {
+        return h(t);
+      }
+    }
+    function P() {
+      return new Y();
+    }
+    class M extends c {
+      constructor() {
+        super(...arguments), this._rows = 1;
+      }
+      rows(t) {
+        return t ? (this._rows = t, this) : this._rows;
+      }
+      data(t) {
+        const n = this._rows,
+          e = d(t, {
+            origin: this.origin(),
+            rotateCenter: this.rotationCenter(),
+            rotateX: this.rotateX(),
+            rotateY: this.rotateY(),
+            rotateZ: this.rotateZ(),
+            scale: this.scale(),
+            x: this.x(),
+            y: this.y(),
+            z: this.z()
+          }),
+          o = e.length / n,
+          s = [];
+        let a = 0;
+        for (let y = o - 1; y > 0; y -= 1) for (let x = n - 1; x > 0; x -= 1) {
+          const g = x + y * n,
+            m = g - 1,
+            p = m - n + 1,
+            N = p - 1,
+            f = [e[g], e[p], e[N], e[m]];
+          f.plane = `plane-${a}`, f.ccw = z(f), f.centroid = u(f), s.push(f), a += 1;
+        }
+        return s;
+      }
+      draw(t) {
+        return h(t);
+      }
+    }
+    function R() {
+      return new M();
+    }
+    class b extends c {
+      data(t) {
+        return t.map(n => {
+          const e = d(n, {
+            origin: this.origin(),
+            rotateCenter: this.rotationCenter(),
+            rotateX: this.rotateX(),
+            rotateY: this.rotateY(),
+            rotateZ: this.rotateZ(),
+            scale: this.scale(),
+            x: this.x(),
+            y: this.y(),
+            z: this.z()
+          });
+          return e.centroid = u(e), e;
+        });
+      }
+    }
+    function L() {
+      return new b();
+    }
+    function S(r) {
+      const t = r[r.length - 1];
+      let n = `M${t.projected.x},${t.projected.y}`;
+      for (let e = r.length - 2; e >= 0; e -= 1) {
+        const o = r[e].projected;
+        n += `L${o.x},${o.y}`;
+      }
+      return n;
+    }
+    class A extends c {
+      data(t) {
+        return t.map(n => {
+          const e = n.length / 2,
+            o = Math.trunc(e),
+            s = d(n, {
+              origin: this.origin(),
+              rotateCenter: this.rotationCenter(),
+              rotateX: this.rotateX(),
+              rotateY: this.rotateY(),
+              rotateZ: this.rotateZ(),
+              scale: this.scale(),
+              x: this.x(),
+              y: this.y(),
+              z: this.z()
+            });
+          return s.centroid = o === e ? u([s[e - 1], s[e]]) : s[o].rotated, s;
+        });
+      }
+      draw(t) {
+        return S(t);
+      }
+    }
+    function T() {
+      return new A();
+    }
+    class k extends c {
+      data(t) {
+        return t.map(n => {
+          const e = d(n, {
+            origin: this.origin(),
+            rotateCenter: this.rotationCenter(),
+            rotateX: this.rotateX(),
+            rotateY: this.rotateY(),
+            rotateZ: this.rotateZ(),
+            scale: this.scale(),
+            x: this.x(),
+            y: this.y(),
+            z: this.z()
+          });
+          return e.ccw = z(e), e.centroid = u(e), e;
+        });
+      }
+      draw(t) {
+        return h(t);
+      }
+    }
+    function F() {
+      return new k();
+    }
+    class G extends c {
+      data(t) {
+        return t.map(n => {
+          const e = {
+              x: this.x()(n),
+              y: this.y()(n),
+              z: this.z()(n)
+            },
+            o = _(e, {
+              x: this.rotateX(),
+              y: this.rotateY(),
+              z: this.rotateZ(),
+              rotateCenter: this.rotationCenter()
+            }),
+            s = w(e, {
+              scale: this.scale(),
+              origin: this.origin()
+            });
+          return {
+            ...n,
+            rotated: o,
+            centroid: o,
+            projected: s
+          };
+        });
+      }
+    }
+    function O() {
+      return new G();
+    }
+    function q(r) {
+      const t = r[r.length - 1];
+      let n = `M${t.projected.x},${t.projected.y}`;
+      for (let e = r.length - 2; e >= 0; e -= 1) {
+        const o = r[e].projected;
+        n += `L${o.x},${o.y}`;
+      }
+      return `${n}Z`;
+    }
+    class B extends c {
+      data(t) {
+        return t.map(n => {
+          const e = d(n, {
+            origin: this.origin(),
+            rotateCenter: this.rotationCenter(),
+            rotateX: this.rotateX(),
+            rotateY: this.rotateY(),
+            rotateZ: this.rotateZ(),
+            scale: this.scale(),
+            x: this.x(),
+            y: this.y(),
+            z: this.z()
+          });
+          return e.ccw = z(e), e.centroid = u(e), e;
+        });
+      }
+      draw(t) {
+        return q(t);
+      }
+    }
+    function E() {
+      return new B();
+    }
+    const H = r => `M${r[0].projected.x},${r[0].projected.y}L${r[1].projected.x},${r[1].projected.y}L${r[2].projected.x},${r[2].projected.y}Z`;
+    class I extends c {
+      data(t) {
+        return t.map(n => {
+          const e = d(n, {
+            origin: this.origin(),
+            rotateCenter: this.rotationCenter(),
+            rotateX: this.rotateX(),
+            rotateY: this.rotateY(),
+            rotateZ: this.rotateZ(),
+            scale: this.scale(),
+            x: this.x(),
+            y: this.y(),
+            z: this.z()
+          });
+          return e.ccw = z(e), e.centroid = u(e), e;
+        });
+      }
+      draw(t) {
+        return H(t);
+      }
+    }
+    function J() {
+      return new I();
+    }
+    function K(r, t) {
+      const n = r.centroid.z,
+        e = t.centroid.z;
+      return n < e ? -1 : n > e ? 1 : 0;
+    }
+    i.cubes3D = P, i.gridPlanes3D = R, i.lineStrips3D = T, i.lines3D = L, i.planes3D = F, i.points3D = O, i.polygons3D = E, i.sort = K, i.triangles3D = J, Object.defineProperty(i, Symbol.toStringTag, {
+      value: "Module"
+    });
+  });
+})(d33d$1, d33d$1.exports);
+var d33dExports = d33d$1.exports;
 
 var cssKeywords = {
   aliceblue: [240, 248, 255],
@@ -25794,6 +25691,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -25817,6 +25715,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -25857,6 +25756,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -25870,7 +25770,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
   }
   render() {
     /* eslint-disable-line class-methods-use-this */
-    return x$3`
+    return x$2`
     `;
   }
   willUpdate() {
@@ -25926,10 +25826,11 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
     };
     const startRotationX = -0.85 * Math.PI / 8;
     const startRotationY = 3 * Math.PI / 8;
-    const startRotationZ = 0;
-    const lineStrips3D$1 = lineStrips3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
-    const points3d = points3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
-    const grid3d = gridPlanes3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
+    const startRotationZ = 0.0000001; // Avoid d3-3d bug
+
+    const lineStrips3D = d33dExports.lineStrips3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
+    const points3d = d33dExports.points3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
+    const grid3d = d33dExports.gridPlanes3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
 
     // SVG Drag behaviors
     const svgDrag = drag().on('start', event => {
@@ -25994,35 +25895,35 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
 
     // Axes
     //  DATA-JOIN
-    const axisXUpdate = svgMerge.selectAll('.axis-x').data(lineStrips3D$1.x(datum => {
+    const axisXUpdate = svgMerge.selectAll('.axis-x').data(lineStrips3D.x(datum => {
       return datum.x;
     }).y(() => {
       return yScale.range()[0];
     }).z(() => {
       return zScale.range()[0];
-    })(xAxis));
-    const axisYUpdate = svgMerge.selectAll('.axis-y').data(lineStrips3D$1.x(() => {
+    }).data(xAxis));
+    const axisYUpdate = svgMerge.selectAll('.axis-y').data(lineStrips3D.x(() => {
       return xScale.range()[0];
     }).y(datum => {
       return datum.y;
     }).z(() => {
       return zScale.range()[1];
-    })(yAxis));
-    const axisZUpdate = svgMerge.selectAll('.axis-z').data(lineStrips3D$1.x(() => {
+    }).data(yAxis));
+    const axisZUpdate = svgMerge.selectAll('.axis-z').data(lineStrips3D.x(() => {
       return xScale.range()[0];
     }).y(() => {
       return yScale.range()[0];
     }).z(datum => {
       return datum.z;
-    })(zAxis));
+    }).data(zAxis));
     //  ENTER
     const axisXEnter = axisXUpdate.enter().append('path').attr('class', 'd3-3d axis axis-x');
     const axisYEnter = axisYUpdate.enter().append('path').attr('class', 'd3-3d axis axis-y');
     const axisZEnter = axisZUpdate.enter().append('path').attr('class', 'd3-3d axis axis-z');
     // MERGE
-    const axisXMerge = axisXEnter.merge(axisXUpdate).attr('d', lineStrips3D$1.draw);
-    const axisYMerge = axisYEnter.merge(axisYUpdate).attr('d', lineStrips3D$1.draw);
-    const axisZMerge = axisZEnter.merge(axisZUpdate).attr('d', lineStrips3D$1.draw);
+    const axisXMerge = axisXEnter.merge(axisXUpdate).attr('d', lineStrips3D.draw);
+    const axisYMerge = axisYEnter.merge(axisYUpdate).attr('d', lineStrips3D.draw);
+    const axisZMerge = axisZEnter.merge(axisZUpdate).attr('d', lineStrips3D.draw);
     // EXIT
     axisXMerge.exit().remove();
     axisYMerge.exit().remove();
@@ -26030,34 +25931,52 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
 
     // Axis Titles
     //  DATA-JOIN
-    const titlePathXUpdate = svgMerge.selectAll('.title-path-x').data(lineStrips3D$1.x(datum => {
+    const titlePathXUpdate = svgMerge.selectAll('.title-path-x').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
     }).y(() => {
       return yScale.range()[0] + this.rem * 1.75;
     }).z(() => {
       return zScale.range()[0] + this.rem * 1.75;
-    })(xAxis));
-    const titlePathYUpdate = svgMerge.selectAll('.title-path-y').data(lineStrips3D$1.x(() => {
+    }).data(xAxis));
+    const titlePathYUpdate = svgMerge.selectAll('.title-path-y').data(lineStrips3D.x(() => {
       return xScale.range()[0] - this.rem * 1.75;
     }).y(datum => {
       return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
     }).z(() => {
       return zScale.range()[1] - this.rem * 1.75;
-    })(yAxis));
-    const titlePathZUpdate = svgMerge.selectAll('.title-path-z').data(lineStrips3D$1.x(() => {
+    }).data(yAxis));
+    const titlePathZUpdate = svgMerge.selectAll('.title-path-z').data(lineStrips3D.x(() => {
       return xScale.range()[0] - this.rem * 1.75;
     }).y(() => {
       return yScale.range()[0] + this.rem * 1.75;
     }).z(datum => {
       return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
-    })(zAxis));
-    const titleXUpdate = svgMerge.selectAll('.title-x').data(xAxis, datum => {
+    }).data(zAxis));
+    const titleXUpdate = svgMerge.selectAll('.title-x').data(lineStrips3D.x(datum => {
+      return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
+    }).y(() => {
+      return yScale.range()[0] + this.rem * 1.75;
+    }).z(() => {
+      return zScale.range()[0] + this.rem * 1.75;
+    }).data(xAxis), datum => {
       return datum[0].title;
     });
-    const titleYUpdate = svgMerge.selectAll('.title-y').data(yAxis, datum => {
+    const titleYUpdate = svgMerge.selectAll('.title-y').data(lineStrips3D.x(() => {
+      return xScale.range()[0] - this.rem * 1.75;
+    }).y(datum => {
+      return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
+    }).z(() => {
+      return zScale.range()[1] - this.rem * 1.75;
+    }).data(yAxis), datum => {
       return datum[0].title;
     });
-    const titleZUpdate = svgMerge.selectAll('.title-z').data(zAxis, datum => {
+    const titleZUpdate = svgMerge.selectAll('.title-z').data(lineStrips3D.x(() => {
+      return xScale.range()[0] - this.rem * 1.75;
+    }).y(() => {
+      return yScale.range()[0] + this.rem * 1.75;
+    }).z(datum => {
+      return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
+    }).data(zAxis), datum => {
       return datum[0].title;
     });
     //  ENTER
@@ -26071,9 +25990,9 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
     const titleZEnter = titleZUpdate.enter().append('text').attr('class', 'd3-3d title title-z');
     titleZEnter.append('textPath').attr('href', '#title-z').attr('startOffset', '50%');
     // MERGE
-    const titlePathXMerge = titlePathXEnter.merge(titlePathXUpdate).attr('d', lineStrips3D$1.draw);
-    const titlePathYMerge = titlePathYEnter.merge(titlePathYUpdate).attr('d', lineStrips3D$1.draw);
-    const titlePathZMerge = titlePathZEnter.merge(titlePathZUpdate).attr('d', lineStrips3D$1.draw);
+    const titlePathXMerge = titlePathXEnter.merge(titlePathXUpdate).attr('d', lineStrips3D.draw);
+    const titlePathYMerge = titlePathYEnter.merge(titlePathYUpdate).attr('d', lineStrips3D.draw);
+    const titlePathZMerge = titlePathZEnter.merge(titlePathZUpdate).attr('d', lineStrips3D.draw);
     const titleXMerge = titleXEnter.merge(titleXUpdate).select('textPath').html(datum => {
       return datum[0].title;
     });
@@ -26126,35 +26045,35 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
 
     // Axis Ticks
     //  DATA-JOIN
-    const ticksXUpdate = svgMerge.selectAll('.tick-x').data(lineStrips3D$1.x(datum => {
+    const ticksXUpdate = svgMerge.selectAll('.tick-x').data(lineStrips3D.x(datum => {
       return datum.x;
     }).y(datum => {
       return datum.id === 'min' ? yScale.range()[0] : yScale.range()[0] + this.rem * 0.35;
     }).z(datum => {
       return datum.id === 'min' ? zScale.range()[0] : zScale.range()[0] + this.rem * 0.35;
-    })(xTicks));
-    const ticksYUpdate = svgMerge.selectAll('.tick-y').data(lineStrips3D$1.x(datum => {
+    }).data(xTicks));
+    const ticksYUpdate = svgMerge.selectAll('.tick-y').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? xScale.range()[0] : xScale.range()[0] - this.rem * 0.35;
     }).y(datum => {
       return datum.y;
     }).z(datum => {
       return datum.id === 'min' ? zScale.range()[1] : zScale.range()[1] - this.rem * 0.35;
-    })(yTicks));
-    const ticksZUpdate = svgMerge.selectAll('.tick-z').data(lineStrips3D$1.x(datum => {
+    }).data(yTicks));
+    const ticksZUpdate = svgMerge.selectAll('.tick-z').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? xScale.range()[0] : xScale.range()[0] - this.rem * 0.35;
     }).y(datum => {
       return datum.id === 'min' ? yScale.range()[0] : yScale.range()[0] + this.rem * 0.35;
     }).z(datum => {
       return datum.z;
-    })(zTicks));
+    }).data(zTicks));
     //  ENTER
     const ticksXEnter = ticksXUpdate.enter().append('path').attr('class', 'd3-3d tick tick-x');
     const ticksYEnter = ticksYUpdate.enter().append('path').attr('class', 'd3-3d tick tick-y');
     const ticksZEnter = ticksZUpdate.enter().append('path').attr('class', 'd3-3d tick tick-z');
     // MERGE
-    const ticksXMerge = ticksXEnter.merge(ticksXUpdate).attr('d', lineStrips3D$1.draw);
-    const ticksYMerge = ticksYEnter.merge(ticksYUpdate).attr('d', lineStrips3D$1.draw);
-    const ticksZMerge = ticksZEnter.merge(ticksZUpdate).attr('d', lineStrips3D$1.draw);
+    const ticksXMerge = ticksXEnter.merge(ticksXUpdate).attr('d', lineStrips3D.draw);
+    const ticksYMerge = ticksYEnter.merge(ticksYUpdate).attr('d', lineStrips3D.draw);
+    const ticksZMerge = ticksZEnter.merge(ticksZUpdate).attr('d', lineStrips3D.draw);
     // EXIT
     ticksXMerge.exit().remove();
     ticksYMerge.exit().remove();
@@ -26162,40 +26081,58 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
 
     // Axis Tick Labels
     //  DATA-JOIN
-    const labelPathsXUpdate = svgMerge.selectAll('.label-path-x').data(lineStrips3D$1.x(datum => {
+    const labelPathsXUpdate = svgMerge.selectAll('.label-path-x').data(lineStrips3D.x(datum => {
       return datum.x;
     }).y(datum => {
       return datum.id === 'min' ? yScale.range()[0] + this.rem * 4 : yScale.range()[0] + this.rem * 0.5;
     }).z(datum => {
       return datum.id === 'min' ? zScale.range()[0] + this.rem * 4 : zScale.range()[0] + this.rem * 0.5;
-    })(xTicks), datum => {
+    }).data(xTicks), datum => {
       return datum[0].label;
     });
-    const labelPathsYUpdate = svgMerge.selectAll('.label-path-y').data(lineStrips3D$1.x(datum => {
+    const labelPathsYUpdate = svgMerge.selectAll('.label-path-y').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? xScale.range()[0] - this.rem * 0.5 : xScale.range()[0] - this.rem * 4;
     }).y(datum => {
       return datum.y;
     }).z(datum => {
       return datum.id === 'min' ? zScale.range()[1] - this.rem * 0.5 : zScale.range()[1] - this.rem * 4;
-    })(yTicks), datum => {
+    }).data(yTicks), datum => {
       return datum[0].label;
     });
-    const labelPathsZUpdate = svgMerge.selectAll('.label-path-z').data(lineStrips3D$1.x(datum => {
+    const labelPathsZUpdate = svgMerge.selectAll('.label-path-z').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? xScale.range()[0] - this.rem * 4 : xScale.range()[0] - this.rem * 0.5;
     }).y(datum => {
       return datum.id === 'min' ? yScale.range()[0] + this.rem * 4 : yScale.range()[0] + this.rem * 0.5;
     }).z(datum => {
       return datum.z;
-    })(zTicks), datum => {
+    }).data(zTicks), datum => {
       return datum[0].label;
     });
-    const labelsXUpdate = svgMerge.selectAll('.label-x').data(xTicks, datum => {
+    const labelsXUpdate = svgMerge.selectAll('.label-x').data(lineStrips3D.x(datum => {
+      return datum.x;
+    }).y(datum => {
+      return datum.id === 'min' ? yScale.range()[0] + this.rem * 4 : yScale.range()[0] + this.rem * 0.5;
+    }).z(datum => {
+      return datum.id === 'min' ? zScale.range()[0] + this.rem * 4 : zScale.range()[0] + this.rem * 0.5;
+    }).data(xTicks), datum => {
       return datum[0].label;
     });
-    const labelsYUpdate = svgMerge.selectAll('.label-y').data(yTicks, datum => {
+    const labelsYUpdate = svgMerge.selectAll('.label-y').data(lineStrips3D.x(datum => {
+      return datum.id === 'min' ? xScale.range()[0] - this.rem * 0.5 : xScale.range()[0] - this.rem * 4;
+    }).y(datum => {
+      return datum.y;
+    }).z(datum => {
+      return datum.id === 'min' ? zScale.range()[1] - this.rem * 0.5 : zScale.range()[1] - this.rem * 4;
+    }).data(yTicks), datum => {
       return datum[0].label;
     });
-    const labelsZUpdate = svgMerge.selectAll('.label-z').data(zTicks, datum => {
+    const labelsZUpdate = svgMerge.selectAll('.label-z').data(lineStrips3D.x(datum => {
+      return datum.id === 'min' ? xScale.range()[0] - this.rem * 4 : xScale.range()[0] - this.rem * 0.5;
+    }).y(datum => {
+      return datum.id === 'min' ? yScale.range()[0] + this.rem * 4 : yScale.range()[0] + this.rem * 0.5;
+    }).z(datum => {
+      return datum.z;
+    }).data(zTicks), datum => {
       return datum[0].label;
     });
     //  ENTER
@@ -26221,9 +26158,9 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
       return `#label-z-${index}`;
     }).attr('startOffset', '100%');
     //  MERGE
-    const labelPathsXMerge = labelPathsXEnter.merge(labelPathsXUpdate).attr('d', lineStrips3D$1.draw);
-    const labelPathsYMerge = labelPathsYEnter.merge(labelPathsYUpdate).attr('d', lineStrips3D$1.draw);
-    const labelPathsZMerge = labelPathsZEnter.merge(labelPathsZUpdate).attr('d', lineStrips3D$1.draw);
+    const labelPathsXMerge = labelPathsXEnter.merge(labelPathsXUpdate).attr('d', lineStrips3D.draw);
+    const labelPathsYMerge = labelPathsYEnter.merge(labelPathsYUpdate).attr('d', lineStrips3D.draw);
+    const labelPathsZMerge = labelPathsZEnter.merge(labelPathsZUpdate).attr('d', lineStrips3D.draw);
     const labelsXMerge = labelsXEnter.merge(labelsXUpdate).select('textPath').text(datum => {
       return datum[0].label;
     });
@@ -26249,7 +26186,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
       return yScale(datum.g);
     }).z(datum => {
       return zScale(datum.l);
-    })(this.point ? [{
+    }).data(this.point ? [{
       a: this.a,
       g: this.g,
       l: this.l,
@@ -26327,7 +26264,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
       return yScale(datum.g);
     }).z(datum => {
       return zScale(datum.l);
-    })(this.boundary).filter(datum => {
+    }).data(this.boundary).filter(datum => {
       return datum[0].a >= this.range.a.start && datum[0].a <= this.range.a.stop && datum[1].a >= this.range.a.start && datum[1].a <= this.range.a.stop && datum[2].a >= this.range.a.start && datum[2].a <= this.range.a.stop && datum[3].a >= this.range.a.start && datum[3].a <= this.range.a.stop;
     }) : []);
     //  ENTER
@@ -26353,21 +26290,21 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
       return yScale(datum.g);
     }).z(datum => {
       return zScale(datum.l);
-    })(this.mapXY));
+    }).data(this.mapXY));
     const mapXZUpdate = svgMerge.selectAll('.map-xz').data(grid3d.rows(range$1(this.range.l.start, this.range.l.stop + 0.01, this.range.l.step).length).x(datum => {
       return xScale(datum.a);
     }).y(datum => {
       return yScale(datum.g);
     }).z(datum => {
       return zScale(datum.l);
-    })(this.mapXZ));
+    }).data(this.mapXZ));
     const mapYZUpdate = svgMerge.selectAll('.map-yz').data(grid3d.rows(range$1(this.range.l.start, this.range.l.stop + 0.01, this.range.l.step).length).x(datum => {
       return xScale(datum.a);
     }).y(datum => {
       return yScale(datum.g);
     }).z(datum => {
       return zScale(datum.l);
-    })(this.mapYZ));
+    }).data(this.mapYZ));
     //  ENTER
     const mapXYEnter = mapXYUpdate.enter().append('path').attr('class', 'd3-3d map map-xy');
     const mapXZEnter = mapXZUpdate.enter().append('path').attr('class', 'd3-3d map map-xz');
@@ -26406,7 +26343,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
     mapYZUpdate.exit().remove();
 
     // Depth sorting
-    select(this.renderRoot).selectAll('.d3-3d').sort(points3d.sort);
+    select(this.renderRoot).selectAll('.d3-3d').sort(d33dExports.sort);
 
     // Color Legend
     //  DATA-JOIN
@@ -26693,9 +26630,9 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
         .curve-p.interactive,
         .curve-n.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve-p.interactive:hover,
@@ -26715,8 +26652,8 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
           transform: translateY(0);
         }
 
-        :host(.keyboard) .curve-p.interactive:focus,
-        :host(.keyboard) .curve-n.interactive:focus {
+        .curve-p.interactive:focus-visible,
+        .curve-n.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -26725,9 +26662,9 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -26749,7 +26686,7 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -26789,8 +26726,8 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve-p,
@@ -26824,8 +26761,8 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -26837,15 +26774,15 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `];
   }
   render() {
     /* eslint-disable-line class-methods-use-this */
-    return x$3``;
+    return x$2``;
   }
   willUpdate() {
     this.alignState();
@@ -27854,6 +27791,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -27877,6 +27815,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -27917,6 +27856,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -27930,7 +27870,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
   }
   render() {
     /* eslint-disable-line class-methods-use-this */
-    return x$3`
+    return x$2`
     `;
   }
   willUpdate() {
@@ -27986,10 +27926,11 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
     };
     const startRotationX = -0.85 * Math.PI / 8;
     const startRotationY = 3 * Math.PI / 8;
-    const startRotationZ = 0;
-    const lineStrips3D$1 = lineStrips3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
-    const points3d = points3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
-    const grid3d = gridPlanes3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
+    const startRotationZ = 0.0000001; // Avoid d3-3d bug
+
+    const lineStrips3D = d33dExports.lineStrips3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
+    const points3d = d33dExports.points3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
+    const grid3d = d33dExports.gridPlanes3D().origin(startOrigin).scale(startScale).rotationCenter(startRotationCenter).rotateX(startRotationX + this.rotationX).rotateY(startRotationY + this.rotationY).rotateZ(startRotationZ);
 
     // SVG Drag behaviors
     const svgDrag = drag().on('start', event => {
@@ -28054,35 +27995,35 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
 
     // Axes
     //  DATA-JOIN
-    const axisXUpdate = svgMerge.selectAll('.axis-x').data(lineStrips3D$1.x(datum => {
+    const axisXUpdate = svgMerge.selectAll('.axis-x').data(lineStrips3D.x(datum => {
       return datum.x;
     }).y(() => {
       return yScale.range()[0];
     }).z(() => {
       return zScale.range()[0];
-    })(xAxis));
-    const axisYUpdate = svgMerge.selectAll('.axis-y').data(lineStrips3D$1.x(() => {
+    }).data(xAxis));
+    const axisYUpdate = svgMerge.selectAll('.axis-y').data(lineStrips3D.x(() => {
       return xScale.range()[0];
     }).y(datum => {
       return datum.y;
     }).z(() => {
       return zScale.range()[1];
-    })(yAxis));
-    const axisZUpdate = svgMerge.selectAll('.axis-z').data(lineStrips3D$1.x(() => {
+    }).data(yAxis));
+    const axisZUpdate = svgMerge.selectAll('.axis-z').data(lineStrips3D.x(() => {
       return xScale.range()[0];
     }).y(() => {
       return yScale.range()[0];
     }).z(datum => {
       return datum.z;
-    })(zAxis));
+    }).data(zAxis));
     //  ENTER
     const axisXEnter = axisXUpdate.enter().append('path').attr('class', 'd3-3d axis axis-x');
     const axisYEnter = axisYUpdate.enter().append('path').attr('class', 'd3-3d axis axis-y');
     const axisZEnter = axisZUpdate.enter().append('path').attr('class', 'd3-3d axis axis-z');
     // MERGE
-    const axisXMerge = axisXEnter.merge(axisXUpdate).attr('d', lineStrips3D$1.draw);
-    const axisYMerge = axisYEnter.merge(axisYUpdate).attr('d', lineStrips3D$1.draw);
-    const axisZMerge = axisZEnter.merge(axisZUpdate).attr('d', lineStrips3D$1.draw);
+    const axisXMerge = axisXEnter.merge(axisXUpdate).attr('d', lineStrips3D.draw);
+    const axisYMerge = axisYEnter.merge(axisYUpdate).attr('d', lineStrips3D.draw);
+    const axisZMerge = axisZEnter.merge(axisZUpdate).attr('d', lineStrips3D.draw);
     // EXIT
     axisXMerge.exit().remove();
     axisYMerge.exit().remove();
@@ -28090,34 +28031,52 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
 
     // Axis Titles
     //  DATA-JOIN
-    const titlePathXUpdate = svgMerge.selectAll('.title-path-x').data(lineStrips3D$1.x(datum => {
+    const titlePathXUpdate = svgMerge.selectAll('.title-path-x').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
     }).y(() => {
       return yScale.range()[0] + this.rem * 1.75;
     }).z(() => {
       return zScale.range()[0] + this.rem * 1.75;
-    })(xAxis));
-    const titlePathYUpdate = svgMerge.selectAll('.title-path-y').data(lineStrips3D$1.x(() => {
+    }).data(xAxis));
+    const titlePathYUpdate = svgMerge.selectAll('.title-path-y').data(lineStrips3D.x(() => {
       return xScale.range()[0] - this.rem * 1.75;
     }).y(datum => {
       return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
     }).z(() => {
       return zScale.range()[1] - this.rem * 1.75;
-    })(yAxis));
-    const titlePathZUpdate = svgMerge.selectAll('.title-path-z').data(lineStrips3D$1.x(() => {
+    }).data(yAxis));
+    const titlePathZUpdate = svgMerge.selectAll('.title-path-z').data(lineStrips3D.x(() => {
       return xScale.range()[0] - this.rem * 1.75;
     }).y(() => {
       return yScale.range()[0] + this.rem * 1.75;
     }).z(datum => {
       return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
-    })(zAxis));
-    const titleXUpdate = svgMerge.selectAll('.title-x').data(xAxis, datum => {
+    }).data(zAxis));
+    const titleXUpdate = svgMerge.selectAll('.title-x').data(lineStrips3D.x(datum => {
+      return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
+    }).y(() => {
+      return yScale.range()[0] + this.rem * 1.75;
+    }).z(() => {
+      return zScale.range()[0] + this.rem * 1.75;
+    }).data(xAxis), datum => {
       return datum[0].title;
     });
-    const titleYUpdate = svgMerge.selectAll('.title-y').data(yAxis, datum => {
+    const titleYUpdate = svgMerge.selectAll('.title-y').data(lineStrips3D.x(() => {
+      return xScale.range()[0] - this.rem * 1.75;
+    }).y(datum => {
+      return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
+    }).z(() => {
+      return zScale.range()[1] - this.rem * 1.75;
+    }).data(yAxis), datum => {
       return datum[0].title;
     });
-    const titleZUpdate = svgMerge.selectAll('.title-z').data(zAxis, datum => {
+    const titleZUpdate = svgMerge.selectAll('.title-z').data(lineStrips3D.x(() => {
+      return xScale.range()[0] - this.rem * 1.75;
+    }).y(() => {
+      return yScale.range()[0] + this.rem * 1.75;
+    }).z(datum => {
+      return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
+    }).data(zAxis), datum => {
       return datum[0].title;
     });
     //  ENTER
@@ -28131,9 +28090,9 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
     const titleZEnter = titleZUpdate.enter().append('text').attr('class', 'd3-3d title title-z');
     titleZEnter.append('textPath').attr('href', '#title-z').attr('startOffset', '50%');
     // MERGE
-    const titlePathXMerge = titlePathXEnter.merge(titlePathXUpdate).attr('d', lineStrips3D$1.draw);
-    const titlePathYMerge = titlePathYEnter.merge(titlePathYUpdate).attr('d', lineStrips3D$1.draw);
-    const titlePathZMerge = titlePathZEnter.merge(titlePathZUpdate).attr('d', lineStrips3D$1.draw);
+    const titlePathXMerge = titlePathXEnter.merge(titlePathXUpdate).attr('d', lineStrips3D.draw);
+    const titlePathYMerge = titlePathYEnter.merge(titlePathYUpdate).attr('d', lineStrips3D.draw);
+    const titlePathZMerge = titlePathZEnter.merge(titlePathZUpdate).attr('d', lineStrips3D.draw);
     const titleXMerge = titleXEnter.merge(titleXUpdate).select('textPath').html(datum => {
       return datum[0].title;
     });
@@ -28186,35 +28145,35 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
 
     // Axis Ticks
     //  DATA-JOIN
-    const ticksXUpdate = svgMerge.selectAll('.tick-x').data(lineStrips3D$1.x(datum => {
+    const ticksXUpdate = svgMerge.selectAll('.tick-x').data(lineStrips3D.x(datum => {
       return datum.x;
     }).y(datum => {
       return datum.id === 'min' ? yScale.range()[0] : yScale.range()[0] + this.rem * 0.35;
     }).z(datum => {
       return datum.id === 'min' ? zScale.range()[0] : zScale.range()[0] + this.rem * 0.35;
-    })(xTicks));
-    const ticksYUpdate = svgMerge.selectAll('.tick-y').data(lineStrips3D$1.x(datum => {
+    }).data(xTicks));
+    const ticksYUpdate = svgMerge.selectAll('.tick-y').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? xScale.range()[0] : xScale.range()[0] - this.rem * 0.35;
     }).y(datum => {
       return datum.y;
     }).z(datum => {
       return datum.id === 'min' ? zScale.range()[1] : zScale.range()[1] - this.rem * 0.35;
-    })(yTicks));
-    const ticksZUpdate = svgMerge.selectAll('.tick-z').data(lineStrips3D$1.x(datum => {
+    }).data(yTicks));
+    const ticksZUpdate = svgMerge.selectAll('.tick-z').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? xScale.range()[0] : xScale.range()[0] - this.rem * 0.35;
     }).y(datum => {
       return datum.id === 'min' ? yScale.range()[0] : yScale.range()[0] + this.rem * 0.35;
     }).z(datum => {
       return datum.z;
-    })(zTicks));
+    }).data(zTicks));
     //  ENTER
     const ticksXEnter = ticksXUpdate.enter().append('path').attr('class', 'd3-3d tick tick-x');
     const ticksYEnter = ticksYUpdate.enter().append('path').attr('class', 'd3-3d tick tick-y');
     const ticksZEnter = ticksZUpdate.enter().append('path').attr('class', 'd3-3d tick tick-z');
     // MERGE
-    const ticksXMerge = ticksXEnter.merge(ticksXUpdate).attr('d', lineStrips3D$1.draw);
-    const ticksYMerge = ticksYEnter.merge(ticksYUpdate).attr('d', lineStrips3D$1.draw);
-    const ticksZMerge = ticksZEnter.merge(ticksZUpdate).attr('d', lineStrips3D$1.draw);
+    const ticksXMerge = ticksXEnter.merge(ticksXUpdate).attr('d', lineStrips3D.draw);
+    const ticksYMerge = ticksYEnter.merge(ticksYUpdate).attr('d', lineStrips3D.draw);
+    const ticksZMerge = ticksZEnter.merge(ticksZUpdate).attr('d', lineStrips3D.draw);
     // EXIT
     ticksXMerge.exit().remove();
     ticksYMerge.exit().remove();
@@ -28222,40 +28181,58 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
 
     // Axis Tick Labels
     //  DATA-JOIN
-    const labelPathsXUpdate = svgMerge.selectAll('.label-path-x').data(lineStrips3D$1.x(datum => {
+    const labelPathsXUpdate = svgMerge.selectAll('.label-path-x').data(lineStrips3D.x(datum => {
       return datum.x;
     }).y(datum => {
       return datum.id === 'min' ? yScale.range()[0] + this.rem * 4 : yScale.range()[0] + this.rem * 0.5;
     }).z(datum => {
       return datum.id === 'min' ? zScale.range()[0] + this.rem * 4 : zScale.range()[0] + this.rem * 0.5;
-    })(xTicks), datum => {
+    }).data(xTicks), datum => {
       return datum[0].label;
     });
-    const labelPathsYUpdate = svgMerge.selectAll('.label-path-y').data(lineStrips3D$1.x(datum => {
+    const labelPathsYUpdate = svgMerge.selectAll('.label-path-y').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? xScale.range()[0] - this.rem * 0.5 : xScale.range()[0] - this.rem * 4;
     }).y(datum => {
       return datum.y;
     }).z(datum => {
       return datum.id === 'min' ? zScale.range()[1] - this.rem * 0.5 : zScale.range()[1] - this.rem * 4;
-    })(yTicks), datum => {
+    }).data(yTicks), datum => {
       return datum[0].label;
     });
-    const labelPathsZUpdate = svgMerge.selectAll('.label-path-z').data(lineStrips3D$1.x(datum => {
+    const labelPathsZUpdate = svgMerge.selectAll('.label-path-z').data(lineStrips3D.x(datum => {
       return datum.id === 'min' ? xScale.range()[0] - this.rem * 4 : xScale.range()[0] - this.rem * 0.5;
     }).y(datum => {
       return datum.id === 'min' ? yScale.range()[0] + this.rem * 4 : yScale.range()[0] + this.rem * 0.5;
     }).z(datum => {
       return datum.z;
-    })(zTicks), datum => {
+    }).data(zTicks), datum => {
       return datum[0].label;
     });
-    const labelsXUpdate = svgMerge.selectAll('.label-x').data(xTicks, datum => {
+    const labelsXUpdate = svgMerge.selectAll('.label-x').data(lineStrips3D.x(datum => {
+      return datum.x;
+    }).y(datum => {
+      return datum.id === 'min' ? yScale.range()[0] + this.rem * 4 : yScale.range()[0] + this.rem * 0.5;
+    }).z(datum => {
+      return datum.id === 'min' ? zScale.range()[0] + this.rem * 4 : zScale.range()[0] + this.rem * 0.5;
+    }).data(xTicks), datum => {
       return datum[0].label;
     });
-    const labelsYUpdate = svgMerge.selectAll('.label-y').data(yTicks, datum => {
+    const labelsYUpdate = svgMerge.selectAll('.label-y').data(lineStrips3D.x(datum => {
+      return datum.id === 'min' ? xScale.range()[0] - this.rem * 0.5 : xScale.range()[0] - this.rem * 4;
+    }).y(datum => {
+      return datum.y;
+    }).z(datum => {
+      return datum.id === 'min' ? zScale.range()[1] - this.rem * 0.5 : zScale.range()[1] - this.rem * 4;
+    }).data(yTicks), datum => {
       return datum[0].label;
     });
-    const labelsZUpdate = svgMerge.selectAll('.label-z').data(zTicks, datum => {
+    const labelsZUpdate = svgMerge.selectAll('.label-z').data(lineStrips3D.x(datum => {
+      return datum.id === 'min' ? xScale.range()[0] - this.rem * 4 : xScale.range()[0] - this.rem * 0.5;
+    }).y(datum => {
+      return datum.id === 'min' ? yScale.range()[0] + this.rem * 4 : yScale.range()[0] + this.rem * 0.5;
+    }).z(datum => {
+      return datum.z;
+    }).data(zTicks), datum => {
       return datum[0].label;
     });
     //  ENTER
@@ -28281,9 +28258,9 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
       return `#label-z-${index}`;
     }).attr('startOffset', '100%');
     //  MERGE
-    const labelPathsXMerge = labelPathsXEnter.merge(labelPathsXUpdate).attr('d', lineStrips3D$1.draw);
-    const labelPathsYMerge = labelPathsYEnter.merge(labelPathsYUpdate).attr('d', lineStrips3D$1.draw);
-    const labelPathsZMerge = labelPathsZEnter.merge(labelPathsZUpdate).attr('d', lineStrips3D$1.draw);
+    const labelPathsXMerge = labelPathsXEnter.merge(labelPathsXUpdate).attr('d', lineStrips3D.draw);
+    const labelPathsYMerge = labelPathsYEnter.merge(labelPathsYUpdate).attr('d', lineStrips3D.draw);
+    const labelPathsZMerge = labelPathsZEnter.merge(labelPathsZUpdate).attr('d', lineStrips3D.draw);
     const labelsXMerge = labelsXEnter.merge(labelsXUpdate).select('textPath').text(datum => {
       return datum[0].label;
     });
@@ -28309,7 +28286,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
       return yScale(datum.pw);
     }).z(datum => {
       return zScale(datum.xw);
-    })(this.choices.slice(this.point === 'rest' ? 1 : 0, this.point === 'first' ? 1 : undefined)), datum => {
+    }).data(this.choices.slice(this.point === 'rest' ? 1 : 0, this.point === 'first' ? 1 : undefined)), datum => {
       return datum.name;
     });
     //  ENTER
@@ -28384,7 +28361,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
       return yScale(datum.pw);
     }).z(datum => {
       return zScale(datum.xw);
-    })(this.boundary).filter(datum => {
+    }).data(this.boundary).filter(datum => {
       return datum[0].pw >= this.range.pw.start && datum[0].pw <= this.range.pw.stop && datum[1].pw >= this.range.pw.start && datum[1].pw <= this.range.pw.stop && datum[2].pw >= this.range.pw.start && datum[2].pw <= this.range.pw.stop && datum[3].pw >= this.range.pw.start && datum[3].pw <= this.range.pw.stop;
     }) : []);
     //  ENTER
@@ -28410,21 +28387,21 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
       return yScale(datum.pw);
     }).z(datum => {
       return zScale(datum.xw);
-    })(this.mapXY));
+    }).data(this.mapXY));
     const mapXZUpdate = svgMerge.selectAll('.map-xz').data(grid3d.rows(range$1(this.range.xw.start, this.range.xw.stop + 0.01, this.range.xw.step).length).x(datum => {
       return xScale(datum.xs);
     }).y(datum => {
       return yScale(datum.pw);
     }).z(datum => {
       return zScale(datum.xw);
-    })(this.mapXZ));
+    }).data(this.mapXZ));
     const mapYZUpdate = svgMerge.selectAll('.map-yz').data(grid3d.rows(range$1(this.range.xw.start, this.range.xw.stop + 0.01, this.range.xw.step).length).x(datum => {
       return xScale(datum.xs);
     }).y(datum => {
       return yScale(datum.pw);
     }).z(datum => {
       return zScale(datum.xw);
-    })(this.mapYZ));
+    }).data(this.mapYZ));
     //  ENTER
     const mapXYEnter = mapXYUpdate.enter().append('path').attr('class', 'd3-3d map map-xy');
     const mapXZEnter = mapXZUpdate.enter().append('path').attr('class', 'd3-3d map map-xz');
@@ -28463,7 +28440,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
     mapYZUpdate.exit().remove();
 
     // Depth sorting
-    select(this.renderRoot).selectAll('.d3-3d').sort(points3d.sort);
+    select(this.renderRoot).selectAll('.d3-3d').sort(d33dExports.sort);
 
     // Color Legend
     //  DATA-JOIN
@@ -28627,17 +28604,17 @@ class ProspectableControl extends ProspectableElement {
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <div class="holder">
-        ${this.trials != null ? x$3`<decidables-slider min="1" max="100" step="1" .value=${this.trials} @change=${this.setTrials.bind(this)} @input=${this.setTrials.bind(this)}>Trials</decidables-slider>` : x$3``}
-        ${this.duration != null ? x$3`<decidables-slider min="10" max="4000" step="10" .value=${this.duration} @change=${this.setDuration.bind(this)} @input=${this.setDuration.bind(this)}>Duration</decidables-slider>` : x$3``}
-        ${this.run || this.pause || this.reset ? x$3`
+        ${this.trials != null ? x$2`<decidables-slider min="1" max="100" step="1" .value=${this.trials} @change=${this.setTrials.bind(this)} @input=${this.setTrials.bind(this)}>Trials</decidables-slider>` : x$2``}
+        ${this.duration != null ? x$2`<decidables-slider min="10" max="4000" step="10" .value=${this.duration} @change=${this.setDuration.bind(this)} @input=${this.setDuration.bind(this)}>Duration</decidables-slider>` : x$2``}
+        ${this.run || this.pause || this.reset ? x$2`
             <div class="buttons">
-              ${this.run ? x$3`<decidables-button name="run" ?disabled=${this.state === 'running' || this.state === 'ended'} @click=${this.doRun.bind(this)}>Run</decidables-button>` : x$3``}
-              ${this.pause ? x$3`<decidables-button name="pause" ?disabled=${this.state !== 'running'} @click=${this.doPause.bind(this)}>Pause</decidables-button>` : x$3``}
-              ${this.reset ? x$3`<decidables-button name="reset" ?disabled=${this.state === 'resetted'} @click=${this.doReset.bind(this)}>Reset</decidables-button>` : x$3``}
+              ${this.run ? x$2`<decidables-button name="run" ?disabled=${this.state === 'running' || this.state === 'ended'} @click=${this.doRun.bind(this)}>Run</decidables-button>` : x$2``}
+              ${this.pause ? x$2`<decidables-button name="pause" ?disabled=${this.state !== 'running'} @click=${this.doPause.bind(this)}>Pause</decidables-button>` : x$2``}
+              ${this.reset ? x$2`<decidables-button name="reset" ?disabled=${this.state === 'resetted'} @click=${this.doReset.bind(this)}>Reset</decidables-button>` : x$2``}
             </div>
-            ` : x$3``}
+            ` : x$2``}
       </div>`;
   }
 }
@@ -28879,6 +28856,7 @@ class ProspectableResponse extends ProspectableElement {
 
           width: 5.25rem;
           height: 3.5rem;
+
           padding: 0.375rem 0.75rem;
           margin: 0.25rem;
 
@@ -28906,6 +28884,7 @@ class ProspectableResponse extends ProspectableElement {
 
         .feedback .outcome {
           font-weight: 600;
+
           line-height: 1.15;
         }
 
@@ -28925,31 +28904,31 @@ class ProspectableResponse extends ProspectableElement {
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <div class="holder">
-        ${this.trial ? x$3`
+        ${this.trial ? x$2`
             <div class="trials">
               <div class="trial">
                 <span class="label">Trial: </span><span class="count">${this.trialCount}</span><span class="of"> of </span><span class="total">${this.trialTotal}</span>
               </div>
-            </div>` : x$3``}
+            </div>` : x$2``}
         <div class="responses">
           <decidables-button name="gamble" class="response ${this.state === 'feedback' && this.response === 'gamble' ? 'selected' : this.state === 'waiting' ? 'waiting' : ''}" ?disabled=${this.state !== 'waiting' || this.interactive !== true} @click=${this.gamble.bind(this)}>Gamble</decidables-button>
           <decidables-button name="sure" class="response ${this.state === 'feedback' && this.response === 'sure' ? 'selected' : this.state === 'waiting' ? 'waiting' : ''}" ?disabled=${this.state !== 'waiting' || this.interactive !== true} @click=${this.sure.bind(this)}>Sure</decidables-button>
         </div>
-        ${this.feedback !== 'none' || this.payoff !== 'none' ? x$3`
+        ${this.feedback !== 'none' || this.payoff !== 'none' ? x$2`
             <div class="feedbacks">
               <div class="feedback gamble
                 ${this.state === 'feedback' && this.feedback === 'outcome' && this.response === 'gamble' ? this.outcome : ''}">
-                ${this.state === 'feedback' && this.feedback === 'outcome' && this.response === 'gamble' ? this.outcome === 'better' ? x$3`<span class="outcome">Better</span>` : this.outcome === 'worse' ? x$3`<span class="outcome">Worse</span>` : this.outcome === 'even' ? x$3`<span class="outcome">Even</span>` : x$3`<span class="outcome">No<br>Response</span>` : ''}
-                ${this.payoff === 'both' || this.payoff === 'selection' && this.response === 'gamble' ? x$3`<span class="payoff">${this.response === 'gamble' ? 'Win:' : 'Miss:'} $${this.gamblePayoff}</span>` : x$3``}
+                ${this.state === 'feedback' && this.feedback === 'outcome' && this.response === 'gamble' ? this.outcome === 'better' ? x$2`<span class="outcome">Better</span>` : this.outcome === 'worse' ? x$2`<span class="outcome">Worse</span>` : this.outcome === 'even' ? x$2`<span class="outcome">Even</span>` : x$2`<span class="outcome">No<br>Response</span>` : ''}
+                ${this.payoff === 'both' || this.payoff === 'selection' && this.response === 'gamble' ? x$2`<span class="payoff">${this.response === 'gamble' ? 'Win:' : 'Miss:'} $${this.gamblePayoff}</span>` : x$2``}
               </div>
               <div class="feedback sure
                 ${this.state === 'feedback' && this.feedback === 'outcome' && this.response === 'sure' ? this.outcome : ''}">
-                ${this.state === 'feedback' && this.feedback === 'outcome' && this.response === 'sure' ? this.outcome === 'better' ? x$3`<span class="outcome">Better</span>` : this.outcome === 'worse' ? x$3`<span class="outcome">Worse</span>` : this.outcome === 'even' ? x$3`<span class="outcome">Even</span>` : x$3`<span class="outcome">No<br>Response</span>` : ''}
-                ${this.payoff === 'both' || this.payoff === 'selection' && this.response === 'sure' ? x$3`<span class="payoff">${this.response === 'sure' ? 'Win:' : 'Miss:'} $${this.surePayoff}</span>` : x$3``}
+                ${this.state === 'feedback' && this.feedback === 'outcome' && this.response === 'sure' ? this.outcome === 'better' ? x$2`<span class="outcome">Better</span>` : this.outcome === 'worse' ? x$2`<span class="outcome">Worse</span>` : this.outcome === 'even' ? x$2`<span class="outcome">Even</span>` : x$2`<span class="outcome">No<br>Response</span>` : ''}
+                ${this.payoff === 'both' || this.payoff === 'selection' && this.response === 'sure' ? x$2`<span class="payoff">${this.response === 'sure' ? 'Win:' : 'Miss:'} $${this.surePayoff}</span>` : x$2``}
               </div>
-            </div>` : x$3``}
+            </div>` : x$2``}
       </div>`;
   }
 }
@@ -28970,6 +28949,8 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
           --decidables-spinner-input-width: 4rem;
           --decidables-spinner-prefix: "$";
 
+          position: relative;
+
           display: inline-block;
 
           width: 10rem;
@@ -28979,6 +28960,7 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
         .main {
           width: 100%;
           height: 100%;
+
           overflow: visible;
         }
 
@@ -28995,9 +28977,9 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
 
         .arc.interactive {
           cursor: ns-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .arc.interactive:hover {
@@ -29008,7 +28990,7 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
           filter: url("#shadow-8");
         }
 
-        :host(.keyboard) .arc.interactive:focus {
+        .arc.interactive:focus-visible {
           filter: url("#shadow-8");
         }
 
@@ -29027,23 +29009,20 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
         .label.static {
           font-size: 1.75rem;
 
+          dominant-baseline: middle;
+
           user-select: none;
 
-          dominant-baseline: middle;
           text-anchor: middle;
         }
 
         .label.interactive {
+          position: absolute;
+
           width: var(--decidables-spinner-input-width);
           height: calc(var(--decidables-spinner-font-size) * 1.5);
-          overflow: visible;
-        }
 
-        /* HACK: Get Safari to work with SVG foreignObject */
-        /* https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari */
-        /* https://bugs.webkit.org/show_bug.cgi?id=23113 */
-        .label.interactive decidables-spinner {
-          position: fixed;
+          overflow: visible;
         }
 
         .label.interactive.win decidables-spinner {
@@ -29061,7 +29040,7 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
   }
   render() {
     /* eslint-disable-line class-methods-use-this */
-    return x$3`
+    return x$2`
       <slot></slot>
     `;
   }
@@ -29242,11 +29221,11 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
     // Labels
     //  DATA-JOIN
     const labelStaticUpdate = pieMerge.selectAll('.label.static').data(arcsStatic);
-    const labelInteractiveUpdate = pieMerge.selectAll('.label.interactive').data(arcsInteractive);
+    const labelInteractiveUpdate = select(this.renderRoot).selectAll('.label.interactive').data(arcsInteractive);
     //  ENTER
     const labelStaticEnter = labelStaticUpdate.enter().append('text');
-    const labelInteractiveEnter = labelInteractiveUpdate.enter().append('foreignObject');
-    labelInteractiveEnter.append('xhtml:decidables-spinner').on('input', (event, datum) => {
+    const labelInteractiveEnter = labelInteractiveUpdate.enter().append('xhtml:div');
+    labelInteractiveEnter.append('decidables-spinner').on('input', (event, datum) => {
       datum.data.x = parseFloat(event.target.value);
       this.dispatchEvent(new CustomEvent('risky-outcome-change', {
         detail: {
@@ -29272,21 +29251,18 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
     });
     const labelInteractiveMerge = labelInteractiveEnter.merge(labelInteractiveUpdate).attr('class', datum => {
       return `label interactive ${datum.data.name}`;
-    }).attr('transform', datum => {
-      // HACK: Center spinner here instead of CSS for Safari SVG foreignObject
-      // x: calc(var(--decidables-spinner-input-width) / -2);
-      // y: calc(var(--decidables-spinner-font-size) * 1.5 / -2);
+    }).attr('style', datum => {
       const inputWidth = parseFloat(this.getComputedStyleValue('--decidables-spinner-input-width'));
       const fontSize = parseFloat(this.getComputedStyleValue('--decidables-spinner-font-size'));
       const rem = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10);
-      const x = inputWidth * rem / -2;
-      const y = fontSize * rem * 1.5 / -2;
+      const x = width / 2 + inputWidth * rem / -2;
+      const y = height / 2 + fontSize * rem * 1.5 / -2;
       if (arcs.length === 1) {
-        return `translate(${x}, ${y})`;
+        return `left: ${x}px; top: ${y}px;`;
       }
       const radius = Math.min(width, height) / 2 * 0.6;
       const arcLabel = arc().innerRadius(radius).outerRadius(radius);
-      return `translate(${arcLabel.centroid(datum)[0] + x}, ${arcLabel.centroid(datum)[1] + y})`;
+      return `left: ${arcLabel.centroid(datum)[0] + x}px; top: ${arcLabel.centroid(datum)[1] + y}px;`;
     });
     labelInteractiveMerge.select('decidables-spinner').attr('value', datum => {
       return `${datum.data.x.toFixed(0)}`;
@@ -29342,7 +29318,7 @@ class RiskyOutcome extends ProspectableElement {
   }
   render() {
     /* eslint-disable-line class-methods-use-this */
-    return x$3``;
+    return x$2``;
   }
 }
 customElements.define('risky-outcome', RiskyOutcome);
@@ -29441,16 +29417,16 @@ class RiskyChoice extends ProspectableElement {
     this.sendEvent();
   }
   render() {
-    return x$3`
+    return x$2`
       <div class="holder">
         <risky-option class="gamble" ?interactive=${this.interactive} @risky-outcome-change=${this.winChange.bind(this)}>
-          ${this.state === 'choice' ? x$3`
+          ${this.state === 'choice' ? x$2`
               <risky-outcome probability="${1 - this.pw}" value="${this.xl}" name="loss"></risky-outcome>
               <risky-outcome ?interactive=${this.interactive} probability="${this.pw}" value="${this.xw}" name="win"></risky-outcome>` : ''}
         </risky-option><span class="query"
-         >${this.state === 'choice' ? '?' : this.state === 'fixation' ? '+' : x$3`∙`}</span
+         >${this.state === 'choice' ? '?' : this.state === 'fixation' ? '+' : x$2`∙`}</span
         ><risky-option class="sure" ?interactive=${this.interactive} @risky-outcome-change=${this.sureChange.bind(this)}>
-          ${this.state === 'choice' ? x$3`
+          ${this.state === 'choice' ? x$2`
               <risky-outcome ?interactive=${this.interactive} probability="1" value="${this.xs}" name="sure"></risky-outcome>` : ''}
         </risky-option>
       </div>`;
@@ -29560,7 +29536,7 @@ class RiskyTask extends ProspectableElement {
       `];
   }
   render() {
-    return x$3`
+    return x$2`
       <div class="holder">
         <risky-choice state="${this.state === 'stimulus' ? 'choice' : this.state === 'iti' ? 'fixation' : 'blank'}" probability="${this.pw}" win="${this.xw}" loss="${this.xl}" sure="${this.xs}"></risky-choice>
       </div>`;
@@ -29754,7 +29730,7 @@ class CPTEquationPG2W extends CPTEquation {
     let g;
     let w;
     if (this.numeric) {
-      p = x$3`<decidables-spinner class="p bottom"
+      p = x$2`<decidables-spinner class="p bottom"
           ?disabled=${!this.interactive}
           min="0"
           max="1"
@@ -29764,7 +29740,7 @@ class CPTEquationPG2W extends CPTEquation {
         >
           <var class="math-var">p</var>
         </decidables-spinner>`;
-      g = x$3`<decidables-spinner class="g bottom"
+      g = x$2`<decidables-spinner class="g bottom"
           ?disabled=${!this.interactive}
           min=${CPTMath.g.MIN}
           max=${CPTMath.g.MAX}
@@ -29774,7 +29750,7 @@ class CPTEquationPG2W extends CPTEquation {
         >
           <var class="math-var">γ</var>
         </decidables-spinner>`;
-      w = x$3`<decidables-spinner class="w bottom"
+      w = x$2`<decidables-spinner class="w bottom"
           disabled
           min="0"
           max="1"
@@ -29784,11 +29760,11 @@ class CPTEquationPG2W extends CPTEquation {
           <var class="math-var">w</var>
         </decidables-spinner>`;
     } else {
-      p = x$3`<var class="math-var p">p</var>`;
-      g = x$3`<var class="math-var g">γ</var>`;
-      w = x$3`<var class="math-var w">w</var>`;
+      p = x$2`<var class="math-var p">p</var>`;
+      g = x$2`<var class="math-var g">γ</var>`;
+      w = x$2`<var class="math-var w">w</var>`;
     }
-    const equation = x$3`
+    const equation = x$2`
       <tr>
         <td rowspan="2">
           ${w}<span class="equals">=</span>
@@ -29802,7 +29778,7 @@ class CPTEquationPG2W extends CPTEquation {
           <span class="bracket tight">[</span>${p}<sup class="exp">${g}</sup><span class="plus">+</span><span class="paren tight">(</span>1<span class="minus">−</span>${p}<span class="paren tight">)</span><sup class="exp">${g}</sup><span class="bracket tight">]</span><sup class="exp">1/${g}</sup>
         </td>
       </tr>`;
-    return x$3`
+    return x$2`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -29902,7 +29878,7 @@ class CPTEquationVW2U extends CPTEquation {
     let v;
     if (numeric) {
       const index = Number.parseInt(subscript, 10) - 1;
-      v = x$3`<decidables-spinner class="v"
+      v = x$2`<decidables-spinner class="v"
           ?disabled=${!this.interactive}
           .value=${this.v[index]}
           @input=${this.vInput.bind(this, index)}
@@ -29910,7 +29886,7 @@ class CPTEquationVW2U extends CPTEquation {
           <var class="math-var">v<sub class="subscript ${className}">${subscript}</sub></var>
         </decidables-spinner>`;
     } else {
-      v = x$3`<var class="math-var v">v<sub class="subscript ${className}">${subscript}</sub></var>`;
+      v = x$2`<var class="math-var v">v<sub class="subscript ${className}">${subscript}</sub></var>`;
     }
     return v;
   }
@@ -29918,7 +29894,7 @@ class CPTEquationVW2U extends CPTEquation {
     let w;
     if (numeric) {
       const index = Number.parseInt(subscript, 10) - 1;
-      w = x$3`<decidables-spinner class="w"
+      w = x$2`<decidables-spinner class="w"
           ?disabled=${!this.interactive}
           min="0"
           max="1"
@@ -29929,7 +29905,7 @@ class CPTEquationVW2U extends CPTEquation {
           <var class="math-var">w<sub class="subscript ${className}">${subscript}</sub></var>
         </decidables-spinner>`;
     } else {
-      w = x$3`<var class="math-var w">w<sub class="subscript ${className}">${subscript}</sub></var>`;
+      w = x$2`<var class="math-var w">w<sub class="subscript ${className}">${subscript}</sub></var>`;
     }
     return w;
   }
@@ -29940,13 +29916,13 @@ class CPTEquationVW2U extends CPTEquation {
     let u;
     let n;
     if (this.numeric) {
-      u = x$3`<decidables-spinner class="u"
+      u = x$2`<decidables-spinner class="u"
           disabled
           .value=${+this.u.toFixed(3)}
         >
           <var class="math-var">U</var>
         </decidables-spinner>`;
-      n = x$3`<decidables-spinner class="n"
+      n = x$2`<decidables-spinner class="n"
           ?disabled=${!this.interactive}
           min="1"
           max="4"
@@ -29957,10 +29933,10 @@ class CPTEquationVW2U extends CPTEquation {
           <var class="math-var">n</var>
         </decidables-spinner>`;
     } else {
-      u = x$3`<var class="math-var u">U</var>`;
-      n = x$3`<var class="math-var subscript">n</var>`;
+      u = x$2`<var class="math-var u">U</var>`;
+      n = x$2`<var class="math-var subscript">n</var>`;
     }
-    const equation = x$3`
+    const equation = x$2`
       <tr>
         <td>
           ${u}<span class="equals">=</span>
@@ -29977,14 +29953,14 @@ class CPTEquationVW2U extends CPTEquation {
         </td>
         <td>
           ${this.numeric ? Array(this.nMax).fill().map((_, index) => {
-      return index < this.n ? x$3`<span class="addend tight" ${F({
+      return index < this.n ? x$2`<span class="addend tight" ${F({
         in: d,
         out: d
-      })}>${index !== 0 ? x$3`<span class="plus">+</span>` : x$3``}${this.vTemplate(index + 1, 'math-num', true)}&nbsp;${this.wTemplate(index + 1, 'math-num', true)}</span>` : null;
-    }) : x$3`${this.vTemplate('1', 'math-num', false)}&nbsp;${this.wTemplate('1', 'math-num', false)}<span class="plus">+</span><span class="ellipsis">…</span><span class="plus">+</span>${this.vTemplate('n', 'math-var', false)}&nbsp;${this.wTemplate('n', 'math-var', false)}`}
+      })}>${index !== 0 ? x$2`<span class="plus">+</span>` : x$2``}${this.vTemplate(index + 1, 'math-num', true)}&nbsp;${this.wTemplate(index + 1, 'math-num', true)}</span>` : null;
+    }) : x$2`${this.vTemplate('1', 'math-num', false)}&nbsp;${this.wTemplate('1', 'math-num', false)}<span class="plus">+</span><span class="ellipsis">…</span><span class="plus">+</span>${this.vTemplate('n', 'math-var', false)}&nbsp;${this.wTemplate('n', 'math-var', false)}`}
         </td>
       </tr>`;
-    return x$3`
+    return x$2`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -30073,7 +30049,7 @@ class CPTEquationXAL2V extends CPTEquation {
     let l;
     let v;
     if (this.numeric) {
-      x = x$3`<decidables-spinner class="x bottom"
+      x = x$2`<decidables-spinner class="x bottom"
           ?disabled=${!this.interactive}
           step="1"
           .value=${this.x}
@@ -30081,7 +30057,7 @@ class CPTEquationXAL2V extends CPTEquation {
         >
           <var class="math-var">x</var>
         </decidables-spinner>`;
-      a = x$3`<decidables-spinner class="a bottom"
+      a = x$2`<decidables-spinner class="a bottom"
           ?disabled=${!this.interactive}
           min=${CPTMath.a.MIN}
           max=${CPTMath.a.MAX}
@@ -30091,7 +30067,7 @@ class CPTEquationXAL2V extends CPTEquation {
         >
           <var class="math-var">α</var>
         </decidables-spinner>`;
-      l = x$3`<decidables-spinner class="l bottom"
+      l = x$2`<decidables-spinner class="l bottom"
           ?disabled=${!this.interactive}
           min=${CPTMath.l.MIN}
           step=${CPTMath.l.STEP}
@@ -30100,16 +30076,16 @@ class CPTEquationXAL2V extends CPTEquation {
         >
           <var class="math-var">λ</var>
         </decidables-spinner>`;
-      v = x$3`<decidables-spinner class="v bottom" disabled step=".001" .value="${+this.v.toFixed(3)}">
+      v = x$2`<decidables-spinner class="v bottom" disabled step=".001" .value="${+this.v.toFixed(3)}">
           <var class="math-var">v</var>
         </decidables-spinner>`;
     } else {
-      x = x$3`<var class="math-var x">x</var>`;
-      a = x$3`<var class="math-var a">α</var>`;
-      l = x$3`<var class="math-var l">λ</var>`;
-      v = x$3`<var class="math-var v">v</var>`;
+      x = x$2`<var class="math-var x">x</var>`;
+      a = x$2`<var class="math-var a">α</var>`;
+      l = x$2`<var class="math-var l">λ</var>`;
+      v = x$2`<var class="math-var v">v</var>`;
     }
-    const equation = x$3`
+    const equation = x$2`
       <tr>
         <td rowspan="2">
           ${v}<span class="equals">=</span><span class="brace tight">{</span>
@@ -30123,7 +30099,7 @@ class CPTEquationXAL2V extends CPTEquation {
           <span class="minus tight">−</span>${l}<span class="paren tight">(</span><span class="minus tight">−</span>${x}<span class="paren tight">)</span><sup class="exp">${a}</sup>,&emsp;if ${x}<span class="equals">&lt;</span>0
         </td>
       </tr>`;
-    return x$3`
+    return x$2`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -30190,7 +30166,7 @@ class CPTExample extends ProspectableElement {
   }
   render() {
     /* eslint-disable-line class-methods-use-this */
-    return x$3`
+    return x$2`
       <div class="holder">
         <div class="body">
           <slot>Empty!</slot>