@decidables/prospectable-elements 0.5.1 → 0.6.0

package/lib/prospectableElements.umd.js

@@ -113,7 +113,7 @@
       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);
     }
@@ -317,10 +317,10 @@
     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");
 
   /**
@@ -350,13 +350,13 @@
     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(),
@@ -478,7 +478,7 @@
       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++);
       }
@@ -608,7 +608,7 @@
       "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;
     }
@@ -618,7 +618,7 @@
     _$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) => {
@@ -637,7 +637,7 @@
    * 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
@@ -1022,7 +1022,7 @@
     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;
@@ -1058,7 +1058,7 @@
   }
 
   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),
@@ -7246,7 +7246,7 @@
     };
     return scale;
   }
-  function point$5() {
+  function point$4() {
     return pointish(band.apply(null, arguments).paddingInner(1));
   }
 
@@ -9252,21 +9252,21 @@
     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,
@@ -9278,7 +9278,7 @@
         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;
     }
@@ -9286,7 +9286,7 @@
       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;
@@ -9608,7 +9608,7 @@
 
   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) {
@@ -9628,7 +9628,7 @@
     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);
@@ -9652,7 +9652,7 @@
           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;
@@ -9714,7 +9714,7 @@
           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;
@@ -9762,7 +9762,7 @@
           this._point = 4;
         // falls through
         default:
-          point$4(this, x, y);
+          point$3(this, x, y);
           break;
       }
       this._x0 = this._x1, this._x1 = x;
@@ -9817,7 +9817,7 @@
     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) {
@@ -9841,7 +9841,7 @@
           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();
@@ -9862,7 +9862,7 @@
           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;
@@ -9929,7 +9929,7 @@
           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;
@@ -9982,7 +9982,7 @@
           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;
@@ -9999,7 +9999,7 @@
     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,
@@ -10064,7 +10064,7 @@
           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;
@@ -10138,7 +10138,7 @@
           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;
@@ -10198,7 +10198,7 @@
           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;
@@ -10264,7 +10264,7 @@
   // 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,
@@ -10292,7 +10292,7 @@
           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();
@@ -10312,10 +10312,10 @@
           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;
@@ -10522,18 +10522,6 @@
     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 = {};
@@ -10669,7 +10657,7 @@
       };
       /* 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;
@@ -10679,9 +10667,9 @@
       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() {
@@ -10817,55 +10805,64 @@
         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>
@@ -10976,10 +10973,6 @@
           ---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;
@@ -10994,12 +10987,14 @@
 
         .range {
           position: relative;
+
           display: flex;
 
           flex-direction: row;
 
           width: 3.5rem;
           height: 4.75rem;
+
           margin: 0 0.25rem 0.25rem;
         }
 
@@ -11011,21 +11006,20 @@
           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 {
@@ -11036,16 +11030,10 @@
           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;
@@ -11057,10 +11045,9 @@
           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;
@@ -11068,57 +11055,17 @@
           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 {
@@ -11128,112 +11075,65 @@
 
         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;
@@ -11246,31 +11146,30 @@
           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>
     `;
@@ -11329,13 +11228,14 @@
           ---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;
@@ -11353,6 +11253,7 @@
           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);
@@ -11364,6 +11265,7 @@
           bottom: 1px;
 
           font-size: var(---decidables-spinner-font-size);
+
           line-height: normal;
 
           content: var(---decidables-spinner-postfix);
@@ -11371,20 +11273,24 @@
 
         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 {
@@ -11401,25 +11307,59 @@
 
           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;
+          }
 
-          /* 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,
+          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;
+        }
+
+        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)}>
@@ -11478,13 +11418,16 @@
 
           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 */
         }
 
@@ -11500,6 +11443,7 @@
           position: relative;
 
           min-width: 24px;
+
           padding: 0 0 36px;
           margin: 0.25rem 0.25rem 0;
 
@@ -11511,17 +11455,17 @@
         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 {
@@ -11569,21 +11513,18 @@
           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>
@@ -11633,7 +11574,7 @@
       `];
     }
     render() {
-      return x$3`
+      return x$2`
       <fieldset ?disabled=${this.disabled}>
         <legend><slot name="label"></slot></legend>
         <slot></slot>
@@ -11699,39 +11640,46 @@
 
           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);
         }
 
@@ -11739,6 +11687,7 @@
           z-index: 1;
 
           outline: none;
+
           box-shadow: var(---shadow-4);
         }
 
@@ -11746,6 +11695,7 @@
           z-index: 2;
 
           outline: none;
+
           box-shadow: var(---shadow-8);
         }
 
@@ -11759,31 +11709,34 @@
           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>
@@ -12120,7 +12073,7 @@
     },
     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();
@@ -12144,9 +12097,9 @@
     }
     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 = {
@@ -12157,7 +12110,7 @@
         ...t.keyframeOptions
       }), t.properties ??= b, this.options = t;
     }
-    m() {
+    p() {
       const t = {},
         i = this.element.getBoundingClientRect(),
         s = getComputedStyle(this.element);
@@ -12178,20 +12131,20 @@
       })(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);
@@ -12200,7 +12153,7 @@
           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]
@@ -12210,10 +12163,10 @@
       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() {
@@ -12222,14 +12175,14 @@
       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() {
@@ -12241,7 +12194,7 @@
     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);
@@ -12255,13 +12208,13 @@
         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 = {
@@ -12314,8 +12267,8 @@
     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!
@@ -12485,11 +12438,13 @@
 
         .addend {
           position: relative;
+
           display: inline-block;
         }
 
         .comparison {
           position: relative;
+
           display: inline-block;
 
           font-size: 125%;
@@ -12771,20 +12726,20 @@
       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"
@@ -12794,7 +12749,7 @@
         >
           <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)}
@@ -12831,73 +12786,73 @@
         //   >
         //     <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>
@@ -12931,7 +12886,7 @@
           ${us}
         </td>
       </tr>`;
-      return x$3`
+      return x$2`
       <div class="holder">
         <table class="equation">
           <tbody>
@@ -13912,7 +13867,7 @@
       facets: facets.map(I => I.slice().reverse())
     };
   }
-  function sort$1(order, {
+  function sort(order, {
     sort,
     ...options
   } = {}) {
@@ -14156,7 +14111,7 @@
   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);
@@ -15020,7 +14975,7 @@
     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,
@@ -15057,7 +15012,7 @@
     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.
@@ -21780,7 +21735,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
     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;
   }
@@ -22144,7 +22099,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       `];
     }
     render() {
-      return x$3`
+      return x$2`
       <div>
         <div>After ${this.choices.length} trials:</div>
         <div>Current:
@@ -22305,6 +22260,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         decidables-slider {
           line-height: 1;
+
           text-align: center;
         }
 
@@ -22329,9 +22285,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       `];
     }
     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}
@@ -22340,8 +22296,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
             .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}
@@ -22350,8 +22306,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
             .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}
@@ -22360,7 +22316,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
             .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>`;
     }
   }
@@ -22598,9 +22554,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         .curve.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve.interactive:hover {
@@ -22618,7 +22574,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           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! */
@@ -22627,9 +22583,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -22651,7 +22607,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -22685,8 +22641,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve {
@@ -22719,8 +22675,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -22732,15 +22688,15 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         @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();
@@ -23258,476 +23214,417 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
   }
   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;
-  }
+  var d33d$1 = {exports: {}};
 
-  /**
-   * 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;
-  }
+  var d33d = d33d$1.exports;
+  (function (module, exports$1) {
+    (function (i, h) {
+      h(exports$1) ;
+    })(d33d, function (i) {
 
-  /**
-   * 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;
-
-    // Compare z-values for sorting
-    return pa < pb ? -1 : pa > pb ? 1 : pa >= pb ? 0 : NaN;
-  }
-
-  /**
-   * 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],
@@ -25800,6 +25697,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -25823,6 +25721,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -25863,6 +25762,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -25876,7 +25776,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
     }
     render() {
       /* eslint-disable-line class-methods-use-this */
-      return x$3`
+      return x$2`
     `;
     }
     willUpdate() {
@@ -25932,10 +25832,11 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       };
       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 => {
@@ -26000,35 +25901,35 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
       // 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();
@@ -26036,34 +25937,52 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
       // 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
@@ -26077,9 +25996,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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;
       });
@@ -26132,35 +26051,35 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
       // 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();
@@ -26168,40 +26087,58 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
       // 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
@@ -26227,9 +26164,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         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;
       });
@@ -26255,7 +26192,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         return yScale(datum.g);
       }).z(datum => {
         return zScale(datum.l);
-      })(this.point ? [{
+      }).data(this.point ? [{
         a: this.a,
         g: this.g,
         l: this.l,
@@ -26333,7 +26270,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         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
@@ -26359,21 +26296,21 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         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');
@@ -26412,7 +26349,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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
@@ -26699,9 +26636,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         .curve-p.interactive,
         .curve-n.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve-p.interactive:hover,
@@ -26721,8 +26658,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           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! */
@@ -26731,9 +26668,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -26755,7 +26692,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -26795,8 +26732,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve-p,
@@ -26830,8 +26767,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -26843,15 +26780,15 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         @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();
@@ -27860,6 +27797,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -27883,6 +27821,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -27923,6 +27862,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -27936,7 +27876,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
     }
     render() {
       /* eslint-disable-line class-methods-use-this */
-      return x$3`
+      return x$2`
     `;
     }
     willUpdate() {
@@ -27992,10 +27932,11 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       };
       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 => {
@@ -28060,35 +28001,35 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
       // 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();
@@ -28096,34 +28037,52 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
       // 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
@@ -28137,9 +28096,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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;
       });
@@ -28192,35 +28151,35 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
       // 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();
@@ -28228,40 +28187,58 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
       // 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
@@ -28287,9 +28264,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         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;
       });
@@ -28315,7 +28292,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         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
@@ -28390,7 +28367,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         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
@@ -28416,21 +28393,21 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         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');
@@ -28469,7 +28446,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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
@@ -28633,17 +28610,17 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       `];
     }
     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>`;
     }
   }
@@ -28885,6 +28862,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
           width: 5.25rem;
           height: 3.5rem;
+
           padding: 0.375rem 0.75rem;
           margin: 0.25rem;
 
@@ -28912,6 +28890,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         .feedback .outcome {
           font-weight: 600;
+
           line-height: 1.15;
         }
 
@@ -28931,31 +28910,31 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       `];
     }
     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>`;
     }
   }
@@ -28976,6 +28955,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           --decidables-spinner-input-width: 4rem;
           --decidables-spinner-prefix: "$";
 
+          position: relative;
+
           display: inline-block;
 
           width: 10rem;
@@ -28985,6 +28966,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         .main {
           width: 100%;
           height: 100%;
+
           overflow: visible;
         }
 
@@ -29001,9 +28983,9 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         .arc.interactive {
           cursor: ns-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .arc.interactive:hover {
@@ -29014,7 +28996,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           filter: url("#shadow-8");
         }
 
-        :host(.keyboard) .arc.interactive:focus {
+        .arc.interactive:focus-visible {
           filter: url("#shadow-8");
         }
 
@@ -29033,23 +29015,20 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         .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 {
@@ -29067,7 +29046,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
     }
     render() {
       /* eslint-disable-line class-methods-use-this */
-      return x$3`
+      return x$2`
       <slot></slot>
     `;
     }
@@ -29248,11 +29227,11 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       // 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: {
@@ -29278,21 +29257,18 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       });
       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)}`;
@@ -29348,7 +29324,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
     }
     render() {
       /* eslint-disable-line class-methods-use-this */
-      return x$3``;
+      return x$2``;
     }
   }
   customElements.define('risky-outcome', RiskyOutcome);
@@ -29447,16 +29423,16 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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>`;
@@ -29566,7 +29542,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       `];
     }
     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>`;
@@ -29760,7 +29736,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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"
@@ -29770,7 +29746,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         >
           <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}
@@ -29780,7 +29756,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         >
           <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"
@@ -29790,11 +29766,11 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           <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>
@@ -29808,7 +29784,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           <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>
@@ -29908,7 +29884,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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)}
@@ -29916,7 +29892,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           <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;
     }
@@ -29924,7 +29900,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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"
@@ -29935,7 +29911,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           <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;
     }
@@ -29946,13 +29922,13 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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"
@@ -29963,10 +29939,10 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           <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>
@@ -29983,14 +29959,14 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         </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>
@@ -30079,7 +30055,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
       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}
@@ -30087,7 +30063,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         >
           <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}
@@ -30097,7 +30073,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         >
           <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}
@@ -30106,16 +30082,16 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         >
           <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>
@@ -30129,7 +30105,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           <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>
@@ -30196,7 +30172,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
     }
     render() {
       /* eslint-disable-line class-methods-use-this */
-      return x$3`
+      return x$2`
       <div class="holder">
         <div class="body">
           <slot>Empty!</slot>